CSS3 эффекты: изображение с блоками подсказок!



↓ Также Вам будет интересно ↓
В этом уроке мы создадим небольшой эффект css3 эффект, используя комбинацию псевдо-класса :checked
с братом комбинатора (sibling combinators). Идея состоит в том, чтобы сделать изображение или элемент интерактивным, и добавить всплывающие подсказки при нажатии на изображение. Очень полезный эффект, особенно если Вы занимаетесь продажей шаблонов сайтов, хотя можно найти любое применение.
Если Вам необходимы всплывающие подсказки при наведении на текст, читайте статью о их создании с помощью CSS & JQuery + 7 примеров!
Тема предварительного просмотра изображений, используемая в демо примере, создана автором
HTML разметка
Наша структура кода будет состоять из части название и описание, и части предварительного просмотра. Часть предварительного просмотра будет иметь эффект наложения. Идея состоит в том, чтобы добавить флажок, изображение и список блоков с подсказками, заключенными в тег span
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="ao-item"> <div class="ao-details"> <h2>Blenton шаблон Wordpress</h2> <p>Blenton является простой и чистой Wordpress темой, которая была сделана с большим вниманием к деталям. Она подходит для коммерческих и частных проектов и поставляется с различными функциями.</p> </div> <div class="ao-preview"> <input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" /> <img src="/web-developer/css/images/Anariel_BlentonTemplate.jpg" alt="image01" /> <div class="ao-annotations"> <span>Любая поддержка</span> <span>Пользовательское изображение</span> <span>Виджеты "Блог" и "Контакты"</span> <span>Простые настройки темы</span> <span>4 колонки для виджетов футера</span> </div> </div> </div> |
Таким образом, мы можем делать сколько угодно всплывающих подсказок span
. Мы будем позиционировать каждую из них по отдельности. Теперь давайте посмотрим на CSS код.
CSS стили
Разделитель с классом ao-item
будет иметь ширину 80%, потому что мы хотим, чтобы весь блок был резиновым:
1 2 3 4 5 6 7 |
.ao-item { width: 80%; margin: 0 auto; padding: 35px 0; position: relative; clear: both; } |
Два внутренних подразделения будут плавающими, поэтому давайте проясним некоторые позиционирования с помощью одной
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.ao-item:before, .ao-item:after { content:""; display:table; } .ao-item:after { clear:both; } .ao-item { zoom:1; /* For IE 6/7 (trigger hasLayout) */ } |
Давайте подробно стилизуем часть с названием и описанием. Мы зададим перемещение float
вправо и ширину 40%. Мы также добавим левый отступ, который не вызывает у нас никаких проблем, потому что мы применили box-sizing: border-box
для всех элементов в файле normalize.css
.
Таким образом, это будет гарантировать, что разделение на самом деле 40% и отступ находится «внутри» всего блока:
1 2 3 4 5 |
.ao-details { float: right; width: 40%; padding-left: 20px; } |
Затем мы добавим некоторые стили к тексту элементов:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.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; } |
Предварительный просмотр будет немного больше и помещен влево float:left
:
1 2 3 4 5 |
.ao-preview { width: 60%; float: left; position: relative; } |
Теперь мы будем работать с изображением. Мы дадим ему максимальную ширину в 100%. Это гарантирует, что он будет содержаться в родительском блоке. Изображение будет иметь плавный переход. Суть состоит в том, чтобы немного уменьшить его, как только мы нажали на него:
1 2 3 4 5 6 7 8 |
.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; } |
Для всплывающих подсказок мы установили абсолютное позиционирование. Мы сделаем его невидимым, установив opacity:0
. Он также будет иметь красивый и плавный переход, чтобы как только мы отметим чекбокс, изменился масштаб и подсказки стали непрозрачными.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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; } |
Аннотации span
имеют абсолютное позиционирование, и мы дадим им минимальную ширина min-width
140 пикселей, так как ширина в процентах. Эффект перехода будет уменьшать и показывать opacity:1
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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
.
1 2 3 4 5 6 7 8 9 10 |
.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
будут иметь стрелку в левую сторону:
1 2 3 4 5 6 7 |
.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); } |
Теперь мы установим для каждой подсказки аннотации свое положение. Мы будем использовать проценты для правильного позиционирования:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.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
должен быть выше, чем у всех других элементов:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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; } |
И мы сейчас будем определять, что происходит, когда мы нажимаем на флажок. Изображение будет уменьшено “внутрь”, измениться тень вокруг и станут видны подсказки:
1 2 3 4 5 |
input.ao-toggle:checked + img { box-shadow: 1px 1px 6px rgba(0,0,0,0.2); opacity: 1; transform: scale(0.8); } |
Поскольку мы не можем использовать img:hover
(помните, флажок находится поверх всего), мы сделаем это немного по другому:
1 2 3 |
input.ao-toggle:hover + img{ opacity: 1; } |
Обертка с классом ao-annoations
и теги span
будет масштабироваться до 1 и становиться непрозрачными:
1 2 3 4 5 |
input.ao-toggle:checked ~ .ao-annotations, input.ao-toggle:checked ~ .ao-annotations span{ opacity: 1; transform: scale(1); } |
Чтобы добавить небольшую изюминку, мы сделаем появление каждой всплывающей подсказки с небольшой задержкой:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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
запрос для удаления позиции float
основных подразделений и уменьшения размера шрифта для span
аннотаций:
1 2 3 4 5 6 7 8 9 10 11 12 |
@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; } } |
И это все! Я надеюсь, вам понравился этот урок и Вы нашли то, что искали! Буду рад услышать Ваше мнение в комментариях. Спасибо за внимание!
