SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how does one do this???

    hi,,
    can anyone have a look at www.istockphoto.com and tell me how they create those lines that look like they have been dug into the webpage,,,like a stamp almost in the page??
    any advice would be great!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    the top two boxes....

    If you are refering to the top two nav boxes, they used a graphic (.gif actually) to produce the desired effect.

    It looks to me as if they set the border color to white and used the same fill color. Nice subtle effect IMO.

  3. #3
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The vertical lines are simply 2 vertical lines, each 1 pixel wide. To achieve the 3D/dug in effect, use one black line and one white line, then lower the opacity or transparency of each of them over the background. This creates a dull white and a dull black effect producing that stamped effect.

    This same effect can be used with horizintal lines, and button borders.


  4. #4
    SitePoint Enthusiast xteriormotive's Avatar
    Join Date
    Jul 2002
    Location
    Pasadena, CA
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by glenplake
    The vertical lines are simply 2 vertical lines, each 1 pixel wide. To achieve the 3D/dug in effect, use one black line and one white line, then lower the opacity or transparency of each of them over the background. This creates a dull white and a dull black effect producing that stamped effect.

    This same effect can be used with horizintal lines, and button borders.

    Indeed...It's more a visual play on the eye than anything special in the way of design, but in any regard it's a nice touch to that specific design.




    -------------
    S.Conrad
    Project Lead
    www.placidminds.com

  5. #5
    Fully Qualified Fool :) luke-innovative's Avatar
    Join Date
    Jun 2002
    Location
    Kent, UK
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hi

    escapedf I think that these tutorials in photoshop may help ya, they're not exactly the same as IStockPhoto but theyre pretty much it.

    1) Tutorial 1
    2) Tutorial 2

    Sorry if they're not exactly what ya want, but reading your post reminded me of them


    Hope they help
    Luke
    Luke-Martin.com (work in progress) :: Independent Web Designer's Portal
    Freelance Forums :: Sign Up Here
    "What happens if you get scared half to death twice?"

  6. #6
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could also try the emboss filter in Photoshop. That would also give you the effect you're looking for.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  7. #7
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can accomplish that with HTML as well, by using the bordercolordark and bordercolorlight in the table tag.

    For example:
    <table border="1" cellpadding="1" cellspacing="0" width="100%" bordercolordark="#214963" bordercolorlight="black">

    Just play around with the colors to get the look you want.

    Check out the source code on how I did my grandson's page at
    www.RobertAnthonyCamisa.com

  8. #8
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Barbara, unfortunately bordercolordark and bordercolorlight are not part of the valid html spec, they are proprietary IE code added by MS, but not supported by oter browsers...

    Your best bet would be to use an image (gif) or get two horizontal rules and make them line up extremely close to each other...

  9. #9
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Wizard. I should have added that. I've been noticing so many these days designing and coding solely for IE, that I didn't bother to think about that when posting.

  10. #10
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but border-left, border-right, border-top and border-bottom can do the same thing and are valid http://www.w3c.org/TR/REC-CSS1#border-top
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •