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

CSS3 предоставляет дизайнерам много новых правил и модулей (таких как CSS Animations и CSS Transitions ), которые позволяют им добавлять в макеты интересные интерактивные эффекты.

Если вы хотите получить пользу от современных возможностей CSS, самым правильным путем будет использование (или изучение) библиотек CSS эффектов. Позвольте познакомить вас с несколькими из них. Все библиотеки, описанные в статье предоставляются с открытым исходным кодом. Они могут пригодиться вам при разработке актуальных интерфейсов в ваших проектах.

LESS, Sass и другие CSS-препроцессоры — отличный способ для разработчика расширить возможности CSS. Переменные, операции с цветами, примеси (mixins) и многие другие инструменты LESS помогут разработчику почувствовать выгоду от написания меньшего количества кода при достижении равноценных результатов (без использования LESS).

Замена текста картинками применяется в процессе верстки макетов уже очень долгое время. Причина этого в том, что в начале 2000-х годов разработчики могли использовать на веб-страницах довольно ограниченное количество шрифтов. В основном это были «стандартные» шрифты, например, Verdana или Georgia. Для того чтобы как-то «оживить» страничку, веб-мастера создавали в графическом редакторе изображение с надписью каким-то «нестандартным» шрифтом и размещали его в качестве фона элемента (например, заголовка) на странице, а текстовое содержимое «прятали». 

В этой заметке мне хотелось бы описать один интересный эффект – создание тени внутри блока. На самом деле это не очень сложно, не отнимает много сил и не занимает много времени.