Web Systems :: Το Blog μας :: Καινούργια Σχεδίαση ! Καινούργιες υπηρεσίες !

close
Web design τεχνικές που απλοποιούνται με CSS3

Web design τεχνικές που απλοποιούνται με CSS3


Στο tutorial αυτό θα δούμε πώς μπορούμε να γλυτώσουμε χρόνο χρησιμοποιώντας CSS3 για να δημιουργήσουμε όμορφα εφέ, που με τις κλασικές μεθόδους χρειαζόμαστε αρκετό κόπο, javascript και περισσότερο γράψιμο xHTML/CSS.

 

Πρώτα απ’ όλα τι είναι η CSS3; Ε βασικά είναι η CSS2 + 1, η ανανεωμένη CSS γλώσσα που έρχεται (ποιος ξέρει πότε) να μας κάνει τη ζωή πιο εύκολη και τα websites πιο όμορφα.

Αν και δεν κυκλοφορεί ακόμα ως standard πάρα πολλά καλούδια και εντολές της έχουν εισαχθεί στους πιο σύγχρονους browsers όπως τους Firefox 3.5, Opera, Safari 4 και Google Chrome, με τους τελευταίους δύο να υποστηρίζουν τις περισσότερες από τις CSS3 εντολές χάρη στη layout engine που “τρέχει” τον κώδικά τους η οποία ονομάζεται Webkit. Για ευκολία στη συνέχεια του άρθρου θα λέμε τους browsers που τρέχουν τη μηχανή της Mozilla “Gecko based” και τους Safari + Google Chrome “Webkit based“, καθώς έχει διαφορά τι μπορεί να δείξει ακόμα ο καθένας και τι όχι. Για Internet Explorer δεν κάνουμε καν συζήτηση μια και καλά καλά δεν τρέχει ακόμα την CSS2, οπότε καταλαβαίνετε πως σε οποιαδήποτε έκδοση του IE δεν θα πιάνει κανένα από τα παρακάτω.

Λοιπόν ας τα πάρουμε με τη σειρά:

1. Γυριστές άκρες (rounded corners)

Όπως έχουν τώρα τα πράγματα για να φτιάξουμε γυριστές άκρες σε ένα κουτί υπάρχουν τρεις τρόποι, είτε χρησιμοποιώντας javascript, είτε να το κάνουμε με γραφικά, έξτρα nested divs και background properties ή να χρησιμοποιήσουμε 3-4 έξτρα divs και με κάποιες τεχνικές ή έτοιμα εργαλεία όπως το spiffy corners να δημιουργήσουμε CSS based rounded corners.

roundedcorners

