• Красивые анимации на CSS3

    Красивые анимации на CSS3

  • Свойство box-shadow

    Свойство box-shadow

  • Эффект Lightbox на чистом CSS3

    Эффект Lightbox на чистом CSS3

  • Анимация при скролле страницы

    Анимация при скролле страницы

  • Анимированые иконки

    Анимированые иконки

  • Свойство clip-path и модальное окно

    Свойство clip-path и модальное окно

Анимирование иконок

Опубликовано в : 26-06-2016 | Автор : Олег | В рубрике : Практические примеры

0

анимация иконок

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

SVG-иконки можно найти на многих сайтах, как платные, так и бесплатные. Я обычно пользуюсь iconfinder.com и flaticon.com

Свойство clip-path и модальное окно

Опубликовано в : 08-05-2016 | Автор : Олег | В рубрике : Элементы CSS

0

Свойство Clip-Path и модальное окно

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента, а при помощи border-radius создаются закругления углов.

Но возможности выше указанных свойств ограничиваются видом прямоугольника или прямоугольника с закругленными углами, также возможно заключить выбранный элемент в круг или овал. Но заключить элемент в многоугольную, не симметричную, очень сложной конфигурации границу при помощи этих свойств у нас не получиться. И здесь на помощь приходит свойство clip-path

Свойство clip-path

Опубликовано в : 23-02-2016 | Автор : Олег | В рубрике : Элементы CSS

2

clip_path

Свойство clip-path можно применять ко всем элементам HTML, а также графическим элементам SVG и элементам-контейнерам SVG. Оно позволяет "обрезать" элемент практически любой формы. Это может быть отсечение прямоугольной формы, в виде круга или овала, а также фигура произвольной формы - много-много-многоугольник.

Обо всех этих возможностях написано множество статей, поэтому на них останавливаться не будем. Сегодня рассмотрим несколько иное применение свойства clip-path

HTML5 — Теги figure и figcaption

Опубликовано в : 04-01-2016 | Автор : Олег | В рубрике : Элементы CSS

0

Тег figure

Этот тег парный и позволяет группировать различные элементы сайта, но в основном его применяют для группировки картинок, графиков, схем и др. Содержимое должно быть самостоятельной единицей контента, т.е. его можно разместить в любом месте на странице и при этом не нарушается общее построение страницы. Вспомните обыкновенную книгу: идет какой-то текст и в нем "...смотри рис 34...", а сам рисунок может находиться совершенно в другом месте ( на другой странице например ).

3D- трансформация для книги

Опубликовано в : 20-11-2015 | Автор : Олег | В рубрике : Практические примеры

0

3D-книга

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

Эффекты при оформлении текста

Опубликовано в : 03-10-2015 | Автор : Олег | В рубрике : Практические примеры

0

Эффекты для текста

Мы запросто можем задать границу блоку, рисунку, таблице, тексту. Именно тексту, но не каждой букве этого текста. Хотя стоит попробовать.
В спецификации CSS3 есть свойство -webkit-text-stroke, которое позволяет это сделать. Свойство -webkit-text-stroke - это сокращенный способ задать свойства -webkit-text-stroke-width и -webkit-text-stroke-color .

Анимированный логотип на CSS3

Опубликовано в : 29-09-2015 | Автор : Олег | В рубрике : Практические примеры

0

логотип на чистом CSS3

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

Создание анимированного логотипа на чистом CSS начнем с написания HTML-кода.

Создание 3D-трансформации

Опубликовано в : 21-09-2015 | Автор : Олег | В рубрике : Элементы CSS

0

Создание 3D-трансформации

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

Для того, чтобы создать объемное перемещение элемента необходимо для родительского блока задать свойство perspective.
Свойство perspective определяет, на какое расстояние удален 3D элемент от точки обзора. С помощью этого свойства возможно изменять перспективу, откуда просматриваются 3D элементы. Значения должны быть положительными числами.

Красивые анимации блоков на CSS3 -2

Опубликовано в : 14-09-2015 | Автор : Олег | В рубрике : Практические примеры

0

Красивые анимации блоков

Продолжаем анимацию блоков, начатую в статье Красивая анимация блоков на CSS3.

Для блоков используем картинки уже применяемые на сайте, т.к это не принципиально, ведь каждый из вас наверняка будет применять свои.

Главное сам принцип анимации.

Кнопки для сайта ( продолжение )

Опубликовано в : 05-08-2015 | Автор : Олег | В рубрике : Практические примеры

0

Кнопки для сайта (продолжение)

Продолжаем публикацию оформления кнопок для сайта.
Сегодня рассмотрим кнопки с изменением внешнего вида при наведении в виде шторок и анимации текстового содержимого.

Как обычно, внешнее оформление, размеры, содержимое каждый выбирает сам, здесь задается только описание самого эффекта.