featured22

3 трюка для добавления текстуры в ваш текст с CSS и SVG

Вероятно, вы знакомы с использованием такой техники Photoshop, когда в качестве маски изображения выступает текст; это лучший известный способ добавить текстуры или даже фон изображения на ваш текст. Далее вы можете использовать этот текст в виде изображения на вашем веб-сайте; а ведь было бы здорово, если бы мы смогли наложить такой же эффект, используя HTML и CSS? Хорошие новости — мы можем!

CSS представила такие свойства как background-clip и mask-image, которые вы можете использовать для создания схожих эффектов, для которых (далее…)

Подробнее

featured15

3 клёвых CSS3 эффекта для изображений при наведении курсора

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

В старые времена мы должны были полагаться на JavaScript для подобных эффектов. Но сейчас, спасибо возрастающей поддержки браузерами CSS3, возможно установить эти эффекты вообще без написания скриптов. К сожалению, всё ещё используются браузеры (IE9 и ниже), которые (далее…)

Подробнее

01

Пример использования flex для адаптивного (отзывчивого) веб-дизайна

flex — это одна из великолепных возможностей новых версий CSS. Используя один только flex можно очень простым кодом (заданием стилей) настроить внешний вид сайта в зависимости от размера экрана, на котором происходит просмотр. Можно изменять порядок, пропорции, делать невидимыми блоки веб-сайта. И всё это без использования JavaScript или сложных конструкций CSS стилей.

По flex уже сейчас много достаточно полной документации, в том числе на русском языке. Но читая длинные справочные статьи не всем просто понять мощь и возможности, (далее…)

Подробнее

featured48

15 режимов наложения средствами CSS (CSS blend modes), которые дадут новый запал вашим изображениям

Одна из самый ценимых особенностей Photoshop’а, возможно, особенность которая позволяет опережать своих конкурентов — это режимы наложения. Режимы наложения берут два пикселя, лежащих друг над другом и комбинируют их различными способами, например, режим затемнения просто выведет более тёмный из двух тёмных пикселей. Когда распространяют по целому изображению, режимы наложения могут производить некоторые потрясающие эффекты.

Хотя Adobe Photoshop не изобретал режимов наложения, его реализация, безусловно, самая подражаемая. Но теперь, вам не нужен (далее…)

Подробнее

8 простых эффектов CSS3, которые произведут впечатление на ваших пользователей

 

CSS3 дал бесчисленные возможности для дизайнеров UX (опыта взаимодействия), а самое лучшее в этом, что самые крутые элементы действительно просты в реализации.

Буквально пара строк кода даст удивительные эффекты перехода, которые взволнуют ваших пользователей, увеличат вовлечённость и, в конечном итоге, при правильном использовании, увеличит вашу посещаемость. Более того, эти эффекты используют аппаратное ускорение, это прогресс – в котором вы можете принять участие прямо сейчас.

Вот 8 действительно (далее…)

Подробнее

Как создать анимированный липкий заголовок посредством CSS3 и jQuery

Мода на разные элементы дизайна приходит и уходит. Те элементы дизайна, которые решают определённые проблемы, держаться дольше других.  Элементы дизайна, которые популярны сейчас именно по этой причине, — это липкие элементы; это те элементы, которые ведут себя нормально до тех пор, пока мы не начинаем пролистывать страницу, и тогда они, тем или иным способом, поддерживают свою видимость на странице.

Любовь к ним началась с боковых панелей, но настоящую свою популярность получили липкие заголовки. Почему? Потому что (далее…)

Подробнее