Статьи по HTML и CSS3

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

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

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

Как сделать стопроцентно адаптивное модальное окно, которое к тому же выводилось строго по центру и одинаково хорошо, без видимой ломки, смотрелось на различных типах экранов пользовательских устройств? Вопрос конечно интересный, а процесс реализации и вовсе увлекательнейший. Конечно, макет модального окна, о котором сегодня пойдёт речь, скорее резиновый, так как адаптивность, в навороченных кругах, подразумевает наличие, прописных мета-тегов для мобильных устройств, медиа-запросов в css и прочие установленные «трендованными буржуинами» и еже сними, стандартами.

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