Передплатну кампанію на 2019 рік розпочато!

Оформити передплату за пільговими цінами

Бажаєте зекономити на передплаті?

Пропонуємо вам стати учасником програми лояльності «120 балів»!

 

Дізнатися більше

Створення галереї за допомогою 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

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