Shop Mobile More Submit  Join Login

:iconim-not-sana: More from im-not-sana

Featured in Collections

Journals by WannieWirny

Journal Templates and Custom boxes by KovoWolf

:dA_customization by el-L-eN

More from DeviantArt


Submitted on
May 27, 2013
Submitted with Writer


52 (who?)

PE: CSS3 101 - Introduction

Mon May 27, 2013, 3:14 PM

Hey there Devious CSSkinners! :wave:

First off, hover over the Title and Stamp to see some snazzy effects. That's the kind of stuff that CSS3 allows users to play around with. As I had been an Alpha Tester on devBUG, we had a few CSS3 privileges to test in Journal Skins in which several deviants had asked me "How did you do that?" and "Please share the code so we can learn" so I've been meaning to give a few lessons on CSS3 since forever and projecteducate has given me the opportunity to do so :meow:

These are the Topics that will be covered this week:

I'll try to be as simple as possible with these topics and not get too technical so that it's easy for beginners to understand. However, as we go along I advise you to try and follow each article in order to avoid any confusions since the newer ones will contain information only explained in previous articles.

What is CSS3?

So first of all, what in the world is CSS? :confused: Counter Strike Source? :slow:
Nope, It stands for Cascading Style Sheets! :dummy:

That basically means it's a computer language used to style how your webpages look.

CSS was first introduced to the World Wide Web Consortium (W3C) in the mid 1990's because of the need to style electronically published documents. For example, if a News Agency wanted to publish their news online, there was no way to have their page in a newspaper format. Finally the CSS syntax was launched in December 1996. Since then, browsers have been modified and developed to meet its standards and CSS was revised again and again and variations were introduced such as CSS1, CSS2.1, CSS3.

One of the advantages was that it would increase the speed of accessing a website that would use CSS as opposed to accessing a website that purely uses images to style their webpage. There were many visual features that could be controlled. Another advantage was that it produced better and more flexible markup between browsers that was easy to maintain and extend in the future.

With the advancement of technology such as HTML5, JavaScript and CSS3, there was no longer any need to animate web pages using Flash and other such tools that would kill the speed as well as not being compatible on all browsers. The major advantage about this new technology is the cross-browser compatibility as well as on Mobile web browsers for Smartphones. So basically thanks to CSS, we can decide how we want to showcase ourselves to appeal others on the internet.

Still following?

Good. Cause now I've got some CSSecksy samples for you to drool over! :#1:

CSS3 Images

These iOS icons were made only with CSS3

The iPhone was created purely in CSS3, no images used at all. However, the animations were done in JavaScript.

This whale was designed completely in CSS3, down to the last curve! And then also animated using CSS3 as well. The animation only supports webkit browsers however.

CSS3 Animations

Google Doodles have the best CSS3 Animations ever! Click on the play button and enjoy the show!

Pull the lever to see the CSS3 magic happen! Works best on Chrome.

With the help of some Javascript to calculate the beats, the CSS3 used in these interactive music albums is amazing!

Now that you've seen those lovely examples, I'll be instructing you on what it all means and how they work in the following articles - Same time, Same place! So stay tuned folks! No, really.. I'll even give you free cookies!

Useful Links

If you'd like to learn more about CSS basics, I suggest you have a look at these groups:
:iconcss-dyk: :iconecssited:

If you'd like to learn how to create your own Journal Skin, here's a good tutorial by miontre

#ProjectEducate presents CSS3 101 written by Sana.
This Article introduces the topics, presents some examples and describes the history briefly.

CSS3 101 Topics:
May 27th - Introduction
May 28th - Color Gradients
May 30th - Pseudo-elements & Pseudo-classes
May 31st - Transition Animations
June 2nd - Conclusion
Add a Comment:
sulaman Featured By Owner Oct 1, 2013

Have made a similar website, based on CSS3. 

Hope this may help you.

Bella520 Featured By Owner May 30, 2013  Student Writer
5555555我正在学习PS,基础打得有点差, 不知道后面会不会跟上.
im-not-sana Featured By Owner May 30, 2013  Hobbyist General Artist
Sorry I don't speak Chinese ^^; and Google Translate is horrible.. but you're learning PS as in Photoshop? Sorry, this isn't a tutorial for Photoshop :( It's about web programming using CSS3 and HTML :)
Kaeni-X Featured By Owner May 29, 2013
Interesting ^
I shall definitely stalk your articles djvdfvjd ;v;
im-not-sana Featured By Owner May 30, 2013  Hobbyist General Artist
Awesome! :iconeagerpee:
PurpleInk777 Featured By Owner May 28, 2013
I am loving this article! Not only is it concise, but the graphics are priceless! Especially the animated ones! :la:

Thanks for sharing! :clap:
im-not-sana Featured By Owner May 29, 2013  Hobbyist General Artist
Thank you for taking the time to read it! :aww:

Haha yeah the gifs have an amazing way of summing up how you feel :nod:
PurpleInk777 Featured By Owner May 29, 2013
You're very welcome! :iconhowdyplz:

Don't they ever? I'll have to work some entertaining gifs into my own material! ;)
iAmoret Featured By Owner May 28, 2013  Hobbyist Photographer
Oh, Lawdy, am I looking forward to this! :la:

Internet cookies- very clever. :eyes: I happen to have cookies tuned off, so there. :iconsothereplz: (I'm watching my cyber figure :giggle:)
im-not-sana Featured By Owner May 28, 2013  Hobbyist General Artist
:lmao: Think we could work on your cyber-figure with a little surfin' on the web :iconsurfingplz:


And glad to hear that! I've just posted the first article here if you'd like to have a look :aww:
Add a Comment: