От автора: приветствую вас, дорогой читатель, на нашем блоге о сайтостроении. Сегодня я хотел бы рассказать, какие css3 эффекты можно реализовать на своем сайте, причем это будут, преимущественно, очень простые вещи, не требующие сотни строк кода для реализации.
Реализуем плавность
Итак, для добавления плавности при наведении курсора на блок используют свойство transition, в качестве его значения можно просто указать время, которое потребуется на изменение стилей. Соответственно, чем больше время, тем медленнее будут происходить изменения.
Кроме этого свойству можно задать дополнительные параметры, такие, как свойства, которые должны изменяться плавно. Если плавные переходы нужны для всех свойств, то можно написать ключевое слово all или не писать вообще ничего. Также можно задать эффект самого плавного перехода. Если его не писать, то будет использовано значение по умолчанию.
Transition: all 1s ease;
Эта строчка кода позволит элементу, к которому она добавлена, делать плавные перемены стилей при наведении с задержкой в одну секунду. Эта задержка применится ко всем свойствам, а в качестве эффекта будет использован ease, есть и другие, но о них я сейчас говорить не буду.
Собственно, этой строчки кода достаточно, чтобы реализовывать плавные эффекты css3 при наведении на блоки.
Изменение размеров
Сегодня это можно сделать двумя способами. Первый, это при наведении на блок изменять его ширину и высоту.
Другой вариант – использование transform: scale(). В скобках прописывается два значения: размер по горизонтали и по вертикали. По умолчанию значения равны единице, так что если записать 2, то размер увеличиться в два раза. Также можно записывать с десятичными долями. Соответственно, при желании вы можете и уменьшать элемент. Например:
transform: scale(1.5, 1.5); — увеличит элемент в полтора раза
transform: scale(0.5, 0.5); — уменьшит в два раза;
transform: scaleX(2); — увеличит ширину блока в два раза.
Поворот
Осуществляется с помощью тех же самых трансформаций, но уже с помощью rotate, значение задается в градусах:
transform: rotate(90deg); — повернет элемент на 90 градусов по часовой стрелке
transform: rotate(-120deg); — повернет на 120 против часовой, то есть, по сути, на 240 по часовой.
Перемещение
Блоки можно плавно перемещать в любую сторону при наведении. Для этого опять используйте трансформации, но уже параметр translate. К нему может добавляться X или Y для задания смещения только с одной конкретной стороны, если же писать просто translate, то сначала указывается смещение по горизонтали, потом по вертикали. Допускается использование отрицательных значений.
Transform: translateX(-100px); — сместит блок на 100 пикселей влево
transform: translate(150px, -200px); — на 150 пикселей вправо и на 200 пикселей вверх
Наклон
Задается с помощью skew. Также можно задавать только с одной стороны, используя X и Y.
|
1 |
transform: skewX(15deg); |
Изменение прозрачности
Теперь мы заканчиваем с трансформациями и посмотрим, что дает opacity. С его помощью можно делать при наведении элемент более ярким или наоборот, более тусклым.
|
1 2 3 4 5 6 |
.block{ opacity: 0.5; } .block:hover{ opacity: 1; } |
Естественно, также для .block должно быть прописано свойство transition, чтобы это было плавно.
Изменение цвета
Тут все тоже предельно просто. При наведении на элемент определите для него другой цвет фона или текста, теперь он будет плавно меняться. Цвет можно задавать любым удобным способом, хоть с помощью ключевого слова, хоть в режиме rgb, хоть в rgba.
Комбинирование
Собственно, вы вполне можете переопределять сразу несколько стилей, которые будут плавно применяться к блоку.
|
1 2 |
transform: scale(1.2, 1.2) rotate(-2deg); background: #333; |
В этом примере элемент будет немного увеличен, также он будет наклонен и у него изменится цвет фона. Все это применится одновременно, но в то же время плавно. Тут я оставляю все дальнейшие варианты вам, чтобы вы сами подумали, как можно трансформировать элементы и к каким эффектам это в конце концов приводит. Возможностей на самом деле много.
Фильтры для изображений
В CSS3 появились фильтры, теперь эта технология может то, что раньше вы могли сделать с изображениями только в графическом редакторе. Все фильтры задаются с помощью свойства filter: название фильтра (значение).
Свойство очень новое, поэтому не используйте его без соответствующих префиксов. Например, чтобы оно работало в Google Chrome, нужно использовать префикс –webkit:
-webkit-filter: saturate(3); — сделает цвет элемента, к которому применяется, гораздо более насыщенным, чем он есть сейчас. Можно задавать значение от 1 до 5, где 1 – значение по умолчанию.
Стоит сказать, что фильтры придуманы в первую очередь именно для использования к картинкам. К другим блокам их применять нет особой надобности. -webkit-filter: sepia(0.7) – добавляет эффект сепии, позволяет придать фотографиям старый вид.
Grayscale(1) – добавляет больше серого цвета к фотографии. Таким образом, можно из цветной сделать черно-белую. Drop-shadow – продвинутый вариант тени. Фильтр полностью копирует синтаксис свойства box-shadow, в нем отсутствует только параметр растяжения. В целом, он позволяет сделать такую же тень, что и упомянутое свойство, но есть 2 отличия:
Если тень применена к png-изображению, drop-shadow нарисует ее четко по контуру, а не квадратную. Это огромный плюс.
При задании множественных теней drop-shadow оттеняет не только основной элемент, но и все его предыдущие тени.
Анимация
С помощью серии свойств animation и @keyframes можно создавать удивительные анимации. Эта возможность css3 заслуживает отдельной книги, в этой статье я всего лишь упомяну ее, чтобы вы не забывали. Возможности анимации не ограничиваются передвижением элементов туда-сюда, сегодня с ее помощью даже создают игры на HTML5 и CSS3 и скриптах.
Создавать эффекты просто
CSS3 это такая мощная технология, что особых проблем с простыми эффектами у вас быть не должно, а сложные вы и сами сможете реализовать со временем, когда наберетесь опыта. Дополнительные фишки и возможности смотрите в нашем премиум-курсе по CSS3, а также не забывайте подписываться на блог.
