IMAGE FLIP EFFECT

FLIP IMAGE EFFECT.

Με τον παρακάτω κώδικα μπορείτε να εναλλάξετε 2 εικόνες με flip effect. Μπορείτε να αλλάξετε τις διαστάσεις αλλάζοντας το width="320" height="200" που βρίσκεται αμέσως μετά το πράσινο link των εικόνων το οποίο link εννοείτε πως μπορείτε να το αλλάξετε με το δικό σας link. Δείτε πως θα εναλλάσονται οι εικόνες με το flip effect στο παρακάτω demo ▼.

ΕΜΦΑΝΙΣΗ ΕΙΚΟΝΩΝ ΟΤΑΝ ΠΕΡΝΑTΕ ΤΟ ΠΟΝΤΙΚΙ ΠΑΝΩ ΑΠΟ ΕΙΚΟΝΙΔΙΑ

ΕΜΦΑΝΙΣΗ ΕΙΚΟΝΩΝ ΟΤΑΝ ΠΕΡΝΑTΕ ΤΟ ΠΟΝΤΙΚΙ ΠΑΝΩ ΑΠΟ ΕΙΚΟΝΙΔΙΑ

Με τον παρακάτω κώδικα μπορούμε να βάλουμε μερικά εικονίδια οπουδήποτε μέσα στο ιστολόγιό μας και όταν περνάμε το ποντίκι μας από πάνω τους να εμφανίζεται μία εικόνα στις διαστάσεις και στη θέση που εμείς θα ορίσουμε. Τον κώδικα αυτόν μπορείτε να τον δείτε σε λειτουργία λίγο πιο κάτω όπου παρουσιάζω με αυτόν τον τρόπο μερικές εικόνες από την Λευκάδα.

IMAGES WITH FLOATING SCALE EFFECT

IMAGES WITH FLOATING SCALE EFFECT.

Με τον παρακάτω κώδικα μπορείτε να κλικάρετε πάνω σε μικρές εικόνες και να τις προβάλετε σε μία άλλη θέση με flοating scale effect. Μπορείτε να αλλάξετε τις διαστάσεις των μικρών εικόνων αλλάζοντας το width="240" που βρίσκεται στην 3^η γραμμή του κώδικα. Όσο μεγαλύτερες είναι οι εικόνες τόσο μεγαλύτερο θα είναι και το scale effect τους (δηλ. η μεγενθησή τους) μη δώσετε πλάτος πάνω από 250px. Εννοείτε πως μπορείτε να αλλάξετε τα πράσινα links των εικόνων με τα δικά σας link. Δείτε πως θα προβάλονται οι εικόνες όταν κάνετε κλίκ πάνω τους στο demo μετά τον κώδικα ▼.

IMAGE CAPTION HOVER EFFECT

IMAGE CAPTION HOVER EFFECT

Με τον παρακάτω κώδικα μπορείτε να βάλετε εικόνες οι οποίες όταν περνάτε το ποντίκι από πάνω τους θα μετακινούνται στα δεξιά και θα αποκαλύπτεται ένα κείμενο με την περιγραφή τους. Όταν βγάλετε το ποντίκι από πάνω τους τότε το κείμενο της περιγραφής θα καλύπτεται πάλι από την εικόνα. Οι διαστάσεις των συγκεκριμένων εικόνων είναι 314Χ196 και αν θέλετε να τις αλλάξετε πρέπει να το κάνετε σε όλα τα σημεία που θα τις συναντήσετε μέσα στον κώδικα.

ΠΩΣ ΑΛΛΑΖΩ ΤΟΝ ΚΕΡΣΟΡΑ ΤΟΥ ΠΟΝΤΙΚΙΟΥ ΣΤΟ BLOG ΜΟΥ

ΠΩΣ ΑΛΛΑΖΩ ΤΟΝ ΚΕΡΣΟΡΑ ΤΟΥ ΠΟΝΤΙΚΙΟΥ ΣΤΟ BLOG ΜΟΥ

Μπορείτε με την προσθήκη μίας γραμμής κώδικα να αλλάξετε την εμφάνιση του κέρσορα του ποντικιού μέσα στο blog σας. Την γραμμή αυτή μπορείτε να την βάλετε είτε μέσα στο πρότυπο πρίν την ετικέτα ]]></b:skin> είτε απλά σαν gadget με την προσθήκη ενός <style> στην αρχή και ενός </style> στο τέλος της γραμμής. Τα εικονίδια που υπάρχουν στους παρακάτω κώδικες και άλλα περισσότερα μπορείτε να τα κατεβάσετε από τον ενσωματωμένο φάκελο του box.com που βρίσκεται στο τέλος αυτής της ανάρτησης.

