Автор

Фотоальбом на чистом 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;
}

Заключение

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Библиотека WebGL позволяет создавать в браузере удивительные 3D игры, сцены и эффекты. Пока большинство из них только для развлечений, но некоторые могут быть уже сегодня использоваться на динамичных сайтах. Сегодня мы бы хотели привести пример реализации эффекта воды, который не оставит Вас равнодушным. Впечатляет, что так просто можно реализовать объемную графику прямо в окне браузера. Кроме этого данная технология стремительно набирает обороты и пользуется популярностью в веб-дизайнеров. Советуем Вам присмотреться к данной технологии.


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

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


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

Пост был написан мной 25.09.2011 и я его немного обновил и описал результаты этого неприятного факта. «Сегодня лопатил интернет и набрел на клон моего сайта. Дело в том, что этот домен (www.studio25kadr.ru) ранее принадлежал мне, но мне пришлось его поменять на существующий <a href="/">www.s-sd.ru</a>...


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close