—»     —»   Эффект наложения аннотации с помощью CSS3
  Раздел: Руководства, CSS/Style Sheets   Нет комментариев  

Эффект наложения аннотации с помощью CSS3



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

Эффект наложения аннотации с помощью CSS3

В данном руководстве использованы изображения предварительного просмотра, предоставленные талантливой Аной Сигота (Ana Segota).

Красивые иконки стрелок были разработаны Алессио Атзени (Alessio Atzeni), и скачать их можно здесь.

Примечание: результат данного руководства будет работать только в тех браузерах, где имеется соответствующая поддержка CSS-параметров.

Разметка

Наша структура будет состоять из отдела для заголовка и описания, а также из отдела предварительного просмотра. Отдел предварительного просмотра и будет оформлен эффектом наложения. Идея заключается в том, чтобы добавить чекбокс, изображение и разделение для аннотаций, которое будет содержат span-элементы. Трюк заключается в том, чтобы расположить чекбокс поверх остальных элементов, чтобы на него всегда можно было нажать. Нам важно, чтобы он оставался на самом верху, так как нам нужно иметь доступ к его родственным элементам – изображению и разделению для аннотаций:

<div class="ao-item">
<div class="ao-details">
<h2>Some title</h2>
<p>Some description</p>
</div>
<div class="ao-preview">
<input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" />
<img src="images/image01.jpg" alt="image01" />
<div class="ao-annotations">
<span>Full Localisation Support</span>
<span>Custom Image Widget</span>
<span>Blog and Contact Widgets</span>
<span>Easy Theme Options</span>
<span>4 Footer Widget Columns</span>
</div>
</div>
</div>

Здесь может быть любое количество span-элементов. Мы расположим их в индивидуальном порядке. Давайте взглянем на код CSS.

CSS-код

Учтите, что здесь мы исключили браузерные префиксы. Конечно же, они будут в файлах. Разделение с классом ao-item будет иметь ширину равную 80%, так как нам нужно, что вся эта конструкция была гибкой:

.ao-item {
width: 80%;
margin: 0 auto;
padding: 35px 0;
position: relative;
clear: both;
}

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

.ao-item:before,
.ao-item:after {
content:"";
display:table;
}

.ao-item:after {
clear:both;
}

.ao-item {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
} /* from CSSTricks: http://css-tricks.com/pseudo-element-roundup/ */

Давайте оформим раздел с подробностями, в котором у нас расположены заголовок и описание. Мы выровняем этот раздел по правому краю и зададим ему значение ширины равное 40%. Мы также добавим левый отступ, который не вызовет никаких проблем, так как мы применили box-sizing: border-box ко всем нашим элементам в файле normalize.css. Таким образом, мы можем быть уверенными в том, что он на самом деле будет 40% в ширину, а отступ «внутри» данного элемента, и не будет засчитываться в эту ширину:

.ao-details {
float: right;
width: 40%;
padding-left: 20px;
}

Далее мы добавляем некоторые стили к текстам:

.ao-details h2 {
color: #498EA5;
margin-top: 0;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
padding-bottom: 10px;
box-shadow:
0 1px 0 #DFDEDC,
0 2px 0 rgba(255,255,255,0.5);
}

.ao-details p {
color: #999;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 22px;
}

.ao-details p a{
font-weight: bold;
color: #498EA5;
}

.ao-details p a:hover{
color: #2A3344;
}

Разделение с предварительным просмотром будет немного больше в размере и будет выровнено по левому краю:

.ao-preview {
width: 60%;
float: left;
position: relative;
}

Теперь нам нужно оформить изображение. Для того чтобы сделать его адаптивным, мы зададим ему параметр max-width равный 100%. За счет этого мы можем быть уверенными в том, что оно будет расположено внутри родительского разделения. Изображение будет оформлено переходом. Идея заключается в том, чтобы немного уменьшить его сразу же, как только по соответствующему чекбоксу будет произведен клик:

.ao-item img {
margin: 0 auto;
max-width: 100%;
display: block;
opacity: 0.8;
box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
transition: all 0.3s ease-in-out;
}

Блок с аннотацией, мы сделаем невидимым, установив непрозрачность на 0. Он также будет иметь переход: мы хотим, чтобы он изменялся в размерах и становился непрозрачным, при нажатии на чекбокс.

