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.

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Obsah súborov projektu po tejto prednáške

1 - footer.php

<div class="footer">
</div>

2 - fotogaleria.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "fotogaleria";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div id="gallery-content" class="main-content right">
<h1>Fotogaléria</h1>
<div class="line"></div>

<?php

$pictures = array();

for($i = 0; $i < 30; $i++){
$pictures[] = 'images/placeholder.jpg';
}

//zadefinovanie maximalneho poctu pre jednu stranku a nacitanie parametra (urcenie aktualnej stranky)
$countPerPage = 12;
if($_GET['page']){
$page = $_GET['page'];
}else{
$page = 1;
}

//vypocet od ktorej po ktoru fotku zobrazujeme galeriu
$start = ($page-1)*$countPerPage;
$end = $page*$countPerPage;

echo '<ul id="gallery">';
for($i = $start; $i < $end; $i++){

if($pictures[$i]){
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>';

echo '</li>';
}
}
echo '</ul>';

//cyklus, ktory nam vypise dostatocny pocet odkazov pre jednotlive stranky
$pageLink = 1;
$photosCount = count($pictures);

echo '<ul class="pagination">';
while($photosCount > 0){

echo '<li><a ';

if($pageLink == $page){
echo ' class="active" ';
}

echo 'href="fotogaleria.php?page='.$pageLink.'">'.$pageLink.'</a>';
echo '</li>';
$photosCount = $photosCount - $countPerPage;
$pageLink++;
}
echo '</ul>';

?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

3 - global.css

BODY{
margin: 0;
background-color: #dee8e7;
font-family: Arial;
}

H1{
color: #5b6b78;
margin-bottom: 10px;
}

.line{
height: 3px;
border-top: 1px dotted #5b6b78;
border-bottom: 1px dotted #5b6b78;
margin-bottom: 25px;
}

.main{
background-color: #f6f7f1;
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

.header{
border-bottom: 1px solid #7d8079;
height: 150px;
}

.header-inner1{
}

.header-inner2{
}

.content{
}

.footer{
border-top: 1px solid #7d8079;
height: 200px;
}

.half-width{
width: 50%;
}

.full-height{
height: 100%;
}

.left{
float: left;
}

.right{
float: right;
}

.clear{
clear: both;
}

/**********MENU***********/
.sidebar{
width: 200px;
height: 400px;
}

.sidebar UL{
list-style-type: none;
padding: 0;
margin: 0;
}

.sidebar UL LI{
position: relative;
}

.sidebar UL LI A, .sidebar UL LI:HOVER .submenu A{
display: block;
padding: 15px 0px 15px 35px;
border-bottom: 1px solid #7d8079;
color: #7d8079;
text-decoration: none;
text-transform: uppercase;
}

.sidebar UL LI A.active{
color: #f5f7f4;
background-color: #f96b81;
}

.sidebar UL LI:HOVER A, .sidebar UL LI .submenu LI:HOVER A{
background-color: #5b6b78;
color: #d6e3e9;
}

.main-content{
width: calc(100% - 241px);
min-height: 700px;
border-left: 1px solid #7d8079;
padding-left: 20px;
padding-right: 20px;
}

.submenu{
display: none;
border: 2px solid #7d8079;
position: absolute;
top: -1px;
left: 201px;
width: 200px;
background-color: #FFFFFF;
}

.sidebar UL LI:HOVER .submenu{
display: block;
}

.sidebar UL LI:HOVER .submenu A{
background-color: #FFFFFF;
}

.main-content{
width: calc(100% - 241px);
min-height: 700px;
border-left: 1px solid #7d8079;
padding-left: 20px;
padding-right: 20px;
}

/**********GALERIA***********/
/**********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;
}

/**********PERSONS***********/
.persons{
width: 100%;
table-layout: fixed;
font-family: Arial;
}

.persons, .persons TH, .persons TD{
border: 1px solid #D9E4E6;
}

.persons TH, .persons TD{
padding: 15px;
}

.persons TH{
background-color: #167F92;
color: #FFFFFF;
font-weight: normal;
text-transform: uppercase;
}

.persons TR:nth-child(odd){
background-color: #D9E4E6;
}

.persons TR{
color: #024457;
background-color: #FFFFFF;
}

.persons TD{
font-size: 14px;
}

.persons TR:HOVER{
color: #f5f7f4;
background-color: #f96b81;
cursor: pointer;
}

/**********PERSONS***********/
.contact_form{
padding: 20px;
border: 1px solid #ebebeb;
background-color: white;
font-family: Arial;
font-size: 14px;
color: #455560;
text-transform: uppercase;
text-align: center;
}

.contact_form INPUT, .contact_form TEXTAREA, .contact_form LABEL{
display: block;
width: 100%;
}

.contact_form LABEL{
margin-bottom: 5px;
text-align: left;
}

.contact_form INPUT, .contact_form TEXTAREA{
height: 30px;
border: 1px solid #bababa;
margin-bottom: 30px;
}

.contact_form TEXTAREA{
min-height: 100px;
min-width: 100%;
max-width: 100%;
}

.contact_form INPUT[type="submit"]{
display: inline;
width: 200px;
height: 40px;
background-color: #7bc143;
border: 1px solid #6fae3c;
font-size: 16px;
color: #FFFFFF;
text-transform: uppercase;
}

.contact_form INPUT[type="submit"]:HOVER{
cursor: pointer;
background-color: #42aa44;
}

.success, .error{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 10px;
}

.success {
color: #4F8A10;
background-color: #DFF2BF;
}

.error {
color: #D8000C;
background-color: #FFBABA;
}
/**********PAGINATION***********/
#gallery-content{
text-align: center;
}

