CSS3 Techniques You Should Know
Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!
If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:
- Mozilla/Firefox/Gecko:
-moz- - Webkit (Safari/Chrome):
-webkit-(note: Some webkit prefixes only work in Safari, and not Chrome)
As you might have guessed, one of the downsides of using these extensions is the fact that we must use all of the above prefixes to get the CSS3 style to render in Firefox, Safari, and Chrome. And no surprise to anyone, IE does not support CSS3 or do they have extensions like the other leading browsers. Alright, enough talking, lets dive right in! Note: styles without a prefix are the actual W3 specification proposal.
A Note About Demos on This Page
The examples are all on this page, so if you’re not seeing some examples properly (or not at all), then the browser you’re using doesn’t support the particular CSS3 technique.
Drop Shadows
The drop shadow effect accepts multiple values. First is simply the color of the shadow. It will accept four length values, and the first two are the x (horizontal) offset and the y (vertical) offset. The next value is the amount of blur added to the shadow. The fourth and final value is the spread amount of the blur. Box shadow will also accept an inset keyword that will create an inset shadow.
box-shadow: #333 3px 3px 4px; -moz-box-shadow: #333 3px 3px 4px; -webkit-box-shadow: #333 3px 3px 4px;
Drop Shadow Demo:
Gradients
Gradients can be pretty confusing at first, especially when comparing the differences between -moz and -webkit. With -moz you first define the direction of the gradient, then determine the starting and ending color. -webkit gradients take a little more code. First you define the type of gradient. The next two values define the direction. Finally, the last two values define the starting and ending color of the gradient.
-moz-linear-gradient(-90deg,#1aa6de,#022147); -webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));
Gradients Demo:
RGBA
The RGBA color method is actually easier than it may look at first. It takes four values, and in order they are: the amount of red, amount of green, amount of blue, and the level of opacity. Instead of using a hex (#) color, you set the color in RGB mode, while the level of opacity can give the color a transparent look. The opacity accepts values between 0 and 1, with 0 being fully opaque and 1 being the actual defined color. The example below has an opacity value of .5, causing the element to be 50% transparent. rgba doesn’t actually require any of the browser extensions.
background-color: rgba(0, 54, 105, .5);
RGBA Demo:
HSL
Along with RGBA, CSS3 may make the HSL color model available to us. This could give us a whole arsenal of colors and tones. In this color model, HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel, while Saturation and Lightness are percentage values of the colors.
background-color: hsl(209,41.2%, 20.6%);
HSL Demo:
Border Color
With this style, you must define border-top, border-right, border-bottom, and border-left separately to get the effect below. You will notice that I have defined an 8px border along with 8 different colors for each border color style. That’s because the same amount of colors needs to match the amount of pixels in the border definition.
border: 8px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
Border Color Demo:
Text Selection Color
I have to say I think that changing the text selection color is a pretty exciting new feature. I first saw this on css-tricks and thought it was pretty sweet. With the ::selection pseudo-element, you can change the color and background when the user highlights a text element. Pretty nifty if you ask me. ::selection was removed form the current CSS3 draft, but lets hope they add it back in later!
::selection {
background: #3C0; /* Safari */
color: #90C;
}
::-moz-selection {
background: #3C0; /* Firefox */
color: #90C;
}
Text Selection Color Demo:
Transform
With the transform style, you can make elements appear to “grow” when hovered. With a value above 1 added to scale, the element will increase in size. On the other hand, a value below 1 will cause the element to decrease in size. Along with scale, their are many different transforms available to use. Visit Firefox’s developer page to see what else you can use.
-moz-transform: scale(1.15); -webkit-transform: scale(1.15);
Transform Demo:
Multi-column Layout
With this new multi-column layout style, we can give our text a “newspaper” type look. This is very simple to implament compared to the normal way of doing this through CSS. Below I specified how many columns I want, what type of rule I want to seperate them, and how big of a gap I want between the columns. Simple huh?
-moz-column-count:3; -moz-column-rule: solid 1px black; -moz-column-gap: 20px;
Multi-column Layout Demo:
Summary
I hope you all are as excited about CSS3 as I am. It gives us so much more power as web designers and developers, and makes many aspects much more simple. Now, if we could only get ALL browsers to support it! Of course, what I just showed you are only some of the potential new features of CSS3. If you want more information, tips, and help, I encourage you to visit any and all of the websites below:
Related Content
- Six Questions: Eric Meyer on CSS3
- 20 Useful Resources for Learning about CSS3
- 10 Easy jQuery Tricks for Designers
- Related categories: CSS and Web Development
About the Author
Andrew Roberts is first and foremost a Christian, with a passion for web design and development. His web interests focus mostly on HTML/CSS, JavaScript, & PHP/MySQL. When he’s not glued to the computer, he’s spending time with his girlfriend Kaitlynn, photographing animals, or reading. His goal is to attend graduate school for Biblical studies & ministry.
102 Comments
Russell Bishop
February 5th, 2010
Nice helpful collection, did you miss out hsla on purpose?
@dworni
February 5th, 2010
Nice, all examples works only in FF 3.6 / Mac for me. Not all (: Safari/NightlyBuild 4.0.4, Chromium 5.0.316.0
David
February 5th, 2010
Thanks for sharing ;) !
I know all these techniques,
just one not: That a border can have multiple border(-colors) :D !
BigM75
February 5th, 2010
great works, wow effekt of the article
Jacob Ras
February 5th, 2010
Nice article, thanks! :)
Delos
February 5th, 2010
Excelente post¡¡ Gracias¡
Jordan Walker
February 5th, 2010
That is a great round up, I hope one day that we will be able to reference objects without having to use the specific rendering engines declaration.
joel k.
February 5th, 2010
you got some talent kid
keep it up
Tolana
February 5th, 2010
You didn’t actually describe how these degrade in IE, so here they are:
- Drop Shadows: none applied.
- Gradient: none applied. The blue seen in IE is the background-color defined in the iframed example page. (In other words, a background-color must be defined for IE to display any color here.)
- RBGa: no opacity applied.
- HSL: does not display, so the page in the iframe of this example appears white.
- Border colors: IE only uses the first definition (border: 8px solid #000)
- Text selection color: default IE colors.
- Transform: no scale change on hover. IE only changes the background-color defined for #transform li:hover
- Multi-column: just one big paragraph.
Golf Royalty
February 5th, 2010
Super round up Andrew, bookmarked this for my migration to css3 at easter.
Thanks,
Lee.
Kelley Thompson
February 5th, 2010
Two words: awe-some! :)
Chris
February 5th, 2010
Multi-column layout also works with Safari.
-webkit-column-width: 13em;
-webkit-column-gap: 1em;
Tobias
February 5th, 2010
Safari also supports Multi-collumn and the demo of Gradients is not working in Safari (Mac).
I think Multiple backgrounds is also an important and interesting feature which should be mentioned.
Martin
February 5th, 2010
Nice summary, thanks.
Eric D. Greene
February 5th, 2010
Good list to get started with, thanks!
Nick
February 5th, 2010
Excellent article, thank you!
But when all browsers will support CSS3… ?
Imon
February 5th, 2010
Thanks for the post, i like the gradient technique
Nick Parsons
February 5th, 2010
Excellent post, Andrew, and way to go for being bold in your faith!
My favorite is the hsl colors, I had never seen that before. I agree that it’s going to be a great thing when CSS3 becomes more supported.
JC
February 5th, 2010
Some great stuff…can’t wait until this is supported across the board…whenever that is.
Tim
February 5th, 2010
For gradients in IE, you can use this:
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=’#EFC381′, EndColorStr=’#E6A542′);
Rebecca
February 5th, 2010
Nice article on summarizing some of the most popular CSS3. I just wish one didn’t have to deal with IE’s weaknesses.
Charles
February 5th, 2010
Thanks for the great tips, brother. It’s great to see CSS expanding into more dynamic features – hopefully they will see more cross-browser compatibility than previous versions, though I’m not holding my breath :) . Thanks again, and God bless.
Codesquid
February 5th, 2010
These features are very nice! Certainly worth using in a site where you expect a lot of visitors with modern browsers! I wouldn’t rely on them in site with a wider audience though!
Mohamed Mansour
February 5th, 2010
@jacob: You should have placed webkit as well in your examples.
Designely
February 5th, 2010
Great round-up.
When I see all of this, it makes me feel so limited because almost half of these are not supported on many browsers…
Here’s a hope for a change to happen someday!
Dominik H.
February 5th, 2010
I didn’t see you mention it but you have to use the gradient as a background-image like so:
background-image: -moz-linear-gradient(-90deg,#1aa6de,#022147);
Henry Slater
February 5th, 2010
“Along with RGBA, CSS3 may make the HSL color model available to us. This could give us a whole arsenal of colors and tones. ”
Hate to be a pedant but unless there’s something I’m missing, HSL doesn’t give us anymore colours than RGB. In fact, even if it could, most people’s graphical setup can ‘only’ do 16.7 million colours anyway.
Jordan
February 5th, 2010
I never knew about the border properties/width that you could use. I was trying to get an effect similar but gave up and went for a single border instead. Definitely redoing it to utilize this! :D
Thanks for the listings :)
Andrew Roberts
February 5th, 2010
@Russell: HSLA is really just like RGBA, but HSL with opacity. http://www.css3.info/preview/hsla/
@Tolana: Yeah, I didn’t really describe the downgrade in IE, kinda skipped that. My bad. Any CSS3 is pretty much a disaster in IE, as is anything in the web world. But I won’t go on one of my IE rants tonight! :) Thanks for sharing those downgrading tips with everyone.
@Chris: You’re right about multi-column layouts working in webkit browsers. I guess I got lazy at the end.
@Tobias: Yeah, I haven’t figured out the technique to getting both moz and webkit gradients working at the same time. Each time I add them both in together, neither one work. Anyone feel free to share if you know how to do that.
@Tim: Wow! That’s a mouthful of code for IE gradients, but I shall give it a try. Thanks.
@Mohamed: Some of the examples are working in webkit. I explained above why gradients aren’t working and that I also forgot the multi-column code for webkit. Any others that may not work are just because they aren’t supported in webkit, i.e. the Border Color style.
To everyone, thanks for the wonderful and encouraging feedback. For those who don’t know, this is the first article that I have ever written, so I’ll admit I made some mistakes. I look forward to writing on sixrevisions in the future, so stay tuned!
Maux™
February 6th, 2010
Great Post…
This works too…
.gradients{
background:#000;
height:100px;
width:100px;
background:-moz-linear-gradient(270deg,#F00,#00F);
background:-webkit-gradient(linear, left top, left bottom, from(#F00), to(#00F));
-ms-filter: “progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=’#FF0000′,EndColorStr=’#0000FF’)”;
}
See YA!
Jay
February 6th, 2010
I’ve been noticing a ton of stuff that does/doesn’t work in Safari for Mac that is not the same in Safari for Windows. Such a pain in the ass to constantly test and rework CSS that works fine in Firefox.
Ben
February 6th, 2010
You can use -o-whatever for opera
Ajay
February 6th, 2010
Excellent article! Thanks for sharing.
Louis
February 6th, 2010
Nice list here. I actually had never seen the multiple border colors before (or else I had forgotten about it).
A few of these are having problems, though.
Gradients: I don’t see the effect in any browser, including Chrome 4, FF 3.5, and Safari 4 (PC).
Transform: I don’t see anything in that demo that can’t be accomplished with CSS2. Isn’t it supposed to animate? I don’t see an actual animation, I just see each box turning into a bigger box. Maybe I’m wrong that it’s supposed to animate, but if not, then I don’t think the “transforms” feature is all that great.
Ironically, I’ve just put out a CSS3 Click Chart that demonstrates some of these plus a few more. (Sorry, Jacob, I feel like such a spammer! :) I’ll have to add border colors to a future edition.
Thanks again for this.
David Pratt
February 6th, 2010
Some good examples there. I wasn’t aware of the HSL colour model.
David Rojas
February 6th, 2010
About gradients, they only work for me in Safari/Chrome if you use rgb() for colors, not hex. I don’t know why I keep seeing everywhere examples using hex colors.
Doe
February 6th, 2010
Foremost a Christian? Ah well, goodbye respect then.
Ivan Mišić
February 6th, 2010
Nice examples :-)
ladaghini
February 6th, 2010
Not to be a jerk or anything, but in the multi column layout paragraph, you spelled ‘separate’ as ‘seperate.’
But anyways, I’m really looking forward to the multi column layout. It seems like the most practical addition to the current spec, especially with widescreen displays prevalent nowadays.
7Red
February 6th, 2010
Opera supports transistions, but you’ll have to add the -o- prefix.
CSS3 transitions and 2D transforms (really cool article with some CSS3 stuff)
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
BEBEN
February 6th, 2010
wow…ck..ck..ck
Dan
February 6th, 2010
This is one of the best posts I have seen on any tech tips topic. It’s plain spoken, looks nice and has the demo embedded in the page. The only change I would have made, is that I would have given each side of boarder example a different colour to show how that works.
As a guy who has been put off web development for years, I am happy to see the simplicity of these tips. Thank you.
Raphael
February 6th, 2010
Re: Your “About the Author”. The very first thing you mention is that you’re a christian. Get over it, I don’t care what you are. We came here to read about CSS3, not to learn your personal beliefs, religious convictions or spiritual aspirations.
Six Revisons should know better than to permit their content and their name to be used in such a manner.
James Cooper
February 6th, 2010
“Foremost a Christian? Ah well, goodbye respect then.”
I have to agree with Doe; this remark ought to be left aside.
Eric Di Bari
February 6th, 2010
It’s a shame such useful and time saving CSS declarations only work on firefox and safari. IE always seems to be behind the curve…
Clarence Johnson
February 6th, 2010
Thanks!
Andrew Roberts
February 6th, 2010
@Ben: Unless I’m mistaken, Opera doesn’t have most of these features. They are nowhere to be found on their dev site, and I did a check in the newest Opera browser at this site http://www.findmebyip.com/#target-selector and most aren’t supported.
@Louis: Look at my long response comment above for Chrome and Safari gradients, but the provided webkit code does work. You need Firefox 3.6 for moz gradients to work. Mozilla just implemented Firefox support for gradients. As for transform, the demo is using transform. With animation it would look better, but webkit is the only browser that supports animation right now.
I admit I made a few mistakes, but I plan to do better as I write future articles. I have gained a lot of respect for everyone out there that writes articles and tutorials. They take a lot more time than one might think. Again, thank you everyone for the kind comments.
klittle13
February 6th, 2010
When did the responses to the article go from the topic at hand to his own personal religious views & things he does in his spare time? You came to this page to read what he had to write about CSS3, so just leave it at that and leave your own opinions about his personal life out of the discussion.
Amanda Kay
February 6th, 2010
I love using the multi-colour border effect – hadn’t actually known about this before reading this article!
It works perfectly in Firefox but not in Chrome/Chromium. I’m not sure of the syntax and a quick google didn’t come up with anything. Would you know the syntax to use to ensure the effect works in Chrome please?
Raphael
February 6th, 2010
@klittle13
No problem, as long as he keeps his opinions of personal life to himself, instead of flogging them publicly in a CSS discussion. It’s a two way street and showed disrespect and poor regard to impose one’s personal beliefs on others. A case in point, we do not need to know the authors religious predilections, nor are they relevant to the discussion of CSS. Making a point to be sure we know such things, is commonly referred to as stirring the pooh, and causes issues. I don’t see many of the other authors on this site rushing to publicly exclaim their religious views (whether we want to read them or not). Doing so was in poor taste, disrespectful of other’s and that’s why some people made a point of complaining.
There’s nothing wrong with such beliefs. It’s proper and respectful behaviour to keep such things to oneself, instead of imposing them on others.
Louis
February 6th, 2010
Andrew,
I didn’t realize this was your first article. Great job. One thing I’ve learned about writing articles and tutorials, is that you have to be thick-skinned; people are merciless.
What’s interesting is that the people that were offended at your inclusion of personal information in your *personal* bio proceeded to make personal remarks themselves.
Well, that’s weird that you couldn’t get the gradients working in both Safari and Chrome. I still don’t see it working in any browser I use. Checkout the code on my examples here:
http://www.impressivewebs.com/css3-click-chart/
You’ll see that the gradient works in both Chrome and Safari flawlessly. I haven’t compared the code to see the difference, but something in yours must be preventing it from working.
Anyways, thanks again, looking forward to more stuff from you. Feel free to drop me a line through my website, I’d like to know specifically what kind of “C” you are. :)
Diz
February 6th, 2010
Nice article, just a pity you waste your time on religion :)
Anonymous
February 6th, 2010
In respect to the Christian theme: MOZ AND WEBKITS ARE THE DEVIL’S WORK! He’s a heretic! BUUUUURN HIM!
Andrew Vit
February 6th, 2010
First and foremost, I believe in unicorns. And for some reason it’s important that everyone knows this.
LOL. Religions.
Andy
February 7th, 2010
Pretty cool that most of these are non-standards-based things prefixed with -moz making them useless for web design.
Vladimir Remenar
February 7th, 2010
Nice article. Written techniques really are the ones developers should know.
But, there is a but… What’s the point using those for mainstream web site when leading (unfortunately) browser doesn’t support it and even worse when, almost, each browser requires it’s own notation. It just complicates thing’s and adds even more to already large CSS files.
I do understand it’s a great for show-off and demo sites but until it has been standardized it just doesn’t make any sense using it for mainstream sites.
Another fear I have is over-usage of new “powers” of CSS3. Just take a look at WordPress administration. Every button in it is rounded. Even worse, more and more sites are using drop shadows on content text! Readability? None!
Joe
February 7th, 2010
I’m too crazy playing with coding now.
Yeah~ instead of posting new design tuts, maybe play with some codings will be much more fun too! Cheers!
Matthew Hager
February 8th, 2010
I can’t believe anyone would hate on you because you say you are Christian in your bio. Isn’t that supposed to be about you/your background? I wish people would actually have an open mind and not get offended if they see the word Christian. They act like it offends them. One person even tries to say Six Revisions shouldn’t support you if you have that in your bio. That is complete nonsense! I think you should be measured on your writing skills/knowledge of the topic at hand.
Keep up the great writing and good job on your first post!
Andrew Roberts
February 8th, 2010
@Matthew and everyone else:
Thank you for all the wonderful support and compliments. That is one of the many reasons I am so eager to submit my next article :)
SM
February 9th, 2010
Helpful post. Thanks
Kai Köpke
February 9th, 2010
nice collection. some of the technics were really new to me. thankx
Mehmet ALP
February 9th, 2010
Perfect isCSS3 techqiues. Great posts Thanks.
Who cares
February 9th, 2010
Religion
Your religious affiliations or non-affliations don’t belong here. I don’t care if your Christian, Buddhist, Maoist, Taoist, Atheist, Monogamist, Polygamist, Voodooist or whatever other non-sensical belief system you have. None of it belongs here.
Omer Greenwald
February 10th, 2010
Great techniques! too bad IE still requires special treatment to implement many of them…hopefully IE9 will be more CSS3 compatible or in better scenario – people will switch to other browsers.
David
February 10th, 2010
@Who cares: All from one line in his bio? If nobody cares, why do you seem to care so much?
@Andrew: Cool tricks but half of them not showing on Mac/FF 3.5. And FYI Adobe AIR implements Webkit browser but most of these CSS tricks aren’t supported. And since they do stuff fundamental to the design and they aren’t supported in IE, it’s hard to suggest using them in production.
Jeff Chapman
February 11th, 2010
Yeah, I’m not seeing some of these effects either in Firefox 3.5.7 for Mac or Opera 10.10 for Mac. The information is nice to know, but I think we have a ways to go before we can really make practical and reliable use of these attributes.
Padizine
February 11th, 2010
Cool tricks there, but some of them don’t seem to work in Chrome. Sadly, it’s going to take a while until all of this can go mainstream :(
About the Christian thing, I’ll have to say that it sounded a bit weird when I first read it, but it’s your business not mine, I’m here for some CSS3 goodness!
Good luck Andrew, keep up the good work.
molokoloco
February 12th, 2010
Just a tips..
For a chance to maximize browsers comptatiblity.. you should use the three prefixes for property… : eg
-moz-box-shadow: 3px 3px 16px rgba(60,90,126,0.6); /* Mozilla product */
-webkit-box-shadow: 3px 3px 16px rgba(60,90,126,0.6); /* Webkit product */
box-shadow: 3px 3px 16px rgba(60,90,126,0.6); /* When became a standard */
DiggReader
February 12th, 2010
Copied from a Digg comment I just read:
“In my opinion, it’s an issue of good manners and respect for others. Looking at other authors on the site, I didn’t see them do that. I also don’t see:
“…first and foremost a Muslim…”
or
“…first and foremost a Jew…”
or
“…first and foremost a Buddhist…”
and so on…
In my opinion, it was just bad manners for that author to say that in that article. There’s nothing wrong with his pursuits, if that’s what works for him, then it’s great. What he should have placed was relevant information about him – Meaning relevant to the discussion (CSS).
Blurting out his religious convictions was not in line with the topic (and it was kind of rude and crass).”
OffTopic
February 12th, 2010
@DiggReader: It’s rude and crass to blast someone for their personal beliefs. How would you respond/feel if someone did the same to you?
@Who cares:
“Your religious affiliations or non-affliations don’t belong here. I don’t care if your Christian, Buddhist, Maoist, Taoist, Atheist, Monogamist, Polygamist, Voodooist or whatever other non-sensical belief system you have. None of it belongs here.”
…but aren’t you espousing your belief system by claiming that you don’t believe in religions?
@Raphael:
“The very first thing you mention is that you’re a christian. Get over it, I don’t care what you are.”
If you don’t care why do you bring it up?
DiggReader
February 12th, 2010
Yes you are right, this is rude, but when someone does something inappropriate, they are going to get told off.
Pushing religion in peoples faces is going to result at some point in people telling them off, as seems to have happened here.
Most people understand that religion is a personal and often private matter, so they don’t blurt out statements that are perceived as disrespectful. There’s enough tension in the world without people (like the author) adding to it. Blurting such things out is just not done.
A case in point, you don’t read all the other authors here rushing to put that in their profiles, and some of them are sure to be devout.
Also, if someone did this to me, it was probably because I asked for it. And yes it’s happened to me, and yes, I did ask for it.
The same happened to this author, hopefully everyone (including him) learned from it.
One thing, I copied that content from another site (Digg), so the words are not mine, it was to show that others pointed out that it was not about who believes what, instead it was about manners and respect for others.
lfom
February 15th, 2010
The gradient code/example doesn’t work for me (Safari 4.0.4 and Chrome 5.0.307.7 beta on Mac). Maybe you need to update or fix the code. More info below.
http://webkit.org/blog/175/introducing-css-gradients/
Cheers
Andrew Roberts
February 16th, 2010
@Ifom: Read my comments above ^
Mark
February 17th, 2010
Gotta love multi borders!
Gene
February 21st, 2010
The man said he is a christian and people start throughing stomes. And as a christian it is good to see he stands for his conviction. Besides why would it matter? You read his post and maybe found something useful and then want to complain about what he beleives rather than just say thank you.
Georgina
February 22nd, 2010
Thanks so much for this. I’ve had a play over the weekend and am very impressed with what’s coming up. :)
Xrvel
February 24th, 2010
I want to say WOW. The gradient thing, opacity (although is doable in previous CSS), selection, are incredible.
Arte
March 1st, 2010
Very impressive collection of samples. Will put it into my bookmarks right away!
janyropal
March 22nd, 2010
Useful article.
Lj Tyson
March 28th, 2010
Everything works in firefox/chrome except the multi column and the gradient. the rest is perfect!
Bhuwan Roka
April 27th, 2010
Nice ya…keep it up
Rod Whisnant
April 29th, 2010
Nice post. I especially like using HSL when creating gradients.
@rodwhisnant
JayTurn
April 30th, 2010
Great article about the new CSS3 features. You really broke down the main areas with such simplicity.
I’m a big fan of the multi column layout and the transform features. Though they have potential for overuse, I think used sparingly they could work well for some designs.
johan stockmarr
May 8th, 2010
Nice work. This will be a bookmark for my future update to css3
// Johan Stockmarr
Supasta
May 10th, 2010
Nice, like the RGBA Demo and Transform. They should be great tools for web and graphic design work. Too bad bout IE not supporting. Nothing new though. Just makes more work. Hope I can bill for it!
gekko
May 17th, 2010
Nice, like the RGBA Demo and Transform. They should be great tools for web and graphic design work. Too bad bout IE not supporting. Nothing new though. Just makes more work. Hope I can bill for it!
kodes
May 17th, 2010
Great article about the new CSS3 features. You really broke down the main areas with such simplicity.
I’m a big fan of the multi column layout and the transform features. Though they have potential for overuse, I think used sparingly they could work well for some designs.
nikhil
June 19th, 2010
thanks for sharing…..nice one post.
Abhisek
July 13th, 2010
Very nice article. Learnt a lot. thanks a ton
CSSReX
September 13th, 2010
Amazing tuts, I appreciate alot..
Thanks
Paul
September 22nd, 2010
It is just as Jesus said it would be before His return. And when He does, EVERYONE will know the truth, bow the knee and confess He is Lord.
Knowing who you REALLY work for makes all the difference Andrew.
Excellent article BTW.
Andrew Roberts
October 19th, 2010
@Paul: I just now saw your comment. You are correct brother! Thanks for the encouragement :)
Joshua Dorkin
December 29th, 2010
Great tutorials; thanks for sharing. Time to get busy learning CSS3 . . .
Steve
January 23rd, 2011
Thanks!
tiff
April 8th, 2011
Great article and just the info I was looking for!
PS. it’s so typical how someone can see/hear the word Christian and be totally offended, then the jabs start flying. But it’s just as He said it would be and Christians know that.
If only the hatred for Christians could be deflected to IE instead!!
Andrew Roberts
May 26th, 2011
@tiff: Thank you, I’m glad I could be of help :)
And yes, it is exactly (one of the many) things He said. I have not let the comments on this article get to me. Actually, they have pushed me even more toward Seminary and a life of service to our Lord. Thanks for the kind comments!
Mystikan
August 6th, 2011
Andrew, after reading through the discussion on this site and seeing both the reactions of atheists and your Christian supporters I felt compelled to point out a few things.
The reason these atheists are offended at you posting your religion is for much the same reason as if you had posted that you were a supporter of the Taliban, because to them it’s become one and the same.
If you visit ThinkAtheist or just about any other atheist community website, you can read hundreds of horror stories about these people being harassed, bullied, assaulted, ostracised, driven from their homes and communities, and in some cases even jailed on trumped-up charges – all by Christians. You may recall that George Bush, when he was in power, even said something to the effect that atheists should not even be considered citizens. If that isn’t persecution, what is?
Maybe you aren’t like them, maybe you have never attacked an atheist for his or her worldview, but plenty of Christians have and continue to do so.
So for many of those people, who have led hard lives as the victims of vicious intolerance and injustice at the hands of Christianity, you may as well have said you belong to a sect that holds that all infidels should be executed, because that is their experience of Christians. It has nothing to do with “Jesus said people would do this in the end times”, and everything to do with the fact that many Christians have been persecuting those who don’t share their beliefs. These people have simply had enough, and they are fighting back for their freedom and justice the only way they know how.
I’m not saying this to belittle your belief in Jesus, or to say anything about the wrongness or rightness of your identification as a Christian in your bio, but simply to help you and the other Christians on this page why many atheists get this heated about religion. There’s a lot of pain and injustice behind that anger.
But don’t just take my word for it. I ask you, respectfully, to visit http://www.thinkatheist.com/forum and read some of the peoples’ stories there. I hope that you will come to understand, by reading what some of these people have gone through, why you have received such a negative response to your emphasis on your religion.
cayun
August 30th, 2011
greats work, i like it, thanks before
Puneet Sahalot
September 21st, 2011
Multi column CSS 3 stuff is awesome! Earlier I had been using custom classes for generating column layouts. But, it’s pretty easier to work with CSS 3 column layouts. :)
JC
September 27th, 2011
A great collection, cheers! Will be referring to this for a while to come.
Marco Berrocal
September 28th, 2011
The only one I would not use right now is obviously the multicolum one. I would maybe add text-shadow :-)
rafeeq ali
October 12th, 2011
Good. Multi column CSS 3 stuff is awesome!
Leave a Comment