ΕΜΦΑΝΙΣΗ ΕΙΚΟΝΩΝ ΟΤΑΝ ΠΕΡΝΑTΕ ΤΟ ΠΟΝΤΙΚΙ ΠΑΝΩ ΑΠΟ LINKS Νο 2

ΕΜΦΑΝΙΣΗ ΕΙΚΟΝΩΝ ΟΤΑΝ ΠΕΡΝΑTΕ ΤΟ ΠΟΝΤΙΚΙ ΠΑΝΩ ΑΠΟ LINKS Νο 2
Με τον παρακάτω κώδικα μπορούμε να βάλουμε μερικά links οπουδήποτε μέσα στο ιστολόγιό μας και όταν περνάμε το ποντίκι μας από πάνω τους να εμφανίζεται μία εικόνα στις διαστάσεις και στη θέση που εμείς θα ορίσουμε. Τον κώδικα αυτόν μπορείτε να τον δείτε σε λειτουργία λίγο πιο κάτω όπου παρουσιάζω με αυτόν τον τρόπο μερικές εικόνες από την Λευκάδα. Καλό είναι οι εικόνες να ανεβούν σε κάποιο λέυκωμα τουgoogle+ ή του imgur και να έχουν αν όχι την ίδια διάσταση τουλάχιστον την ίδια αναλογία για να εμφανίζονται όλες στον ίδιο συγκεκριμένο χώρο.

ΠΩΣ ΕΜΦΑΝΙΖΩ ΜΙΑ ΕΙΚΟΝΑ ΣΕ ΣΤΑΤΙΚΟ ΣΗΜΕΙΟ ΤΟΥ BLOG ΜΟΥ

ΠΩΣ ΕΜΦΑΝΙΖΩ ΜΙΑ ΕΙΚΟΝΑ ΣΕ ΣΤΑΤΙΚΟ ΣΗΜΕΙΟ ΤΟΥ BLOG ΜΟΥ
Με τον παρακάτω κώδικα μπορούμε πατώντας πάνω σε buttons με περιγραφή να εμφανίσουμε εικόνες σε στατικά σημεία του blog μας. Ο κώδικας αυτός μπορεί να μπεί απλά σαν gadget στις πλευρικές μπάρες, στο υποσέλιδο και μέσα στον κώδικα της ανάρτησης. Αλλάξτε τις εικόνες μου και τις περιγραφές με τις δικές σας εικόνες και περιγραφές. Η θέση που θα εμφανίζεται η κάθε εικόνα αλλάξει εκεί που γράφει position: fixed; left:0px;top:28px; Δείτε πως εμφανίζονται οι 3 παρακάτω εικόνες που έχω βάλει σαν demo.

ΚΩΔΙΚΑΣ ΓΙΑ MOUSEOVER ΚΑΙ MOUSEOUT ΣΕ ΦΩΤΟΓΡΑΦΙΕΣ

ΚΩΔΙΚΑΣ ΓΙΑ MOUSEOVER ΚΑΙ MOUSEOUT ΣΕ ΦΩΤΟΓΡΑΦΙΕΣ
Με τον παρακάτω κώδικα μπορούμε να περνάμε το ποντίκι μας πάνω από μία φωτογραφία και να εμφανίζεται μία δεύτερη φωτογραφία και μετά να το απομακρύνουμε από αυτήν και να εμφανίζεται η πρώτη φωτογραφία. Βάλτε τα link των εικόνων σας στη θέση των μώβ link και προσέξτε να βάλετε σωστά τα μονά και τα διπλά αυτάκια στην αρχή και στο τέλος των links. Τις διαστάσεις των εικόνων τις αλλάζετε εκεί που γράφει width: 232px; height: 145px;

ΚΩΔΙΚΑΣ ΓΙΑ ΑΔΙΑΦΑΝΕΙΑ / OPACITY ΣΤΙΣ ΕΙΚΟΝΕΣ

