Προσθέστε κινούμενη λεζάντα στις εικόνες σας με CSS3 (Χωρίς Javascript) !!!

Posted by: themis gs, on: 10/10/2010 11:09:00 πμ, Labels: blogger tips and tricks

Προσθέστε κινούμενη λεζάντα στις εικόνες.
Με CSS3 (Χωρίς Javascript) !!!

Σε αυτή την ανάρτηση θα σας δείξω πως μπορείτε να προσθέστε κινούμενη λεζάντα στις εικόνες του site σας! Για να καταλάβετε τι εννοώ πηγαίνετε το κέρσορα (ποντίκι) πάνω από την εικόνα με τα δέντρα χωρίς να κάνετε κλικ και παρατηρήστε την αλληλεπίδραση που γίνετε. Αν σας άρεσε και θέλετε να το προσθέσετε και εσείς ακολουθήστε τα παρακάτω βήματα.

1. Σύνδεση στο blog σας>>Σχεδίαση>> Επεξεργασία HTML
2. Πατήστε ταυτόχρονα ctrl+f
3. Ψάξτε για το ]]>
4. Κάντε επικόλληση τον παρακάτω κώδικα πριν από αυτό.

 /* Post images with CSS animated captions by GamePlay24 */<br /> <br /> #post-image {<br /> }<br /> <br /> #figure {<br /> position:relative;<br /> float:left;<br /> margin:10px;<br /> overflow:hidden;<br /> padding: 1px;<br /> }<br /> <br /> #figure:hover {<br /> -moz-box-shadow:0 0 20px rgba(0,0,0,0.75);<br /> -webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);<br /> box-shadow:0 0 20px rgba(0,0,0,0.75);<br /> }<br /> <br /> #figure .caption {<br /> position:absolute;<br /> bottom:0;<br /> left:0;<br /> opacity: 0.75;<br /> margin-bottom:-115px;<br /> -webkit-transition: margin-bottom;<br /> -webkit-transition-duration: 400ms;<br /> -webkit-transition-timing-function: ease-out;<br /> -moz-transition-property: margin-bottom;<br /> -moz-transition-duration: 400ms;<br /> -moz-transition-timing-function: ease-out;<br /> -o-transition-property: margin-bottom;<br /> -o-transition-duration: 400ms;<br /> transition: margin-bottom;<br /> transition-duration: 400ms;<br /> transition-timing-function: ease-out;<br /> }<br /> <br /> #figure:hover .caption {<br /> margin-bottom:0px;<br /> }<br /> <br /> #post-image .caption {<br /> width:100%;<br /> height:90px;<br /> padding:10px;<br /> background:#111;<br /> color:#fff;<br /> font-family: Arial, Helvetica, sans-serif;<br /> }<br /> <br /> #post-image .caption b {<br /> text-shadow: 0px 2px 0px #000;<br /> }<br /> #post-image .caption {<br /> color: #ddd;<br /> line-height: 24px;<br /> font-size: 14px;<br /> text-shadow: 0px 2px 0px #000;<br /> }

5. Κάθε φορά που θα θέλετε να εμφανιζετε αυτο το εφέ θα πρέπει να προσθέτετε τον ακόλουθο κώδικα στην εικόνα.
<br />
<div id="post-image"><div id='figure'><img src="URL της εικόνας"/><br />
<span class='caption'><br />
<b> Τίτλος εικόνας εδώ </b><br />
Περιγραφή εικόνας εδώ<br />
</span><br />
</div></div>