Все записи категории ‘Танцы с CSS’

Эффект тряски элемента на сайте при наведении с помощью CCS3
 23 Окт, 2015

В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). Например, с помощью подключения класса (css), который описывает эффект, или установить как анимацию HTML элемента по умолчанию. Всё в ваших руках, я покажу лишь пример.

Читать далее »

Zoom-эффект на CSS3
 21 Окт, 2015

Давайте рассмотрим, как сделать эффект небольшого увеличения картинки при наведении курсора на контейнер. Такой эффект может немного оживить страницу, добавить динамики. Я не буду использовать скрипты, эффект работает на CSS3.
Читать далее »

Делаем эффект параллакса для заднего фона на сайте
 19 Окт, 2015

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса.

Читать далее »

box-sizing: padding-box на Chrome
 19 Сен, 2015

Пока Хром не поддерживает данное значение атрибута спецификации CSS, что то надо делать!

Читать далее »

Выравнивание блока HTML (вертикально и горизонтально)
 17 Сен, 2015

Центровка элемента — одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы.

Читать далее »

Автомасштабирование изображений
 16 Сен, 2015

Сейчас очень модными стали адаптивные версии дизайна, которые умеют подстраиваются под размер экрана устройства, на котором открыли сайт. Столбцы (сайдбары, основной контент и т.п.) можно сделать адаптивной ширины, менять их положение, скрывать при достижении определенных размеров. Как быть с картинками, которые всегда имеют конкретный фактический размер?

Читать далее »

Способы прижать HTML элемент к нижнему краю экрана
 14 Сен, 2015

Много занимаюсь версткой, потому возникают разные интересные задачи. Решил не оставлять без внимания этот интересный опыт.

Одна из таких задач, которая нередко возникают при верстке сайтов, желание заказчика «прибить» футер шаблона к нижнему краю окна браузера. Иначе, когда на странице мало контента, нижняя часть шаблона (футер) болтается как одна субстанция в проруби.

Дальше я показываю целых три способа как разместить футер у нижнего края экрана.

Читать далее »