29 Ιουνίου 2010



2 Image opacity στις εικόνες σας

Το Image opacity είναι βασικά ένας απλός css κώδικας, που όταν εγκατασταθεί στο πρότυπό σας, μπορεί να χρησιμοποιηθεί για να δημιουργήσει στις όποιες εικόνες σας επιθυμείτε, ένα opacity effect. Αυτές οι εικόνες μπορούν να βρίσκονται οπουδήποτε στο blog σας, είτε στην ανάρτηση μέσα, είτε στις μπάρες σας δεξιά κι αριστερά. Το opacity δημιουργεί ένα όμορφο effect στις εικόνες σας, που στην αρχή δείχνουν θαμπές, και παίρνουν το κανονικό τους χρώμα όταν περάσετε απο πάνω τους με το mouse σας.

Demo:

Εικόνα δίχως opacity:







Εικόνα με opacity:







Πώς το πετυχαίνετε.
1. Πηγαίνετε στην διάταξη -> Επεξεργασία HTML
2. Βρείτε το </head> και ακριβώς απο ΠΑΝΩ του κάντε copy τον παρακάτω κώδικα:



<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>



3. Πατήστε Αποθήκευση προτύπου.

Τώρα, κάθε φορά που θα θέλετε να βάλετε το opacity effect σε κάποια εικόνα σας, το μόνο που χρειάζεται να κάνετε, είναι να προσθέσετε το: class="linkopacity" στον κώδικα της εικόνας σας, και ακριβώς μετά το αρχικό <a> tag.

Δηλαδή:
Παράδειγμα 1ο, κώδικας εικόνας, δίχως το opacity effect


<a href="http://twitter.com/aaton" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_L3S3cG5x4ys/S1Y8h8l3P7I/AAAAAAAABZQ/jE7aPSTj8J8/s640/follow-me-on-twitter-big-icon.png" /></a>



Παράδειγμα 2ο, κώδικας εικόνας, με το opacity effect


<a class="linkopacity" href="http://twitter.com/zainali88" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_L3S3cG5x4ys/S1Y8h8l3P7I/AAAAAAAABZQ/jE7aPSTj8J8/s640/follow-me-on-twitter-big-icon.png" /></a>



Εάν παρ' όλα αυτά συναντήσετε κάπου δυσκολία, αφήστε ένα σχόλιο.
Καλή επιτυχία!


"Γειά σου,Εάν βρέθηκες για πρώτη φορά στο Blog μου, και εάν σε ενδιαφέρουν οι αναρτήσεις μου, μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνοντας εγγραφή στο Newsletter του blog μου, να λαβαίνεις απ ευθείας κάθε μου ανάρτηση στο email σου. Είσαι Twitter user; τότε μπορείς επίσης να με κάνεις Follow στο Twitter. Σε ευχαριστώ που με διαβάζεις,"



Οι Σπόνσορες του Blog




Print this post



Related Posts :



2 σχόλια:

VAD είπε... Best Blogger Tips

Μα πώς είσαι ετσι χάλια και στις δυο,παπα Νικόλα;:)))


chk8713 είπε... Best Blogger Tips

Κατ'αρχήν συγχαρητήρια για την δουλεία σου και την έρευνα που έχεις κάνει!!! (αυτό ήταν το χειροκρότημα).
Έχω όμως και μία ερώτηση! Πώς μπορώ να βάλω opacity στο background του κυρίως σώματος του blog;(εκεί που εμφανίζονται οι αναρτήσεις).Όπως επίσις πώς μπορώ να βάλω opαcity στα "πλαίσια" των gadgets;
Ευχαριστώ εκ'των προτέρων.

Υ.Γ Επιδή δεν ξέρω που θα μπορέσω να δώ την απαντησή σου δίνω το e-mail μου chk8713@gmail.com


Δημοσίευση σχολίου

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.

Next Next Next