Ads 468x60px

Δευτέρα, 5 Δεκεμβρίου 2016

Grayscale Css Image Gallery

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο
script για να αναπαράγουμε φωτογραφίες στο blog μας μέσω ενός κώδικα
Css!Μπορείτε να το τοποθετήσετε στην αριστερή μπάρα της σελίδας σας,
η στο κέντρο, η όπου έχετε χώρο και να προσέξετε οι φωτογραφίες να έχουν
το ίδιο μέγεθος!








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

για να το εγκαταστήσετε και εσείς:
 
Πηγαίνετε blogger--> Διάταξη -->

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

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

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

<style>

ul.gallery{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.gallery li{
  display: block;
  width: 200px; /* width of gallery */
  height: 50px; /* portion of each gallery image that's shown initially */
  position: relative;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


ul.gallery li img{
  position: absolute;
  width: 100%;
  border: 10px solid #D8D2A2;
 -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
    filter: url(#grayscale);
  filter: grayscale(1);
    -webkit-transition: all .5s ease-in-out; /* CSS3 transition setting */
    -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}


ul.gallery li:focus{ /* when a LI receives focus (clicked on) */
  z-index: 100;
    outline: none;
    -webkit-transform: rotate(3deg); /* rotate enlarged LI by 3 degrees */
    -moz-transform: rotate(3deg);
    transform: rotate(3deg);
    pointer-events: none; /* disable pointer events on enlarged LI so thumbnail(s) beneath it can receive those events */
}

ul.gallery li:nth-of-type(even):focus{ /* even LIs that received focus */
    -webkit-transform: rotate(-1deg); /* rotate enlarged LI by -1 degrees instead */
    -moz-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

ul.gallery li:focus img{
  -webkit-transform: scale(2) translateX(80%); /* enlarge focused image and move horizontally */
  -moz-transform: scale(2) translateX(80%);
  transform: scale(2) translateX(80%);
  top: 10px; /* shift enlarged image downwards by 10px */
    outline: none;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  -webkit-filter: grayscale(0); /* nullify grayscale effect */
  filter: none;
}

ul.gallery li:first-of-type:focus img{ /* first image within list of thumbnails that receives focus */
  top: 80px; /* move image down by 80px so it's not obscured by top of window edge */
}

svg{
    position: absolute;
    visibility: hidden;
}

</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
        0.3333 0.3333 0.3333 0 0
        0.3333 0.3333 0.3333 0 0
        0 0 0 1 0" />
    </filter>
</svg>
<ul class="gallery" title="Tab after clicking on a thumbnail to cycle though thumbnails">
<li tabindex="1"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="2"><img src="
Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="3"><img src="
Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="4"><img src="
Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="5"><img src="
Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="6"><img src="
Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
</ul>

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

ΑΛΛΑΓΕΣ

Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ --Εδώ βάζετε την διεύθυνση url από την δική σας
εικόνα!

Αποθήκευση και έτοιμοι!


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

Πηγή κώδικα
thanks to dynamicdrive.com





Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog