Στοιχεία με Επισκίαση(CSS & jQuery)
Στο σημερινό βοήθημα θα δούμε πώς μπορούμε να δημιουργήσουμε ένα πολύ όμορφο εφέ στις εικόνες μας ή στους συνδέσμους μας, όταν ο χρήστης περάσει τον κέρσορα πάνω από την εικόνα ή τον σύνδεσμο. Θα χρησιμοποιήσουμε κάποια βασική HTML, CSS και jQuery.
Πρώτο βήμα που πρέπει να κάνουμε είναι να δημιουργήσουμε τους συνδέσμους μας.
HTML
Δημιουργούμε ένα κενό αρχείο html και γράφουμε τον εξής κώδικα στο < body > κομμάτι
<ul> <li> <a href="#" class="thumb"><span><img src="image.jpg" alt="" /></span></a> <h2><a href="#">Image Name</a></h2> </li> </ul>
CSS
Αφού έχουμε έτοιμο το αρχείο μας, θα δημιουργήσουμε και θα συνδέσουμε το αρχείο του στυλ. Δημιουργούμε το style.css και γράφουμε τον εξής κώδικα
body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-x-system-font:none;
background:#FFFFFF none repeat scroll 0 0;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:100%;
line-height:normal;
margin:0;
padding:0;
position:relative;
}
h1 {
font-size:2.5em;
font-weight:normal;
text-align:center;
}
h1 small {
color:#999999;
display:block;
font-size:0.7em;
}
img {
border:medium none;
}
ul.gallery {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
padding:0;
width:708px;
}
ul.gallery li {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
border:1px solid #CCCCCC;
display:inline;
float:left;
margin:10px;
padding:0;
text-align:center;
}
ul.gallery li a.thumb {
border-bottom:1px solid #CCCCCC;
cursor:pointer;
height:182px;
padding:5px;
width:204px;
}
ul.gallery li span {
display:block;
height:182px;
overflow:hidden;
width:204px;
}
ul.gallery li a.thumb:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#333333 none repeat scroll 0 0;
}
ul.gallery li h2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#F0F0F0 none repeat scroll 0 0;
border-top:1px solid #FFFFFF;
font-size:1em;
font-weight:normal;
margin:0;
padding:10px;
text-transform:uppercase;
}
ul.gallery li a {
color:#777777;
display:block;
text-decoration:none;
}
Για να συνδέσουμε το αρχείο στυλ με την ιστοσελίδα μας γράφουμε τον εξής κώδικα στο <head> μέρος του Index.html
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
Η Εικόνα Μας
Για το σημερινό βοήθημα θα χρησιμοποιήσουμε τα css sprites (image replacement). Έτσι θα δημιουργήσουμε την εικόνα μας η οποία μέσω του css και της jQuery θα μετακινείται
Μπορείτε να κατεβάσετε τα αρχεία στο τέλος του άρθρου
jQuery
Τέλος αφού έχουμε τα αρχεία μας έτοιμα, είναι ώρα να δημιουργήσουμε το εφέ μας. Θα γράψουμε τον παρακάτω κώδικα στο <head> κομμάτι της ιστοσελίδας μας
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Θα δημιουργήσουμε το εφέ γράφοντας λίγη jQuery, σε ένα νέο αρχείο με το όνομα fade.js
$(document).ready(function() {
$("ul.gallery li").hover(function() { //Όταν ο χρήστης κάνει hover...
var thumbOver = $(this).find("img").attr("src"); //Βρές το url της εικόνας και ανάθεσε το στο 'thumbOver'
//Όρισε την εικόνα παρασκηνίου (thumbOver) στο <a> tag - Όρισε την θέση ώς bottom
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
//Θέσε στην εικόνα 0 opacity (fade out)
$(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide() //Κρύψε την εικόνα μετά το fade
});
} , function() { //Όταν ο χρήστης κάνει hover out...
//Ξαναφέρε την εικόνα σε full opacity
$(this).find("span").stop().fadeTo('normal', 1).show();
});
});
Τέλος θα προσθέσουμε το παρακάτω κομμάτι κώδικα στο <head> μέρος της σελίδας μας ώστε να συμπεριλάβουμε το αρχείο που μόλις φτιάξαμε.
<script type="text/javascript" src="fade.js"></script>
Δείτε το τελικό αποτέλεσμα εδώ
Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ
