- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello all!
I am interested in creating similar h2 tags to the ones in this website:
view-source:http://www.jackcolton.com/guides/what-are-las-vegas-dress-codes/
I like the trapezoidal shape of the background highlighting and also how two colors are used.
Can anyone point me toward a tutorial that explains how to do this?
Thanks,
Peter
It’s very simple. You can check code through firebug OR inspect element.
Here is sample class which used in given link:
.yourclass h2 {
font-size: 50px;
color: white;
padding: 10px;
background: url(http://www.jackcolton.com/wp-content/themes/jack-colton/images/entry-h2-bg.png) center no-repeat;
Please make your own background image. I’ve just added from reference URL.
ahh, ok, so the background is actually an image. That is helpful. thanks a ton!
@ChrisP: sligthly buggy on Chrome 26 Mac OS X. Triangle is a little bit to big.
I guess setting height (line-height?) and border in ems would be the very least to make it more elegant/reusable :)
Off-topic (there should be more off-topic chit-chat on this forums): Almost didn’t recognize Hugo there! :P
this is phenomenal! Thanks Chris & Hemzone
I am a compete CSS newb, how can i implement this code on my site? I am running wordpress using the Canvas theme, if that helps.