CSS tip of the day. - GoFuckYourself.com

03-17-2009, 02:32 PM

I noticed in a few designs, making elements have rounded corners on say an h1 tag instead of square corners like adding borders do. They style the h1 tag to have a rounded corner image infront of the content, and then style a span tag to have a rounded corner image behind the content and then just do <h1><span>something</span></h1>.

Tip:
Use the :before and :after pseudo-elements on the h1 tag with the content attribute to do it all in 1 tag.

http://www.quirksmode.org/css/content.html

Read that page, and figure it out, will make much cleaner code and less markup in the long run.

Deej · 03-17-2009, 02:35 PM

damn them round corners

TheSenator · 03-17-2009, 02:37 PM

thanks...cleaning up some code now...

03-17-2009, 02:59 PM

Quote:

Originally Posted by Deej

damn them round corners

I know right, seriously, this tip is golden for those who don't know A LOT about CSS but do their own shit.

I have been doing my own CSS designs for a while and I use the :after and content: in my clearfix class but never really know what they did because I got it from free design.

Angry Jew Cat - Banned for Life · 03-17-2009, 03:17 PM

why not just do your rounded corners with border-radius?

Janak · 03-17-2009, 03:20 PM

I hate CSS so much. It's a necessary evil, but I've been too lazy to sit down and learn it properly, so I end up just hacking shit up and taking forever to get stuff done.

One day.

03-17-2009, 03:20 PM

Quote:

Originally Posted by Angry Jew Cat

why not just do your rounded corners with border-radius?

Isn't that just a mozilla thing or has internet explorer finally started supporting it?

fris · 03-17-2009, 05:21 PM

doesnt work on IE tho

Angry Jew Cat - Banned for Life · 03-17-2009, 05:29 PM

Quote:

Originally Posted by Killswitch

Isn't that just a mozilla thing or has internet explorer finally started supporting it?

it's probably only a matter of time. i thought i read not long that webkit was being pushed for acceptance as a standard for css. i don't see why they wouldn't accept it as standard code and get all browsers on board with it. provides so many easy options for design.

Ozarkz · 03-17-2009, 06:07 PM

Quote:

Originally Posted by Killswitch

I noticed in a few designs, making elements have rounded corners on say an h1 tag instead of square corners like adding borders do. They style the h1 tag to have a rounded corner image infront of the content, and then style a span tag to have a rounded corner image behind the content and then just do <h1><span>something</span></h1>.

Tip:
Use the :before and :after pseudo-elements on the h1 tag with the content attribute to do it all in 1 tag.

http://www.quirksmode.org/css/content.html

Read that page, and figure it out, will make much cleaner code and less markup in the long run.

I dont get it can you elaborate a bit more? Got an example other than that link?

calmlikeabomb · 03-17-2009, 06:44 PM

I guess you missed this part of the article...

Quote:

Originally Posted by quirksmode.org

Don't use
I feel that we shouldn't use the content declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.

Learn jQuery.

03-17-2009, 06:53 PM

Quote:

Originally Posted by Ozarkz

I dont get it can you elaborate a bit more? Got an example other than that link?

using :before and :after to put say a left image before the stuff between the tag, and an image after the stuff between the tag, instead of a tag inside of a tag to do the same thing.

Quote:

Originally Posted by calmlikeabomb

I guess you missed this part of the article...

Learn jQuery.

That's to put actual content, not like using the url() attribute, they even use it in the EXAMPLE of using it.

Mutt · 03-17-2009, 06:54 PM

Quote:

Originally Posted by Angry Jew Cat

why not just do your rounded corners with border-radius?

because more than half the surfers out there are't using browsers that recognize border-radius

CSS hacks like the one the thread starter are why I laugh at the CSS vs Table debate

03-17-2009, 02:32 PM	#1
Killswitch - BANNED FOR LIFE Guest Posts: n/a	CSS tip of the day. I noticed in a few designs, making elements have rounded corners on say an h1 tag instead of square corners like adding borders do. They style the h1 tag to have a rounded corner image infront of the content, and then style a span tag to have a rounded corner image behind the content and then just do <h1><span>something</span></h1>. Tip: Use the :before and :after pseudo-elements on the h1 tag with the content attribute to do it all in 1 tag. http://www.quirksmode.org/css/content.html Read that page, and figure it out, will make much cleaner code and less markup in the long run.

03-17-2009, 02:35 PM	#2
Deej I make pixels work Industry Role: Join Date: Jun 2005 Location: I live here... Posts: 24,386	damn them round corners __________________ Deej's Designs n' What Not Hit me up for Design, CSS & Photo Retouching Icq#30096880

03-17-2009, 02:37 PM	#3
TheSenator Too lazy to set a custom title Industry Role: Join Date: Feb 2003 Location: NJ Posts: 13,331	thanks...cleaning up some code now... __________________ ISeekGirls.com since 2005

03-17-2009, 03:20 PM	#6
Janak Confirmed User Join Date: Jan 2009 Posts: 483	I hate CSS so much. It's a necessary evil, but I've been too lazy to sit down and learn it properly, so I end up just hacking shit up and taking forever to get stuff done. One day. __________________ My stats here.

03-17-2009, 05:21 PM	#8
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,270	doesnt work on IE tho __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

03-17-2009, 03:17 PM	#5
Angry Jew Cat - Banned for Life (felis madjewicus) Industry Role: Join Date: Jul 2006 Location: In Mom & Dad's Basement Posts: 20,368	why not just do your rounded corners with border-radius?