ΚΩΔΙΚΑΣ ΓΙΑ ΑΔΙΑΦΑΝΕΙΑ / OPACITY ΣΤΙΣ ΕΙΚΟΝΕΣ
Με τον παρακάτω κώδικα μπορείτε να αλλάξετε την ορατότητα των εικόνων σας, δηλαδή όταν βάζετε το ποντίκι επάνω τους να αλλάζει η φωτεινότητα και η διαφάνεια. Στον πρώτο κώδικα που επαναλαβάνεται 4 φορές για 4 εικόνες δεν έχω βάλει link παραπομπής στην αρχική εικόνα, ενώ στον δεύτερο κώδικα που και αυτός επαναλαβάνεται 4 φορές για 4 εικόνες υπάρχει link παραπομπής στην αρχική εικόνα διαστάσεων 1920Χ1200 px. Την αδιαφάνεια την ρυθμίζετε αλλάζωντας τα πράσινα νούμερα και τις διαστάσεις των εικόνων προεσκόπισης αλλάζωντας τα γαλάζια νούμερα.

ΚΩΔΙΚΑΣ ΠΕΡΙΣΤΡΟΦΗΣ ΕΙΚΟΝΩΝ

ΚΩΔΙΚΑΣ ΠΕΡΙΣΤΡΟΦΗΣ ΕΙΚΟΝΩΝ
Με τον παρακάτω κώδικα μπορούμε να περιστρέψουμε μία εικόνα γύρω από τον εαυτό της όσες μοίρες θέλουμε. Απλά ανεβάστε μία εικόνα σε ένα photo sharing site και μετά κάντε δεξί κλίκ επάνω της και πάρτε την διεύθυνση url της εικόνας και επικολλήστε την σε μία από τις θέσεις των μώβ link εικόνων του παρακάτω κώδικα. Μετά επιλέξτε πόσες μοίρες θα περιστρέφεται η εικόνα αυτή αλλάζωντας τα γαλάζια νούμερα. Το πόσο γρήγορα θα περιστρέφεται η εικόνα το ρυθμίζετε αλλάζωντας τα πράσινα νούμερα.

ΚΩΔΙΚΑΣ ΓΙΑ ZOOM ΣΤΙΣ ΦΩΤΟΓΡΑΦΙΕΣ Νο 3

ΚΩΔΙΚΑΣ ΓΙΑ ZOOM ΣΤΙΣ ΦΩΤΟΓΡΑΦΙΕΣ Νο 3
Με τον παρακάτω κώδικα μπορούμε να κάνουμε zoom πάνω στις φωτογραφίες μας περνώντας το ποντίκι από πάνω τους και επιπλέον μπορούμε κάνωντας scroll με το ροδάκι του mouse να ζουμάρουμε περισσότερο μέσα στη φωτογραφία. Θα πρέπει να βάλετε 2 link ένα για την μικρή φωτογραφία και ένα για την μεγάλη. Το link της μικρής φωτογραφίας είναι αυτό που έχω χρωματίσει με μώβ χρώμα και το link της μεγάλης είναι αυτό που έχω χρωματίσει με πορτοκαλί χρώμα. Εάν βάλετε πάνω από μία φωτογραφίες θα χρειαστεί να αλλάζετε το id="zoom_mw" σε id="zoom_mwa", id="zoom_mwb" κ.ο.κ για κάθε πρόσθετη φωτογραφία που βάζετε. Το ίδιο ισχύει και εντός του <script> "#zoom_mw", "#zoom_mwa", "#zoom_mwb" κ.ο.κ

ΚΩΔΙΚΑΣ ΓΙΑ ZOOM ΣΤΙΣ ΦΩΤΟΓΡΑΦΙΕΣ Νο 2

ΚΩΔΙΚΑΣ ΓΙΑ ZOOM ΣΤΙΣ ΦΩΤΟΓΡΑΦΙΕΣ Νο 2
Αυτός είναι ένας κώδικας με τον οποίον μπορούμε να κάνουμε zoom πάνω στις φωτογραφίες μας περνώντας το ποντίκι από πάνω τους. Θα πρέπει να βάλετε 2 link ένα για την μικρή φωτογραφία και ένα για την μεγάλη. Το link της μικρής φωτογραφίας είναι αυτό που έχω χρωματίσει με μώβ χρώμα και το link της μεγάλης είναι αυτό που έχω χρωματίσει με πορτοκαλί χρώμα. Εάν βάλετε πάνω από μία φωτογραφίες θα χρειαστεί να αλλάζετε το id="zoom_07" σε id="zoom_07a", id="zoom_07b" κ.ο.κ για κάθε πρόσθετη φωτογραφία που βάζετε. Το ίδιο ισχύει και εντός του <script> "#zoom_07", "#zoom_07a", "#zoom_07b" κ.ο.κ

ΚΩΔΙΚΑΣ ΓΙΑ ZOOM ΣΤΙΣ ΦΩΤΟΓΡΑΦΙΕΣ Νο 1

