Все для веб-дизайнера
Фокусировка объектов на сайте с помощью CSS3
Порой необходимо выделить мелкие элементы на сайте, при этом применив минимум усилий, отличным способом подчеркнуть элементы это размыть все необходимые объекты. Такой эффект можно встретить на зеркальных фотоаппаратах, его еще называю эффект blur’a или tilt-shift. Достигнуть его на сайте достаточно просто, нам необходимо применить несколько правил стилей. В данном уроке мы займемся построением именного такого элемента. У нас будет два объекта, один из которых размыт по умолчанию, и активируется при наведении курсора мыши.
У нас будет два изображения-ноутбука и телефона, по умолчанию фокус будет на ноутбуке, а телефон будет размыт, при наведении на телефон он будет фокусироваться, а ноутбук будет плавно расфокусироваться. И так, давайте приступим.
Шаг 1. HTML
Разметка будет состоять из двух изображений и текста со ссылкой, все это мы обвернем в класс, детали класса, мы прописываем в стилях, это для тех кто не знает.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container"> <div class="image"> <img class="iphone blur" src="iPhone.png" width="150px"alt="" /> <img class="imac" src="iMac.png" width="450px" alt="" /> </div> <div class="text-container"> <h1>Фокус объектов</h1> <p>Наведите курсор мыши на устройства, чтобы изменить фокус для изображений.</p> <nav class="more"> <a href="#">Читать далее <span class="arrow">→</span></a> </nav> </div> </div> |
С разметкой все просто и понятно, мы не будет останавливаться на ней детально, все скрипты необходимы для работы можно просмотреть в исходниках.
Шаг 2. CSS
Нам необходимо установить размытие и скорость ее прокрутки при наведении курсора мыши:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
p { color: #95a5a6; font-family: 'Droid Serif', sans-serif; font-size: 1em; line-height: 1.5em; } a { outline: none; color: #1ba6e7; text-decoration: none; font-weight: 600; font-size: 0.9em; } .container { margin-top: 120px; position: relative; margin-left:auto; margin-right:auto; width:60%; } .iphone { position: absolute; margin-left: 0px; margin-top: 120px; z-index: 999; -webkit-transition:0.4s; } .blur{ -webkit-transition:0.4s; -webkit-filter:blur(3px); } .imac { position: absolute; margin-left: 70px; z-index: 9; -webkit-transition:0.4s; } .iphone:hover ~ .imac { -webkit-transition:0.4s; -webkit-filter: blur(3px); } .iphone:hover { -webkit-transition:0.4s; -webkit-filter: blur(0px); } .text-container { margin-left: 600px; width: 380px; /*background-color: #efefef;*/ height: 400px; padding-top: 50px; } .arrow { -webkit-transition:.4s; } nav:hover .arrow { margin-left: 10px; -webkit-transition:.4s; } |
Вот и все, как мы и говорили в начале урока, что все реализовывается достаточно просто.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 15.11.2013 в 17:09, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
