tech_css

Современные техники CSS3 для украшения вашего сайта

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

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

Реклама: Вазы для цветов

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

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

Источник/Пример: http://demosthenes.info/blog/532/Convert-Images-To-Black–White-With-CSS

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

Этот простой сниппет добавляет в верхней части страницы тень на всю ее ширину. Очень просто!

Источник/Пример: http://playground.genelocklin.com/depth/

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

Верите или нет, но с помощью CSS можно определить, был ли произведен двойной щелчок на определенном элементе. Просто посмотрите, как это реализовано:

Источник/Пример: http://css-tricks.com/examples/CSSDoubleClick/

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

Да, есть возможность отрисовывать треугольники с помощью CSS. Данная техника полезна и интересна исполнением и универсальностью.

Источник/Пример: http://davidwalsh.name/css-triangles

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

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

Источник/Пример: http://davidwalsh.name/css-calc

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

Текстовые градиенты всегда были и остаются популярными средствами украшения сайта. А с появлением CSS3 их реализация стала еще проще.

Источник: http://snipplr.com/view/49911/pure-css-text-gradients/

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

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

Источник/Пример: http://davidwalsh.name/pointer-events

Эффект вышивки на элементах с помощью CSS3

Следующий сниппет позволяет вам добавить эффект вышивки для любого выбранного элемента. И это прекрасно.

Источник: http://www.catswhocode.com/blog/snippets/stitched-elements-in-css3

Пользовательские скролбары на CSS3 и WebKit

В CSS3 вы сами можете определять, как должны выглядеть скролбары на вашем сайте.

Источник/Пример: http://davidwalsh.name/custom-scrollbars

Размытый текст на CSS3

Простой, но очень хороший эффект размытия текста. Легкий в установке и при этом очень красивый на выходе!

Источник/Пример: http://css-tricks.com/snippets/css/blurry-text/

Чистые угловые ленты с помощью обычного CSS3

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

And the CSS:

Источник/Пример: http://jsfiddle.net/chriscoyier/H6rQ6/1/


Оставить комментарий