ΚΩΔΙΚΑΣ ΓΙΑ ZOOM ΣΤΙΣ ΦΩΤΟΓΡΑΦΙΕΣ Νο 1
Με τον παρακάτω κώδικα μπορούμε να κάνουμε zoom πάνω στις φωτογραφίες μας περνώντας το ποντίκι από πάνω τους. Θα χρειαστεί να βάλετε 2 link ένα για την μικρή φωτογραφία και ένα για την μεγάλη. Το link της μικρής φωτογραφίας είναι αυτό που έχω χρωματίσει με μώβ χρώμα και το link της μεγάλης είναι αυτό που έχω χρωματίσει με πορτοκαλί χρώμα. Εάν βάλετε πάνω από μία φωτογραφίες θα χρειαστεί να αλλάζετε το id="zoom_05" σε id="zoom_05a", id="zoom_05b" κ.ο.κ για κάθε πρόσθετη φωτογραφία που βάζετε. Το ίδιο ισχύει και εντός του <script> "#zoom_05", "#zoom_05a", "#zoom_05b" κ.ο.κ

ΚΩΔΙΚΑΣ ΜΕΓΕΝΘΥΣΗΣ ΦΩΤΟΓΡΑΦΙΩΝ Νο 3

ΚΩΔΙΚΑΣ ΜΕΓΕΝΘΥΣΗΣ ΦΩΤΟΓΡΑΦΙΩΝ Νο 3
Με τον παρακάτω κώδικα μπορούμε περνώντας το ποντίκι μας πάνω από τις φωτογραφίες μας να τις μεγενθύνουμε. Το μέγεθος των μικρών εικόνων το ρυθμίζετε αλλάζοντας τα γαλάζια νούμερα εκεί που γράφει width: 232px; height:145px; Το πόσο θα μεγενθύνεται η φωτογραφία το ρυμθίζετε αλλάζοντας το γαλάζιο νούμερο εκεί που γράφει width:480px; Αν θέλετε πατώντας κλίκ πάνω στην φωτογραφία να ανοίγει σε άλλη θέση μέσα στο ιστολόγιο αλλάξτε τα left:0px; top:30px; Το μώβ link είναι της μικρής εικόνας με πλάτος 176px και το πράσινο link είναι της μεγάλης εικόνας με 480px πλάτος. Αυτά τα λίνκ τα αλλάζετε με τα δικά σας link εικόνων.

ΚΩΔΙΚΑΣ ΜΕΓΕΝΘΥΣΗΣ ΦΩΤΟΓΡΑΦΙΩΝ Νο 2

ΚΩΔΙΚΑΣ ΜΕΓΕΝΘΥΣΗΣ ΦΩΤΟΓΡΑΦΙΩΝ Νο 2
Με τον παρακάτω κώδικα μπορούμε περνώντας το ποντίκι μας πάνω από τις φωτογραφίες μας να τις μεγενθύνουμε. Το μέγεθος των μικρών εικόνων το ρυθμίζετε αλλάζοντας τα γαλάζια νούμερα εκεί που γράφει width="232" height="145" Το πόσο θα μεγενθύνεται η φωτογραφία το ρυμθίζετε αλλάζοντας τα πράσινα νούμερα εκεί που γράφει -transform:scale(2.0); Τα links των εικόνων που έχω χρωματίσει με μώβ χρώμα πρέπει να τα αλλάξετε με τα δικά σας links εικόνων.

ΚΩΔΙΚΑΣ ΜΕΓΕΝΘΥΣΗΣ ΦΩΤΟΓΡΑΦΙΩΝ Νο 1

ΚΩΔΙΚΑΣ ΜΕΓΕΝΘΥΣΗΣ ΦΩΤΟΓΡΑΦΙΩΝ Νο 1
Με τον παρακάτω κώδικα μπορούμε περνώντας το ποντίκι μας πάνω από τις φωτογραφίες μας να τις μεγενθύνουμε. Το μέγεθος των μικρών εικόνων το ρυθμίζετε αλλάζοντας τα γαλάζια νούμερα εκεί που γράφει width: 168px; height:105px; Το πόσο θα μεγενθύνεται η φωτογραφία το ρυμθίζετε αλλάζοντας τα πράσινα νούμερα εκεί που γράφει -transform:scale(2.0); Πατώντας κλίκ πάνω στην φωτογραφία ανοίγει σε νέα καρτέλα η ίδια φωτογραφία στο μεγάλο της μέγεθος.

3D ANNIMATION EFFECT ΓΙΑ ΦΩΤΟΓΡΑΦΙΕΣ

