Menu

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!

CSS Techniques You Should KNow

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:

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

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.

This was published on Feb 5, 2010

102 Comments

Russell Bishop Feb 05 2010

Nice helpful collection, did you miss out hsla on purpose?

@dworni Feb 05 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

Thanks for sharing ;) !
I know all these techniques,
just one not: That a border can have multiple border(-colors) :D !

great works, wow effekt of the article

Jacob Ras Feb 05 2010

Nice article, thanks! :)

Excelente post¡¡ Gracias¡

Jordan Walker Feb 05 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. Feb 05 2010

you got some talent kid
keep it up

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 Feb 05 2010

Super round up Andrew, bookmarked this for my migration to css3 at easter.

Thanks,

Lee.

Kelley Thompson Feb 05 2010

Two words: awe-some! :)

Multi-column layout also works with Safari.

-webkit-column-width: 13em;
-webkit-column-gap: 1em;

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.

Nice summary, thanks.

Eric D. Greene Feb 05 2010

Good list to get started with, thanks!

Excellent article, thank you!
But when all browsers will support CSS3… ?

Thanks for the post, i like the gradient technique

Nick Parsons Feb 05 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.

Some great stuff…can’t wait until this is supported across the board…whenever that is.

For gradients in IE, you can use this:
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=’#EFC381′, EndColorStr=’#E6A542′);

Rebecca Feb 05 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 Feb 05 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 Feb 05 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 Feb 05 2010

@jacob: You should have placed webkit as well in your examples.

Designely Feb 05 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. Feb 05 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 Feb 05 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.

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 Feb 05 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™ Feb 06 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!

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.

You can use -o-whatever for opera

Excellent article! Thanks for sharing.

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 Feb 06 2010

Some good examples there. I wasn’t aware of the HSL colour model.

David Rojas Feb 06 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.

Foremost a Christian? Ah well, goodbye respect then.

Ivan Mišić Feb 06 2010

Nice examples :-)

ladaghini Feb 06 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.

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/

wow…ck..ck..ck

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 Feb 06 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 Feb 06 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 Feb 06 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 Feb 06 2010

Thanks!

Andrew Roberts Feb 06 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 Feb 06 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 Feb 06 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 Feb 06 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.

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. :)

Nice article, just a pity you waste your time on religion :)

Anonymous Feb 06 2010

In respect to the Christian theme: MOZ AND WEBKITS ARE THE DEVIL’S WORK! He’s a heretic! BUUUUURN HIM!

Andrew Vit Feb 06 2010

First and foremost, I believe in unicorns. And for some reason it’s important that everyone knows this.

LOL. Religions.

Pretty cool that most of these are non-standards-based things prefixed with -moz making them useless for web design.

Vladimir Remenar Feb 07 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!

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 Feb 08 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 Feb 08 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 :)

Helpful post. Thanks

Kai Köpke Feb 09 2010

nice collection. some of the technics were really new to me. thankx

Mehmet ALP Feb 09 2010

Perfect isCSS3 techqiues. Great posts Thanks.

Who cares Feb 09 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 Feb 10 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.

@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 Feb 11 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 Feb 11 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 Feb 12 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 Feb 12 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 Feb 12 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 Feb 12 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.

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 Feb 16 2010

@Ifom: Read my comments above ^

Gotta love multi borders!

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 Feb 22 2010

Thanks so much for this. I’ve had a play over the weekend and am very impressed with what’s coming up. :)

I want to say WOW. The gradient thing, opacity (although is doable in previous CSS), selection, are incredible.

Very impressive collection of samples. Will put it into my bookmarks right away!

janyropal Mar 22 2010

Useful article.

Lj Tyson Mar 28 2010

Everything works in firefox/chrome except the multi column and the gradient. the rest is perfect!

Bhuwan Roka Apr 27 2010

Nice ya…keep it up

Rod Whisnant Apr 29 2010

Nice post. I especially like using HSL when creating gradients.

@rodwhisnant

JayTurn Apr 30 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 08 2010

Nice work. This will be a bookmark for my future update to css3

// Johan Stockmarr

Supasta May 10 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!

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!

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.

thanks for sharing…..nice one post.

Abhisek Jul 13 2010

Very nice article. Learnt a lot. thanks a ton

Amazing tuts, I appreciate alot..

Thanks

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 Oct 19 2010

@Paul: I just now saw your comment. You are correct brother! Thanks for the encouragement :)

Joshua Dorkin Dec 29 2010

Great tutorials; thanks for sharing. Time to get busy learning CSS3 . . .

Thanks!

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 26 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 Aug 06 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.

greats work, i like it, thanks before

Puneet Sahalot Sep 21 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. :)

A great collection, cheers! Will be referring to this for a while to come.

Marco Berrocal Sep 28 2011

The only one I would not use right now is obviously the multicolum one. I would maybe add text-shadow :-)

rafeeq ali Oct 12 2011

Good. Multi column CSS 3 stuff is awesome!

This comment section is closed. Please contact us if you have important new information about this post.

Partners