Автор

Слайдер для сайта с помощью CSS3

Слайдер для сайта с помощью CSS3


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

 

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

 

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

Шаг 1. HTML

Для начала мы создаем простую разметку, в которой будут помещены радио-кнопки:

 <figure>
 <img src="01_Fabio_Basile.jpg"/>
 <figcaption>
 <h4>Fabio Basile</h4>
 <nav role='navigation'>
 <p>iPhone 6 Infinity</p>
 <ul>
 <li><a href="#" class="entypo-dribbble"></a></li>
 <li><a href="#" class="entypo-twitter"></a></li>
 </ul>
 </nav>
 </figcaption>
 </figure>

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

Шаг 2. CSS

Со стилями все еще проще, для начала нам необходимо определить общие стили контейнера, затем нам необходимо установить тени, рамки, и заливку с радио-кнопками:

*, *:before, *:after {
 margin:0;
 padding:0;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
}
#gal {
 position:relative;
 width:600px;
 height:300px;
 margin:0 auto;
 top:100px;
 background:white;
 -webkit-box-shadow:0px 0px 0px 10px white,
 5px 5px 0px 10px rgba(0,0,0,0.1);
 -moz-box-shadow:0px 0px 0px 10px white,
 5px 5px 0px 10px rgba(0,0,0,0.1);
 box-shadow:0px 0px 0px 10px white,
 5px 5px 0px 10px rgba(0,0,0,0.1);
 -webkit-transform:translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
#gal:after {
 content:'';
 position:absolute;
 bottom:24px;
 right:0;
 left:0;
 width:100%;
 height:1px;
 background:rgba(255,255,255,0.35);
 z-index:3;
}
#gal ul {list-style-type:none;}
input[type="radio"], input[type="radio"] + label {
 position:absolute;
 bottom:15px;
 display:block;
 width:20px;
 height:20px;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 cursor:pointer;
}
input[type="radio"] {
 opacity:0;
 z-index:9;
}
input[value="one"], input[value="one"] + label {left:20px;}
input[value="two"], input[value="two"] + label {left:128px;}
input[value="three"], input[value="three"] + label {left:236px;}
input[value="four"], input[value="four"] + label {left:344px;}
input[value="five"], input[value="five"] + label {left:452px;}
input[value="six"], input[value="six"] + label {right:20px;}
input[type="radio"] + label {
 background:rgba(255,255,255,0.35);
 z-index:7;
 -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
 -webkit-transition:all .3s;
 -moz-transition:all .3s;
 -o-transition:all .3s;
 transition:all .3s;
}
[class*="entypo-"]:before {
 position:absolute;
 font-family: 'entypo', sans-serif;
}
figure[class*="entypo-"]:before {
 left:10px;
 top:5px;
 font-size:2rem;
 color:rgba(255,255,255,0);
 z-index:1;
 -webkit-transition:color .1s;
 -moz-transition:color .1s;
 -o-transition:color .1s;
 transition:color .1s;
}
a[class*="entypo-"]:before {
 top:8px;
 left:9px;
 font-size:1.5rem;
 color:white;
}
a:hover[class*="entypo-"]:before {
 color:white;
}
figure, figure img, figcaption {
 position:absolute;
 top:0;
 right:0;
}
figure {
 bottom:0;
 left:0;
 width:600px;
 height:300px;
 display:block;
 overflow:hidden;
}
figure img {
 bottom:0;
 left:0;
 display:block;
 width:600px;
 height:300px;
 z-index:1;
 -webkit-transform:translateX(600px);
 -moz-transform:translateX(600px);
 -ms-transform:translateX(600px);
 -o-transform:translateX(600px);
 transform:translateX(600px);
 -webkit-transition:all .15s .15s, z-index 0s;
 -moz-transition:all .15s .15s, z-index 0s;
 -o-transition:all .15s .15s, z-index 0s;
 transition:all .15s .15s, z-index 0s;
}

Полный исходник стилей можно посмотреть в стилях в архиве.

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

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

vk.com/club.ssdru

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



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

Слайдер для сайта с помощью CSS3

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


Слайдер для сайта с помощью CSS3

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


Слайдер для сайта с помощью CSS3

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


Слайдер для сайта с помощью CSS3

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close