HTML

В этой статье разберём два основных способа вставить видео на страницу: 🧩 Часть 1. Встроенное или загруженное видео: тег <video> Если у вас есть собственное видеофайл — например, promo.mp4, — то самый правильный способ вставить его в HTML — это использовать тег <video>. Этот тег появился в HTML5 и позволяет встроить медиаконтент без плагинов вроде Flash. Простейший пример: Тут всё просто: Если не указать controls, видео просто не будет иметь интерфейса, и пользователь не сможет им управлять. 🔧 Основные атрибуты тега <video> Пример с несколькими источниками Чтобы видео корректно работало во всех браузерах, можно указать несколько форматов: Если браузер не […]

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

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

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

На этапе дизайна планируются размеры текстовых блоков. На этапе эксплуатации может быть добавлен текст большего объема, что отобразится на всем дизайне. Единственный вариант, при котором не сломается верстка – это обрезать текст в рамках текстового блока. Для того, чтоб дать понять пользователю, что текст обрезан мы добавим многоточие в конце обрезанной строки. Точнее, отдельно обрезкой и добавлением многоточия мы заниматься не будем, а сделаем все разом. Рассмотрим два случая обрезки текста: Отрезаем текст большого объема При выводе фрагмента статьи на странице рубрики или блога нам в любом случае понадобится обрезать текст статьи и оставить толико его фрагмент. HTML код такого […]