CSS3 – Just When You Thought You Knew It All
You can do that?
So I read an article today that I thought was going to suck. Nope, I was wrong. While I knew most of it, there was one thing that popped out at me today. See? Learnin’ all the time! CSS3 has some cool stuff that is easier to do than opening up Photoshop and creating an image for it. If you got my tweet today, which most of my subscribers didn’t because you don’t follow me on twitter (FOLLOW ME!), then you have an inkling of what I am talking about.
Text-shadow is a really good addition to CSS, I use it on my titles and what-not, and with the use of blur on them, it creates a nice subtle effect. What I did NOT know, is that you can have multiple shadows on the text, adding more awesome to the already kick ass property. Let me show you what the styles look like.
text-shadow: 4px -2px 11px #0033FF, 2px -7px 10px #00CCFF, 5px -8px 26px #00CCCC, 4px 6px 9px #999999;
Yep! You read that right, there are 4 shadows going on there
Holy hell, 4 text-shadows thrown on to create, while not a stellar looking effect, a crazy looking block of text. You know what is even more nuts than that? Can you guess? GOOD JOB! You guys are smarter than I thought, and you are right. You can add as many text-shadows as you want on that thing, seperated by commas. Not only that, but you can do the same thing for box shadows.
This just proves that there is always something new to learn about the things you think are are good at. Obviously I won’t be using this type of effect all that much, but it altered my way of thinking about CSS3 a little. If I can do this…maybe I can do something else that I didn’t think of.
Any other CSS3 stuff you guys know that others might not? Let us know here!
Oh, and I styled the demo buttons finally. Always adding stuff here.
This selector will get elements that are the only child of its parent. Below will get all ‘p’ tags that are the only child of their parents.