3D  ANNIMATION EFFECT ΓΙΑ ΦΩΤΟΓΡΑΦΙΕΣ
Με τον παρακάτω κώδικα μπορούμε να δώσουμε στις φωτογραφίες μας ένα 3D annimation effect. Στο τέλος αυτής της ανάρτησης έχω επιλέξει 8 φωτογραφίες από 4 νησιά, 2 για κάθε νησί, οι οποίες 2 γυρνάνε γύρω από τον εαυτό τους και είναι η μία πλάτη με την άλλη σαν εξώφυλλο και οπισθόφυλλο περιοδικού για παράδειγμα. Αν τώρα πατήσετε πάνω σε μία από αυτές θα οδηγηθήτε στο αντίστοιχο άλμπουμ για να δείτε και τις υπόλοιπες φωτογραφίες του νησιού. Οι διαστάσεις των φωτογραφιών αλλάζουν όπου γράφει height: 300px;  width: 480px;

ΠΩΣ ΦΤΙΑΧΝΩ ΜΙΑ ΕΙΚΟΝΑ GIF

ΠΩΣ ΦΤΙΑΧΝΩ ΜΙΑ ΕΙΚΟΝΑ GIF
Για να φτιάξουμε μια εικόνα GIF επιλέγουμε 10 περίπου εικόνες jpg ίδιας αναλογίας και ίδιων διαστάσεων και τις ανεβάζουμε στο GIFMAKER.ME μετά βάζουμε τα δευτερόλεπτα εναλλαγής μεταξύ των εικόνων μέσα σε ένα πλάισιο που γράφει από πάνω του Annimation speed και μετά πατάμε το κουμπί Create GIF animation για να δημιουργηθεί η εικόνα GIF. Μετά από αυτό το βήμα πατάμε λίγο πιο κάτω το link που γράφει Download thiw GIF για να κατέβει στον φάκελο downloads του υπολογιστή μας το τελικό αρχείο της εικόνας GIF.

ΠΩΣ ΚΟΒΩ ΜΙΑ ΕΙΚΟΝΑ ΣΤΑ ΜΕΤΡΑ ΜΟΥ

ΠΩΣ ΚΟΒΩ ΜΙΑ ΕΙΚΟΝΑ ΣΤΑ ΜΕΤΡΑ ΜΟΥ
Αν θέλουμε να κόψουμε ένα μέρος από μία εικόνα και να αλλάξουμε έτσι την αναλογία του πλάτους και του ύψους της την ανοίγουμε στο πρόγραμμα επεξεργασίας εικόνας IRFAN VIEW και πατάμε το ποντίκι επάνω της και το σέρνουμε σε μία οποιαδήποτε κατεύθυνση για να δημιουργηθεί ένα πλαίσιο περικοπής μέσα στην εικόνα. Το πλαίσιο αυτό το τραβάμε από όποια πλευρά θέλουμε για να έρθει εκεί που θα κόψουμε την εικόνα. Αφού πλαισιόσουμε το μέρος της εικόνας που θέλουμε να κρατήσουμε πατάμε από το μενού edit την επιλογή cpop selection.

ΕΜΦΑΝΙΣΗ ΕΙΚΟΝΩΝ ΟΤΑΝ ΠΕΡΝΑTΕ ΤΟ ΠΟΝΤΙΚΙ ΠΑΝΩ ΑΠΟ LINKS Νο 1

ΕΜΦΑΝΙΣΗ ΕΙΚΟΝΩΝ ΟΤΑΝ ΠΕΡΝΑTΕ ΤΟ ΠΟΝΤΙΚΙ ΠΑΝΩ ΑΠΟ LINKS Νο 1
Με τον παρακάτω κώδικα μπορούμε να βάλουμε μερικά links στην αριστερή πλευρική μπάρα και όταν περνάμε το ποντίκι μας από πάνω τους να εμφανίζεται μία εικόνα μεγενθυμένη στις διαστάσεις και στη θέση που θέλουμε. Τον κώδικα αυτόν μπορείτε να τον δείτε σε λειτουργία λίγο πιο κάτω όπου παρουσιάζω με αυτόν τον τρόπο μερικές εικόνες από την Λευκάδα. Καλό είναι οι εικόνες που θα ανεβάσετε σε κάποιο λέυκωμα του google+ να έχουν αν όχι την ίδια διάσταση τουλάχιστον την ίδια αναλογία για να μην παραμορφωθούν στην μεγέθυνση. Μπορείτε να αλλάξετε τα χρώματα των backgrounds εκεί που γράφει background:#173374; και background:#255720;