RSS

EFFECT ΔΙΑΦΑΝΕΙΑΣ ΣΤΙΣ ΕΙΚΟΝΕΣ ΤΟΥ BLOG ΣΑΣ

28 Μαρ.

Καλησπέρα φίλες και φίλοι. Προσωπικοί λόγοι με ανάγκασαν να μη σηκώσω ανάρτηση για ενάμισι μήνα και παραπάνω. Παρ’ όλα αυτά η επισκεψιμότητα του ιστολογίου δεν έπεσε πολύ και σας ευχαριστώ γι’ αυτό.
Σήμερα θα δούμε πως μπορούμε να εφαρμόσουμε ένα πολύ όμορφο effect στις εικόνες που έχουμε στο ιστολόγιο μας. Θα κάνουμε τις εικόνες διαφανείς (transparency) και όταν περνάμε το ποντίκι από πάνω τους να φαίνεται καθαρά η φωτογραφία. Αυτό το effect έχει σαν στόχο την καλαισθησία και τον ενυπωσιασμό, εφόσον όταν εφαρμόζεται σε ένα blog δίνει μια αίσθηση κίνησης και όχι στατικότητας. Δείτε τη παρακάτω εικόνα και περάστε από πάνω της το ποντίκι και θα καταλάβετε τι εννοώ.

Η εφαρμογή το είναι πανεύκολη. Ο κώδικας είναι ο παρακάτω:

<img src=»εδώ μπαίνει η διεύθυνση της εικόνας που θέλετε να βάλετε» onmouseout=»this.style.opacity=0.4;this.filters.alpha.opacity=40» onmouseover=»this.style.opacity=1;this.filters.alpha.opacity=100» /></a

Η διεύθυνση μιας εικόνας βρίσκεται αν κάνετε δεξί κλικ πάνω σ’ αυτήν και επιλέξετε: αντιγραφή τοποθεσίας εικόνας. Μετά με την μέθοδο αντιγραφή – επικόληση (copy – paste) τη δηλώνετε στον κώδικα. Αν θέλετε να κάνετε την εικόνα ενεργό σύνδεσμο (link) απλά πρέπει να προσθέσετε τον κώδικα που βρίσκεται σε μπλε χρώμα. Δείτε παρακάτω:

<a href=»εδώ μπαίνει η διεύθυνση που θέλετε να παραπέμπει η εικόνα«><img src=»εδώ μπαίνει η διεύθυνση της εικόνας που θέλετε να βάλετε» onmouseout=»this.style.opacity=0.4;this.filters.alpha.opacity=40» onmouseover=»this.style.opacity=1;this.filters.alpha.opacity=100» /></a>

Τέλος αν θέλετε να κεντράρετε την εικόνα το μόνο που έχετε να κάνετε είναι να βάλετε τον κώδικα ανάμεσα στο <center> και στο </center> Δηλαδή ο κώδικας θα γίνει όπως παρακάτω:

<center><a href=»εδώ μπαίνει η διεύθυνση που θέλετε να παραπέμπει η εικόνα«><img src=»εδώ μπαίνει η διεύθυνση της εικόνας που θέλετε να βάλετε» onmouseout=»this.style.opacity=0.4;this.filters.alpha.opacity=40» onmouseover=»this.style.opacity=1;this.filters.alpha.opacity=100» /></a></center>

Και το αποτέλεσμα θα είναι όπως η παρακάτω εικόνα. Αν βάλετε το ποντίκι πάνω στην εικόνα θα δείτε ότι είναι και σύνδεσμος (link) και αν κάνετε κλικ πάνω στην εικόνα θα μεταφερθείτε στη διεύθυνση που δηλώσατε στον κώδικα:

Αν θέλετε παραπάνω παραμετροποίηση μπορείτε να πειραματιστείτε αλλάζοντας τις τιμές που βρίσκονται στον κώδικα με μωβ χρώμα.
Ελπίζω το παραπάνο tutorial να το βρήκατε ενδιαφέρον και διασκεδαστικό. Καλή επιτυχία!

Advertisements
 
8 Σχόλια

Posted by στο Μαρτίου 28, 2011 in EFFECT, ΕΙΚΟΝΕΣ, TRANSPARENCY

 

8 responses to “EFFECT ΔΙΑΦΑΝΕΙΑΣ ΣΤΙΣ ΕΙΚΟΝΕΣ ΤΟΥ BLOG ΣΑΣ

  1. Ὁ πάροικος

    Μαρτίου 29, 2011 at 6:37 πμ

    Πάνω ποὺ τὸ ἔψαχνα ἐχθὲς, ἔπεσα σήμερα πάνω στὴν ἀνάρτησή σου.Εὐχαριστῶ, οἱ ἀναρτήσεις σου βοηθοῦν πολύ.

     
  2. NISPELL

    Μαρτίου 29, 2011 at 11:39 πμ

    !…………..:-)

     
  3. mygreek

    Απρίλιος 1, 2011 at 10:31 πμ

    Γεια σου Δημητρη!!!

     
  4. Γιάννης

    Απρίλιος 7, 2011 at 10:38 μμ

    Ωραίο !

     
  5. γνωριμίες

    Απρίλιος 30, 2011 at 9:22 πμ

    Πολύ μου άρεσε αυτό το effect και το δοκίμασα σε κάποια μπλόγκ μου. Σε ευχαριστώ για το tips

     
  6. hackaday

    Μαΐου 14, 2011 at 12:36 πμ

    @γνωριμίες Χαίρομαι που το βρήκες ενδιαφέρον.

     
  7. hackaday

    Μαΐου 14, 2011 at 12:37 πμ

    @Γιάννης Όντως είναι πολύ καλό.

     
  8. hackaday

    Μαΐου 14, 2011 at 12:50 πμ

    @NISPELL !…………..:-)

     

Σχολιάστε

Εισάγετε τα παρακάτω στοιχεία ή επιλέξτε ένα εικονίδιο για να συνδεθείτε:

Λογότυπο WordPress.com

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό WordPress.com. Αποσύνδεση / Αλλαγή )

Φωτογραφία Twitter

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Twitter. Αποσύνδεση / Αλλαγή )

Φωτογραφία Facebook

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Facebook. Αποσύνδεση / Αλλαγή )

Φωτογραφία Google+

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Google+. Αποσύνδεση / Αλλαγή )

Σύνδεση με %s

 
Αρέσει σε %d bloggers: