Όλα τα κείμενα του Journal
Αυτό είναι ένα πείραμα με CSS3 κι ένα-δυο εφέ. Ο στόχος είναι, όπως λέει και ο τίτλος, χρησιμοποιώντας δύο εικονίδια να εμφανίσουμε με rollover μια το ένα και μια το άλλο με περιστροφή και fade out/fade in.
Στην ουσία, τα δύο εικονίδια βρίσκονται το ένα επάνω στο άλλο, μόνο που το κάτω έχει opacity:0, που στην πορεία γίνεται 1. Καθώς γίνεται το rollover, το πάνω εικονίδιο χάνει όλο του το opacity. Αυτή η αλλαγή γίνεται ομαλά μέσα σε ένα δευτερόλεπτο. Το πέρασμα από τη μία στην άλλη φάση γίνεται με περιστροφή, επίσης σε ένα δευτερόλεπτο.
Δείτε το εφέ στην πράξη
Ο HTML κώδικας είναι:
<h1>
<a href="#"><span class="logo"><img src="..." alt="" /></span></a>
<a href="#"><span class="logo_off"><img src="..." alt="" /></span></a>
</h1>
Ο CSS3 κώδικας έχει περισσότερο ενδιαφέρον:
h1{
width: 283px;
height: 283px;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
position: relative;
text-align: left;
}
h1:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
span.logo{
opacity: 1;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
position: absolute;
width: 283px;
height: 283px;
}
h1:hover span.logo{
opacity: 0;
}
span.logo_off{
opacity: 0;
webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
position: absolute;
width: 283px;
height: 283px;
}
h1:hover span.logo_off{
opacity: 1;
}
Δείτε το εφέ στην πράξη
Για το h1 δίνουμε το μέγεθος των εικονιδίων και ζητάμε από την περιστροφή (που δηλώνεται στο :hover) να γίνεται μέσα σε ένα δευτερόλεπτο και με γραμμικό τρόπο.
Τα δύο span που έχουμε περιέχουν τα εικονίδια. Γι’ αυτά τους δίνουμε επίσης μια γραμμική μετάβαση ενός δευτερολέπτου, αλλά αυτή τη φορά όχι περιστροφή, αλλά το fade out/fade in.
Αν υπάρχει κάποιος πιο απλός τρόπος (όχι, όχι δε θέλουμε να το κάνουμε με JavaScript) να πετύχουμε το ίδιο εφέ, ευχαρίστως προσθέστε τον στα σχόλια.
UPDATE: Στον Firefox το εφέ σπάει εντελώς, λόγω ενός alignment που λείπει. Για να παίξει κι εκεί, προσθέστε: text-align: left; στο h1.
Τα hyphens στην τυπογραφία και τη γλώσσα είναι οι παύλες που κόβουν μία λέξη στο τέλος της γραμμής του κειμένου, όταν αυτή δε χωράει ολόκληρη στην ίδια σειρά.
Μέχρι σήμερα είχαμε κάνει διάφορες προσπάθειες να φέρουμε τα hyphens στο Web με καλύτερη το hyphenator.js, μια λύση που έβαζε και τη JavaScript στο παιχνίδι. Όταν πρόκειται για τέτοιου είδους επεμβάσεις, προτιμώ να αγνοώ τη javaScript.
Όμως, όπως μας ενημερώνει το blog του Fontdeck, ο Safari 5 και ο Firefox 6 άρχισαν να υποστηρίζουν τον native τρόπο, που έχει εισαγάγει το CSS3 specification. Μάλιστα είναι πολύ εύκολος:
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Φυσικά, το όλο εγχείρημα είναι ακόμα πολύ φρέσκο για να θεωρηθεί έτοιμο προς χρήση. Όμως είναι ένα σημαντικό βήμα για να σταματήσουμε να βλέπουμε κείμενα με πλήρη στοίχιση. Η οποία πλήρης στοίχιση μπορεί να είναι καλή για τα περιοδικά και τις εφημερίδες, αλλά στο Διαδίκτυο έχει τραγικά αποτελέσματα. Τα κενά που σχηματίζονται μεταξύ των λέξεων (μια και οι λέξεις αναγκάζονται ν’ ανοίξουν τις μεταξύ τους αποστάσεις ώστε να πιάσουν όλο το πλάτος της γραμμής), τα λεγόμενα “rivers” δυσκολεύουν πολύ την ανάγνωση, αλλά και τη γενικότερη εικόνα του κειμένου. Τα πράγματα γίνονται χειρότερα όσο μικρότερο είναι το μήκος της γραμμής π.χ. σε φορητές συσκευές όπως το iPhone, όπου τα rivers γίνονται κάτι σαν χείμαρροι στην προσπάθεια του κειμένου να μην αφήσει κενά στα δεξιά.
Η πλήρης στοίχιση είναι μία από τις πληγές της τυπογραφίας στο Web και μια σαφής ένδειξη ημιμάθειας. Τα hyphens στο CSS3 είναι παρηγοριά.
Πειραματικά, έχω ενεργοποιήσει τα hyphens στην Αγγλική έκδοση αυτού του site, μια και δεν υποστηρίζονται τα ελληνικά ακόμα. Δεν είναι κι άσχημο!
Ο adjacent sibling combinator στο CSS3 μιλάει για δύο selectors π.χ. h1 και p όπου ο ένας διαδέχεται τον άλλο ως εξής:
h1+p{
color: red
}
Στο παραπάνω παράδειγμα όταν μια παράγραφος έπεται του h1 έχει χρώμα κόκκινο. Αν δεν έπεται του h1 έχει οποιο χρώμα της έχουμε δώσει από πριν.
Αυτές τις μέρες ανακάλυψα την επέκταση της λειτουργίας των adjacent sibling selectors. Παράδειγμα:
h1+h2+p{
color: red
}
Το οποίο σημαίνει ότι η παράγραφος έχει κόκκινο χρώμα μόνο όταν έπεται ενός h2, το οποίο βρίσκεται αμέσως μετά από ένα h1.
Δεν έχω βρει κανένα reference έως τώρα, αλλά το βλέπω να δουλεύει σωστά σε Safari, Chrome, Opera, Firefox. Μάλλον πρόκειται για valid τεχνική, καθώς μου το επιβεβαίωσε και ο Eric Meyer. Οι adjacent sibling selectors υποστηρίζονται και από Internet Explorer 7+, αλλά δεν ξέρω αν η λειτουργία που ανακάλυψα συνεχίζει να δουελεύει κι εκεί.
Αν γνωρίζετε κάποια πηγή στο θέμα ή έχετε ανακαλύψει κάτι παρόμοιο, please share στα σχόλια του post.
Βλέποντας το DVD του Andy Clarke, Designing with CSS, έμαθα μια τεχνική για το κείμενο και το χρώμα που τόσο καιρό ήταν μπροστά στα μάτια μου, αλλά ποτέ δεν μπόρεσα να το συνειδητοποιήσω.
Η τεχνική έχει να κάνει με το να δίνουμε RGBA τιμές στα κείμενά μας, αντί για τις κλασσίκες hexadecimal τιμές π.χ. #123456.
Γιατί αυτό είναι καλό; Γιατί αν κρατήσουμε σταθερή την τιμή του RGB με κάποιο επίσης σταθερό (αλλά όχι μηδενικό) Α, μπορούμε να πάρουμε πολλές αποχρώσεις του χρώματος του κειμένου ανάλογα με το background της σελίδας.
Παράδειγμα:
Στις παρακάτω εικόνες έχω δώσει εξής σταθερές τιμές στο χρώμα για την επικεφαλίδα και την παράγραφο. Οι CSS κανόνες για τα κείμενα είναι μόνο μία γραμμή ο καθένας:
h1{
color: rgba(255, 255, 255, .5)
}
p{
color: rgba(255, 255, 255, .8)
}
Την ίδια στιγμή, αλλάζω το background και βλέπουμε το εξής:
Το χρώμα των κειμένων είναι πάντα το ίδιο και στην τιμή του (λευκό) και στο ποσοστό της διαφάνειάς του, μόνο που το background χρώμα της σελίδας του δίνει άλλες αποχρώσεις.
Στην περίπτωση λοιπόν που δεν είμαι βέβαιος ποιο θέλω να είναι το background χρώμα της σελίδας μου ή ακόμα κι αν έχω ένα πολύχρωμο background, όπως στο τελευταίο παράδειγμα, το χρώμα των κειμένων είναι από την αρχή και χωρίς κόπο πιο αρμονικό. Αν έπαιρνα με ένα color picker το εκάστοτε χρώμα τόσο για την επικεφαλίδα όσο και για την παράγραφο, θα έβλεπα ότι σε κανένα παράδειγμα δεν είναι λευκό κι ας μοιάζει έτσι.
Για τον Andy Clarke αυτός είναι ένας ακόμα λόγος που αξίζει να σχεδιάζουμε απευθείας στον browser και βέβαια έχει δίκιο. Easy peasy.
Υπάρχουν πολλοί λόγοι να εκθειάσει κάποιος την πολυαναμενόμενη έκδοση του Expression Engine 2, η οποία άργησε πολύ, αλλά αρχίζει να βγάζει τα σπασμένα.
Μία από τις σημαντικές βελτιώσεις της νέας έκδοσης είναι η δημιουργία ημί-δυναμικών μενού που είναι κάτι που έλειπε από την πλατφόρμα. Μπορεί να μην είναι ένα killing feature σαν τα μενού του Wordpress (αληθινά εντυπωσιακή δουλειά), όμως για όσους “σκάβουν” στον κώδικα μπορεί να αποδειχτεί πιο χρήσιμη.
Στο παράδειγμα που ακολουθεί φαίνεται η αρχή του κώδικα του μενού ενός site, όπως θα γραφόταν σε μια static HTML σελίδα:
<ul>
<li><a href="company.html">Η εταιρεία</a></li>
<li>...</li>
<li>...</li>
</ul>
Απλά πράγματα έως εδώ.
Ας κρατήσουμε το <li> που μας ενδιαφέρει κι ας ξεχάσουμε τα υπόλοιπα για την ώρα.
Το να “οδηγήσεις” το link, όχι σε μια στατική σελίδα, αλλά σε μια σελίδα (ή πιο σωστά group) του Expression Engine γίνεται ως εξής:
<li><a href="{path=company}">Η εταιρεία</a></li>
Συνεχίζουν να είναι απλά τα πράγματα.
Το τελευταίο που θέλουμε από το link μας είναι να έχει διαφορετικό χρώμα όταν ο επισκέπτης κάνει κλικ στη σελίδα του, ώστε να κατανοεί εύκολα που βρίσκεται. Ας υποθέσουμε ότι όταν συμβαίνει αυτό το link έχει το class=“selected” κι έτσι αλλάζει χρώμα. Όταν ο επισκέπτης δε βρίσκεται στη σελίδα αυτή, τότε το link απλώς δεν έχει το συγκεκριμένο class.
Το να γράψει κάποιος για 10 διαφορετικές σελίδες 10 διαφορετικές εκδόσεις του μενού, με το class=“selected” να πηγαίνει από link σε link για κάθε σελίδα, δεν είναι και ό,τι πιο βολικό. Τι θα γίνει για παράδειγμα αν προστεθεί μια 11η; Θα πρέπει να επέμβει και στις προηγούμενες 10.
Φανταστείτε τώρα ότι όλο μας το μενού βρίσκεται αποθηκευμένο ως κώδικας σε ένα άλλο σημείο του site με τη μορφή template ας πούμε με το όνομα “nav”. Για να το φέρω στη σελίδα μου πρέπει απλώς να το κάνω μέσω μιας απλής εντολής που λέγεται embed. Έτσι γράφω:
{embed="nav"}
και το μενού έρχεται στη θέση που θα του πω.
Ήρθε η ώρα του δυναμικού μενού. Αρχικά εισάγω μια μεταβλητή. Ας την ονομάσουμε “loc” (από το location).
Όταν βρίσκομαι στη σελίδα “Η εταιρεία” φέρνω το μενού ως εξής:
{embed="nav" loc="company"}
Δηλαδή λέω ”φέρε το μενού και δώσε στη μεταβλητή “loc” την τιμή “company”.
Τώρα κάπως πρέπει να συνδέσω την τιμή αυτή με το link μου. Αυτό γίνεται ως εξής:
<li><a href="{path=company}" {if embed:loc=="company"} class="selected"{/if}>Η εταιρεία</a></li>
Λέω δηλαδή στο link ότι ”αν βρεις τη μεταβλητή loc με τιμή company, τότε δώστης το class=“selected”, αλλιώς μη δίνεις κανένα class.
Το ίδιο κάνω σε κάθε <li> του μενού κι έτσι παίρνω αυτό που θέλω όσο μεγάλο κι αν γίνει το μενού.
Easy peasy!
