Верстка \ CSS 3

Эффект наведения на кнопку

От автора: важным элементом веб-страницы, особенно лендинга является CTA (call to action) – призыв к действию. CTA часто сразу пишут на кнопках «Оформить заказ», «Перезвоните мне», «Заказать расчет стоимости» и т.д. И чем лучше сделана кнопка, чем красивее эффект по наведению на такую кнопку, тем выше вероятность, что ее нажмут посетители сайта.

Продолжить чтение

Верстка \ CSS 3

Автоматическое изменение размера столбцов в CSS Grid: auto-fill против auto-fit

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

Продолжить чтение

Верстка \ CSS 3

Соотношение сторон это круто

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

Продолжить чтение

Верстка \ CSS 3

6 креативных идей CSS hover эффекта для ссылок

От автора: CSS hover эффекты для ссылок могут придать изюминку обычной веб-странице. Бывало ли у вас, что вы не можете придумать красивый hover эффект? Я покажу вам 6 CSS эффектов для вашего следующего проекта.

Продолжить чтение

Верстка \ CSS 3

5 эффектов наведения ссылок на CSS

От автора: по умолчанию неоформленные ссылки на странице выглядят скучно. Они никак не реагируют на наведение. В CSS для изменения такого поведения есть псевдокласс :hover, благодаря которому можно оживить ссылки на сайте, сделав их более динамичными. В предлагаемом уроке вы найдете 5 интересных эффектов наведения ссылок на CSS и без JavaScript.

Продолжить чтение

Верстка \ CSS 3

4 способа прижать футер к низу страницы

От автора: это будет небольшой урок для начинающих верстальщиков, в котором я бы хотел собрать несколько способов решения такой задачи: как прижать футер к низу страницы. Эта задача актуальна для страниц с небольшим объемом контента, где футер, не прижатый к низу страницы, «висит» в воздухе и смотрится это не очень хорошо. В уроке вы найдете как старые, так и новые способы решения данной задачи.

Продолжить чтение

Верстка \ CSS 3

Как использовать CSS ::before и ::after для анимаций и переходов

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

Продолжить чтение