| ActiveDen | Flash Marketplace |
| ThemeForest | Web & CMS Themes |
| GraphicRiver | Graphics, Vectors & Icons |
| VideoHive | Motion Graphics & Projects |
| AudioJungle | Loops & Effects |
| FreelanceSw | Freelance Jobs & Community |
| Rockable | Books & How-To |
| Creattica | Design Community |
| Mac.AppStorm | Mac Apps |
| Web.AppStorm | Web Apps |
| WorkAwesome | Be Awesome At Work |
| Envato | About Us |
| More Coming Soon! |
Most designers and web developers only scratch the surface of the potent language that is CSS. In terms of programming languages, CSS has a fairly simple learning curve. That doesn't mean that CSS isn't a powerful language. Sometimes it's the small things that make a huge difference in a website design.
In this post we're going to outline 10 awesome CSS techniques for web developers who know their stuff.
There are plenty of CSS techniques and hacks out there for beginning designers. Everyone knows about the routine tricks like:
These simple tricks are all fine and very important, but today we're going to look at some CSS techniques that are a bit more challenging. They're not the run-of-the-mill techniques you'd teach a CSS beginner. These 10 tricks are slightly more difficult, but if done well they can add an extra special something to your website layout.
Let's start things off with a technique that isn't too advanced, to get us limbered up. The focusing and blurring of navigation menu items is a powerful way to add attention to the selected item. This technique is different than traditional image rollovers because instead of changing the state of the hovered element, it changes the elements that aren't selected.
At the core of this effect is a simple rollover, using an image for each of the links. Each image is 600px wide, with 3 different states: static, active and rolled over.
This will make each navigation button 200px wide, so that when a button is rolled over, every other navigation item will shift -200px to change their background image. It's a nifty effect that is quite different to most rollover-based navigation menus.
Illustration-based layouts are the latest trend in web design, and for good reason. A beautiful illustration can be a very appealing web layout. Yet sometimes illustrated layouts have a difficult time showing animation on the pages, as the bulk of the design is based on images. We can use a bit of CSS in the navigation to animate the illustration.
WebDesignerWall has an excellent tutorial that not only shows you how to add animation to the navigation, but also how to create the entire navigation system in Photoshop. The finished product is a playful, vibrant navigation system that makes the design much more life-like and appealing. The difficult part about following the example isn't working with the CSS, but rather making the changes in Photoshop to have the rollovers appear connected.
Typography is sometimes overlooked in a CSS. However, you can do many creative things to text just by adding some CSS. For example:
You can skip the javascript and go straight to the CSS for making reflections within text. Granted, it doesn't look quite as elegant as the javascript solution, but it has potential to be quite nice.
You can create nifty headlines that flow together by using a low letter spacing for the first character inside a span. Note: Not all character combinations look fantastic.
You can even create drop characters (see the "g"?) by utilizing a low line height and a bottom border.
You can see many other advanced CSS techniques for text at the 3.7Crea.tv blog.
Crazy Egg has an incredibly intuitive design for their signup page. Instead of making the user click to another page to start the signup process, Crazy Egg uses CSS and a touch of javascript to make the table column neatly slide to the left while a signup form appears in place of the other columns. Quite handy if you're wanting the visitor to instantly start the signup process, all within a very tiny space.
While tables are something that modern designers typically like to avoid, they can be perfect for organizing lots of data. Pricing tables are a great place to utilize tables, and making them more interesting certainly helps the user experience.
Ask the CSS guy has an excellent tutorial that replicates the code, complete with a live example and downloadable source.
CSS isn't really that powerful of a language by itself. Sure, you can do tons of nifty tricks with it, but it's still only a stylistic language. You can't store variables or do other things that dynamic languages like PHP can do. However, you can use dynamic languages to output CSS, giving them dynamic variables.
By using the header() function in PHP, it's possible to have PHP print out CSS. You can use different arrays to show different bits of CSS styles. For example, here is a default color scheme in CSS, output in PHP:
$persistent = array( 'bgmast' => 'bbd9ee', 'fgmast' => '4d4d4d', 'bgmenu' => 'e7e4d3', 'fgmenu' => '444', 'bgcont' => 'fff', 'fgcont' => '444' );
And here is an alternate color scheme:
$alternate1 = array( 'bgmast' => 'ddb', 'fgmast' => '000', 'bgmenu' => 'aa7', 'fgmenu' => 'fff', 'bgcont' => 'fff', 'fgcont' => '333' );
If you wanted to show an alternate color scheme you'd simply toggle between $persistent and $alternate1 to swap the styles.
Check out the full tutorial at Digital Web Magazine for a more in-depth explanation of dynamic style switching with CSS and PHP.
Pulling quotes from the text of a web page is a great design technique that can add a nice element of style to a website. Many magazines, ebooks and other online publications use quotes to set apart a bit of the most important text so that the reader's eye is drawn to it. Quotes are essentially a piece of eye candy for the reader. Here are a few ways a designer could pull quotes from the article.
The designer could manually make an extra div that looked something like:
This is the quoted text, floated right with some padding.
with a style that looked like:
.quote {
float:right;
padding-left:15px;
....
with any other styles that might be needed. Manually making an extra div isn't a great idea because it takes more time and adds duplicate content to the source.
You could also utilize javascript to pull quotes from the text. While this eliminates the duplicate content issue and doesn't require you hardcode another div, you'll still have to include a bit of javascript.
Designmeme has an excellent tutorial on how to pull quotes using only a bit of CSS and the CSS 2 :before pseudo element to show a quote.
Once upon a midnight dreary, while I pondered weak and weary, Over many a quaint and curious volume of forgotten lore, While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. ‘'Tis some visitor,’ I muttered, ‘tapping at my chamber door – Only this, and nothing more.’
Here's the pullquote class:
.pullquote {
width:550px;
line-height:1.5;
font-size:1.2em;
text-align:justify;
}
along with the :before pseudo class:
.pullquote:before {
content:"201C" attr(title) "201D";
font-family: "Times New Roman", Times, serif;
font-size:1.2em;
text-align:center;
background:#333;
color:#fff;
display:block;
float:left;
width:7em;
margin: 0.25em 1em 0.5em 0;
padding:1em;
}
Now every time you have a paragraph with the class "quote", any text you put in the title attribute will show up in a quote box (with curly quotes).
You can read the rest of the excellent CSS pull quotes tutorial at Designmeme.
Changing the appearance of your website based on the time of day is not only a fun way to add depth to your design, it's also a way to personalize the visitor's experience. So far there are two ways to accomplish it with CSS: By javascript or PHP (or some other dynamic language).
Both approaches essentially do the same thing, with a few small differences. By using javascript you can use the visitor's time to display the appropriate stylesheet. (If you want to use your server's time, use the PHP version).
Here's the javascript code from katgal that changes the stylesheet every 3-4 hours, based on the user's time.
Using this method you can show different stylesheets
Changing the appearance of your website based on the time of day is peanuts compared to the ability to change the appearance of your site based on the weather. CSS-Tricks has an amazing tutorial that shows how to form a design based on the current weather conditions from Yahoo! Weather.
By using a bit of CSS and PHP trickery, the tutorial shows how to switch classes of the layout based on the weather. Just create a style (the example shows a header image) that correlates to the appropriate weather conditions. It uses a stylesheet like this
.header {
width: 782px; height: 150px;
/* DEFAULTS TO SUNNY */
background: url(images/header-sunny.png) no-repeat center center black;
}
.header-rain {
background: url(images/header-rain.png) no-repeat center center black;
}
header-snow {
background: url(images/header-snow.png) no-repeat center center black;
}
.header-sunny, .header-fair {
background: url(images/header-sunny.png) no-repeat center center black;
}
.header-partly-cloudy, .header-cloudy, .header-mostly-cloudy {
background: url(images/header-partlycloudy.png) no-repeat center center black;
}
and once it pulls the weather condition via PHP/XMl. This snippet of PHP is used in the layout to show the proper weather class.
An overlooked feature on the website is the "print this article" link. There are many people who use the Internet who still like to print out useful articles and store them in paper form. In order to pull this off, you need to use CSS/XHTML page breaks.
David Walsh has some excellent code that shows the CSS that is needed to make effective page breaks in printing pages.
@media all
{
.page-break { display:none; }
}
@media print
{
.page-break { display:block; page-break-before:always; }
}
And then to use the code, just add <div class="page-break"></div> whenever you need to break the page, like so:
Page Title
David also gives some great examples of places to add printing breaks in the page.
Check out some of David's articles on how to make your site more printer friendly.
Bar graphs create a nice visual for a group of otherwise boring statistics. Apples to Oranges has found a way to accurately display bar graphs with CSS only. It's an elegant solution for what would have to otherwise be hardcoded or done with javascript.
The basic thought behind the tutorial is that you create a class like .graph
.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }
and display it on the page like so:
24%
The only "fluid" piece of the example is adding the style="24%" to the <strong> statement. Any percentage would have correctly shown the proper graph. Simple and elegant.
There are many more complex examples of creating bar graphs from CSS at the Apples to Oranges blog, if you're feeling adventurous.
Glen Stansberry is a web developer and blogger who's struggled more times than he'd wish to admit with CSS. You can read more tips on web development at his blog Web Jackalope.
Check out some more great tutorials and articles that you might like
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
We pay $150 for user submitted tutorials and articles that we publish. Anyone can send in a contribution
Community Link Feed
All Your Base Are Belongs To Us!
The effects and techniques demonstrated in tutorials on the Tuts+ network can be used in whatever manner you wish without attribution.
The text, images and tutorials themselves are copyright their respective owners.
You cannot copy whole tutorials, either in English or translated to another language.
Writing a tutorial or article for the site is not only a great way to get exposure and give back to the community, but we'll also give you $150 cash to boot!
This is YOUR site, so if you have suggestions or feedback on how we can improve it for you, please let us know! We do our best to keep up!
User Comments
( ADD YOURS )jonatan September 1st
Crazy!!!!
( )cimi April 10th
dmn right
( )Harry July 24th
Paul Gendek September 1st
Great stuff, I like the how it’s presented. Like a detailed “best of the web”.
P.S. Spell check!
( )curtis allen September 1st
awesome tips, guys
( )Dainis Graveris September 1st
Surely love this one pack of great tips – thanks!!!! Sick!!!
( )Christian September 1st
Beautiful as always guys, thanks.
( )Chris September 1st
#1, #4, and possibly #9 were the only “advanced CSS” if you could call it that. The rest were relying on CSS basics mixed with other languages – JS or PHP in this case.
I’d consider “advanced CSS” techniques things like complicated selectors, layout tricks (maybe a complex floated or negative margin layout), or maybe properties that most people haven’t heard of.
( )insic September 1st
really nice. i love css incorporated with some other language like php.
( )insic September 1st
#3 is cool!
( )Skellie September 1st
@ Paul: What spelling errors are you seeing? I’m happy to fix them.
( )Simon September 1st
Nice tutes, but hardly challenging
( )Lamin Barrow September 1st
Awesome.. Thanks for the round up. This CSS stuff is BADLY needed around here.
( )kailoon September 1st
This is very decent and useful! Nice tutorial, wish can have more articles like this soon.
( )christian September 1st
I thought correct quotes for blockquotes and pullquotes were outside the text block as opposed to the example in #7?
(See any article at A List Apart for reference.)
( )Jatin Meshiya September 1st
it is all honey! yes there is nothing that user have to be advanced but have appropriate knoledge of css and have professional experience of the css developement. in my current job i have face many probs regarding to some of these points. now it will be helpfull for me to solve the problems. thanks a lot looking forword such a nice tutorial. thanks again
( )Wolferey September 1st
Excellent roundup, just what I needed! ^^!
( )Sumesh September 1st
Useful resource – I picked up #1 and #4.
Floated and stumbled
( )Guillaume September 2nd
#4 is my favorite! Thanks for these very nice resources.
( )Dean September 2nd
Hi Glenn,
Don’t worry mate i struggle with CSS too. For me it’s a curse.
Genuine creatives will dislike the entire concept of code.
When you have dedicated your life to a visual practice, it’s very hard for your
brain to begin to operate in logic-based lateral thinking.
( )Lash October 24th
I like code and I consider myself a “genuine” creative…
In my opinion a genuine creative needs to know the nuts and bolts too, a superficial creative just wants the pretty results.
Stick with css and you’ll find that the code itself enhances the design process (thanks to tutorials like the ones above) and is equally artful.
( )raffles September 2nd
Great compilation!!
( )Dean September 2nd
Simplistic as CSS may be in many aspects, it is a work flow my front lobes
do not take kindly too.
( )Shane September 2nd
I personally hate number 1 – blurring like that is never a good idea, for all sorts of reasons.
I also agree with other posters that some of the points made aren’t advanced CSS, more server-side techniques for delivering CSS based on time of day or weather.
( )James September 2nd
I am not sure I like all the techniques listed but thanks anyway.
I agree with Shane, that blurry menu thing is an awful idea from a usability perspective. – It’s a nice idea though…
The problem with these types of posts is that most people have seen these techniques before. I’d imagine that the majority of NETTUTS visitors read a number of other web dev blogs. I’ve seen blog posts relating to #1, #2, #4, #5, #8, & #9 before… How about some original content?
If the NETTUTS readers have not seen these techniques before then they need to venture outside of the Envato walls and explore pastures new!
( )Miller September 2nd
Great to see another css post, would love to see more in terms of site builds from scratch – really getting to the bottom of that box model, great work though!
( )Craigsnedeker September 2nd
Awesome, thanks a lot!
( )Ben Griffiths September 2nd
Excellent writeup, thanks
( )dix-huit September 2nd
Some good tips here – but that text effect is not a reflection, nor is it a viable substitute.
( )Tabris Chen September 2nd
I love the blurry menu, IMHO it enhances the usability rather as it makes the user focus on what is most important.
( )Joseph Smith September 2nd
I Thought it was about CSS not PHP or other scripting languages…
( )ralexismf September 2nd
Nice tutorial, is very decent, Awesome….
( )acomplia September 2nd
great techniques … specially the one that changes css according to the weather
( )Philo September 2nd
Great Article!
( )James September 2nd
@Tabris – How does it enhance the usability?? It makes all other navigation links virtually unreadable when hovering over one of them. There are tried, tested and proven ways of focusing the users attention without makes content less readable, such as underlining text or changing colors…
( )Stuart Robertson September 2nd
Thanks for pulling this list together. Nice to see one of my tutorials made the list.
( )RK September 2nd
People need to learn how to do reflections correctly. Look at the N in KINDEK. Geez.
It’s also funny when people scale them vertically as if they strectch. Or even better is when the warp it outward from both sides.
( )Lachlan McDonald September 2nd
I do the time-of-day thing on my website, except it uses very little CSS, and is mostly done via PHP. Cool thing is though is that people can change the time of day and have it generated as a wallpaper in their resolution.
Okay, maybe I think its cool.
( )Kevin Quillen September 2nd
For even more killer typography effect, I would say to try FLIR.js
http://facelift.mawhorter.net/learn-more/
( )Conor Darcy September 2nd
In ‘6. Pull Quotes with CSS’
What is
float:rightright;
I’ve never seen that before.
( )Bob September 2nd
I’d consider complicated css would be more along the lines of very flexible pages that adapt to browser windows using a minwidth and maxwidth and allowing the design to fill out in an aesthetically pleasing way as the browser window gets wider.
( )Gene September 2nd
awesome! this is great!
( )Vernon September 2nd
Great article… but I’m seriously digging the Contra image! Man I loved that game growing up.
( )Nate September 2nd
Another awesome article full of useful information.
( )Aaron Irizarry September 2nd
thanks for another rockin’ article… that contra pic is bringin’ back some memories
( )Shannon September 2nd
These are great! CSS is pretty powerful and it’s always fun to get more ideas on what to add to make your sites that much cooler, thanks!
( )patt September 2nd
in the end i have to do a little javascript just to be a better CSSer.
( )thanks for collecting this :]
Kyle September 2nd
Blurring out menu items is a *bad idea*.
Doing so does not enhance usability at all. If a user is hovering over a menu item it means either:
1) They have already read the menu item and decided to click on it — this means it’s unnecessary to draw further attention to it. And actually, by visually changing (blurring) the OTHER elements, you draw attention to them and actually distract the user.
2) They are “grazing” through the menu, in which case the item they’re hovering on is not necessarily the item they’re currently looking at or reading.
Blurring out menu items is a completely amateur thing to do. Arguing for it’s usefulness makes you look even worse.
Also, you shouldn’t be teaching people to do things like — there is a perfectly good
( )Greg September 2nd
Decent article.. though I do feel like this is more of a CSS + Javascript/PHP tutorial than CSS.
#1 and #2 are based around the same concept; having one image that shifts position depending on the state of the anchor link. This is useful stuff. I feel like from a usability standpoint its NOT a good idea to blur out the other options.. what if I’m hovering over one link and want to see the other? I think a better idea would have been to slightly gray out the other links; while it puts the focus on the hovered link it doesn’t make it that much harder to read the other ones.
#4 is actually pretty cool, and #9 seems pretty useful too, depending on your website.
All of the other techniques are just meh. #3 isn’t that useful or advanced.. just using selectors around different parts of text and applying different styles. And that reflection isn’t a proper reflection.
( )KangarooDeziner September 2nd
Pretty decent article.
The blurring effect is pretty smart, though I still would have liked to see an additional hover image rather than the standard non-hovered image.
The image placement idea used in number 2 (and 1) is really the best way to do image rollovers. A lot of people still swap out images with javascript.
The “reflection” isn’t really a reflection; it’s just the same text in a lighter color underneath the darker text. A reflection is inverted vertically. As RK pointed out, the N isn’t reflected, and neither is the K (it has thick and thin legs that you notice aren’t inverted in the reflection). This trick somewhat works for KINDEK. But you put any other word in there, like WOMBAT and it will be extremely obvious you don’t have a reflection. The other typographic ideas are decent, though.
4 – 8 involve JavaScript or PHP, but I’m not going to say anything bad about that. Rather, for the people who make the comment about “I thought this was CSS” type stuff, the title of the article may be a bit mislabeled, but being a good web developer means having an understanding of the 3 aspects of web development, Structure (xHTML), Presentation (CSS), and Behavior (JavaScript/PHP). If you only know two and refuse to make an attempt to learn the third, you’re falling short of what you should be doing.
9 is pretty cool, because printing a page out is something a lot of developers tend to ignore, and it’s something that people should really think about and take into consideration.
( )Skellie September 2nd
@ Vernon, @ Aaron: Yay! I was waiting for someone to get the Contra reference. What better way to illustrate a set of challenging techniques? Granted, they may not be as tricky as Contra… but what is?
( )Jonathan September 2nd
Loving it… really nice tut / like them all. Learn’t something too – the weather, never thought to do that. That opens a whole bunch of possibilities. Really clever.
( )web design company September 2nd
Ten ways to stretch your CSS capabilities.
( )Contra Anti September 2nd
Contra!
( )chris September 2nd
I thought I would see something like the Silverback App’s landing page CSS by Clear Left.
This is not advanced CSS.
Sorry guys.
( )note September 2nd
something to point out you might have missed is that technique number three, reflections is not exactly a reflection. look closely to the letter N and it does not look reflected on the bottom, it is simply a copy, so a javascript would be a better way to go for now, unless there is a proper technique that reflects … reflections.
( )joyoge September 2nd
10 adet zorlu ama çok çekici CSS tekniği dersi
( )http://www.joyoge.com/oku/606/10-adet-zorlu-ama-cok-cekici-CSS-teknigi-dersi.html
thanks a lot for very nice tutorial list…
Mossoi September 2nd
Alas, this article suffers from the usual belief that CSS is in any way advanced or difficult to master. None of these tricks are particularly difficult or useful, just normal usage. Please, no more articles about how to use CSS, it’s not difficult.
( )mattems September 2nd
excellent! love it great list well documented, quality material.
( )VertigoSFX September 2nd
Wow, that’s pretty epic. Lots of good stuff in there. Definitely going to be trying these things out soon.
Thanks!
( )robmo sf September 2nd
Um, look at the HTML on the example page for the bar graphs (#10).
It is filled with links like this:
scroll saw paterns highland park headaches csl trunk e46
baker drivetrain highland park hotel los angeles penis tatoo
hmc green machine highland park il florists wind ventilators
penis size contest highland park il white pages ivor biggun
Firefox identifies that as an attack site that tries to install malicious software. Thanks so much guys!
( )KrAzE September 2nd
The css style sheet based on the time of the day doesnt seem like that bad of an idea.
( )Jaomes Dean September 2nd
Dude, CSS styles totally ROCK. I love it.
http://www.privacy.cz.tc
( )Ken September 2nd
Awesome. I’ll definitely be taking advantage of #7. Great post. Dugg.
( )erichansa September 3rd
These techniques are nothing new!
( )keif September 3rd
Just because it *can* be done, doesn’t mean it should.
These techniques are mostly a mix of CSS and php/js – how does that make them advanced CSS?
As well, I question the usability of some of these – blurring text so it’s more difficult to read? To make the user focus on something that can’t be?
Also, Float:rightright doesn’t exist.
“Dynamically generated CSS” is really “PHP parsing to CSS”
The effects are cool, but hte headline is misleading.
( )jive September 3rd
The typography tips are the best, thanks.
( )dmc September 3rd
I hate to be a pedant, but CSS isn’t a programming language, and describing this as a list of CSS tricks is wrong, most of these examples are based around javascript or php. They’re also other people’s examples that you’ve hobbled together to get your own hits from Stumbleupon.
The blurred text example isn’t cross-browser compatible, or a very good thing to do full stop, I agree with the guy above who described it as amateurish, the same would apply to the “typography” examples, very VERY bad examples.
( )Scott September 3rd
Maybe i just have a better skill with web languages than the average coder, but these are far from impressive and/or challenging :-/ Not to mention many of them do not truly have anything to do with the power of CSS. Sorry but i have to give this post two thumbs down.
( )Tommy M September 3rd
@Scott, what would you say would be challenging? I agree with you, I believe I am proficient in XHTML/CSS, so nothing, I would say, is harder than another. Some things just take longer.
( )Flash September 4th
Awesome, if you add trick for adding any font in css it will make this topic one of greatest and trick resource for CSS.
But great work on this and good research.
Keep up the good work
Thanks
( )Faisal
CSS:Jockey September 4th
Nice Tips, I found one I wanted to use on the project I am working on.
Thanks for sharing!!
( )BoredQuiz September 4th
Changing style based on the time of day is an awesome idea.
( )Web September 5th
Focusing and blurring menu items is awesome, going to be using that on a project I’m working on. Maybe one day we won’t have to mix the CSS and JS to make these cool effects.
( )Mark Abucayon September 6th
All are awesome and useful thank you very much for sharing this one.
( )Josef September 7th
Really cool tut,
( )Just started really gettin into CSS
its an amazin language!
elvisparsley September 8th
Gee, I just can’t keep up with all these things.
( )Oh my oh my.
Harry Roberts September 8th
Nice list! I’ve just compiled a small page of nifty CSS based techniques, if anyone’s interested at all: http://csswizardry.com/harry/
( )Drew Douglass September 8th
While I didnt find all of these extremely helpful, I enjoyed the resources and the read. Thanks for the nice article guys!
Regards,
Drew
( )Kiki September 10th
Good article. You’ve given me awareness of a couple of strategies that I didn’t know existed. Thanks!
( )Bill Biwer September 10th
Great post. Would definitely like to utilize the time of day into a future project, and a few others. Nice round-up.
( )Rodrigo Ferrari September 11th
Really cool tut
( )=)
Miguel Teste September 16th
Nice tips, thanks
( )Tobias September 23rd
Great Tut´s I think
( )John September 24th
I will try the bar graph. I think i can use it.
( )John September 24th
I used dreamwaver on CSS but i am not happy on its features, Anybody who know better than dreamweaver?
( )komik September 25th
very good!!
( )Freeware Collection September 28th
Cool! Nice tips! Thanks.
( )wilwaldon October 2nd
Excellent tips
Thanks!
( )Gestaltung October 13th
Nice! Thanks for sharing!
( )honour chick October 13th
wow… awesome techniques
( )markrenn October 14th
hey! css is not a programming language.
just thought you should know.
( )Dwayne October 15th
Good Jod
( )Angel Grablev October 22nd
I definitely agree with most of these,i have a few suggestions added in my blog at http://angel.grablev.com
( )dwebpages October 29th
Great Great fun with CSS thanks
( )going to apply some is my http://dwebpages.com
Orbitbird November 6th
very nice CSS!
( )elizer November 14th
hmm.. very nice post i like css so much
( )Timothy November 25th
I’m honesty not very impressed. Most likely because the title of the post is “10 challenging … CSS techniques” and most if not all of these are not challenging. Most of these are very basic in logic and take a very little amount of JavaScript. Pie.
( )Daniel November 25th
Number 3 Reflection isn’t really a reflection.
( )msath November 25th
f***ing damn cool….keep rocking…
( )Bill November 25th
Firefox doesn’t support @media for printing. What an oddball thing to think that IE supports @media but not Firefox.
( )Henry November 26th
Great post, congratulations
( )http://www.crea-t.net
Tino November 28th
Great techniques! Bravo!
( )entrepixeles November 30th
Buenos Tips
( )p3rf3ctg3ntl3m4n December 4th
thanks for these techniques
( )shakir December 5th
This is really an awesome collection. Thank you so much……
( )rudhi December 16th
very BEUTY CSS! Thanks.
( )heyhey! December 20th
Great tutorial there! One remark… CSS isn’t a programming language. It is a browser interpreted language. I think you would have quite a problem compiling CSS :/
( )Ralph January 17th
Awesome effects with CSS, thanks a million
( )Daniel March 24th
good job.
( )Thomas Thomassen March 31st
The Quotes example is a bad one. Don’t suffer from divitism. DIV should not be used, BLOCKQUOTE and Q is the appropriate elements.
( )Skweekah April 2nd
I like insic
( )Iwan April 3rd
very nice
( )matt April 9th
your post is being plagiarized.
http://blog.gointernetwebsite.com/2009/02/10-challenging-but-awesome-css.html
( )kreuzfahrten kroatien April 20th
greetings from Croatia. Stay tune.
( )ni_x April 24th
mmm, i like that!
( )Phillip May 4th
Great post. Bookmarked this one for sure to use on some upcoming projects. Thanks!
( )B.Turan May 16th
wow…. great tutorials….
Thank you…
( )John June 21st
Some really good information there, thanks.
( )adil July 14th
#3,#4 is very cool!
( )Frederik July 17th
thx for the trixx
( )Kashif M Qasim July 20th
Great One!
( )Gunjan July 20th
tnx a loot 4 d tips
( )battica July 21st
awesome stuff!! many many many thankeeeus!!
( )dean cameron July 24th
“manually”
( )shahbaz jamil July 27th
awesome. thanks to share
( )Bony Yousuf August 19th
Awesome man… simply awesome..
( )LogoPATE August 26th
Where I landed to here?
( )Clippingimages October 11th
Great great post. Its full of help and fun …. Thanks for the post
( )a guy October 17th
the blur effect is total nonsense! looks like hell… why!!? useless….
( )Webdesign Koblenz October 23rd
Really awesome. Thanks for sharing!
( )http://www.edsonvalsechi.com/ November 4th
Thanks good info
( )EdsonValsechiMusic November 4th
thanks great info
( )