WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] CSS dented lines help!

Reply
  Thread Tools Display Modes
Old 17th October 10, 08:44 PM   #1
ilikelemming
WLC Member
 
Join Date: Oct 2010
Posts: 5
Default CSS dented lines help!

Hi,

In a bunch of websites I've been seeing these dented horizontal and vertical lines (of different lengths) being used to separate sections of the site. Do any of you know a tutorial on them or how to do them? Also, if its elsewhere in the forum could you send me the linke? I tried searching but found nothing. I tried using a border with grooves but that didn't create the look I was going for. FOr a picture, here is what they look like: http://www.alistapart.com/d/responsi...-flexible.html
they are the dents on either side of 'victors & villains' as well as above and below the links on the left side. I'm trying to learn how to make vertical as well as horizontal ones. Any help would be greatly appreciated!
ilikelemming is offline   Reply With Quote
Old 17th October 10, 11:49 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: CSS dented lines help!

dents?

Do you mean how do they get the look of the text and image overlaying the border?
chrishirst is offline   Reply With Quote
Old 18th October 10, 02:07 AM   #3
ilikelemming
WLC Member
 
Join Date: Oct 2010
Posts: 5
Default Re: CSS dented lines help!

No I mean the lines that separate the different sections of text. But instead of being like normal straight lines they look like they are carved, or dented into the page. They have some above and below the links on the side to separate them and they are like dented lines.
ilikelemming is offline   Reply With Quote
Old 18th October 10, 01:03 PM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: CSS dented lines help!

Ok, "embossed" or "bas-relief" may be the term you are looking for.


What browser do you see this effect in and what screen resolution?

or are you referring to this image?

chrishirst is offline   Reply With Quote
Old 18th October 10, 06:07 PM   #5
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: CSS dented lines help!

The "dent" you refer to is a simple effect caused by making an element with and top and bottom border. Make the top side of it darker then the background, and the bottom of it ligher then the background. If you wish for it to protrude, then put the light on the top, and the dark on the bottom.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 19th October 10, 01:01 AM   #6
ilikelemming
WLC Member
 
Join Date: Oct 2010
Posts: 5
Default Re: CSS dented lines help!

Yes! Those are exactly the lines I was talking about. Thanks so much!
ilikelemming is offline   Reply With Quote
Old 19th October 10, 05:20 AM   #7
ilikelemming
WLC Member
 
Join Date: Oct 2010
Posts: 5
Default Re: CSS dented lines help!

[QUOTE=chrishirst;24380]Ok, "embossed" or "bas-relief" may be the term you are looking for.

What browser do you see this effect in and what screen resolution?

or are you referring to this image?

removed see post above

I know I had marked this as solved but when I tried the technique the other commenter mentioned it didn't get the effect I was looking for. As for the browser, I've tried it in both firefox and google chrome its shown up and my screen resolution is 1440 x 900. The image you showed there is what I'm referring to, except without the little decoration in between the two lines. I've seen similar lines (both horizontal and vertical) on a lot of other websites as well. This website has them above and below the links at the top of her page: http://www.garancedore.fr/ . When I try making a border it either makes the effect but the line is too thick and then when I try to thin it out it just turns into a regular line like this ________ . Is there any way to get the effect I'm talking about with css or something? Thanks in advance.

Last edited by chrishirst; 19th October 10 at 10:48 AM.
ilikelemming is offline   Reply With Quote
Old 19th October 10, 05:29 AM   #8
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: CSS dented lines help!

Create a DIV, set it's height to 0, set it's top and bottom border to 1px, and it's left and right to 0px. Set the color values of top and bottom as stated above.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 20th October 10, 10:16 AM   #9
ilikelemming
WLC Member
 
Join Date: Oct 2010
Posts: 5
Default Re: CSS dented lines help!

Oh ok, I think I've got it now. I think I was making the div improperly which is why it wasn't working. Thanks so much
ilikelemming is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:56 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.