Δημιουργία Κουμπιών Με Την Μέθοδο Sliding Doors
Σε αυτό το βοήθημα θα δούμε πως μπορούμε να δημιουργήσουμε κομψά κουμπιά για την ιστοσελίδα μας, χρησιμοποιώντας την μέθοδο Sliding Doors, με την οποία μπορούμε να βάλουμε εικόνα στο background του κουμπιού μας και να το κάνουμε να δείχνει πιο όμορφο.
Τα πλεονεκτήματα χρησιμοποίησης αυτής της μεθόδου, είναι πως μπορούμε να κάνουμε το κουμπί μας όσο μεγάλο θέλουμε, και να του προσθέσουμε και hover και active καταστάσεις χρησιμοποιόντας τις εικόνες του παρασκηνίου. Ας δούμε αναλυτικά πως μπορούμε να το κάνουμε
Βήμα 1
Σχεδιάζουμε στο Photoshop (ή σε όποιο άλλο πρόγραμμα της αρεσκείας μας) τις δύο εικόνες που θα χρησιμοποιήσουμε ως παρασκήνιο στα κουμπιά μας
Δημιουργούμε ένα νέο κενό έγγραφο διαστάσεων 300px x 66px
Βήμα 2
Χρησιμοποιοώντας το Rounded Rectangle Tool και βάζοντας 5px radius καλύπτουμε το μισό της εικόνας μας με ένα παραλληλόγραμμο με τον εξής τρόπο
Βήμα 3
Ανοίγουμε τα Blending Options και βάζουμε τις παρακάτω επιλογές
Βήμα 4
Κάνουμε Duplicate το επιλεγμένο Layer (δεξί κλικ στο layer και Duplicate Layer) και ανοίγουμε τα Blending Options του νέου layer. Στις παραπάνω επιλογές απλά επιλέγουμε το κουτάκι Reverse και στο Gradient Overlay και στο Stroke. Αμέσως μετά, φέρνουμε το νέο Layer μας ακριβώς από κάτω από το πρώτο, και έτσι γεμίζουμε την εικόνα μας με 2 αντίθετες κατά τον άξονα Χ εικόνες. Τέλος αποθηκεύουμε την εικόνα μας με το όνομα bg_button_span.gif
Βήμα 5
Δημιουργούμε μια νέα εικόνα μεγέθους 18px x 66px και επαναλαμβάνουμε τα παραπάνω βήματα μέχρι να φτάσουμε στο εξής αποτέλεσμα
Αποθηκεύουμε την εικόνα αυτή με το όνομα bg_button_a.gif
Βήμα 6
Τώρα ας ξεκινήσουμε να γράφουμε τον κώδικα μας. Ξεκινάμε δημιουργώντας 2 νέα αρχεία, με τα ονόματα index.html και style.css. Ανοίγουμε το index.html με τον αγαπημένο μας text editor και γράφουμε:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <title>Buttons Test</title> </head> <body> </body> </html>
Με τον παραπάνω κώδικα δημιουργήσαμε την σελίδα μας, και την συνδέσαμε με το αρχείο style.css στο οποίο θα προσθέσουμε τα διάφορα styles που χρειάζονται
Βήμα 7
Τώρα ανοίγουμε το style.css και γράφουμε
body {width:960px;margin:0 auto;}
.clear {
overflow: hidden;
width: 100%;
}
Με τον παραπάνω κώδικα δημιουργήσαμε τα βασικά styles που χρειζόμαστε.
Βήμα 8
Τώρα ήρθε η ώρα να δημιουργήσουμε το κουμπί μας. Μέσα στο <body> του αρχείου index.html θα προσθέσουμε τον εξής κώδικα
<a href="#"><span>Blue Button</span></a>
Με τον παραπάνω κώδικα δημιουργούμε ένα νέο σύνδεσμο (Anchor) και μέσα προσθέτουμε ένα <span>
Βήμα 9
Ας δώσουμε τώρα style στο στοιχείο που δημιουργήσαμε. Στο αρχείο style.css γράφουμε
a {
background: transparent url('images/bg_button_a.gif') no-repeat scroll top right;
color: #fff;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 33px;
margin-right: 6px;
padding-right: 18px;
text-decoration: none;
outline:0;
}
a span {
background:url("images/bg_button_span.gif") no-repeat scroll 0 0 transparent;
display:block;
line-height:24px;
padding:4px 0 5px 18px;
}
a:hover {
background-position: bottom right;
color: #fff;
outline: none;
}
a:hover span {
background-position: bottom left;
padding: 5px 0 4px 18px;
}
Με τον παραπάνω κώδικα δώσαμε όλες τις ιδιότητες που χρειάζεται στο στοιχείο που δημιουργήσαμε. Του δώσαμε εικόνα παρασκηνίου για το Anchor και για το Span, του δώσαμε χρώμα κειμένου, ύψος και πλάτος, καθώς και όλες τις ιδιότητες που χρειάζεται για να δουλέυει σαν κουμπί.
Αποτέλεσμα
Πειραματιστείτε με διαφορετικά χρώματα στις εικόνες σας και με μεγαλύτερους τίτλους στα κουμπιά σας και σίγουρα θα φτάσετε στο αποτέλεσμα που θεωρείτε εσείς ικανοποιητικό. Κατεβάστε τα αρχεία που ακολουθούν και δείτε και τις διάφορες άλλες δυνατότες που έχουμε χρησιμοποιώντας αυτή τη μέθοδο.
Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ
Καλησπέρα ,
Εγώ θα ήθελα να μου δείξεις βήμα-βήμα πώς δημιουργώ κουμπιά που ήδη υπάρχουν σε ένα web site δηλάδη έχω τον αριθμό χρώματος και τις διαστάσεις των κουμπιών και θέλω να φτιάξω και μερικά ακόμα καινούργια (τα οποία να είναι ίδια και στο κείμενο και στο χρώμα εσωτερικά με τα αρχικά κουμπιά.
ευχαριστώ πολύ !
χρησιμοποιώ το photoshop cs5 extended