CSS3: cosa è e a che serve.

Creato il 18 ottobre 2012 da Capitainweb @capitainweb

Il CSS (Cascading Style Sheet) è un particolare linguaggio utile a definire la formattazione di pagine HTMLXHTML e XML. Tale linguaggio è incluso in files detti fogli di stile (style sheets, appunto). Con l’introduzione dei fogli di stile si è voluto separare definitivamente il contenuto delle pagine web dalla formattazione, ottenendo così un codice più chiaro e di più semplice manutenzione, oltre che maggiormente portabile.

Il fine ultimo di ciò è cercare di avere in una pagina Html una grafica sicuramente più accattivante e degli effetti sicuramente più interessanti rispetto al classico codice già esistente.

L’organismo responsabile della standardizzazione e dell’emanazione delle specifiche del linguaggio CSS è il famosissimo W3C, il quale ormai da tempo lavora costantemente sullo sviluppo di un nuovo standard per i fogli di stile, e cioè CSS3.

Sebbene il CSS3 non sia ancora diventato un vero e proprio standard, i moderni browser implementano già molte delle sue funzioni, e ne aggiungono sempre di nuove ogni volta che il W3c pubblica nuove specifiche (ovviamente non essendo ancora ufficiale ogni browser può avere diverse frequenze di aggiornamento e diverse interpretazioni degli standard).

A cosa serve il CSS3

CSS3 dovrebbe risolvere alcuni bug di interpretazione di Internet Explorer ed introdurre migliorie nella gestione degli sfondi e funzionalità avanzate (come bordi arrotondati ed ombreggiature) attualmente impossibili con l’attuale CSS 2.1 (a meno di ricorrere escamotage più o meno elaborati con l’utilizzo delle immagini).

In sostanza effetti e soluzioni che attualmente richiedono tecniche piuttosto avanzate e particolare ingegno del designer saranno rese più immediate e (quasi) alla portata di tutti.

Quindi in parole povere, perchè devo usare il CSS?

1. CSS vuol dire aspetto. Grazie alla semplicità e alla forza di questo linguaggio, possiamo creare tutti i tipi di layout che vogliamo. Se ci ricordiamo i primi anni del web, tutto ciò non era minimamente pensabile.

2. Il CSS ci server per formattare le pagine Web. Di solito viene chiamato foglio di stile ed è associato a una o più pagine Web. Esso può essere interno o esterno ad una pagina.

3.  Il CSS ci permette di avere box arrotondati, gradienti di colore, effetti ombra e molto altro. E’ supportato ormai da tutti i browser che utilizziamo, vedi  Firefox, Opera, Chromie e Safari, ma non da IE, almeno fino alla versione 8. Il nuovo IE9 è in grado, finalmente, di supportare questo nuovo standard.

Quindi oggi vi vogliamo segnalare 47 utilissimi tool e tutorial (per la maggior parte in lingua inglese)

1. Swatch Book with CSS3 and jQuery

Demo

2. 3D Thumbnail Hover Effects

Demo

3. Create a Stunning Menu in CSS3

Demo

4. More Efficient CSS3 Transitions

Demo

5. Create Fluid Layouts with CSS3 and HTML5

Demo

6. Mastering CSS3 Multiple Backgrounds

7. Custom Drop-Down List Styling

Demo

8. Quickly Build a Swish Teaser Page With CSS3

Demo

9. Growing Thumbnails Portfolio

Demo

10. Button Switches with Checkboxes and CSS3 Fanciness

Demo

11. CSS3 Filters: Altering HTML and Images with just CSS

12. 3D Flipping Circle with CSS3 and jQuery

Demo

13. Making an Impressive Product Showcase with CSS3

Demo

14. CSS-Only Responsive Layout with Smooth Transitions

Demo

15. Creating an Animated 3D Bouncing Ball with CSS3

Demo

16. Making a Page Flip Magazine with turn.js

Demo

17. Animated 3D Bar Chart with CSS3

Demo

18. A Pure CSS3 Cycling Slideshow

Demo

19. Annotation Overlay Effect with CSS3

Demo

20. How to Create an Interactive Graph using CSS3 & jQuery

Demo

21. Fluid CSS3 Slideshow with Paralax Effect

Demo

22. Create a Sticky Note Effect with CSS3 and HTML5

Demo

23. Animated Content Tabs with CSS3

Demo

24. Swishy CSS3 Navigation

Demo

25. Rotating Words with CSS Animations

Demo

26. How to Create Accordion Menu in Pure CSS3

Demo

27. Login and Registration Form with Html5 and CSS3

Demo

28. An Introduction to the CSS Flexbox Module

Demo

29. Responsive Content Navigator with CSS3

Demo

30. Recreating the IBM Lotusphere Logo in CSS3

Demo

31. Apple-like Login Form with CSS 3D Transforms

Demo

32. CSS3 Dropdown Menu

Demo

33. Original Hover Effects with CSS3

Demo

34. CSS3 Menu Navigation Effect

Demo

35. CSS3 with jQuery / Reverse Animation

Demo

36. CSS3 Progress Bars

Demo

37. Creating a PHP and CSS3 Powered About Page

Demo

38. How to Create a Beautiful Icon with CSS3

Demo

39. Create 3D Ribbons Only Using CSS3

Demo

40. Create an Upload Form using CSS3, HTML5 and jQuery

Demo

41. Create an Video Player with jQuery, HTML5 & CSS3

Demo

42. Master the new CSS layout properties

Demo

43. Image Accordion with CSS3

Demo

44. Modern Lightbox with CSS3 and JavaScript

Demo

45. Create a Beautiful Password Strength Meter

Demo

46. Fullscreen Slit Slider with jQuery and CSS3

Demo

47. The Facebook Loading Animation

Demo

via http://www.1stwebdesigner.com/css/45-useful-css3-tutorials-and-techniques/

http://www.easy-grafica.com/css-3-la-nuova-frontiera.php


Potrebbero interessarti anche :

Possono interessarti anche questi articoli :