Автор

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

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


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

 

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

 

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

Шаг 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");
});

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

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

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

vk.com/club.ssdru

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



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

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

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


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

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


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

Сегодня я расскажу вам, как создавать различные CSS3  эффектов. Мы использовали javascript. В результате страницы галереи у нас будет 9 образов, каждый из которых имеет собственный hover эффект.


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

Простой шаблон для демонстрации возможностей вашего приложения с помощью плавной 3d-анимации, основанной на CSS и jQuery.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close