Автор

Слайдер для сайта с помощью 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

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


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

Я уже публиковал урок «Нестандартные Checkbox (RadioButton) без использования JavaScript». Прекрасные кнопочки, но там используются картинки!!! В данном примере используется только CSS. Всё очень просто вы вставляете код в свой стиль и получаете стильные, а именно на мой взгляд, в современном стиле кнопки.


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close