Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




3 ΦΤΙΑΞΤΕ ANIMATED LINK ΜΕ CSS

Φίλοι bloggers, με ένα κώδικα css μπορείτε να κάνετε έξυπνα και εντυπωσιακά link!!!
Μπορείτε να φτιάξετε ένα link που να αλλάζει χρώματα η ακόμα και να βάλετε ένα ολόκληρο κείμενο που να αλλάζει χρώματα και εικόνες, σαν να έχετε φτιάξει flash η gif αρχείο....Demo σας έβαλα στο τέλος της ανάρτησης....Μη φοβηθείτε να κάνετε τα δικά σας πειράματα με αυτούς τους κώδικες !!!

ΚΩΔΙΚΕΣ:
1ο.Φράση με φόντο άσπρο-μαύρο

/*-- Black & white--*/
.dr-blogger{
background:#000800;
text-align:left;
cursor:pointer;
color:#fff;
margin:5px 0;
float:left;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.dr-blogger:hover{
background:#fff;
font:bold 13px sans-serif;
color:#000800;
border:2px solid #000800;
}
.dr-blogger a {
color:#fff;
text-decoration:none;
}
.dr-blogger a:hover {
color:#fff;
text-decoration:none;
}
</style>

<a  target="_blank"  href='##'>
<div class="dr-blogger" >ΠΕΡΑΣΤΕ ΤΟ ΠΟΝΤΙΚΙ ΣΑΣ ΝΑ ΔΕΙΤΕ ΤΟ ΕΦΕ</div></a>

2o.Με 1 εικόνα και μεγεθυνση
<style>
/*-- small and bigger--*/
.dr-blogger1{
background:#0404B4;
text-align:left;
cursor:pointer;
color:#fff;
margin:5px 0;
float:left;
border:2px solid #81DAF5;
padding:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.dr-blogger1:hover{
background:#FACC2E;
font:bold 16px sans-serif;
color:#000800;
border:2px solid #000800;
}
.dr-blogger1 a {
color:#fff;
text-decoration:none;
}
.dr-blogger1 a:hover {
color:#fff;
text-decoration:none;
}
</style>

<a  target="_blank"  href='##'>
<div class="dr-blogger1" >Mickey Mouse<img src="http://cursors1.totallyfreecursors.com/thumbnails/hand91.gif" width=32 height=32 ></div></a>

3o.Με 2 εικόνες...
<style>
/*--  2 images--*/
.dr-blogger2{
background:#8A0808;
text-align:left;
cursor:pointer;
color:#fff;
margin:5px 0;
float:left;
border:2px solid #81DAF5;
padding:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.dr-blogger2:hover{
background:#BFFF00;
font:bold 12px sans-serif;
color:#000800;
border:2px solid #000800;
}
.dr-blogger2 a {
color:#fff;
text-decoration:none;
}
.dr-blogger1 a:hover {
color:#fff;
text-decoration:none;
}
</style>

<a  target="_blank"  href='##'>
<div class="dr-blogger2" >Ανοίξτε ΕΔΩ<br/><img src="http://www.animatedgif.net/arrowpointers/arrow.rt.spin_e0.gif" width=45 height=32 ><img src="http://www.freesmileys.org/emoticons/emoticon-games-015.gif" width=32 height=32 ></div></a>

***Αλλάξτε τα χρώματα  η τις εικόνες που χρησιμοποιώ εγώ, καθώς και τις φράσεις η τα μεγέθη των γραμματοσειρών (για να αλλάξει το μέγεθος).....
Κάντε τα δικά σας πειράματα για να μάθετε, όσοι δεν γνωρίζετε, πως αλλάζει ένας κώδικας css !!!
*** DEMO =>

Mickey Mouse
Ανοίξτε ΕΔΩ
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!



Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

3 σχόλια:

lamprator είπε...

Νασε καλλα Μαέστρο για τα φώτα σου... Καλη χρονια και οτι επιθυμείς..
Σε ευχαριστουμε...


http://omastorakos.blogspot.gr/

sp. deft είπε...

Είμαι καινούργιος εδώ ,σε βρήκα τυχαία πρίν 5-6 ημέρες. Πολύ ωραία καί χρήσιμα αυτά που βάζεις, επί τέλους κάποιος βοηθάει καί τους αρχάριους που τώρα το ξεκινάνε το blog.
έχω λίγες γνώσεις από html,εδώ πως θα μπεί αυτό, μήπως σαν gadget-html-paste ή κάπως αλλιώς

pandelees karagiann είπε...

βαλε το σαν gadget => javascript/html....
και διαλεξε σε ποιο σημειο της σελιδας θα το βαλεις...