Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Τετάρτη, Ιουνίου 16

13

Εισαγωγή στο 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) .


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

13:

Themis gs είπε...

Poli kales plirofories! Me voi8isan poli! thank you!!!
:) :) :)

Διομηδης είπε...

περιμενουμε με αγωνια! ;)

Snowball είπε...

Πολύ καλό post, περιμένω με ανυπομονησία και τα υπόλοιπα! :)

post2.soo είπε...

Ευχαριστούμε για να την πληροφόρηση Σοφουλίνι!
Καλημέρα! Μάκια  :* :'( >:o ;) =-O :-P

post2.soo είπε...

Α να ρωτήσω βρε Σοφάκι. Αυτό με τα banners που κρύβονται πως το κάνεις? Δεν το έχω ανακαλύψει ακόμη >:o

bloggertrics είπε...

Καλησπερα Themis

Σ' ευχαριστώ πολύ και χαίρομαι που τις βρίσκεις χρήσιμες . :-D

bloggertrics είπε...

@ Διομήδης @ Snowball

Καλησπερα σας .
Χαίρομαι πολύ που το βρήκατε ενδιαφέρον το θέμα :-P :-D

bloggertrics είπε...

Καλησπερα τρελοκομείο :-$ :-P

Αυτό με τα banners , είναι με το function togglecomments .
Θα το κάνω post κάποια στιγμή ;)

Πολλά φιλιααααα

post2.soo είπε...

Ωραίαααααααα! Θενκ γιου ντίαρ!
Είδες τι ωραία που το μιλάω το αγγλικό? χιχι
>:o O:-) :-P

Johnpatra είπε...

Σοφάκι αυτό είναι ανεκτήμητο έργο. Αποθηκευσέ το με κάποιο τρόπο να μην χαθεί. Συγχαρητήρια

bloggertrics είπε...

Σ'ευχαριστω John  :-D

Θα βάλω σε εφαρμογή την ιδέα που μου έδωσε ο Snowball και θα τα κάνω σε pdf αρχεία  .
Χαίρομαι πολύ  που το βρήκες χρήσιμο 

Τα φιλιά μου !

bloggertrics είπε...

Οοοο γουατ εν ινγκλις αξεντ μπαι δε γουει ,αμ σοου σεουρπραισντ  =-O
δατς γκρειτ μαι ντιαρ !

Μπαι δε γουει, δε κατ ιζ γκευ... Ε λολ... Λετς σπικ ατ λαστ ραιτ ινγκλις! καμ ον μαν...!!!

Εδες κ'εγω ??? σπικαρω  βερυ γουέλ τα ινγκλις  :-P

Οχι ,για να μάθεις !!! >:o >:o =-X

Fouls Code είπε...

το μεγαλύτερο forum στην Ελλάδα για κινητά με πολα download http://greeceport.xtgem.com

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS