Σε αυτό το βοήθημα θα μάθουμε να δημιουργούμε κουμπιά με την βοήθεια των κανόνων CSS και της γραμματοσειράς Web Symbols (http://www.justbenicestudio.com/studio/websymbols/) χωρίς να χρησιμοποιήσουμε καθόλου εικόνες.
Τα κουμπιά που θα δημιουργήσουμε θα αναπροσαρμόζουν το μέγεθος τους ανάλογα με το μέγεθος της γραμματοσειράς που χρησιμοποιείται κάθε φορά αυτόματα χωρίς καμία παρέμβαση.
Τα πλεονεκτήματα αυτής της μεθόδου είναι πολλαπλά καθώς τα κουμπιά δημιουργούνται καθαρά από κώδικα CSS. Αυτό μας δίνει μεγάλη ευελιξία όσων αφορά μελλοντικές αλλαγές ή την συντήρηση του site μας καθώς οι οποιοσδήποτε αλλαγές απαιτούν μόνο την αλλαγή μικρού τμήματος του κώδικα και όχι φόρτωμα εικόνων κτλ.
Η δομή του κώδικα μας θα είναι τέτοιας μορφής που θα επιτρέπει την αλλαγή του χρώματος των κουμπιών προσθέτοντας απλά την αντίστοιχη class στο κώδικα μας.
Π.χ.
<button class=”blue”>facebook</button>
Προετοιμασία
Αρχικά θα δημιουργήσουμε δυο φακέλους έτσι ώστε να οργανώσουμε κατάλληλα την δομή των αρχείων μας. Τον πρώτο φάκελο τον ονομάζουμε css και τον δεύτερο fonts.
Στον φάκελο css δημιουργούμε δύο αρχεία ονομάζοντάς τα style.css και reset.css. Στο αρχείο reset.css κάνουμε copy paste τον κώδικα από την ιστοσελίδα http://meyerweb.com/eric/tools/css/reset/ με αυτόν τρόπο μηδενίζουμε τους στιλιστικούς κανόνες που προστίθενται στην ιστοσελίδα μας από τον εκατοστέ browser. Στο αρχείο style.css θα γράψουμε τον κώδικα που απαιτείται για να δώσουμε στιλ στα κουμπιά που θα δημιουργήσουμε.
Κατεβάζουμε την έκδοση:
της γραμματοσειράς Web Symbols.
Αφού αποσυμπιέσουμε τον φάκελο αντιγράφουμε τα εξής αρχεία :
- websymbols-regular-webfont.eot
- websymbols-regular-webfont.svg
- websymbols-regular-webfont.ttf
- websymbols-regular-webfont.woff
στον φάκελο fonts που δημιουργήσαμε πιο μπροστά.
Τέλος δημιουργούμε το αρχείο index.html.
Η δομή των αρχείων μας θα πρέπει να είναι της ακόλουθης μορφής:
/*************************************************
|--index.html
|--fonts
|-- websymbols-regular-webfont.eot
|-- websymbols-regular-webfont.svg
|-- websymbols-regular-webfont.ttf
|-- websymbols-regular-webfont.woff
|--css
|-- style.css
|-- reset.css
****************************************************/Βήμα 1ο
Ανοίγουμε το index.html με τον αγαπημένο μας text editor και γράφουμε:
<!DOCTYPE HTML> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> </head> <body> <!--- ο κώδικας μας θα μπει σε αυτό το σημείο---> </body> </html>
Με τον παραπάνω κώδικα δημιουργήσαμε την ιστοσελίδα μας και την συνδέσαμε με τα αρχεία style.css και reset.css. To doctype που χρησιμοποιούμε είναι HTML5.
Βήμα 2ο
Ανοίγουμε το αρχείο style.css και γράφουμε:
/*http://www.justbenicestudio.com/studio/websymbols/*/ @font-face { font-family: 'WebSymbolsRegular'; src: url('../fonts/websymbols-regular-webfont.eot'); src: url('../fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/websymbols-regular-webfont.woff') format('woff'), url('../fonts/websymbols-regular-webfont.ttf') format('truetype'), url('../fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; }
Με τον παραπάνω κώδικα συνδέσαμε τα απαραίτητα αρχεία της γραμματοσειράς Web Symbols με το css αρχείο μας.
Βήμα 3ο
Για να δημιουργήσουμε ένα κουμπί στην html5 χρησιμοποιούμε το στοιχείο button.
Προσθέτουμε τον παρακάτω κώδικα στο αρχείο index.html μέσα στο στοιχείο body
<button class="white">RSS<span>B</span></button>
Με τον παραπάνω κώδικα δημιουργούμε ένα κουμπί που το στιλ του καθορίζεται από την class white επίσης δημιουργούμε και ένα span για να μπορέσουμε να χρησιμοποιήσουμε την γραμματοσειρά web symbols. Ο χαρακτήρας B στην γραμματοσειρά web symbols αντιστοιχεί στο εικονίδιο του rss.
Βήμα 4ο
Ανοίγουμε το αρχείο style.css και προσθέτουμε τον παρακάτω κώδικα:
button, a.button { margin:15px 0 0 10px; padding:0 7px; font-family:arial, sans-serif; font-size:14px; line-height:1.8em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration: none; text-align: center; } a.button{ display:inline-block; } button span, a.button span { font-family: "WebSymbolsRegular"; float:right; padding-left:15px; font-size:12px; }
Με τον παραπάνω κώδικα δίνουμε στο κουμπί το βασικό στιλ που απαιτείται δηλαδή αποστάσεις, μέγεθος γραμματοσειράς, τύπος γραμματοσειράς κτλ. Προσθέτουμε και τo στοιχείο a.button για την περίπτωση που δεν χρησιμοποιείται η html5 έτσι ώστε κάποιο anchor με την class button
<a class="button">…</a>
να μετατρέπεται αυτόματα σε button. Τέλος ορίζουμε την γραμματοσειρά του στοιχείου span σε “WebSymbolsRegular” έτσι ώστε να μετατρέπονται οι χαρακτήρες στα αντίστοιχα εικονίδια.
Βήμα 5ο
Προσθέτουμε τον παρακάτω κώδικα στο αρχείο style.css:
.white { background-color: #F8F8F8; background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#E4E4E4)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #F8F8F8, #E4E4E4); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top , #F8F8F8, #E4E4E4); /* FF3.6+ */ background-image: -ms-linear-gradient(top, #F8F8F8, #E4E4E4); /* IE10 */ background-image: -o-linear-gradient(top, #F8F8F8, #E4E4E4); /* Opera 11.10+ */ background-image: linear-gradient(to bottom, #F8F8F8, #E4E4E4); border: 1px solid #A2A2A2; border-bottom: 1px solid #959595; -webkit-box-shadow: inset 1px 1px 2px 0 #CDCDCD ; -moz-box-shadow: inset 1px 1px 2px 0 #CDCDCD ; box-shadow: inset 1px 1px 2px 0 #CDCDCD ; color: #393939; text-shadow: 0 -1px 1px #D6D6D6; } .white:hover { background-color: #F2F2F2; background-image: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#D9D9D9)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #F2F2F2, #D9D9D9); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top , #F2F2F2, #D9D9D9); /* FF3.6+ */ background-image: -ms-linear-gradient(top, #F2F2F2, #D9D9D9); /* IE10 */ background-image: -o-linear-gradient(top, #F2F2F2, #D9D9D9); /* Opera 11.10+ */ background-image: linear-gradient(to bottom, #F2F2F2, #D9D9D9); cursor: pointer; } .white:active { box-shadow: none; border: 1px solid #C8C8C8; border-bottom: 1px solid #C5C5C5; color:#3D3D3D; }
Με τον παραπάνω κώδικα δίνουμε στο κουμπί το κατάλληλο στιλ για να δείχνει πιο όμορφο χρησιμοποιώντας την ιδιότητα background-image σε διάφορες παραλαγές της έτσι ώστε να είναι συμβατή σε όλους τους μοντέρνους browsers (Mozilla, chrome, opera, ie10 κτλ), με την ιδιότητα box-shadow της CSS3 ρίχνουμε μια ελαφριά εσωτερική σκιά στο κουμπί μας. Χρησιμοποιούμε την ιδιότητα background-color ως fallback για την περίπτωση που ο browser είναι παλαιάς έκδοσης και δεν υποστηρίζει την ιδιότητα background-image. Στην κατάσταση hover κάνουμε πιο σκούρο το χρώμα του κουμπιού μας και στην κατάσταση active αφαιρούμε την σκιά έτσι ώστε να δίνεται η αίσθηση ότι το κουμπί πατήθηκε.
Βήμα 6ο
Εφόσον στην πραγματικότητα τα εικονίδια είναι χαρακτήρες μιας γραμματοσειράς μπορούμε πολύ εύκολα να τα χρωματίσουμε. Προσθέτουμε την παρακάτω class στο style.css αρχείο μας.
.rss span { color:#EF7908; }
Προσθέτουμε και την class rss στο στοιχείο button του index.html αρχείου μας
<!DOCTYPE HTML> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> </head> <body> <button class="white rss">RSS<span>B</span></button> </body> </html>
Η τελική μορφή του κουμπιού είναι η εξής:
Βήμα 7ο
Εφόσον το κουμπί μας έχει δημιουργηθεί 100% από κώδικα έχουμε την δυνατότητα πολύ εύκολα να δημιουργήσουμε χρωματικές παραλλαγές. Αντιγράφουμε τον κώδικα του βήματος 6 και αλλάζουμε τα χρώματα και το όνομα της class π.χ. σε black και δημιουργούμε μια black εκδοχή του κουμπιού μας.
.black { background-color: #76736E; background-image: -webkit-gradient(linear, left top, left bottom, from(#76736E), to(#3E3E3E)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #76736E, #3E3E3E); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top , #76736E, #3E3E3E); /* FF3.6+ */ background-image: -ms-linear-gradient(top, #76736E, #3E3E3E); /* IE10 */ background-image: -o-linear-gradient(top, #76736E, #3E3E3E); /* Opera 11.10+ */ background-image: linear-gradient(to bottom, #76736E, #3E3E3E); border: 1px solid #484746; border-bottom: 1px solid #1B1A1A; -webkit-box-shadow: inset 1px 1px 2px 0 #AEADA7 ; -moz-box-shadow: inset 1px 1px 2px 0 #AEADA7 ; box-shadow: inset 1px 1px 2px 0 #AEADA7 ; color: #fff; text-shadow: 0 -1px 1px rgba(0,14,77,.3); } .black:hover { background-color: #76736E; background-image: -webkit-gradient(linear, left top, left bottom, from(#76736E), to(#242424)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #76736E, #242424); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top , #76736E, #242424); /* FF3.6+ */ background-image: -ms-linear-gradient(top, #76736E, #242424); /* IE10 */ background-image: -o-linear-gradient(top, #76736E, #242424); /* Opera 11.10+ */ background-image: linear-gradient(to bottom, #76736E, #242424); cursor: pointer; } .black:active { box-shadow: none; border: 1px solid #454545; border-bottom: 1px solid #999; color:#f6f6f6; }
Στο αρχείο index.html προσθέτουμε τον παρακάτω κώδικα:
<button class="black">next<span> > </span></button>
Πλέον έχουμε ένα μαύρο κουμπί που έχει την εξής μορφή:
Πολύ εύκολα λοιπόν μπορούμε να δημιουργήσουμε αμέτρητες εκδοχές και να τις χρησιμοποιούμε προσθέτοντας απλά την αντίστοιχη class στον κώδικα μας.
Τα αρχεία του βοηθήματος με τις τέσσερις εκδοχές που έχω δημιουργήσει μπορείτε να τα κατεβάσετε από το παρακάτω link.
.webp)
.jpg)
