Автор

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

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


 

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

 

ДЕМО
ИСХОДНИКИ

 

Шаг 1. HTML

<!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 class="container" id="container">
            <div class="gallery">
                <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 class="close"></span>
            </div>
        </div>
    </body>
</html>

Шаг 2. CSS

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

Заключение

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

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


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

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

На сайтах, в основном, можно встретить вывод подписей для изображений, которые содержат различную информацию о материале. Зачастую эти, так называемые, подсказки весьма скучны и не привлекают взор пользователя к необходимой информации под изображением, но эту, пускай не такую уж и большую проблему, можно весьма просто решить с помощью маленького плагина jQuery. Плагин Drop Caption берет содержание атрибута изображения title и делает из него подпись, которая появляется только при наведении курсора мыши на картинку.


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

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


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

Чего вы можете добиться с помощью CSS 3D Transforms. Будут случаи, когда вы будете в полной мере использовать возможности CSS 3D. 


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

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close