Css галерея для html сайта: Галерея для сайта — примеры html/css, адаптив + готовый код

Содержание

Красивая галерея для сайта с помощью CSS3

.gallery {

margin: 100px auto 0;

width: 800px;

}

.gallery a {

display: inline-block;

height: 135px;

position: relative;

width: 180px;

/* Отключаем выделение */

-moz-user-select: none;

-webkit-user-select: none;

-khtml-user-select: none;

user-select: none;

}

.gallery a img {

border: 8px solid #fff;

border-bottom: 20px solid #fff;

cursor: pointer;

display: block;

height: 100%;

left: 0px;

position: absolute;

top: 0px;

width: 100%;

z-index: 1;

/* Свойства для изменения рамки */

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;

/* Правила перехода */

-webkit-transition: all 1.0s ease;

-moz-transition: all 1.0s ease;

-o-transition: all 1.0s ease;

transition: all 1.0s ease;

/* Тени */

-moz-box-shadow: 2px 2px 4px #444;

-webkit-box-shadow: 2px 2px 4px #444;

-o-box-shadow: 2px 2px 4px #444;

box-shadow: 2px 2px 4px #444;

}

/* Вращение */

.gallery a:nth-child(1) img {

-moz-transform: rotate(-25deg);

-webkit-transform: rotate(-25deg);

transform: rotate(-25deg);

}

.gallery a:nth-child(2) img {

-moz-transform: rotate(-20deg);

-webkit-transform: rotate(-20deg);

transform: rotate(-20deg);

}

.gallery a:nth-child(3) img {

-moz-transform: rotate(-15deg);

-webkit-transform: rotate(-15deg);

transform: rotate(-15deg);

}

