Παρασκευή 31 Ιανουαρίου 2014
Amazing Image Morph Effect To Post Images
Φίλες και φίλοι γεια σας, ένας εκπληκτικός Paul Crowe μας προσφέρει έναν
ακόμα κώδικα CSS, με τον οποίο δίνουμε στις φωτογραφίες των αναρτήσεων
του blog μας ένα υπέροχο Image Morph Effect!Ένα πολύ ωραίο effect που
λειτουργεί όταν περάσει ο κέρσορας μας πάνω από την εικόνα (mouseover)!
/* CSS Image Morph http://www.spiceupyourblog.com */
.post img{border:10px solid #fff;overflow:hidden;-webkit-box-shadow:5px 5px 5px #111;box-shadow:5px 5px 5px #111;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;margin:20px}
.post img:hover{border-radius:50%;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
/* CSS Image Morph http://www.spiceupyourblog.com */
Πηγαίνετε blogger-->Πρότυπο--->Προσαρμογή
Αυτό ήταν!!
Καλή επιτυχία!!!
Πηγή κώδικα
thanks to spiceupyourblog
Edit by
ακόμα κώδικα CSS, με τον οποίο δίνουμε στις φωτογραφίες των αναρτήσεων
του blog μας ένα υπέροχο Image Morph Effect!Ένα πολύ ωραίο effect που
λειτουργεί όταν περάσει ο κέρσορας μας πάνω από την εικόνα (mouseover)!
Δείτε εδώ το DEMO
Θα πρέπει να εγκαταστήσουμε τον κώδικα CSS και για να γίνει
αυτό:
αυτό:
κάνετε Αντιγραφή τον πάρα κάτω κώδικα:
..............................................................................................................................................................
/* CSS Image Morph http://www.spiceupyourblog.com */
.post img{border:10px solid #fff;overflow:hidden;-webkit-box-shadow:5px 5px 5px #111;box-shadow:5px 5px 5px #111;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;margin:20px}
.post img:hover{border-radius:50%;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
/* CSS Image Morph http://www.spiceupyourblog.com */
.......................................................................................................................................................
και για να τον επικολλήσετε
Πηγαίνετε blogger-->Πρότυπο--->Προσαρμογή
και ακολουθήστε τον εικονογραφημένο οδηγό...
Αυτό ήταν!!
Καλή επιτυχία!!!
Πηγή κώδικα
thanks to spiceupyourblog
Edit by
Εγγραφή σε:
Σχόλια ανάρτησης
(
Atom
)
Smart Defrag 2
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Smart Defrag 2 ένα από τα καλύτερα προγράμματα ανασυγκρότησης των σκληρών μας δίσκων...
Auto Scrolling Recent Posts
Γειά σας ένα πολύ ωραίο widget με οριζόντιο Auto Scrolling για να παρουσιάζουμε τις πρόσφατες αναρτήσεις μας...
Free YouTube Uploader
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Free YouTube Uploader το οποίο μας επιτρέπει...
Social media
Γειά σας τα gadgets και widgets για τα social media δεν έχουν πλέον τελιωμό και σε αυτήν την ανάρτηση θα δούμε...
Back to top button
Γεία σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ γνωστό και χρήσιμο gadget το οποίο μας βοηθά έτσι ώστε...
Sitemap Widget
Γειά σας,σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο και χρήσιμο Sitemap widget το οποίο μας δείχνει μαζεμένες σε μία σελίδα...
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .
0 σχόλια :
Δημοσίευση σχολίου