Εισαγωγή στο CSS3 - Μέρος 1ο: Τι είναι το CSS3



Από καιρό ήθελα να γράψω ένα άρθρο με θέμα τις νέες δυνατότητες του CSS 3 και τώρα που τελείωσε η εξεταστική μου και έχω λίγο παραπάνω χρόνο ,νομίζω ότι είναι η πιο κατάλληλη στιγμή να το κάνω !

Το άρθρο αυτό σηματοδοτεί την αρχή για τα υπόλοιπα άρθρα που θα ακολουθήσουν, στα οποία θα δούμε τι είναι το νέο CSS3 πρότυπο το οποίο εδώ και λίγο καιρό έχει αντικαταστήσει το CSS2.

   Θα ξεκινήσουμε από την αρχή - για όλους αυτούς που μπορεί να μην έχουν καν ακούσει για CSS3, για να κατανοήσετε όλοι και δείτε με παραδείγματα αργότερα τι είναι και τι το διαφορετικό έχει το CSS3.

ΤΙ ΕΊΝΑΙ ΤΟ CSS3 .

CSS3 είναι η επόμενη γενιά του CSS το οποίο βρίσκεται σε μια συνεχή φάση ανάπτυξης και αναμένεται να αλλάξει όλο τον παγκόσμιο ιστό όταν οριστικοποιηθεί .
Είναι σε εξέλιξη από το 2002 και δεν έχει ακόμη ολοκληρωθεί.
Τα περισσότερα προγράμματα περιήγησης (με εξαίρεση το IE ) υποστηρίζουν σε μεγάλο βαθμό τις ιδιότητες του CSS 3.

Χρησιμοποιώντας CSS3 μπορούμε να δημιουργήσουμε όμορφα εφέ, που με τις κλασικές μεθόδους χρειαζόμαστε αρκετό κόπο, javascript και περισσότερο γράψιμο xHTML/CSS.
Αντί να χρησιμοποιήσουμε λοιπόν τις εικόνες και πολύπλοκο CSS μπορούμε να καθορίσουμε έναν νέο CSS3 κανόνα πχ. στρογγυλεμένες γωνίες και τα δεδομένα να παράγονται από τα browsers , μειώνοντας έτσι χρόνο φόρτωσης και sever requests.
CSS3 ιδιότητες  επιτρέπουν να γίνει μια πολύ καλύτερη διαδικασία το web design και αν ρίξετε μια μάτια σε ξένες ιστοσελίδες θα δείτε ότι ήδη οι περισσότεροι web designers βασίζονται αποκλειστικά η εν-μέρη στο CSS3 για την κατασκευή ιστοσελίδων .

   Οι περισσότερες CSS3 τεχνικές μπορεί ήδη να εφαρμόζονται στα πρότυπά σας .
Το σίγουρο είναι πάντως ,ότι τα καινούργια πρότυπα που διαθέτει το Blogger σίγουρα χρησιμοποιούν CSS3 .

ΤΟ CSS3 ΣΉΜΕΡΑ :


Αυτήν τη στιγμή - Safari, Chrome, Firfox, Opera 10.5 alpha και IE9 Preview υποστηρίζουν μεγάλη ποικιλία από συγκεκριμένες CSS3  μορφές.
Το μειονέκτημα με το CSS3 όπως με όλα τα web design είναι ότι IE δεν τα υποστηρίζει πλήρως . ( και τι υποστηρίζει να μου πείτε,αλλά άλλο κεφάλαιο αυτό )
Η τρέχουσα σταθερή έκδοση του IE8 browser έχει ελάχιστη υποστήριξη για CSS3 , Όμως το IE9 που είναι σήμερα σε εξέλιξη θα υποστηρίζει πλήρως το CSS3.
Το πρόβλημα με τα IE9 είναι ότι θα διατίθεται μόνο σε Vista λειτουργικά συστήματα και άνω και όχι για τα XP δυστυχώς  , τα οποία ένα μεγάλο ποσοστό εξακολουθούμε να χρησιμοποιούμε .

ΤΑ ΧΑΡΑΚΤΗΡΙΣΤΙΚΆ ΚΑΙ ΤΑ ΟΦΈΛΗ ΤΟΥ CSS3


CSS3 προσφέρει κάποια σπουδαία  νέα  selectors , τα  οποία θα δώσουν στους web designers, όχι μόνο καλύτερη εμφάνιση από τις εικόνες, αλλά και πολλές δυνατότητες εξοικονόμηση χρόνου  για να έχουν το επιθυμητό τελικό αποτέλεσμα .
Τα κύρια οφέλη του CSS3 είναι ότι επιτρέπει την δημιουργία  λειτουργιών  του στυλ  Javascript , χωρίς όμως να χρησιμοποιείται .
Ένα άλλο συν στο CSS3 είναι η δυνατότητα δημιουργίας απίστευτων γραφικών,που μέχρι τώρα χωρίς το Photoshop ήταν αδύνατον να δημιουργηθούν .

ΤΙ ΜΠΟΡΟΎΜΕ ΝΑ ΚΆΝΟΥΜΕ ΜΕ CSS3


Εδώ είναι μια μικρή λίστα από CSS3 selectors   

  • Στρογγυλεμένες  γωνίες  (rounded corners) 
  • Gradients
  • Σκιά σε κείμενο (text shadow)
  • Animations
  • Διαφάνεια (Opacity)
  •  Box shadow
  • Χρήση πολλαπλών εικόνων φόντου (Multiple background images )
  • RGB τιμές χρωμάτων (RGB color values)
  • Χρήση οποιαδήποτε γραμματοσειράς επιθυμούμε με  @font-face  
  • Border image  και Multiple borders  
  • Opacity  
  • User interfaces,όπως box sizing και  resizing
  • Multi –column
Και αρκετά άλλα .

Ένας από τους κύριους λόγους για τους οποίους λατρεύω αυτής της τελευταίας προδιαγραφής CSS είναι η αισθητική. Μικρές λεπτομέρειες του σχεδίου, όπως στρογγυλεμένες γωνίες και σκιές  σημαίνουν ότι οι ιστοσελίδες μας θα φαίνονται ακόμα καλύτερες  .

ΜΕΊΝΕΤΕ ΣΥΝΤΟΝΙΣΜΈΝΟΙ


Στα μελλοντικά άρθρα σε αυτή τη σειρά θα δούμε κάθε φορά και μια διαφορετική ενότητα προδιαγραφών  και εντολών του CSS3 , καθώς και τα νέα χαρακτηριστικά. Θα ανακαλύψετε νέες τεχνικές που θα σας λύσουν τα χέρια στην κυριολεξία και θα τα λατρέψετε πραγματικά.


Στην επόμενη ανάρτηση θα δούμε εντολές για  Στρογγυλεμένες  γωνίες  (rounded corners) .

Γι 'αυτό μείνετε συντονισμένοι και δεν θα χάσετε !

 Ένα πολύ καλο post από το bloggertrics.blogspot.gr που χωρίζεται σε 3 μέρη δείτε τα στην πορεία

 ΠΗΓΗ
Κατηγορίες:
Σχόλια