.ao-annotations {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background: rgba(33,62,68,0.3);
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
opacity: 0;
z-index: 5;
transform: scale(0.8);
transition: all 0.3s ease-in-out;
}

У аннотаций будет абсолютная позиция (мы установим верхнюю и левую), и мы дадим им минимальную длинну в 140 пикселей с шириной в процентах. Эффект перехода будет уменьшаться и появляться (непрозрачность: 1):

.ao-annotations span {
display: block;
position: absolute;
padding: 10px 25px;
width: 33%;
min-width: 140px;
text-align: center;
background: rgba(255,255,255,1);
color: rgba(20,40,47,0.9);
font-size: 16px;
font-style: italic;
text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
opacity: 0;
transform: scale(1.3);
transition: all 0.3s ease-in-out;
}

Span-элементы с аннотациями будут обозначены маленькими стрелочками, и добавим мы их посредством псевдо-класса :after.

.ao-annotations span:after {
position: absolute;
background: transparent url(../images/arrow.png) no-repeat center center;
width: 32px;
height: 33px;
top: 50%;
left: 100%;
margin: -16px 0 0 -16px;
content: '';
}

Два из наших span-элементов будут обозначены стрелочками по левую сторону:

.ao-annotations span:nth-child(3):after,
.ao-annotations span:nth-child(4):after {
left: auto;
right: 100%;
margin: -16px -16px 0 0;
background-image: url(../images/arrow_left.png);
}

Теперь нам нужно выставить позиции для каждого span-элемента. Мы снова воспользуемся процентным соотношением, чтобы позиционирование имело смысл при масштабировании других объектов:

.ao-annotations span:nth-child(1) {
top: 5%;
left: 5%;
}

.ao-annotations span:nth-child(2) {
top: 20%;
left: -13%;
}

.ao-annotations span:nth-child(3) {
top: 37%;
right: 2%;
}

.ao-annotations span:nth-child(4) {
top: 53%;
right: -8%;
}

.ao-annotations span:nth-child(5) {
bottom: 18%;
left: -4%;
}

Теперь давайте поработаем над нашим чекбоксом. Трюк заключается в том, чтобы расположить его поверх всех остальных элементов, и выставить высоту и ширину на 100%, что означает, что он будет занимать все разделение, и поэтому у нас будет возможность кликать куда-угодно, чтобы запустить эффект. Он будет «скрытым» так как мы выставили уровень плотности отображения на 0. Но он по прежнему будет на странице, и мы сможем кликнуть по нему. Параметр z-index должен быть выше, чем у других параметров, так что можете ставить высокое значение:

input.ao-toggle {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
margin: 0;
padding: 0;
opacity: 0;
z-index: 100;
border: none;
cursor: pointer;
}

И теперь нам нужно определить, что происходит со смежными элементами, когда мы производим клик по чекбоксу. Изображение уменьшится, изменится параметр box-shadow, и оно станет непрозрачным:

input.ao-toggle:checked + img {
box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
opacity: 1;
transform: scale(0.8);
}

Так мы больше не можем использовать img:hover (не забывайте, что чекбокс находится поверх всего остального), то мы воспользуемся эффектом при наведении на элемент ввода чекбокса для того, чтобы запустить эффект при наведении у изображения:

input.ao-toggle:hover + img{
opacity: 1;
}

Наложение с классом ao-annoations и его span-элементы будут масштабироваться в размерах до 1 и станут непрозрачными:

input.ao-toggle:checked ~ .ao-annotations,
input.ao-toggle:checked ~ .ao-annotations span{
opacity: 1;
transform: scale(1);
}

В качестве изюминки давайте сделаем так, чтобы каждый span появлялся с небольшой задержкой:

input.ao-toggle:checked ~ .ao-annotations span:nth-child(1) {
transition-delay: 0.3s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(2) {
transition-delay: 0.4s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(3) {
transition-delay: 0.5s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(4) {
transition-delay: 0.6s;
}

input.ao-toggle:checked ~ .ao-annotations span:nth-child(5) {
transition-delay: 0.7s;
}

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

@media screen and (max-width: 730px){
.ao-item .ao-details,
.ao-preview {
float: none;
width: 100%;
padding: 0;
text-align: left;
}
.ao-annotations span {
font-size: 11px;
}
}

И на этом всё! Надеемся, что вам понравилась эта статья, и вы вынесете из нее что-нибудь полезное!

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 5485   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


искусственная трава для декора
b-sf.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930