Tech Time: Transition Effect Badge

TRANSLATUM

Μία πολύ χρήσιμη online εφαρμογή είναι
το Translatum το οποίο μας βοηθά να μεταφράσουμε λέξεις και κείμενα μέσα από πάρα πολλά λεξικά!Δεν θέλει εγκατάσταση απλά πατήστε στην εικόνα για να μεταφερθείτε στην ιστοσελίδα του Translatum, επιλέξτε

ότι σας ενδιαφέρει και πατήστε Μετάφραση!

Τετάρτη 23 Δεκεμβρίου 2015

Transition Effect Badge

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα CSS Transition Effect Badge
widget για τα blog μας!Μπορούμε να το τοποθετήσουμε στις sidebars μας, η κάτω
στο footer μας, καθώς έχει το μέγεθος μεγάλου κουμπιού!Διαφέρει από τα
κοινά badges καθώς διαθέτει ένα πολύ ωραίο multicolor effect στο mouseover
του κέρσορα μας!

Δείτε εδώ το DEMO

Η εγκατάσταση είναι απλή:

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript

και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα-->
..............................................................................................................................................................

<style>
.BloggerSpiceCSSBadge{background:#fff;border-radius:10%;cursor:pointer;position:relative;width:15em;height:5em;overflow:hidden;transform:

translateZ(0);margin:0 auto}
.BloggerSpiceCSSBadge h1{color:rgba(8,172,233,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:3em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.BloggerSpiceCSSBadge h1 a{color:rgba(8,172,233,0);text-decoration:none}
.BloggerSpiceCSSBadge:before,.BloggerSpiceCSSBadge:after{border-radius:10%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.BloggerSpiceCSSBadge:after{transform:rotate(45deg)}
.BloggerSpiceCSSBadge:hover:before,.BloggerSpiceCSSBadge:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.BloggerSpiceCSSBadge:hover > h1 a,.BloggerSpiceCSSBadge:hover > h1{color:rgba(8,172,233,1)}/* Widget by www.bloggerspice.com */
</style>
<div class="BloggerSpiceCSSBadge">
<h1><a href="ΕΔΩ ΜΠΑΙΝΕΙ ΤΟ URL ΣΑΣ">ΕΔΩ ΜΠΑΙΝΕΙ Ο ΤΙΤΛΟΣ</a></h1>
</div>

....................................................................................................................................................................

ΑΛΛΑΓΕΣ

Βάζετε το url της Διεύθυνσης σας και τον Τιτλο που θα έχει το badge και
πατάτε Αποθήκευση!!

Καλή επιτυχία!!!

Πηγή κώδικα
thanks to http://www.bloggerspice.com/

Edit by