Автор

13 06.2014
Простые ползунки для публикаций с отражением

Простые ползунки для публикаций с отражением


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

 

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

 

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

Шаг 1. HTML

Для начала, по традиции, начнем с разметки, у нас будет контейнер,в котором будут содержаться два класса с блоками, название у них будет соответствующее, item1 one и  item2 two. Также мы добавляем класс кнопки, и контейнер в котором будет содержаться дополнительный контент.

<div class="wrapper">
<div class="container clearfix">
<div class="item1 one reflection clearfix">
<h1>Начало</h1>
<p>Описание.</p>
<span class="circle"><span class="arrow"></span></span>
</div>
<div class="dropdown">
<p>Описание.</p>
</div>
</div>
<div class="container clearfix">
<div class="item2 two reflection clearfix">
<h1>Начало</h1>
<p>Описание.</p>
<span class="circle2"><span class="arrow2"></span></span>
</div>
<div class="dropdown2">
<p>Описание.</p>
</div>
</div>
</div>

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

Шаг 2. CSS

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

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
.wrapper{
margin:0 auto;
width:1300px;
margin-top:50px;
}
.title{
font:30px Source Sans Pro;
color:#757575;
}
.item1,.item2{
width:600px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F7F7F7), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #F7F7F7 0%, #E8E8E8 100%);
z-index:1000;
position:relative;
padding-bottom:20px;
float:left;
margin-right:10px;
box-shadow:rgba(0,0,0,0.5) 0px 1px 10px;
h1{
padding:20px 20px 5px 20px;
font:16px Source Sans Pro;
margin:0px;
color:#757575;
}
p{
padding:0px 13px 0px 20px;
font:14px Source Sans Pro;
text-align:justify;
margin:0px;
float:left;
width:85%;
color:#969696;
}
}
.reflection{
-webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.5)));
z-index:0;
position:relative;
}
.reflect{
-webkit-box-reflect:none;
}
.circle,.circle2{
content:"";
width:40px;
height:40px;
border:3px solid #969696;
border-radius:100px;
float:left;
margin-top:-5px;
position:relative;
opacity:0.3;
}
.arrow,.arrow2{
position:absolute;
content:"";
top:17px;
left:13px;
width:0px;
height:0px;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-top:7px solid #969696;
border-bottom:7px solid transparent;
}
.one{
border-top:5px solid hsla(170, 45%, 55%, 1);
}
.two{
border-top:5px solid hsla(209, 65%, 55%, 1);
}
.glow{
cursor:pointer;
opacity:0.5;
border:3px solid hsla(170, 45%, 55%, 1);
}
.glow-arrow{
cursor:pointer;
border-top:7px solid hsla(170, 45%, 55%, 1);
}
.glow2{
cursor:pointer;
opacity:0.5;
border:3px solid hsla(209, 65%, 55%, 1);
}
.glow-arrow2{
cursor:pointer;
border-top:7px solid hsla(209, 65%, 55%, 1);
}
.container{
position:relative;
}
.dropdown,.dropdown2{
width:600px;
height:100px;
background:#3b3f45;
position:absolute;
display:none;
top:124px;
box-shadow:inset rgba(0,0,0,0.3) 0px 5px 5px;
p{
padding:20px 13px 0px 20px;
font:14px Source Sans Pro;
text-align:justify;
margin:0px;
float:left;
width:85%;
color:#969696;
}
}
.small{
font:16px Source Sans Pro;
}

Кроме этого мы добавляем <em>.reflection,</em> который будет отвечать за отражение, также обратите внимание, мы добавляем градиент для каждого браузера, чтобы достичь кроссбраузерности.

Шаг 3. JS

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


1$(".circle").mouseover(function(){
$(this).addClass("glow");
$(".arrow").addClass("glow-arrow");
});
$(".circle").mouseleave(function(){
$(this).removeClass("glow");
$(".arrow").removeClass("glow-arrow");
});
$(".circle").click(function(){
$(".dropdown").slideToggle();
$(".item1").toggleClass("reflect");
});
$(".circle2").mouseover(function(){
$(this).addClass("glow2");
$(".arrow2").addClass("glow-arrow2");
});
$(".circle2").mouseleave(function(){
$(this).removeClass("glow2");
$(".arrow2").removeClass("glow-arrow2");
});
$(".circle2").click(function(){
$(".dropdown2").slideToggle();
$(".item2").toggleClass("reflect");
});

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

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


vk.com/club.ssdru

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


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

26 04.2013
Простые ползунки для публикаций с отражением

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


12 09.2013
Простые ползунки для публикаций с отражением

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


06 06.2014
Простые ползунки для публикаций с отражением

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


10 04.2013
Простые ползунки для публикаций с отражением

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close