Практика HTML

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

Тени в CSS подразделяются на два вида: тени текста и тени блоков. Тени текста задаются свойством text-shadow, принимающим четыре параметра: сдвиг тени по оси X, сдвиг тени по оси Y, размытие тени и её цвет. Тени блоков задаются свойством box-shadow, принимающим пять параметров: сдвиг по оси X, сдвиг по оси Y, размытие тени, радиус распространения и её цвет. Рассмотрим пример: Тени текста задаются свойством тенью внутри блока с тенью</div> .shadow { text-shadow: 1px 3px 5px grey; box-shadow:...

Градиенты — это плавные перетекания одних цветов в другие, используемые, в основном, для фона. В CSS градиенты бывают двух типов: линейные и радиальные. Линейные градиенты задаются функцией linear-gradient(), которая принимает в качестве параметров направление градиента (в радианах - deg) и список точек (минимум 2), содержащие цвет и позицию точки (в процентах). .gradient { background: linear-gradient( 90deg, /* задаём направление градиента */ blueviolet 0%, /* задаём цвет и позицию...

К этому моменту вы уже точно познакомились со вставкой изображений в HTML-документ. А что с медиафайлами? Как сервисы позволяют нам слушать музыку и смотреть фильмы прямо на сайте? Раньше для этого было необходимо встраивать в страницу Flash Player от Adobe. На данный момент, все корпорации отказываются от этого способа и слишком поздно его рассматривать. <audio> Благодаря тегу audio, мы можем воспроизводить звуки на странице. Этот тег можно использовать как одиночно, так и совместно с тегом source...

Знаете ли вы, что можно совмещать CSS-variables с HSL и calc? Мы можем создавать темы для сайта, основанные на CSS-переменных. Это будет выглядеть так: все цвета мы задаём на сайте не конкретно, а абстрактно,задавая формулу, по которой в дальнейшем будет вычисляться цвет. Так изменяя всего три CSS-переменные, мы можем полностью перекрасить весь сайт. Цвета можно изменять на основе времени суток на часах пользователя или же в зависимости от его особенностей зрения. Для нас главная возможность — упростить с этим нашу работу...

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

Практически каждый сайт использует модальные окна для различных целей: отображение уведомлений, подтверждение действий, сбор информации и прочее. В этой главе мы рассмотрим два способа отображения модальных окон: новый и универсальный. Новые модальные окна Новые модальные окна имеют очень простой синтаксис HTML: <dialog open>Это модальное окно</dialog> Для отображения модального окна, необходимо добавить атрибут open К сожалению, обойтись совсем без JavaScript здесь невозможно, поэтому далее я приведу пример кода, который минимизирует ваше взаимодействие с JavaScript...

HTML имеет свои встроенные тултипы, но часто их дизайн не соответствует требованиям стиля макета. Сейчас мы научимся стилизовать тултипы. Для начала, нужно понять, что стандартный тултип - это своеобразное описание для элемента. Самый простой вид тултипа, который мы здесь будем рассматривать, не требует от HTML практически ничего. Мы будем использовать атрибут aria-label, который служит для описания элементов скринридерам (в основном, для людей с нарушениями зрения). Для того, чтобы через CSS "захватить"...

При вёрстке сайта, одной из первых задач верстальщика является создание основного шаблона. Основным шаблоном в данном случае называется вёрстка без контента - это совокупность шапки сайта, меню, футера и прочих элементов, которые встречаются на каждой странице. Итак, попробуем сверстать простой макет сайта. Сверху у нас будет шапка сайта, слева будет навигация по разделу сайта, справа контент, а снизу футер. Стандартный шаблон, ничего необычного. Начнём с HTML. <div class="main-container"> <header>Header</header> ...

Почти уверен, что вы не знаете этого свойства. Многоколоночный текст Время от времени возникает задача расположить список или текст в две колонки. Годы идут, CSS развивается, поколения верстальщиков сменяют поколения, но свои костыли люди как делали, так и делают...

Часто, бывает нужно вставить картинку в текст. Но работает это не всегда так, как мы это задумывали. Попробуем вставить картинку без стилей и посмотрим, что получится. Код примера предельно прост: А вот что получилось: Как видите, картинка стала частью первой строки текста. Нам редко нужно, чтобы поведение было именно таким. Чаще нам необходимо сделать так, чтобы картинка обтекалась текстом. Для этого существует свойство float. Добавим к нашему примеру float: left и посмотрим, что получится А получилось у нас следующее: Здесь мы видим, что картинка стала обтекаться текстом...

Знаете ли вы, что CSS имеет средства форматирования текста не хуже чем у Microsoft Word? Вы можете задать свой шрифт, жирность, начертание, цвет, тень, размер и еще множество параметров, чтобы получить идеально отформатированный текст. Для форматирования текста используется следующий основной набор свойств: Собственные шрифты Для подключения собственного шрифта используется правило @font-face. @font-face { font-family: 'Philosopher'; /* Название шрифта*/ font-style: normal; /* Начертание */ font-weight: 400; /* Насыщенность */ src: url(...