CSS

Готовое css решение для окрашивания текста в цвета градиентом и добавления обводки с пояснениями. В графических редакторах довольно легко добавить тексту такие эффекты, как градиентный цвет и обводку. Тексты с этими эффектами при грамотном подходе могут выгодно отличать дизайн от аналогов и стать его изюминкой. Это создает для дизайнеров соблазны применять данные эффекты. Но на этапе верстки реализация градиента и обводки текста может стать проблемой. Дело в том, что в css градиент задается с помощью значения, записанное в функции linear-gradient для свойств background и background-image.  Для свойства color, с помощью которого задается цвет текста linear-gradient не работает. С обводкой дела […]

В большинстве случаев весь контент на странице ограничен по ширине. Открывая веб страницу на ПК мониторе можно обратить внимание на то, что весь контент страницы расположен по центру страницы в полосе определенной ширины, а по бокам имеются отступы. На некоторых сайтах (например You Tube) контент растягивается на всю ширину экрана. Но такой подход используется намного реже. Если открыть ту же страницу на экране достаточной ширины другого размера (ширины), то вы увидите то, что ширина контента не поменяется. Но порой возникает необходимость растянуть какой-то элемент контента до одного из краев экрана. При этом отступ с противоположной стороны этого же блока должен […]

Функция clamp позволяет использовать относительные единицы измерения в css в заранее ограниченном диапазоне размеров элементов. Это означает, что помимо размера, который устанавливается относительно размера области просмотра, можно установить максимальный и минимальный размеры элемента. В статье о единицах измерения в css освещался недостаток использования относительных единиц, который заключался в излишнем росте размеров элементов на большом экране. Применение функции clamp() решает эту проблему. Использование Функция записывается при помощи ключевого слова clamp, после которого идут скобки. В скобках записывается три аргумента. clamp(MIN, VAL, MAX); Использование функции позволяет сократить количество кода за счет того, что данный подход позволяет исключить использование медиа запросов. Но при […]

Единиц измерения в вебе существует достаточно большое количество. Я же расскажу о тех, которые часто применяются в верстке. Все единицы измерения в css можно разделить на абсолютные и относительные. Абсолютные единицы измерения Абсолютные единицы являются таковыми потому, что с помощью них задаются жесткие размеры элементам на странице. При этом фактические размеры не будут зависеть от контекста окружения — ширины, высоты экрана. К абсолютным единицам относятся: В разработке сайтов и приложений широко применяются px. Пиксель является самой понятной и популярной единицей в вебе. Эта единица не имеет физических размеров. Пиксель — это минимальная точка изображения, из которых оно состоит. Каждый пиксель […]

Медиа запросы по своей сути являются css выражениями, которые применяются в файлах стилей. Используются при адаптации верстки под устройства с разной шириной экрана. Это позволяет создавать веб страницы, которые одинаково хорошо будут отображаться как на компьютерах, так и на мобильных. Медиа-запросы в CSS — это специальные инструкции, благодаря которым в зависимости от параметров устройства, таких как ориентация экрана, разрешение, размеры и др. будут применятся необходимые css стили. Благодаря этому у разработчиков есть возможность создать мобильную версию страницы и наоборот. Синтаксис Создается медиа запрос с помощью ключевого слова @media. После ключевого слова должно идти условие, при котором будет выполнятся код. Сам […]

Перед тем, как приступить к стилизации html элементов с помощью css, для корректного отображения стилей в браузере потребуется произвести: И установить свои дефолтные css значения html элементам на странице. Зачем и почему это приходится делать поговорим дальше в статье. Принцип работы обнуляющих css стилей Код html является по своей сути каркасом веб страницы. Браузер, читая html файл выведет на экран устройства перечисленные html элементы в том порядке, в котором они записаны в файле. В свою очередь в файле css записываются визуальные стили всех тех элементов, которые находятся в файле html. Например, если с помощью html на страницу выводятся заголовки, текст, […]

По окончанию у нас должно получится что-то подобное. В данном примере сам курсор не подвергается изменениям. На странице создаются html элементы, которые следуют за курсором. Таким образом и достигается нужный нам эффект. Конкретно этот пример не является самым сложным. На просторах интернета Вы можете найти примеры более сложной стилизации, которые позволяют достигнуть более впечатляющих эффектов. Несмотря на то, что в моем примере сам курсор не подвергается стилизации я рассмотрю базовые способы изменения курсора при помощи css. Изменение курсора с помощью css Для курсора предусмотрена возможность изменять изменять его с помощью стандартных свойств css. Изменяем изображение курсора Для начала нам понадобится […]