logo

Практические примеры 0
Оформление кнопок для сайта

Практически на любом сайте Вы найдете хотя бы одну кнопку. Это может быть кнопка «Поиск», или «Скачать», или «Читать полностью», или какая то другая.
Ранее в качестве кнопок использовался ссылка-рисунок. При наведении на нее курсора одна картинка замещалась другой, чтобы создать иллюзию движения. В настоящее время с помощью CSS3 появилась возможность создавать всевозможные кнопки совершенно не используя картинки.

Приятного чтения
logo

Практические примеры 0
Коллекция Hover.css

Hover.css это коллекция CSS3 эффектов, которые можно использовать для анимации при наведении на них курсора. Содержит более 100 эффектов: 2D-трансформации, тени, границы, использование библиотеки иконок.
Пользоваться данной коллекцией очень просто: скачиваем архив ZIP, в папке css находим файл hover.css и загружаем его на сайт. Лучше конечно воспользоваться его минимизированной копией hover-min.css

Приятного чтения
logo

Практические примеры 0
Граница блока - градиент

Обычно границы задаются цветом, причем каждая из границ может иметь свой цвет. Для того, чтобы границы имели плавные переходы от цвета к цвету из макета сайта вырезались картинки и вставлялись в код страницы.
Попробуем решить задачу современными средствами верстки. В CSS3 есть такое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

Приятного чтения
logo

Практические примеры 0
Градиент в качестве фона

Ранее в качестве фона для сайта использовали либо просто заливку цветом, либо какую-то картинку, которая «весила» достаточно много . Затем стали использовать маленький «кусочек» — картинку малого размера, которую множили на весь экран.
Уже сейчас в современных браузерах можно сделать градиентный фон любой сложности при помощи CSS, и при этом совершенно не используя картинки.

Приятного чтения
logo

Элементы CSS 0
Псевдоэлементы

Из самого наименования предполагаем, что это вроде не настоящий элемент для верстки, а как бы подделка. Но эта «подделка» дорогого стоит.

Псевдоэлементы ::before и ::after ничего не изменяют в HTML-документе, их не существует и в дереве элементов документа.

Эти псевдоэлементы позволяют вставить на странице ту информацию, которой нет в HTML-коде.

Приятного чтения
logo

Элементы CSS 0
Свойство box-shadow

Раньше, для того, чтобы какому нибудь объекту на сайте добавить тень приходилось прибегать к помощи Photoshop-а или другого графического редактора. Тень добавляли в изображение или использовали как фоновый слой.
Потом эти картинки вырезались и вставлялись на страницу сайта. Но чем больше различных картинок содержалось на сайте, тем медленный сайт работал.

Приятного чтения
logo

Элементы CSS 0
Свойство border-radius

В CSS3 появилось замечательное свойство border-radius. Это свойство позволяет задать для элемента скругление углов. Ранее для этого использовались картинки ( сколько трудов стоило вырезать каждый скругленный уголок из шаблона, а затем «распихивать» их по нужным местам при верстке).

Приятного чтения
logo

Практические примеры 0
Анимация SVG-иконок

В этой статье рассмотрим как анимировать иконки, точнее любую SVG-графику. SVG-графика — это масштабируемая векторная графика, которую можно использовать непосредственно в коде страницы сайта. Преимущество перед остальными видами графики в том, что при увеличении размеров картинки — качество не теряется.

Приятного чтения
logo

Практические примеры 0
Анимированный логотип

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

Они также перекрещиваясь, перекрывают друг друга, да и весь логотип установлен под углом. При этом цвета в местах пересечения линий смешиваются, но об этом в конце статьи.

Приятного чтения
logo

Практические примеры 0
3D-трансформации

С помощью 3D-трансформации создаются объемные реалистичные эффекты на веб-страницах. В отличии от простой ( в одной плоскости ) трансформации в 3D-трансформации элементы могут дополнительно перемещаться вдоль оси Z. Для того, чтобы создать объемное перемещение элемента необходимо для родительского блока задать свойство perspective.

Приятного чтения