Автор

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

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


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

 

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

 

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

Шаг 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

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

Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим.


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

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


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

Если вы хотите объедение приятное с красивым на своем блоге то этот  урок станет вам весьма полезен. Мы рассмотрим процесс создания простого автоматического слайдера с прикрепленным к нему аккордеоном вкладок с плавным раскрытием и выводом дополнительной информации. Для этого мы будем использовать плагин Slidorion. Имеется несколько опций, которые дают возможность настроить время показа слайдов, эффекты переходов между слайдами и включить/выключить автоматическое проигрывание.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close