Webmasters.BY

Сегодня мы покажем вам, как создавать простые, анимированные подсказки с использованием CSS переходов и псевдо-классов :before и :after.

Идея заключается в том, чтобы создать маленькие подсказки при наведении курсора на список со ссылками или, как в нашем случае, на иконки социальных сетей.

Я уверен, что вы часто видели на различных веб-сайтах необычные эффекты при переходе между страницами, большинство из них создавалось с помощью JavaScript. В этом уроке я покажу, как вы можете создать свой собственный эфект перехода, но вместо JavaScript я буду использовать CSS Transition и свойство :target.

Изображения, используемые в демо, от Matt Kaufenberg.

С помощью свойства CSS "background-clip: text" (которое в настоящее время поддерживается только в браузерах Webkit), мы можем добавить фоновое изображение для текстового элемента. Сегодня мы будем экспериментировать с ним и создадим несколько симпатичных примеров, добавив CSS3 переходы.

Изображения из примеров от Andreas Preis и Joanna Kustra.

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

Мы все знаем, что html-формы выглядят по-разному в разных операционных системах, браузерах и даже в разных версиях одного и того же браузера.

Formalize - это CSS фреймворк, целью которого является решить эту проблему.