ul.pagination {
display: inline-block;
padding: 0;
margin: 10px 0px 20px 0px;
}

ul.pagination li {
display: inline;
}

ul.pagination li a {
color: black;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}

ul.pagination li a:hover{
background-color: #ddd;
}

.map{
margin: 30px 0px;
text-align: center;
padding: 25px 0px;
background-color: #FFFFFF;
}

4 - header.php

<div class="header">
<div class="header-inner1 full-height half-width left"></div>
<div class="header-inner2 full-height half-width left"></div>
</div>

5 - index.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "index";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Domov</h1>
<div class="line"></div>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

6 - kontakt.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "kontakt";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>Kontakt</h1>
<div class="line"></div>

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST' && $_POST['contact_form']){
if(!preg_match('#^[a-zA-Z0-9]{5,10}$#', $_POST['name']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
echo '<p class="error">Zadajte prosim korektne udaje</p>';

//naplnenie formulara
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
}else{
//odoslanie emailu
echo '<p class="success">Vasa sprava bola uspesne odoslana.</p>';

$name = '';
$email = '';
$subject = '';
$message = '';
}

}

?>

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" class="contact_form">
<label for="email">Meno a priezvisko</label>
<input type="text" name="name" id="name" value="<?php echo $name;?>"><br><br>

<label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php echo $email;?>"><br><br>

<label for="subject">Predmet</label>
<input type="text" name="subject" id="subject" value="<?php echo $subject;?>"><br><br>

<label for="message">Správa</label>
<textarea name="message" id="message" placeholder="Zadajte text spravy..."><?php echo $message;?></textarea><br><br>

<input type="submit" name="contact_form" value="Odoslat">
</form>

<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84199.38373426767!2d19.06093170408453!3d48.73928892777478!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47153de36e8ad42f%3A0xf8223f8a0b8b9032!2sBansk%C3%A1+Bystrica!5e0!3m2!1ssk!2ssk!4v1465151393672" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

7 - menu.php

<div class="sidebar left">
<ul>
<li><a class="<?php if($actual_page == "index"){echo 'active';}?>" href="index.php">Domov</a></li>
<li><a class="<?php if($actual_page == "o-nas"){echo 'active';}?>" href="o-nas.php">O nás</a></li>
<li><a class="<?php if($actual_page == "fotogaleria"){echo 'active';}?>" href="fotogaleria.php">Fotogaléria</a></li>
<li>
<a class="<?php if($actual_page == "kontakt"){echo 'active';}?>" href="kontakt.php">Kontakt</a>

<ul class="submenu">
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ul>

</li>
</ul>
</div>

8 - o-nas.php

<!DOCTYPE html>

<html lang="sk">
<head>
<title>Vitajte na našej prvej skutočnej webstránke!</title>

<meta charset=“UTF-8“>
<meta name="description" content="Ponúkame vám lekcie jazykov HTML, CSS, PHP a mnoho ďalších užitočných rád pri programovaní">
<meta name="keywords" content="programovanie, html, css, php, webstranka, web, tvorba webu, web developer, ucenie programovania, ako programovat">

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<?php $actual_page = "o-nas";?>
<div class="main">

<?php include "header.php";?>

<div class="content">

<?php include "menu.php";?>

<div class="main-content right">
<h1>O nás</h1>
<div class="line"></div>

<?php
$person_1 = array('Raťafák', 'Plachta', 'plachtos@mail.sk','0903 123 123');
$person_2 = array('Od kuka', 'do kuka', 'kuko@mail.sk','0903 123 123');
$person_3 = array('Joey', 'Tribbiani', 'ako.sa.mas@mail.sk','0903 123 123');
$person_4 = array('Charlie', 'Harper', 'hooker@mail.sk','0903 123 123');
$person_5 = array('Chruno', 'Moysey', 'abstinent@mail.sk','0903 123 123');

$pole = array($person_1, $person_2, $person_3, $person_4, $person_5);

$pole[5] = array('Jardo', 'Jágr', 'legenda@mail.sk','0903 123 123');

echo '<table class="persons">';
echo '<tr>';
echo '<th>Meno</th>';
echo '<th>Priezvisko</th>';
echo '<th>Email</th>';
echo '<th>Telefónne číslo</th>';
echo '</tr>';

for($i=0; $i<count($pole); $i++){
echo '<tr>';

for($j=0; $j<count($pole[$i]); $j++){
echo '<td>'.$pole[$i][$j].'</td>';
}

echo '</tr>';
}

echo '</table>';

?>
</div>

<div class="clear"></div>
</div>

<?php include "footer.php";?>
</div>
</body>
</html>

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

css transparenttransparentný obrázoktransparentný element na stránkeopacitycss opacitycss priehladnost

IT ftip

Aký je rozdiel medzi Windowsom a jablkom? Jablká padajú len na jeseň.