WebDesignMagazine.ru – Журнал о веб-дизайне

Современные CSS3 эффекты и элементы для украшения веб-сайта

0

CSS3  позволяет разработчикам интерфейсов создавать утонченные визуальные эффекты для того, чтобы усовершенствовать внешний вид веб-сайта. В этой статье вы узнаете более чем о 10 новых методов украшения вашего веб-сайта при помощи CSS3, которые придадут сайту более профессиональный вид.

Черно-белые изображения с помощью CSS3

Следующий CSS класс, будет отображать любой цвет изображения в черно-белом. Префикс поставщика позволит трюку работать в любом браузере.

Тень вверху страницы при помощи CSS3

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

Обнаружение двойных щелчков в CSS3

Верьте или нет, но можно определить, когда элемент был дважды щелкнут, используя только один CSS. Как?- показано в следующем коде:

Треугольники в CSS3

Да, это на самом деле возможно, – сделать треугольник, используя только CSS. Хотя это, наверное, и не самый лучший способ это делать, мы все таки считаем эту технику очень полезной и интересной.

Использование CSS calc ()

calc () работает как функция и позволяет выполнять расчеты для определения размеров и формы объектов. Она может быть использована в любом месте, где требуется длина.

Чистые CSS градиенты текста

Текст градиенты всегда были популярны в Интернете. Теперь с CSS3, стало намного проще создавать красивые градиенты в течение нескольких минут.

 Отключение указателя событий CSS

Недавно введенное свойство pointer-events, позволяет отключить события указателя на элемент. Например, ссылка со следующим классом больше не будет интерактивной.

Оформление элементов “швом”в CSS3

Следующий cниппет покажет, как создается эффект “прошивки” вокруг любого элемента.

Пользовательские прокрутки (scrollbars) с помощью CSS3 и WebKit

Помните, 10 лет назад, когда почти каждый использовал эксклюзивные свойства Microsoft, чтобы настроить внешний вид полосы прокрутки? Ну, теперь вы можете сделать то же самое с Webkit.

Размытый текст с помощью CSS3

Простой, но очень хороший эффект размытого текста.

 Угловые ленты в чистом CSS

Этот код немного длиноват, но он создает причудливую угловую ленту в чистом CSS.

 

И теперь CSS:

Поделиться: