Использование CSS3 mask для создания универсальных иконок

Некоторое время назад на нашем блоге публиковалась статья «Удобный способ вёрстки универсальных иконок». Но у данного способа был достаточно серьезный недостаток: он не позволял размещать иконки на фоне произвольного цвета либо текстурном фоне. В этой статье я расскажу о способе, который решает данную проблему. Читать далее Использование CSS3 mask для создания универсальных иконок

Адаптивный текст в несколько колонок на CSS

С развитием технологий, мониторы становятся всё шире и шире, а вместе с ними и блоки текста на сайтах. Известно, что человеку наиболее комфортно читать около 67-75 символов в строке, но некоторое время браузеры не позволяли реализовывать верстку в несколько колонок с помощью встроенного функционала. Благо технологии не стоят на месте и всё больше браузеров внедряют поддержу многоколоночного текста, о которой и пойдет речь в этой статье. Читать далее Адаптивный текст в несколько колонок на CSS

Удобный способ вёрстки универсальных иконок

Приветствую вас, читатели Тру-Кодера. Сегодня я расскажу вам об одном очень удобном способе вёрстки иконок, который уменьшит размер используемой для иконок графики и упростит создание css-спрайтов. Данный способ применим в основном в тех случаях, когда иконки находятся на однородном фоне. Итак, приступим. Читать далее Удобный способ вёрстки универсальных иконок

Создаем и используем CSS-спрайты


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

Основы анимации на CSS3


На сегодняшний день многие современные браузеры поддерживают некоторые свойства СSS3, одним из самых интересных, на мой взгляд, из них является свойство transition. Это свойство имеет префиксы для работы в разных браузерах, например, свойство -о-transition поддерживается последними версиями Оперы, -moz-transition поддерживается Мозилой и т.д. В дальнейшем, я буду опускать для краткости эти префиксы, как в описании, так и в коде. Полную версию кода вы можете посмотреть в исходниках. Читать далее Основы анимации на CSS3