Priehľadné elementy
V poslednej kapitole tejto sekcie a celkovo bakalárskeho stupňa si ukážeme ešte jednu užitočnú vlastnosť jazyka CSS a troška si našu fotogalériu ešte skrášlime. Pozrime sa na kód galérie, konkrétne nás zaujíma kód prvkov zoznamu (li), ktoré obsahujú odkaz a obrázok. Teraz máme nastavený efekt pri stave hover, že sa okolo odkazu spraví orámovanie. Toto však chceme vylepšiť a chceme, aby sa po zobrazení myšou ponad miniatúru obrázka zobrazil cez celú plochu obrázka iný div, ktorý bude priesvitný a bude na ňom nejaký text. Tento div bude aj sám sebou odkazom, na ktorý keď sa klikne, zobrazí sa plná veľkosť obrázka.
Kód prvku zoznamu si dosť pomeníme, poďme ale pekne poporiadku. Našou úlohou je, aby sa v prvku zoznamu zobrazoval obrázok. Následne v stave hover chceme, aby sa cez tento obrázok zobrazil priesvitný div, na ktorý sa bude dať kliknúť. Začnime od prvej úlohy, chceme aby prvok zoznamu li obsahoval iba obrázok a aby mal rozmery ako treba a aj okraje, takže aplikujeme podmienku pre pravý okraj na prvok li tak, ako sme to predtým mali pri odkaze. Toto by nemal byť problém, malo by to vyzerať asi takto:
fotogaleria.php:
if($pictures[$i]){
echo '<li class="left';
if(($i+1)%3){
echo ' photo-margin';
}
echo '">';
echo '<img src="'.$pictures[$i].'">';
echo '</li>';
}
global.css (časť gallery):
/**********GALERIA***********/
#gallery{
display: inline-block;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
#gallery LI{
height: 133px;
margin-bottom: 10px;
}
#gallery LI IMG{
width: 213px;
height: 133px;
}
.photo-margin{
margin-right: 10px;
}
Ako vidíte, vyzerá to presne tak ako predtým, prvku li sme priradili iba okraje a rozmery a obrázku len rozmery. Poďme teda na ďalšiu a troška ťažšiu časť. Teraz potrebujeme, aby sa v stave hover zobrazil element nad obrázkom, na ktorý sa bude dať kliknúť. Tým pádom vložíme do prvku li odkaz (a) s podobnými parametrami, ako predtým a do jeho vnútra vložíme span s krátkym textom. Keďže sme si povedali, že bude nad obrázkom, musíme mu dať pozíciu na absolute, aby sa zobrazil nad obrázkom – v inej vrstve. Absolútny prvok sa zobrazuje vzhľadom k najbližšiemu rodičovi, ktorý nie je static. My ho chceme umiestniť vzhľadom k prvku li, takže prvok li nastavíme na relatívnu pozíciu. Ďalej chceme, aby tento odkaz prekrýval celý obrázok, takže ho nastavíme ako blokový element a nastavíme mu rozmery na 100%, ktoré si zoberie od rodiča, čo je LI, takže bude vypĺňať celú plochu. Jednotlivé tieto kroky si zadávajte do kódu a priebežne si pozerajte, kde sa vám elementy a s akými rozmermi a na akej pozícii zobrazujú, aby ste videli správanie pravidiel CSS. Ako vidíte, odkaz sa zobrazuje pod našim elementom, takže mu nastavíme presnú absolútnu pozíciu a určíme mu, že bude od hora na pozícii 0px, aby začínal presne na mieste, ako obrázok. Kód by mal vyzerať takto:
fotogaleria.php:
echo '<li class="left';
if(($i+1)%3){
echo ' photo-margin';
}
echo '">';
echo '<img src="'.$pictures[$i].'">';
echo '<a target="_blank" href="'.$pictures[$i].'" class="over_div">';
echo '<span>Kliknite pre zväčšenie!</span>';
echo '</a>';
global.css (len pridaný kód):
#gallery A{
display: block;
position: absolute;
height: 100%;
width: 100%;
top: 0px;
}
Odkaz nám vypĺňa celú plochu a zobrazuje sa na správnom mieste. My ale chceme, aby sa zobrazoval iba v stave hover (prvku zoznamu). Toto už vieme pomocou vlastnosti display s hodnotami block a none. Teraz sa dostávame k podstate veci. Chceme, aby bol tento odkaz nejakou farbou vyplnený, napríklad šedou, ale okrem toho chceme, aby bol aj priesvitný, čiže aby len sčasti prekrýval obrázok naspodku. Aby bolo trocha vidno aj ten obrázok. Toto sa dá docieliť pomocou vlastnosti opacity (priehľadnosť), ktorej hodnota je desatinné číslo v rozmedzí od 0 po 1. Takže napríklad hodnota 0.2 značí, že ho bude vidno len na 20%, takže bude z 80% priehľadný, 0.5 je 50% atď. My mu teda nastavíme šedé pozadie a priehľadnosť napríklad na 0.4. Ako vidíme, skutočne to funguje, obrázok je s daným pravidlom priehľadný. Aby bol text jasnejšie viditeľný, nastavíme mu bielu farbu, tučný font a umiestnime ho pomocou pozície v relatívnej pozícii nižšie. Outline orámovanie z predchádzajuceho stavu pridáme teraz na prvok zoznamu li a malo by to už vyzerať tak, ako sme si želali, kód by mal vyzerať takto:
global.css:
/**********GALERIA***********/
#gallery{
display: inline-block;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
#gallery LI{
position: relative;
height: 133px;
margin-bottom: 10px;
}
#gallery LI IMG{
width: 213px;
height: 133px;
}
.photo-margin{
margin-right: 10px;
}
#gallery A{
display: none;
}
#gallery LI:HOVER A{
display: block;
}
#gallery LI:HOVER{
outline: 2px solid #7d8079;
}
#gallery A{
text-decoration: none;
position: absolute;
background-color: grey;
opacity: 0.4;
height: 100%;
width: 100%;
top: 0px;
}
#gallery A SPAN{
position: relative;
top: 100px;
color: #FFFFFF;
font-weight: bold;
}
Ako vidíte, pomocou tejto finty, kedy sa do nejakého elementu vloží iný absolútny element so 100% zdedenými rozmermi, môžeme dosiahnuť veľmi zaujímavé efekty a zvýraznenie nejakého prvku. Používa sa to najmä na zvýraznenie nejakej možnosti interaktivity, v tomto príklade sme takto používateľovi zvýraznili možnosť kliknúť na miniatúru a zobraziť plnú veľkosť obrázka.