Galeria obrazów w skali szarości
 
Ta galeria obrazów CSS renderuje miniaturki początkowo w skali szarości do momentu kliknięcia, aby wyświetlić większą wersję obrazu. Można szybko przechodzić między miniaturami używając klawisza "Tab". Obsługa odcieni szarości jest możliwa dzięki filtrom CSS oraz nowej funkcji CSS3, która może obsługiwać inne typowe efekty, takie jak sepia, blur, invert itd. Filtry CSS3 są obsługiwane we współczesnych wersjach Chrome, Firefox i Safari, ale nie są obsługiwane w IE11.

Efekt można zpbaczyć TUTAJ

Aby renderować element w skali szarości za pomocą CSS, wystarczy użyć filtru właściwości CSS: grayscale (number), któremu towarzyszy zwykły kod przedrostkowych odpowiedników:

#grayelement{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}

Wartość powinna wynosić od 0 do 100% lub alternatywnie od 0 do 1, aby określić stopień skali szarości. Teraz, w Firefoksie (od wersji FF 31), przy korzystaniu z filtrów CSS jest haczyk - musisz również zdefiniować znacznik filtra SVG na stronie, aby efekt mógł zostać zastosowany. W przypadku filtru w skali szarości filtr SVG wygląda następująco:

<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>

Należy zwrócić uwagę na atrybut id wewnątrz znacznika filtra. Następnie wewnątrz swojego kodu CSS dodaj dodatkowy wiersz na czerwono do oryginalnego kodu CSS:

#grayelement{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: url(#grayscale); /* set URL to id of SVG grayscale filter */
filter: grayscale(100%);
}

Aby cofnąć filtr w skali szarości, ustaw filtr: Skala szarości (0), a dla FF najłatwiej ustawić filtr: brak (alternatywą jest zdefiniowanie kolejnego filtru skali szarości SVG o wartościach = 10000, 01000, 00100, 00010).

Oto KOD pliku css:

<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>

 

Oraz KOD do pliku HTML

<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="/media/coconut.jpg" /></li>
<li tabindex="2"><img src="/media/desert.jpg" /></li>
<li tabindex="3"><img src="/media/horses.jpg" /></li>
<li tabindex="4"><img src="/media/ocean.jpg" /></li>
<li tabindex="5"><img src="/media/mushroom.jpg" /></li>
<li tabindex="6"><img src="/media/angelinasmall.jpg" /></li>
</ul>

Autor scryptu Dynamic Drive

Projekt © 2009 - INFOPROG 71716 odwiedzin