Με την CSS3 όμως τα πράγματα απλουστεύουν. Τι χρειαζόμαστε, ένα div που θα είναι το κουτί μας και μία εντολή για κάθε browser στο stylesheet μας:

 .box { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color:#fff600; width:200px; height:200px; }

Και η HTML μας, ένα απλό div:

Περιεχόμενο εδώ…

Έτσι με 2 απλές γραμμές κώδικα (ένα για κάθε μηχανή, Firefox -Gecko- και Safari/Chrome -Webkit-) πετυχαίνουμε αυτό που άλλοτε μας έπαιρνε πολύ περισσότερες.

Δείτε ένα demo εδώ.

2. Σκιά σε κουτί (box shadow)

Δε μπορώ να ξεκινήσω να φαντάζομαι πως θα έκανα ένα div με σκιά χρησιμοποιώντας μόνο CSS2. Φαντάζομαι με πολύ absolute positiοning και αρκετή ώρα σπασίματος νεύρων. Πιο απλά γίνεται με κάποιο jQuery plugin αλλά με την CSS3 δεν έχουμε ανάγκη τίποτα από τα δύο. Μία απλή εντολή φτάνει.

boxshadows

Πώς το κάνουμε. Στο div “box” που δημιουργήσαμε πριν βάζουμε την εξής εντολή στο CSS:

.box { box-shadow: 5px 5px 2px gray; -moz-box-shadow: 5px 5px 2px gray; -webkit-box-shadow: 5px 5px 2px gray; }

Όπως βλέπουμε μπορούμε να ορίσουμε το πόσο μακριά ή κοντά θα είναι η σκιά μας, πόσο θολή θα είναι (το τρίτο μέγεθος) καθώς και το χρώμα της.

Demo

3. Σκιά σε κείμενο (text shadow)

Ω ναι, πλέον με CSS3 δε χρειάζεται να κάνουμε γραφικά στο Photoshop για να κάνουμε κάτι τόσο απλό. ΟΚ θα μου πεις υπάρχουν τρόποι να γίνουν και με CSS2, συμφωνώ αλλά άντε μπλέξε με absolute positioning και 2 διαφορετικά spans και 2 κείμενα και… άστα να πάνε. Γιατί να μπλεχτείς ενώ με μία εντολίτσα τα έχεις όλα;

textshadow

Κώδικας:

.shadow { text-shadow: 0px 4px 4px #999; }

Όπως και πριν, ο πρώτος αριθμός είναι για το κάθετο, ο δεύτερος για το οριζόντιο, ο τρίτος για τη θολότητα και το hex φυσικά για το χρώμα.

Demo

4. Διαφάνεια (Opacity)

ΟΚ, το opacity έχει καιρό που υπάρχει αλλά δεν παύει να είναι CSS3 property. Το βάζω εδώ όμως για να δείξω κυρίως τη διαφορά του Opacity με το RGBa transparency που θα δούμε παρακάτω.

opacitycontrol

Λοιπόν ο κώδικας είναι πολύ απλός:

.box{ opacity: 0.5; }

Έτσι ακριβώς χωρίς πολλά πολλά, απλά δηλώνεις το property και του δίνεις μία τιμή από 0 έως 1, δηλαδή πόσο διαφανές θες να είναι το κουτί σου (0% έως 100% δηλαδή αδιαφανές).

Τι κάνει τώρα αυτό; Αντί να χρησιμοποιείς transparent PNGs που σου τρώνε και πολύ bandwidth για να κάνεις κάτι διαφανές, βάζεις αυτό το μικρούλι property και το κάνει ο browser, αλλά έχει μία ιδιαιτερότητα.

To property Opacity ελέγχει τη διαφάνεια όλων των children του εκάστοτε div. Δηλαδής, άμα έχεις εσύ ένα parent div και από κάτω άλλα 20 divs, αν βάλεις opacity στο parent, την ίδια τιμή θα έχουν όλα τα divisions από κάτω του, ανεξαρτήτως αν τα έχεις δηλώσει ξεχωριστά στη CSS ή όχι.

Δες το demo να καταλάβεις.

Και άμα δε θέλω εγώ όλα τα child divs μου να έχουν transparency πώς το κάνω; Ε δες παρακάτω.

5. RGBa Transparency

To RGB ξέρουμε τι σημαίνει, το a σημαίνει alpha και αναφέρεται στο transparency (διαφάνεια) του αντικειμένου.

rgba

Ο κώδικας:

.box{ background: rgba(204, 204, 204, .5); }

Τι έκανα εδώ, έδωσα στο background του div με class “box” ένα χρώμα ορισμένο σε RGB (συγκεκριμένα το R=204 G=204 B=204, το οποίο είναι κάποιος τόνος του γκρι) και του είπα δίπλα να βάλει διαφάνεια 50% με το 0.5

Αντίστοιχα μπορεί να μπει σε οποιοδήποτε div και να δημιουργήσει διαφάνεια μόνο για εκείνο, χωρίς να επηρεάζει τα children του.

Demo

6. Αυτόματη δημιουργία στηλών (columns)

Τέλος τα float right και float left και άντε παίξε με τα padding και δε συμμαζεύεται, η CSS3 έρχεται με ένα πολύ ωραίο property που αυτόματα στοιχίζει το κείμενο σε όσες στήλες λαχταρά η καρδιά σου.

columns

Ο κώδικας είναι και πάλι απλός (ε για CSS μιλάμε άλλωστε):

.box { -moz-column-count: 3; -webkit-column-count: 3; }

Εδώ πολύ απλά του λέω “πάρε το κείμενο που έχω γραμμένο μέσα στο box και κάντο τρίστηλο, αν φτάνει”.

Όπως παρατηρήσατε χρειάζεται διαφορετικό πρόθεμα για Mozilla based browsers και άλλο για Webkit, κάτι το οποίο είναι συνηθισμένο μέχρι να γίνει standardized η CSS3.

Demo

7. Animations

Πολύ ενδιαφέρον property της CSS3, δυστυχώς έχει γίνει implemented μόνο στους Webkit browsers προς το παρόν.

Με κλασικές τεχνικές σίγουρα πρέπει να χρησιμοποιήσουμε jQuery για να κάνουμε ομαλή μετάβαση πχ ενός κουτιού από τη θέση Α στη θέση Β (ένα slide πχ).

Η CSS3 τα αλλάζει αυτά ανοίγοντας καινούριες προοπτικές και ευχρηστία.

animations

Ο κώδικας περιπλέκεται λίγο αλλά παραμένει σχετικά απλός:

.box { position:relative; -webkit-transition: top 350ms linear; } .box:hover{ top:30px; }

Λοιπόν καταρχήν το κουτί το οποίο είναι να κινηθεί πρέπει να οριστεί με relative position. Ο λόγος αυτού δεν αφορά το συγκεκριμένο tutorial.

Ξεκινάμε λοιπόν με τη δήλωση του property: “-webkit-transition“. Έπειτα δηλώνουμε το αναγνωριστικό του transition του κουτιού μας (top right left κλπ για κίνηση) και στη συνέχεια δηλώνουμε το χρονικό διάστημα στο οποίο θα πρέπει το transition να έχει ολοκληρωθεί. Πχ παραπάνω έχω βάλει να κάνει κίνηση κατακόρυφη, και να την ολοκληρώσει μέσα σε 350ms.

Από μόνο του βέβαια δεν κάνει τίποτα αυτό, γι’ αυτό χρησιμοποιούμε ένα event, το hover state, που ενεργοποιεί το transition. Οπότε σε pseudoclass δηλώνουμε όταν πάει το ποντίκι από πάνω (hover) να κινηθεί 30 pixels από επάνω. Το εφέ που δημιουργείται είναι μία ομαλή μετάβαση από τη θέση Α (0px) στη θέση Β (30px) σε διάστημα 350ms.

Δείτε το demo για να καταλάβετε.

Θυμηθείτε πως το transition property ακόμα δουλεύει μόνο σε Webkit browsers οπότε χρησιμοποιείστε Safari ή Google Chrome.

8. Πολλαπλά backgrounds σε ένα div

Μία ακόμα πολύ ευχάριστη προσθήκη στο οπλοστάσιο της CSS3, πολλαπλά background images για ένα element.

multibackgrounds

Ο κώδικας είναι υπερβολικά απλός, δηλώνουμε μόνο το νέο background στο ίδιο property χωρίζοντας το κάθε background με κόμμα:

.box { background: url('/css3.png') no-repeat, url('/bg.gif') center center no-repeat; }

Δεν έχει πολλά να πω εδώ, δείτε το demo και βάλτε τη φαντασία σας να οργιάσει.

Και πάλι μόνο για Webkit browsers.

9. Ομαλές εναλλαγές χρώματος (color transitions)

Πώς αλλάζουν χρώμα τα links όταν πάμε το ποντίκι από πάνω τους; Ε, τώρα με ωραίο transition βαθμωτής χρωματικής αλλαγής.

color-transitions

Όπως με όλα τα transition properties έτσι και αυτό λειτουργεί – προς το παρόν – μόνο σε Webkit browsers:

.box a { color:blue; -webkit-transition: color 1s linear; text-decoration:none; } .box a:hover{ color:red; }

Η εντολή είναι ίδια με αυτή του Νο 8 (animations) απλά εδώ ως “identifier” αντί για top ή left χρησιμοποιούμε το “color” για να δηλώσουμε ότι θέλουμε το χρώμα να είναι αυτό που αλλάζει. Τα υπόλοιπα παραμένουν τα ίδια, έπειτα δηλαδή δηλώνουμε πόσο χρόνο θέλουμε να διαρκέσει το όλο “φαινόμενο” κλπ. Επίσης πάλι χρειάζεται να βάλουμε ένα event handler, δηλαδή ένα hover pseudoclass ώστε να ορίσουμε πότε να ξεκινήσει να αλλάζει χρώμα.

Δεν είναι ανάγκη να περιοριστεί σε links, μπορεί το ίδιο να γίνει και για backgrounds, ή text color ή οτιδήποτε.

Demo

10. Custom γραμματοσειρές

Άφησα το καλύτερο για το τέλος. Επιτέλους η CSS3 μας προσφέρει έναν εύκολο τρόπο να δείχνουμε στον browser ό, τι custom γραμματοσειρά τραβάει η ψυχή μας χωρίς να χρειάζεται ο χρήστης να την έχει εγκατεστημένη στο σύστημά του.

Ένας τρόπος που γίνεται χωρίς την CSS3 είναι το cufon το οποίο χρησιμοποιεί Javascript.

customfonts

Ο κώδικας χωρίζεται σε δύο μέρη, πρώτα δηλώνουμε τη γραμματοσειρά και το URL της με την εντολή @font-face (πρέπει να έχουμε ανεβάσει το .ttf αρχείο στον server μας).

Πχ:

@font-face { font-family: 'DaVinci'; src: url('/davinci.ttf'); }

Και στη συνέχεια απλά χρησιμοποιούμε το νεοδηλωθέν (σικ) font μας όπως κάνουμε πάντα:

.box { font-family: DaVinci; }

Et voila, τώρα ο καθείς βλέπει την γραμματοσειρά που εμείς θέλουμε να βάλουμε στο site μας χωρίς περιορισμούς.

Demo

Να πω εδώ πως όλα τα παραπάνω δυστυχώς ακόμα είναι μόνο για demonstration εκτός από πολύ ειδικές περιπτώσεις. Η CSS3 απέχει ακόμα από το να γίνει πραγματικότητα και το απολίθωμα που λέγεται Internet Explorer δεν βοηθάει ιδιαίτερα ώστε να εισαχθεί πιο γρήγορα στις ζωές μας.

Παρ’ όλα αυτά υπάρχουν πολλά πράγματα που θα μπορούσαν να χρησιμοποιηθούν, πχ τι κι αν δεν είναι smooth τα animations στον firefox, πάλι γίνεται η μετακίνηση (αν και ακαριαία) του κουτιού. Οπότε αν είναι να χρησιμοποιηθούν τέτοιες τεχνικές εις αντικατάστασην άλλων που λειτουργούν παντού – αλλά είναι χρονοβόρες και γεμίζουν τη σελίδα με “αχρείαστο” κώδικα – τότε θα πρέπει να σκεφτεί κανείς αν πραγματικά χρειάζεται στο usabilty της κάθε ιστοσελίδας που δημιουργεί να γίνονται ομαλές μεταβάσεις, η όντως να υπάρχουν σκιές πίσω από γράμματα και κουτιά κλπ.

Στην τελική πρέπει όλες οι ιστοσελίδες να φαίνονται ακριβώς το ίδιο σε κάθε browser;

Πηγή: gnomon-design

 


Leave a Reply