After 13 years of being a vital part of web designs, Cascading Style Sheets (CSS) has evolved into a powerful tool, allowing you to develop more efficient and better-looking sites. Many of the new features in the latest CSS revision (CSS3) are rich and take the quality of our designs to the next level.
We’ll be looking at a few of the essential things you need to know about CSS3. With all of these new features, it’s important to place emphasis on the most important ones to get you up to speed. Even though only the most modern of web browsers (Safari, Mozilla, Opera) currently (partially or fully) support CSS3 specs, it’s an exciting time for those who like to experiment!
This is a follow-up of a previous article called CSS3 Techniques You Should Know which you should also check out.
CSS3 lets you apply multiple backgrounds to an element using several properties. Included in this list of properties is background-image, background-repeat, background-position and background-size. In order to include these multiple backgrounds within a single element, you must specify the correct properties separated by commas.
body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}
CSS3 selectors allow you to select elements to apply style properties with greater specificity, giving you opportunities to select complex groups of elements. The new selectors not only save you time, but also help you keep your HTML markup to a minimum. You’ll inevitably reduce the number of classes and IDs you’ll need, allowing you to become a bit more organized with your stylesheet.
There is a new kind of combinator that is being introduced in CSS3, the general sibling selector. This selector targets all of the siblings of a particular element. For example, if you wanted to target paragraphs in the same hierarchy as your level-1 headings, you would do:
h1~p {
color: red;
}
The selector above will match the first p element below (giving it a red color), but not the second p element, because it is not on the same level (e.g. not a sibling) as the h1 element.
<h1>Heading</h1> <p>This paragraph is a match</p> <div> <p>This paragraph is not a match</p> </div>
New pseudo-classes introduced in CSS3 specifications allow you to select a group of elements that, before, would’ve required DOM selection using a scripting language such as JavaScript, or additional classes/ID’s.
Here are some new pseudo-classes:
:last-child selects only the last child element.:nth-child(n) selects the nth child, useful for zebra-striping tables.:not(e) selects everything except e.SitePoint has a complete list of CSS3 psuedo-classes.
With CSS3, you can now resize your elements using the resize property. Nice right? The catch: it only works in Safari right now. The following code block makes it possible to have a tiny triangle appear in the bottom right corner of an element that you can then drag to resize.
div {
resize: both;
}
The most commonly used fonts on the web are Arial, Helvetica, Verdana and Georgia because most computers have them preinstalled. With CSS3, you can break away from these fonts and use various types of fonts as long as it can be called from an internet-enabled location. When you call on your font, it will be displayed anywhere on the site. Because of copyright issues, you have to make sure that you can use the font before using the @font-face feature.
In the following example, the @font-face feature declares the name of the font family (you can name it anything you want) and the location of the font file (in this case a TrueType font file). Once it’s declared, you can use the font-family property to set the font of an element.
@font-face {
font-family: SketchRockwell;
src: url('http://example.com/fonts/SketchRockwell.ttf');
}
h1 {
font-family: SketchRockwell;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
}
The text-shadow property allows you to add a dropshadow underneath HTML text elements. You should always make sure your text is readable in case the user’s browser doesn’t support advanced CSS3 properties.
In the following example, we apply a dark blue (#003471) text-shadow that’s 2px to the right and 5px to the bottom of the text and with a blur of radius of 2px, to all h1 elements.
h1 {
text-shadow: #003471 2px 5px 2px;
}
Preview of text shadow CSS3 property in Firefox 3.5.5.
Creating rounded corners can be a bit of a task. However, with CSS3, it can be a breeze when using a new property called border-radius. This property sets the curvature for every corner of the box.
For example, the below code will produce 10px-rounded corners for divs:
div {
border: 2px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 500px;
}
In the above code, -moz is for Firefox and -webkit is for Safari and Chrome.
Rounded corners in Firefox 3.5.5.
CSS3 gives us better control over our HTML elements, opening up possibilities of creating complex and flexible designs that have a reduced reliance on static graphics and scripting. We talked about some basic stuff that works in most modern web browsers (except IE8). To learn more about CSS3, check out the W3C CSS3 Current Work page and see CSS3 .Info for the latest news about the newest version of CSS.
Joel Reyes is a web designer and web developer with years of experience in the industry. He runs a development studio called Looney Designer. He works with standards-compliant HTML/CSS, PHP, JavaScript and WordPress development and design. Connect with the author via Twitter.
magia blanca (7 months ago)
A fantastic , it has long sought a paper com this ….
SayMyName15 (7 months ago)
Hi . I would like to konw how do i add this page to my desktop so I could just double click to see your post . I just know how to bookmark. Thank you!!!
-Sarah
como ganar dinero (7 months ago)
Excellent goods from you, man. I’ve understand your stuff previous to and you are just extremely excellent. I really like what you have acquired here, certainly like what you are stating and the way in which you say it. You make it enjoyable and you still take care of to keep it sensible. I cant wait to read far more from you. This is actually a wonderful web site.
Zetta Boisseau (7 months ago)
I have been previously trying to make money on the web for many years with moderate success, nevertheless it was just lately which i went into the complete Live dealer roulette Income system which entirely modified my entire life to the better. If you want to improve your family’s technique of existence, don’t be afraid to get the free of charge .R0ulette- Income automatic robot
Eddy Jeanfrancois (7 months ago)
Lovely just what I was looking for.Thanks to the author for taking his clock time on this one.
Fitness Guru (7 months ago)
This is Quite new to me.
Olesya Novik (7 months ago)
I am really thankful to the author of this post for making this lovely and informative article live here for us. We really appreciate ur effort. Keep up the good work. . . .
iphone magic tricks (7 months ago)
Thanks for another informative web site post. Where could be a big help. I’ve a project that I’m simply now running on, and I’ve been on the look out for such info.
hemorrhoids bleeding (7 months ago)
I can’t believe after all this time I still can’t find anything that works. I’ve had haemorrhoids are the past four months and I’m really can’t find anything.
Real Estate Agents Richmond (7 months ago)
This actually answered my downside, thank you!
vtu syllabus (7 months ago)
so much good information on here, : D.
elektrische zigarrette (7 months ago)
Thank you for sharing excellent informations. Your web site is so cool. I’m impressed by the details that you have on this web site. It reveals how nicely you understand this subject. Bookmarked this web page, will come back for extra articles. You, my friend, ROCK! I found simply the info I already searched everywhere and just couldn’t come across. What a great site.
profile backlinks (7 months ago)
Do you want rank first in Search Engines on your keyword?I can help you puting your keyword on first page only for 5$,check out my site:Cheap SEO,BEST Offer ever,check it out!
Tyson F. Gautreaux (7 months ago)
I am foreign citizen from Ireland. I have been thinking of investing property in Memphis, TN. My cousin purchased a duplex there a year ago and has made a substantial profit there.
hardwood flooring (7 months ago)
Very interesting from the begin to the end.
HighPulse Poker Review (7 months ago)
very nice post, i certainly love this website, keep on it
webhosting (7 months ago)
Thanks for sharing, please keep an update about this info. love to read it more. i like this site too much. Good theme
.
scrapebox blasts (7 months ago)
Wonderful blog! I found it while surfing around on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Thanks
articles (7 months ago)
Wow! This can be one particular of the most helpful blogs We’ve ever arrive across on this subject. Basically Fantastic. I am also an expert in this topic therefore I can understand your effort.
santeria (7 months ago)
For More details Visit Santeria site.
bracelets ethniques (7 months ago)
Thank you for this interesting article, i’ll bookmark this page
Evelyn Dominick (7 months ago)
Custom Bot Creation service , yahoo account creator , aol account creator visit spamvilla.com
scrapebox lists (7 months ago)
I’m not sure why but this web site is loading very slow for me. Is anyone else having this issue or is it a issue on my end? I’ll check back later on and see if the problem still exists.
sviluppo siti internet (7 months ago)
Great! This is really interesting, I’m gonna bookmark your site! Keep it going!
get free macbook pro (7 months ago)
Good day very nice web site!! Man .. Excellent .. Superb .. I will bookmark your site and take the feeds also…I’m happy to search out numerous helpful information right here within the put up, we want develop more strategies on this regard, thank you for sharing. . . . . .
private proxies (6 months ago)
Did you see what happened with LinkedIn’s IPO? The bank screwed up in a major way and shorted them out of $175 million because they underestimated the value of the stock. They have to be pissed. I hope this doesn’t produce a repeat of the dot com era which happened around 2000. That would suck particularly with the recession we are still in. – Ashley-
Buy Playstation Network Card (6 months ago)
i’m just a enormous ps admirateur, since ps1 truly, nevertheless i’m not really so convinced with regards to the actual fresh attacks on the network if i am too eager to try my chances with the playstation 3 slim and also playing on the web, my personal cc number is well worth a lot more than a couple of entertaining hours. Feel i’m just likely to let the dirt setlle a little until i spend in these online games.
joomla template developer (6 months ago)
This can be a extremely interesting post, we appreciate you sharing! There are many blogs on this topic but this 1 states exactly what I believe at the same time.
Percy Sheerin (6 months ago)
There are some interesting points in time in this article but I don’t know if I see all of them center to heart. There is some validity but I will take hold opinion until I look into it further. Good article , thanks and we want more! Added to FeedBurner as well
North Logan Utah Real Estate (6 months ago)
Nice post . keep up the good work And like most people, you probably lack the expertise to remove said virus, making computer virus removal about as big a reach as, say, fixing your transmission or tailoring a suit.
Leslie Cormican (6 months ago)
F*ckin’ remarkable things here. I am very glad to see your post. Thanks a lot and i’m looking forward to contact you. Will you please drop me a e-mail?
Milo Geraci (6 months ago)
Hi my friend! I wish to say that this post is amazing, great written and include almost all vital infos. I would like to see extra posts like this.
Matt (6 months ago)
Hey Admin! I was reading your post and it really looks like that your post isn’t optimized well to gain search engine traffic and rankings. Actually I am an SEO Consultant, advicing people about how to get more traffic. I’d suggest you to check out this awesome WordPress Plugin here – http://bit.ly/oTLvVh called SEOPressor, really thankful to Daniel for this. I use it on all my and my client’s websites. This is going to help you a lot. BTW, I am in no way affiliated to this guy, its just an advice. Your wish, take it or drop it.