Створення галереї за допомогою CSS

В. В. Конончук, м. Баранівка, Житомирська обл.


Сучасний веб-сайт неможливо уявити без галереї. За її допомогою можна розміщувати фотографії, картинки. Використання галереї робить сторінку більш привабливою для користувачів Інтернету. Існує кілька способів створення галереї.

1 спосіб. Знайти готовий скрипт в Інтернеті і розмістити його на веб-сторінці. Цей спосіб не вимагає знання від власника сайту ні HTML, ні СSS, ні JavaScript. Потрібно тільки вказати шлях до картинок, які будуть використовуватися на сайті.

2 спосіб. Самостійно вивчити мову програмування JavaScriptі самостійно створювати власні фотогалереї. Але цей процес є дуже тривалим, оскільки потрібно досконало володіти JavaScript. Перевага цього способу полягає в тому, що можна створювати унікальні галереї.

3 спосіб.Використання можливостей CSS. Цей спосіб є досить новим у створенні галереї, але для нього достатньо знати лише HTML i CSS.

У статті розглянемо використання можливостей CSS для створення галереї.

 

Галерея 1

Фотогалерея буде представлена у вигляді картинок, які будуть змінюватися при натисканні на відповідний перемикач.

Для цього потрібно створити файл index. html, файлstyle.cssі папкуimgз відповідними картинками.

Документ index. html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

     <head>

     <!--[if lt IE 9]>  

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

     <title>Gallery1</title>

     <meta http=equiv"Content=Type" content="text/html; charset=utf-8">

     <link rel=stylesheet href=css/style.css>

     </head>

     <body>

     <main>

     <form>    //розміщення форми на веб-сторінці

     <div>

     <input type=radio name=a id=a1 checked>     //перемикач

     <label for=a1>1</label>

     <img src=img/1.jpg>// вставка картинки на веб-сторінку

     </div>

     <div>

     <input type=radio name=a id=a2>   //перемикач

     <label for=a2>2</label>

     <img src=img/2.jpg>//вставка картинки на веб-сторінку

     </div>

     <div>

     <input type=radio name=a id=a3>   //перемикач

     <label for=a3>3</label>

     <img src=img/3.jpg>//вставка картинки на веб-сторінку

     </div>

     <div>

     <input type=radio name=a id=a4>   //перемикач

     <label for=a4>4</label>

     <img src=img/4.jpg>// вставка картинки на веб-сторінку

     </div>

     </form>

     </main>

     </body>

</html>

 

Файл style.css

body {margin: 0 auto;}

main{margin: 0 auto;

width:1000px;

height:1000px;

position:relative;

z-index:3;

background: #f8ffe8; /* Old browsers */

background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */

}

 

form{

display:block;

margin:100px 0px 0px 100px;

width:800px;

height:415px;

position:absolute;

z-index:10;

overflow:hidden;

-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

}

 

form img{

position:absolute;

top:0;

left:0;

z-index:-2;

opacity:0;

transition:opacity 1s;

}

 

input{

display:none;

}

 

input:checked~img{

opacity:1;

transition:opacity 1s;

}

 

label{

width:10px;

height:10px;

-webkit-border-radius: 10px 10px 10px 10px;

border-radius: 10px 10px 10px 10px;

border:2px solid white;

color:rgba(255,255,255,0); //прозорий колір

display:block;

float:left;

margin:390px -270px 0px 310px;

cursor:pointer;

}

 

input:checked~label{

background:white;

}

Створена галерея буде мати такий вигляд.

 

Галерея 2

Фотогалерея буде представлена у вигляді превю, при наведенні на які внизу буде зявлятися відповідне зображення.

Для цього потрібно створити файл index. html, файлstyle.cssі папкуimgіз відповідними картинками (картинки для фону прев’ю і основні картинки).

 

Документ index. html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<!--[if lt IE 9]>  

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

<title>Gallery2</title>

<meta http=equiv"Content=Type" content="text/html; charset=utf-8">

<link rel=stylesheet href=css/style.css>

</head>

<body>

<main>

<div id="container">

<nav>

<ul>

<li><a class="gallery picture_1" href="#"><span><img src="img/1.jpg" alt=""></span></a>

<li><a class="gallery picture_2" href="#"><span><img src="img/2.jpg" alt=""></span></a>

<li><a class="gallery picture_3" href="#"><span><img src="img/3.jpg" alt=""></span></a>

<li><a class="gallery picture_4" href="#"><span><img src="img/4.jpg" alt=""></span></a>

<li><a class="gallery picture_5" href="#"><span><img src="img/5.jpg" alt=""></span></a>

</ul>

</nav>

</div>

     </main>

     </body>

</html>

 

Файл style.css

body{margin: 0 auto;}

main{margin: 0 auto;

width:1200px;

height:1000px;

background-color:yellow;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcf4f5+0,eaafd8+56,a90329+100 */

background: #fcf4f5; /* Old browsers */

background: -moz-linear-gradient(top, #fcf4f5 0%, #eaafd8 56%, #a90329 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #fcf4f5 0%,#eaafd8 56%,#a90329 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #fcf4f5 0%,#eaafd8 56%,#a90329 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcf4f5', endColorstr='#a90329',GradientType=0 ); /* IE6-9 */

}

 

#container{position:relative; width:1000px; height:650px; margin:0px auto;}

 

nav{width:1000px;

height:83px;

position:absolute;

margin-top:30px;

}

 

ul{width:960px;

height:90px;}

li{display:inline-block;

width:160px;

height:83px;

border:1px solid darkred;

margin-left:20px;

}

 

a.gallery, a.gallery:visited{width:160px; height:83px; float:left; position:relative;}

 

a.picture_1{background-image:url(../img/01.jpg);}    //фоновий малюнок для прев’ю

a.picture_2{background-image:url(../img/02.jpg);}    //фоновий малюнок для прев’ю

a.picture_3{background-image:url(../img/03.jpg);}    //фоновий малюнок для прев’ю

a.picture_4{background-image:url(../img/04.jpg);}    //фоновий малюнок для прев’ю

a.picture_5{background-image:url(../img/05.jpg);}    //фоновий малюнок для прев’ю

 

a.gallery span{visibility:hidden; display:block; position:absolute; width:820px; height:445px; margin-top:129px; color:#000; cursor:default; overflow:hidden;}

 

a.picture_1 span{left:35px; top:0px;}      // розміщення основних картинок

a.picture_2 span{left:-150px;}             // розміщення основних картинок

a.picture_3 span{left:-333px;}             // розміщення основних картинок

a.picture_4 span{left:-515px;}             // розміщення основних картинок

a.picture_5 span{left:-698px;}             // розміщення основних картинок

 

a.gallery:hover{ border:1px solid #ff0000; z-index:100;}  //зміна властивостей об’єкта при наведенні на нього курсора

 

a.gallery:hover span{visibility:visible; z-index:100;}    //поява відповідного зображення при наведенні на прев’ю

 

a.gallery:hover span img{border:3px double #300414; position:relative; z-index:100;}

//зміна властивостей об’єкта при наведенні на нього курсора

 

a.gallery:active, a.gallery:focus{ z-index:10;}

 

a.gallery:active span, a.gallery:focus span{visibility:visible; z-index:10;}

a.gallery:active span img, a.gallery:focus span img{border:1px solid #000; position:relative; z-index:10;}

Створена галерея буде мати такий вигляд.    

                                                                                                                               

Література

http://htmlbook.ru/

https://webref.ru/

http://www.colorzilla.com/gradient-editor/

https://www.codecademy.com/

http://www.w3schools.com/

Dounload PDF

Відгуки читачів