В процессе работы иногда возникает необходимость провести линии по диагонали блока или же закрасить его по диагонали. Как же достичь такого результата? Линия, размеры известны Когда известны размеры и они не изменятся, создание такой линии не представляет сложности.
С помощью CSS можно создавать разнообразные эффекты с текстом, и речь идёт не только о размере и начертании символов. Даже цвет текста можно превратить в изображение. Кроме того, текст можно расположить вертикально и даже перевернуть символы.
В большинстве социальных сетей и других сервисов, где есть возможность оставлять комментарии, присутствует элемент textarea. Его отличительная черта — увеличение высоты при заполнении. Как же это достигается?
Очень часто даже на простых макетах встречаются элементы, над которыми нужно подумать. Один из таких элементов — поле ввода пароля. Сегодня разберём один из вариантов решения этого вопроса.
Сегодня я не буду описывать CSS, так как цель этой статьи — показать, как можно использовать HTML-элемент <video> с помощью JavaScript, а также объяснить логику работы скрипта.
Стилизация простого текстового input, как правило, не вызывает особых трудностей. Однако, когда дело доходит до стилизации input с типом range, ситуация становится немного сложнее. Различия во внешнем виде элементов требуют разных подходов, а иногда необходимо использовать JavaScript.
На многих лендингах можно увидеть интерактивные элементы, известные как слайдеры, с изображениями до и после. Возникает вопрос: как создать такой слайдер, чтобы он был простым и универсальным? В интернете можно найти множество различных подходов к решению этой задачи.
Простая галерея для сайта с интересными эффектами. В этом слайдере реализовано следующее: автоматическое воспроизведение при наведении курсора на галерею перемотка приостанавливается после клика на кнопку перемотка тоже приостанавливается, но если курсор уходит за пределы кнопки, перемотка возобновляется на мобильной версии активный слайд всегда находится в центре.
Подкатили новые демки для сеток галереи. Одна на гридах, вторая на флексах. У каждой есть свои плюсы и минусы. На флексах можно добавить высоту картинкам что бы немного уровнять размеры, но пропорции могут потеряться. А на гридах необходимо добавлять лишние классы. Но при этом можно более жестко поддерживать пропорции картинок.
Треугольник Пенроуза на чистом CSS. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
Простое выпадающее меню на чистом CSS. Простое выпадающее меню на чистом CSS. Ссылка 1 Ссылка 2 Ссылка 3 CSS button, a { display: block; box-sizing: border-box; width: 100%; max-width: 180px; height: 100%; padding: 6px; overflow: hidden; font-size: inherit; font-family: Arial, Helvetica, sans-serif; text-align: left; color: #0000EE; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; background-color: beige; border: 0; transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out; appearance: none; }
Смена цвета картинки. # CSS CSS img { filter: hue-rotate(0); transition: filter 0.25s ease-in-out; } [data-color="img1"] { filter: hue-rotate(0deg); }
Если вы хотите обучаться вместе со мной, то приглашаю вас на индивидуальные курсы HTML Academy: «Профессиональная вёрстка сайтов» или «Адаптивная вёрстка и автоматизация».
Просто спросите у менеджера меня — наставника Зиновьева Александра. Обучение проходит в помесячном индивидуальном формате, и вы можете начать в любое удобное для вас время.
Кроме того, в HTML Academy вы получите профессию и даже сможете устроиться на работу с новой профессией.