Shop Mobile More Submit  Join Login

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
:thumb354675797:




#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:
 
:iconsulaman:
sulaman Featured By Owner Oct 1, 2013
Hi, 

Have made a similar website, based on CSS3. 


Hope this may help you.

Reply
:iconbella520:
Bella520 Featured By Owner May 30, 2013  Student Writer
5555555我正在学习PS,基础打得有点差, 不知道后面会不会跟上.
Reply
:iconim-not-sana:
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 :)
Reply
:iconk-a-e-n-i:
K-a-e-n-i Featured By Owner May 29, 2013
Interesting ^
I shall definitely stalk your articles djvdfvjd ;v;
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 30, 2013  Hobbyist General Artist
Awesome! :iconeagerpee:
Reply
:iconpurpleink777:
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:
Reply
:iconim-not-sana:
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:
Reply
:iconpurpleink777:
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! ;)
Reply
:iconiamoret:
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:)
Reply
:iconim-not-sana:
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:

:giggle:

And glad to hear that! I've just posted the first article here if you'd like to have a look :aww:
Reply
:iconiamoret:
iAmoret Featured By Owner May 29, 2013  Hobbyist Photographer
:giggle: Maybe later- I've been pretty shut down since I got this virus. :blownose:

:D

Done! :dummy:
Reply
:iconlablayers:
LabLayers Featured By Owner May 28, 2013  Student Interface Designer
Awesome! :la:
Reply
:icontehangelscry:
TehAngelsCry Featured By Owner May 28, 2013  Professional Interface Designer
I freaking love seeing all of these CSS3 images. Like this, the Mona Lisa in CSS: [link]
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 28, 2013  Hobbyist General Artist
Ooh yeah I've seen that before, it's very inspiring :D I don't know how they had the time to make that (or if they created a generator for it) but it is quite useful using CSS3 to create images for logos, banners and such especially if you'd like to animate it :nod:
Reply
:icontehangelscry:
TehAngelsCry Featured By Owner May 28, 2013  Professional Interface Designer
It looks like they used a generator - but it's still impressive XD
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 29, 2013  Hobbyist General Artist
Definitely! :D
Reply
:iconharpiya:
Harpiya Featured By Owner May 28, 2013  Professional Digital Artist
Cool stuff, gonna follow this one :3
I remember when I've heard first time about CSS (years ago) I also thought it's about Counter Strike XD
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 28, 2013  Hobbyist General Artist
I love Counter Strike :D but yeah, I've heard a lot of people getting confused over it :giggle:

and YAY :happybounce: hope you'll find my articles useful!
Reply
:iconinfinitai:
Infinitai Featured By Owner May 28, 2013  Student Artist
This really caught my attention, :clap: the nice hover thing, the rainbowlicious header, its just perfect :love:
Cant wait for the rest of the articles, im almost here to begin the basics of CSS3. :nod:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 28, 2013  Hobbyist General Artist
Glad to hear! :eager:
Reply
:iconarichy:
Arichy Featured By Owner May 27, 2013  Hobbyist General Artist
:iconlawooplz:
Reply
:iconbradleysays:
bradleysays Featured By Owner May 27, 2013
:eager:
Reply
:iconcaringheartttr:
CaringheartTTR Featured By Owner May 27, 2013  Hobbyist General Artist
Very interesting, awesome examples. Looking forward to the rest.
Great job to put an article together that someone actually keeps reading. You've got me exited for upcoming information.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 28, 2013  Hobbyist General Artist
Thanks! :)
Reply
:iconcaringheartttr:
CaringheartTTR Featured By Owner May 28, 2013  Hobbyist General Artist
You're welcome. :)
Reply
:iconkaz-d:
Kaz-D Featured By Owner May 27, 2013  Hobbyist Photographer
I R EXCITED!
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 28, 2013  Hobbyist General Artist
:icongwahplz: YOU SHOULD BE!
Reply
:iconsimplysilent:
SimplySilent Featured By Owner May 27, 2013
So jelly that alpha testers can use CSS3 :grump:
Very excited to read the rest of your articles though! :la:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 28, 2013  Hobbyist General Artist
I know :saddummy: It's about time they let Beta Testers use it :shakefist:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner May 28, 2013
I'll be eagerly waiting the day! :#1:
Reply
:iconpizzapotatonbacon:
PizzaPotatoNBacon Featured By Owner May 27, 2013  Student General Artist
AMFG :iconexcitedlaplz: I can't wait!
Reply
:iconastrikos:
Astrikos Featured By Owner May 27, 2013   General Artist
:eager: Awesome!
Reply
:iconmiontre:
miontre Featured By Owner May 27, 2013  Hobbyist Photographer
Yay! :la: Excitement. :)
Reply
Add a Comment:
 
×

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


Featured in Collections

Journal Templates and Custom boxes by KovoWolf

Journals by WannieWirny

:dA_customization by el-L-eN


More from DeviantArt



Details

Submitted on
May 27, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
4,816 (5 today)
Favourites
52 (who?)
Comments
32
×