.gallery a:nth-child(4) img {

-moz-transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

.gallery a:nth-child(5) img {

-moz-transform: rotate(-5deg);

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

.gallery a:nth-child(6) img {

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

.gallery a:nth-child(7) img {

-moz-transform: rotate(5deg);

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

.gallery a:nth-child(8) img {

-moz-transform: rotate(10deg);

-webkit-transform: rotate(10deg);

transform: rotate(10deg);

}

.gallery a:nth-child(9) img {

-moz-transform: rotate(15deg);

-webkit-transform: rotate(15deg);

transform: rotate(15deg);

}

.gallery a:nth-child(10) img {

-moz-transform: rotate(20deg);

-webkit-transform: rotate(20deg);

transform: rotate(20deg);

}

.gallery a:nth-child(11) img {

-moz-transform: rotate(25deg);

-webkit-transform: rotate(25deg);

transform: rotate(25deg);

}

.gallery a:nth-child(12) img {

-moz-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

.gallery a:focus img {

cursor: default;

height: 250%;

left: -150px;

top: -100px;

position: absolute;

width: 250%;

z-index: 25;

/* Правила перехода */

-webkit-transition: all 1.0s ease;

-moz-transition: all 1.0s ease;

-o-transition: all 1.0s ease;

transition: all 1.0s ease;

/* Правила перехода */

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

Верстка адаптивной CSS галереи

<!DOCTYPE html>

<html>

<head>

<title>Галерея на CSS</title>

</head>

<body>

<div>

<ul>

<li>

<h4>Описание</h4>

Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.

</a>

</li>

<li>

<h4>Описание</h4>

</a>

</li>

<li>

<h4>Описание</h4>

</a>

</li>

<li>

<h4>Описание</h4>

</a>

</li>

<li>

<h4>Описание</h4>

</a>

</li>

<li>

<h4>Описание</h4>

</a>

</li>

<li>

<h4>Описание</h4>

</a>

</li>

<li>

<h4>Описание</h4>

</a>

</li>

<li>

<h4>Описание</h4>

</a>

</li>

<li>

<h4>Описание</h4>

</a>

</li>

</ul>

</section>

</div>

</body>

</html>

Простая фотогалерея на CSS для сайта

Как при помощи чистого css и пары вспомогательных картинок создать свою фотогалерею для сайта. Простой урок по верстке фотогалереи для веб-сайта.

Для организации фотогалереи на сайте часто используют готовые скрипты на PHP. Я пробовал пару-тройку раз заняться этим полезным делом и пришел к выводу, что если нужна динамическая галерея, где могут оценивать ваши работы другие люди, и где можно легко и быстро вставлять фотки и тексты описания к ним прямо с рабочего стола, то лучше воспользоваться готовыми онлайн сервисами, коих в сети целая куча. Вот хотя бы старый добрый Flickr.

Цеплять к своему сайту скрипт, потом настраивать его — тот еще геморрой. Те бесплатные скрипты, что лежат в сети, либо простые, но страшненькие в оформлении и глючные в работе, либо настолько тяжеловесные и перегруженные всякими излишествами, что править и затачивать их под свой сайт запаришься.

Но если вы хотите просто разместить на своем сайте несколько фоток с подписями, то это очень легко и красиво можно оформить с помощью чистого CSS и пары вспомогательных картинок, что мы сейчас и сделаем.

Для начала нам нужно заготовить парочку вот таких картинок:

Сразу поясним, для чего они у нас такие длинные. Обе картинки мы будем использовать фоном под наши превью (превью — уменьшенная копия фотографии).

Так как превью могут быть разного размера и ориентации (горизонтальные или вертикальные), и подписи к ним могут быть разной длинны, то мы сделаем следующую хитрость: привяжем первую картинку фоном к тэгу div, а вторую — к тэгу p, который задействуем для подписи.

В результате нижний край превьюшки будет всегда на одном и том же расстоянии от подписи, независимо от длинны подписи.

Еще нам понадобятся сами превьюшки фотографий. Большие фотографии мы разместим каждую на своей отдельной странице, с которой будет возврат на главную при помощи кнопки BACK.

Итак, запишем для начала код нашей главной страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Фотогалерея | Урок с сайта Websovet.com</title> </head> <body> <div></div>

<div>
<div>
<a href="foto1.html"><img src="1_sm.jpg" alt="okno_v_nebo" /></a>
<p>Окно в небо</p>
</div>
<div>
<a href="foto2.html"><img src="2_sm.jpg" alt="zloy_indeets" /></a>
<p>Злой индеец</p>
</div>
<div>
<a href="foto3.html"><img src="3_sm.jpg" alt="pod_krylom_samoleta" /></a>
<p>Под крылом самолета</p>
</div>
<div>
<a href="foto4.html"><img src="4_sm.jpg" alt="nasyp_kamney_na_pirse" /></a>
<p>Насыпь камней на пирсе</p>
</div>
 <div>
<a href="foto5.html"><img src="5_sm.jpg" alt="tsvetushy_kust" /></a>
<p>Цветущий куст</p>
</div>
<div>
<a href="foto6.html"><img src="6_sm.jpg" alt="goryachaya_kamennaya_baba" /></a>
<p>Горячая каменная баба</p>
</div>
</div>
</body>
</html>

Код совсем простой. Мы поместили содержимое страницы в «коробочку» — container, которую расположили по центру, а каждую превьюшку с подписью оформили отдельным div с классом tumb.

Рассмотрим теперь подробнее файл стилей CSS:

* { margin: 0; padding: 0; border: 0;

}
a {
text-decoration: none;
}
body {
background: #fff;
}
#container {
width: 860px;
margin: 0 auto;
}
#header {
background: url(header.gif) no-repeat;
width: 860px;
height: 160px;
margin: 0 auto;
clear: both;
}
div.tumb {
background: url(tumb01.gif) no-repeat;
width: 210px;
float: left;
margin: 0 30px 20px;
}
div.tumb img {
margin:5px 4px;
}
div.tumb p {
background: url(tumb02.gif) no-repeat 0 100%;
font: 85% Verdana, Arial, sans-serif;
color: #333;
margin: 0;
padding: 0 25px 20px 10px;
}

Начнем по порядку. Для всей страницы разом мы установили поля, отступы и границы равными 0. Фон указали белого цвета, у ссылок выключили подчеркивание, а размер контейнера задали в 860 пикселей по ширине и автовыравнивание.

Для шапки нарисовали симпатичный зоголовок и поместили его там в виде фона, задав ширину и высоту. Это все просто. А вот дальше будет хитрость.

Для превьюшек, как уже говорилось, мы использовали div с классом tumb. При этом самому селектору tumb мы в правилах задали отображение фона в виде первой нашей картинки, показанной выше, указав ее ширину в 210 пикселей и запретив повтор. Высоту при этом не указываем!

Кроме того, мы сюда же добавили правило обтекания слева float: left, ибо хотим расположить по горизонтали несколько превьюшек. Если этого не сделать, то все превьюшки будут располагаться на странице в столбик одна под другой.

В следующем наборе правил мы уже задали самим превьюшкам с тэгом img отступы, чтобы картинки не лепились одна к другой.

Обратите внимание на запись — div.tumb img. Она показывает, что мы не просто какому-то произвольному тэгу img задаем эти правила, а именно тому, который входит в блок div с классом tumb.

Далее мы для тэга p, опять же, входящего в блок div с классом tumb, задали размер и цвет шрифта, поля и отступы и, самое важное, указали в качестве фона вторую нашу замечательную картинку. При этом кроме запрета на повтор мы показали ее координаты относительно осей х и у, 0 и 100% соответственно.

То есть, несмотря на размер наших превьюшек и описательного текста (в разумных пределах конечно), эта фоновая картинка всегда будет показывать свою нижнюю часть и правый край, автоматически подстраиваясь под длину и ширину превьюшки.

Вот, собственно, и все!

Еще совет: не делайте с превьюшек ссылку просто на картинку в такой-то папке. Оформите каждую фотографию на отдельной странице, с более подробным описанием и ссылкой возврата на главную страницу. Это будет гораздо красивее и правильнее, нежели сиротливо прилепленная к левому верхнему углу фотка в окне браузера.

Готовый пример галереи можно посмотреть здесь: Фотогалерея, пример на CSS.

Надеюсь, вам понравилось. Enjoy!

Если есть вопросы, задавайте их в комментариях. С удовольствием отвечу.

UPD от 03.11.2018: На сегодняшний день это уже морально устаревший способ — использовать в качестве подкладки фон из пары картинок. Все делается элементарно инструментами из арсенала CSS3.

Автор: Игорь Квентор
www.websovet.com

Фотоальбом на чистом CSS3

Сегодня мы решили подготовить хорошиую css3 галерею. Без использования javascript. Да, да, вы правильно поняли. Сегодня мы не будем использовать скрипты. Это будет чистая CSS3 фото галерея. Фотографии в галерее будет увеличиваться, если мы будем нажимать на них мышью.

<!DOCTYPE html>
<html lang="en" >
     <head>
        <meta charset="utf-8" />
        <title>Фотоальбом на чистом CSS3 | | Демонстрация для сайта s-sd.ru</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div>
            <div>
                <a tabindex="1"><img src="images/1.jpg"></a>
                <a tabindex="1"><img src="images/2.jpg"></a>
                <a tabindex="1"><img src="images/3.jpg"></a>
                 <a tabindex="1"><img src="images/4.jpg"></a>
                <a tabindex="1"><img src="images/5.jpg"></a>
                <a tabindex="1"><img src="images/6.jpg"></a>
                <a tabindex="1"><img src="images/7.jpg"></a>
                <a tabindex="1"><img src="images/8.jpg"></a>
                <a tabindex="1"><img src="images/9.jpg"></a>
                <a tabindex="1"><img src="images/10.jpg"></a>
                <a tabindex="1"><img src="images/11.jpg"></a>
                <a tabindex="1"><img src="images/12.jpg"></a>
                 <span></span>
            </div>
        </div>
    </body>
</html>

/* page layout */
*{
    margin:0;
    padding:0;
}
body {
    background-color:#bababa;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    -moz-box-shadow: 0 -1px 2px #111111;
    -webkit-box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
footer h3{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    background:#ddd;
    margin:20px auto;
    padding:20px;
    position:relative;
    width:700px;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

    box-shadow:1px 1px 5px #111;
    -moz-box-shadow:1px 1px 5px #111;
    -webkit-box-shadow:1px 1px 5px #111;
}

/* css3 photo gallery styles */
.gallery {
    width:610px;
    margin:0 auto;
}
.gallery a {
    display:inline-block;
    height:150px;
    position:relative;
    width:200px;
}
.gallery a img {
    border:5px solid #fff;
    cursor:pointer;
    display:block;
    height:100%;
    left:0px;
    position:absolute;
    top:0px;
    width:100%;
    z-index:1;

    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;

    -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
    -webkit-transition-duration:0.5s;
    -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
    -moz-transition-duration:0.5s;
    -o-transition-property:width, height, top, bottom, left, right, z-index, border;
    -o-transition-duration:0.5s;
    transition-property:width, height, top, bottom, left, right, z-index, border;
    transition-duration:0.5s;
}
.gallery a:focus img {
    border:15px solid #fff;
    cursor:default;
    height:250%;
    position:absolute;
    width:250%;
    z-index:25;

    box-shadow:1px 1px 5px #888;
    -moz-box-shadow:1px 1px 5px #888;
    -webkit-box-shadow:1px 1px 5px #888;
    -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
    -webkit-transition-duration:0.5s;
    -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
    -moz-transition-duration:0.5s;
    -o-transition-property:width, height, top, bottom, left, right, z-index, border;
    -o-transition-duration:0.5s;
    transition-property:width, height, top, bottom, left, right, z-index, border;
    transition-duration:0.5s;
}

/* custom focus rules */
.gallery a:focus:nth-child(3n+1) img {
left:150px;
}
.gallery a:focus:nth-child(3n+2) img {
    left:-50px;
}
.gallery a:focus:nth-child(3n+3) img {
    left:-250px;
}
.gallery a:focus:nth-child(-n+3) img {
    top:140px;
}
.gallery a:focus:nth-child(n+7) img {
    top:-150px;
}
.gallery a:focus:nth-child(n+10) img {
    top:-295px;
}

/* extra close layer */
.gallery .close {
    background:transparent;
    cursor:pointer;
    display:none;
    height:352px;
    left:170px;
    position:absolute;
    top:160px;
    width:500px;
    z-index:30;
}
.gallery a:focus ~ .close {
    display:block;
}

Вот и все, все было очень просто, не правда ли? Результат был великолепным. Я надеюсь, что наши славные советы помогут вам. Удачи!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Галерея для сайта в виде табов с помощью CSS3

Вкладки весьма интересная и удобная штука при создании сайта, она позволяет правильно организовать информацию, при этом сэкономив немного места на сайте. В сегодняшнем уроке речь пойдет о совмещении приятного с полезным, а именно об галереи изображений которая реализована в виде вкладок. Если вы хотите создать интернет магазин, то для отображения дополнительной информации о вашем продукте данный прием станет отличным решением.

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

Так как галерея написана на CSS3 она станет легкой и хорошо прогружатся на сайте. И так, по умолчанию у нас будет четыре вкладки, при этому в каждую будет помещено изображение. Давайте приступим.

Шаг 1. HTML

Для начала создаем разметку, она будет достаточно проста, ведь нам необходимо организовать изображения и кнопки и подать их правильным списком.

<li>

<div>

</div>

<div>

</div>

</li>

В контейнер мы помещаем вкладку в которой будет отображено маленькое изображение, а также в контейнере будет включено большое изображение, которое будет отображаться при нажатии на вкладку.

Шаг 2. CSS

Для начала нам необходимо установить параметры для отображения маленькой вкладки, затем подписи для нее, вкладка при наведении будет подсвечиваться для этого мы добавим класс li:hover, затем устанавливаем параметры для большого контейнера и подписи к нему.

.thumbnails {

list-style: none;

font-size: 0;

margin-left: -2%;

li {

display: inline-block;

width: 23%;

margin-left: 2%;

text-align: center;

vertical-align: middle;

}

li:hover {

.item-hugger {

background: white;

.title {

color: #000;

}

input[name=»select»] {

display: none;

}

.item-hugger {

position: relative;

height: 140px;

margin: 20px 0;

background: #f2f2f2;

transition: all 150ms ease-in-out;

}

label {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

cursor: pointer;

}

.title {

padding: 20px 0 0;

font-size: 18px;

color: #555;

transition: all 150ms linear;

}

.thumb-image {

height: 100px;

padding: 20px 0;

}

.content {

position: absolute;

bottom: 0;

left: 0;

width: 600px;

height: 500px;

padding: 50px;

opacity: 0;

transition: all 150ms linear;

display: flex;

flex-direction: column;

justify-content: center;

.title {

font-size: 60px;

font-weight: 400;

display: inline-block;

color: #555;

border-bottom: 6px solid #fe7701;

padding: 50px 10px 0;

text-transform: uppercase;

}

input[name=»select»]:checked + .item-hugger {

height: 180px;

margin: 0;

background: white;

}

input[name=»select»]:checked ~ .content {

opacity: 1;

}

.white-box {

background: white;

height: 500px;

}

В результате мы получили замечательную галерею которая достаточно простая, но удобная в использовании. Использовав ее вы упростите отображение информации у Вас на сайте.

Вот и все. Готово!

Адаптивная галерея для сайта — Gamma Gallery

<li>

<div data-alt=»img01″ data-description=»<h4>Assemblage</h4>» data-max-width=»1800″ data-max-height=»2400″>

</noscript>

</div>

</li>

<!— … —>

</ul>

</div>

Галерея с увеличением изображений на CSS3

Наверное вам не раз уже приходилось сталкиваться с лайтбоксами или обыкновенными модальными окнами. Но если вы ведете свой блог или курируете сайт то вы, наверняка, сталкивались с нюансом вывода изображений на сайте. Дела в том, что вставить большие изображения на сайт это не практично, так как это занимает достаточно много места, а если слишком маленькие, то не будет понятно, что на изображении, по этому приходится идти на компромисс. В данном уроке мы рассмотрим, как создать простое увеличение изображений с помощью css.

И так, нам необходимо, чтобы по нажатию на изображение оно увеличивалось, кроме этого добавим кнопку закрытия изображения. И так, давайте приступим.

Шаг 1. HTML

И так, рассмотрим структуру, у нас есть общий контейнер, который содержит всю структуру, в середину этого контейнера помещены дочерние элементы, как изображения и классы закрытия развернутых изображений. Кроме этого мы используем класс :target который обеспечит работоспособность окон.

<div>

</div>

<div>

</div>

<div>

</div>

С разметкой мы разобрались, если вы хоть не много в этом разбираетесь, то сложностей не должно вызвать.

Шаг 2. CSS

Для начала нам необходимо определить некоторые базовые стили:

#images-box {

/ * Общая ширина изображения контейнера, в основном, для центрирования * /

width: 850px;

margin: 0px auto;

position: relative;

top: 70px;

}

.image-lightbox img {

width: inherit;

height: inherit;

z-index: 3000;

}

.holder {

/ * Ширина и высота, вы можете их изменить * /

width: 250px;

height: 166px;

float: left;

margin: 0 20px 0 0;

}

.image-lightbox {

width: inherit;

height: inherit;

padding: 10px;

/* Тени */

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

background: #fff;

border-radius: 5px;

position: absolute;

top: 0;

font-family: Arial, sans-serif;

/* Переходы */

-webkit-transition: all ease-in 0.5s;

-moz-transition: all ease-in 0.5s;

-ms-transition: all ease-in 0.5s;

-o-transition: all ease-in 0.5s;

}

Мы установили элементы display: none , для того, чтобы сделать кнопку закрытия, которая появляется, когда пользователь нажимает на изображение.

.image-lightbox span {

display: none;

}

.image-lightbox .expand {

width: 100%;

height: 100%;

position: absolute;

top: 0;

z-index: 4000;

background: rgba(0,0,0,0); /* Фиксы для IE */

left: 0;

}

.image-lightbox .close {

position: absolute;

width: 20px; height: 20px;

right: 20px; top: 20px;

}

.image-lightbox .close a {

height: auto; width: auto;

padding: 5px 10px;

color: #fff;

text-decoration: none;

background: #22272c;

box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4);

border-radius: 5px;

font-weight: bold;

float: right;

}

.image-lightbox .close a:hover {

box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);

}

Далее необходимо добавить позиционирование для изображений, если вы хотите добавить новые, то вам необходимо внести дополнения в данный раздел:

div#image-1 { left: 0; }

div#image-2 { left: 290px; }

div#image-3 { left: 580px; }

При открытии изображения происходит его позиционирование на странице:

div[id^=image]:target {

width: 450px;

height: 300px;

z-index: 5000;

top: 50px;

left: 200px;

}

div[id^=image]:target .close {

display: block;

}

div[id^=image]:target .expand {

display: none;

}

div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }

Мы не используем различных плагинов, что весьма упростит скорость загрузки, и обеспечит большую практичность.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Красивая галерея для сайта с помощью CSS3

.gallery {

margin: 100px auto 0;

ширина: 800 пикселей;

}

.gallery a {

дисплей: встроенный блок;

высота: 135 пикселей;

позиция: относительная;

ширина: 180 пикселей;

/ * Отключаем выделение * /

-moz-user-select: none;

-webkit-user-select: нет;

-khtml-user-select: нет;

выбор пользователя: нет;

}

.галерея img {

border: 8px solid #fff;

нижняя граница: сплошная 20 пикселей #fff;

курсор: указатель;

дисплей: блок;

высота: 100%;

слева: 0px;

позиция: абсолютная;

верх: 0px;

ширина: 100%;

z-index: 1;

/ * Свойства для изменения рамки * /

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-o-box-sizing: border-box;

размер коробки: рамка-рамка;

/ * Правила перехода * /

-webkit-transition: все 1.0s легкость;

-moz-transition: легкость всех 1.0s;

-o-переход: легкость всех 1.0s;

переход: все 1.0s легкость;

/ * Тени * /

-moz-box-shadow: 2px 2px 4px # 444;

-webkit-box-shadow: 2px 2px 4px # 444;

-o-box-shadow: 2px 2px 4px # 444;

box-shadow: 2px 2px 4px # 444;

}

/ * Вращение * /

.gallery a: nth-child (1) img {

-moz-transform: rotate (-25deg);

-webkit-transform: повернуть (-25deg);

преобразование: поворот (-25deg);

}

.галерея a: nth-child (2) img {

-moz-transform: rotate (-20deg);

-webkit-transform: повернуть (-20deg);

преобразование: поворот (-20 градусов);

}

.gallery a: nth-child (3) img {

-moz-transform: rotate (-15deg);

-webkit-transform: повернуть (-15deg);

преобразование: поворот (-15deg);

}

.gallery a: nth-child (4) img {

-moz-transform: rotate (-10deg);

-webkit-transform: повернуть (-10deg);

преобразование: поворот (-10deg);

}

.галерея a: nth-child (5) img {

-moz-transform: rotate (-5deg);

-webkit-transform: повернуть (-5deg);

преобразование: поворот (-5deg);

}

.gallery a: nth-child (6) img {

-moz-transform: rotate (0deg);

-webkit-transform: повернуть (0deg);

преобразование: поворот (0deg);

}

.gallery a: nth-child (7) img {

-moz-transform: rotate (5deg);

-webkit-transform: повернуть (5deg);

преобразование: поворот (5deg);

}

.галерея a: nth-child (8) img {

-moz-transform: rotate (10deg);

-webkit-transform: повернуть (10deg);

преобразование: поворот (10 градусов);

}

.gallery a: nth-child (9) img {

-moz-transform: rotate (15deg);

-webkit-transform: повернуть (15 градусов);

преобразование: поворот (15 градусов);

}

.gallery a: nth-child (10) img {

-moz-transform: rotate (20deg);

-webkit-transform: повернуть (20 градусов);

преобразование: поворот (20 градусов);

}

.галерея a: nth-child (11) img {

-moz-transform: rotate (25deg);

-webkit-transform: повернуть (25 градусов);

преобразование: поворот (25 градусов);

}

.gallery a: nth-child (12) img {

-moz-transform: rotate (30deg);

-webkit-transform: повернуть (30 градусов);

преобразование: поворот (30 градусов);

}

.gallery a: focus img {

cursor: default;

высота: 250%;

слева: -150 пикселей;

верх: -100 пикселей;

позиция: абсолютная;

ширина: 250%;

z-index: 25;

/ * Правила перехода * /

-webkit-transition: все 1.0s легкость;

-moz-transition: легкость всех 1.0s;

-o-переход: легкость всех 1.0s;

переход: все 1.0s легкость;

/ * Правила перехода * /

-moz-transform: rotate (0deg);

-webkit-transform: повернуть (0deg);

-o-преобразование: поворот (0deg);

преобразование: поворот (0deg);

}

Галерея с изображения изображений на CSS3

Наверное вам не раз уже приходилось сталкиваться с лайтбоксами или обыкновенными модальными окнами. Но если вы ведете свой блог или курируете сайт то вы, наверняка, сталкивались с нюансом вывода изображений на сайте. В том, что вставить большие изображения на сайт это не практично, так как это занимает много места, а если слишком маленькие, то не будет понятно, что на этом приходится идти на компромисс.В данном уроке мы рассмотрим, как создать простое увеличение изображений с помощью css.

Много различных шаблонов вы найдете на сайте наших партнеров, также имеются и шаблоны с круглосуточной техподдержкой и с помощью в настройке:

Для этого на изображение оно увеличивалось, кроме этого добавим закрытия изображения. И так, давайте приступим.

Шаг 1. HTML

В этом контейнере помещены дочерние элементы, как изображения и классы закрытия развернутых изображений.Кроме этого мы используем класс: target который обеспечит работоспособность окон.

140002

С разметкой мы разобрались, если вы хоть не много в этом разбираетесь, то сложностей не должно вызвать.

Шаг 2. CSS

Для начала нам необходимо определить некоторые базовые стили:

140002

000

000 34

# images-box {

/ * Общая ширина изображения контейнера, в основном, для центрирования * /

width: 850px;

маржа: 0 пикселей автоматически;

позиция: относительная;

верх: 70 пикселей;

}

.изображение-лайтбокс img {

ширина: наследование;

Высота: наследовать;

z-index: 3000;

}

.holder {

/ * Ширина и высота, вы можете их изменить * /

width: 250px;

высота: 166 пикселей;

поплавок: левый;

маржа: 0 20px 0 0;

}

.image-lightbox {

width: наследовать;

Высота: наследовать;

отступ: 10 пикселей;

/ * Тени * /

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

фон: #fff;

радиус границы: 5 пикселей;

позиция: абсолютная;

верх: 0;

Семейство шрифтов

: Arial, sans-serif;

/ * Переходы * /

-webkit-transition: все легкость-за 0.5с;

-моз-переход: все легкость за 0,5 с;

-ms-transition: легкость всего 0,5 с;

-o-переход: все легкость 0,5 с;

}

установили элементы display: none, для того, чтобы сделать кнопку закрытия, которая появляется, когда пользователь нажимает на изображение.

140002

000

000 34

.диапазон изображения-лайтбокса {

Дисплей

: нет;

}

.image-lightbox .expand {

width: 100%;

высота: 100%;

позиция: абсолютная;

верх: 0;

z-index: 4000;

фон: rgba (0,0,0,0); / * Фиксы для IE * /

Осталось

: 0;

}

.image-lightbox .close {

позиция: абсолютная;

ширина: 20 пикселей; высота: 20 пикселей;

справа: 20 пикселей; верх: 20 пикселей;

}

.изображение-лайтбокс. закрыть {

высота: авто; ширина: авто;

отступ: 5 пикселей 10 пикселей;

цвет: #fff;

текстовое оформление: нет;

фон: # 22272c;

box-shadow: вставка 0px 24px 20px -15px rgba (255, 255, 255, 0,1), вставка 0px 0px 10px rgba (0,0,0,0.4), 0px 0px 30px rgba (255,255,255,0.4);

радиус границы: 5 пикселей;

font-weight: жирный;

поплавок: правый;

}

.image-lightbox.закрыть a: hover {

box-shadow: inset 0px -24px 20px -15px rgba (255, 255, 255, 0,01), inset 0px 0px 10px rgba (0,0,0,0.4), 0px 0px 20px rgba (255,255,255 , 0,4);

}

Далее необходимо добавить позиционирование для изображений, если вы хотите добавить новые, вам необходимо внести дополнения в данный раздел:

div # image-1 {слева: 0; }

div # image-2 {слева: 290px; }

div # image-3 {слева: 580 пикселей; }

При открытии изображения происходит его позиционирование на странице:

div [id ^ = image]: цель {

width: 450px;

высота: 300 пикселей;

z-index: 5000;

верх: 50 пикселей;

слева: 200 пикселей;

}

div [id ^ = image]: цель.= изображение]: цель. развернуть {

дисплей: нет;

}

div # image-1: target, div # image-2: target, div # image-3: target {left: 200px; }

Мы не используем различных плагинов.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Как часто можно делать клизму грудничку: рекомендации педиатров

Разное

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Разное

Как успокоить плачущего ребенка: 10 эффективных способов

Разное

Что нужно новорожденному на первое время: полный список необходимых вещей

Разное

Пеленки для новорожденных: виды, размеры и способы использования

Разное