Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Графические ссылки

Хотите оживить свой сайт, добавив интересные эффекты, или же у вас просто есть набор графических ссылок, который мертво стоит на одном месте…? Если да то этот урок сделан именно для вас, благодаря технологиям CSS3 эту проблему можно решить без применения Javascript.

Итак для наглядности того о чем я говорю посмотрим как это будет выглядеть:

графические ссылки с эффектом плавного поднятия

Как это непосредственно работает, можете посмотреть здесь.

В чем тут смысл, у меня имеется, грубо говоря 4 картинки размером 128x128 пикселей, которые я сделал ссылками, задал им небольшую обводку серым цветом и заставил при наведении мыши плавно приподниматься на определенную высоту. Вот собственно вся идея теперь давайте посмотрим как это реализовать в коде:

<div class="gallery">
<a href="#"><img src="1.png" /></a>
<a href="#"><img src="2.png" /></a>
<a href="#"><img src="3.png" /></a>
<a href="#"><img src="4.png" /></a>
</div>

И таблица стилей:

<style type="text/css">
.gallery img{
    border: 8px solid #999;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
.gallery img:hover {
    margin-top: 5px;
}
</style>

Теперь давайте я разложу все по полочкам. Для начала html, мы создаем блок div которому присваиваем класс gallery, соответственно в этот блок мы помещаем наши четыре картинки и делаем их ссылками.

Далее переходим к CSS нашей таблице стилей. Первым делом мы создаем класс gallery который будит присваиваться только изображениям соответственно прописываем img, далее делаем бортик шириной 8 пикселей: border: 8px, и задаем стиль и цвет соответственно: solid #999; Далее у нас идет выравнивание по левому краю параметром float: left; и задаем отступ от всех краев наших изображений в 15 пикселей, параметром margin: 15px; Теперь очень интересный момент у нас остались три параметра которые как раз уже идут из CSS3:
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;

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

Идем дальше, у нас остался еще один пункт gallery img:hover он говорит нам о том, что при наведении курсора мыши на изображение произойдет следующее margin-top: 5px;, а именно верхний отступ изменится и принимает значение 5 пикселей.

Эффект поднятия в данном методе достигается за счет изменения полей а именно параметра margin который при не наведенной на него мыши имеет показатель 15px, а вот если мы наведем мышку то меняется на 5 px. Плюс ко всему плавный переход и мы получили очень красивые графические ссылки с эффект плавного поднятия.

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

Дата публикации:2012-05-03


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget