Трюки CSS

<img src="..." alt="..." height="" width="" /> <p>Text text text...</p> <img src="..." alt="..." height="" width="" /> <p>Text text text...</p> <img src="..." alt="..." height="" width="" /> <p>Text text text...</p> Если бы это было в "теле" HTML-документа, ответ на вопрос заголовка сообщения блога - это буквально две строки CSS: body { display: grid; grid-template-columns: min-content 1fr; } И выглядело бы это примерно так: Круто. Спасибо CSS. Но давайте немного подшаманим макет, установим небольшой пробел между фото и текстом...

8 методов оптимизации загрузки изображений, позволяющие минимизировать как трафик, используемый для загрузки картинок в Интернет, так и использование ЦП для отображения фотографий. 1. Используйте CSS, чтобы задать "плавающие" размеры изображения, не забывая об атрибутах высоты и ширины в HTML, так вы получите правильное соотношение сторон при первом рендеринге. 2. Используйте content-visibility: auto; (Об этом напишу отдельную статью) 3. Если это возможно, используйте формат изображения AVIF 4....

Неоновый текст может добавить приятный футуристический штрих любому веб-сайту. Мне всегда нравилась магия неоновых вывесок, и я захотел воссоздать их с помощью CSS. Я подумал, что поделюсь несколькими советами, как это сделать! В этой статье мы рассмотрим, как добавить к тексту эффекты свечения. Мы также рассмотрим различные способы анимации неоновых вывесок с использованием CSS. Добавление эффекта свечения к тексту Во-первых, давайте заставим текст светиться. Это можно сделать в CSS с помощью свойства text-shadow...

names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], number: new Date().getDay(), link: document.createElement('link') } dSS.link.rel = "stylesheet"; dSS.link.type = "text/css"; dSS.link.href = dSS.names[ dSS.number ] + ".css"; document.getElementsByTagName('head')[0].appendChild( dSS...

Посмотрите несколько интересных трюков анимирования числа с помощью переменных CSS, как в этом примере ниже: уловка состоит в том, чтобы объявить настраиваемое свойство CSS как целое число. Таким образом его можно интерполировать как и любое другое целое число...

Помимо использования медиа-запросов и современных макетов CSS, таких как flexbox и grid, для создания адаптивных веб-сайтов, есть некоторые упущенные из виду вещи, чтобы верстать адаптивные сайты. В этой...

Вчера я наткнулся на действительно классный эффект на веб-сайте и попытался воспроизвести этот эффект для нового веб-приложения, которое я разрабатываю. У него был прозрачный контейнер, создающий фон фильтра на фоновом изображении позади него, и это было действительно круто. Вот эффект: Я попробовал обычный фильтр свойств css: blur (10px), но он размыл только сам контейнер, а не фон за элементом. После некоторого исследования я нашел супер простое однострочное свойство css для этого...

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

Автозаполнение, автофокус, использование атрибута pattern, есть много уловок HTML, которые используются в конструировании форм, они значительно улучшают общий опыт использования форм. Некоторые мелкие моменты, которые мне здесь нравятся, включают добавление большого количества отступов между элементами с использованием большого размера шрифта на рабочем столе...

Эта прекрасная анимация создается путем изменения свойств CSS background-size И background-position. Очень умно. Вот сам HTML: <A href="#">boooooooooooop</a> <br /><br /><br />

Если вы знакомы с CSS, вы, вероятно, знаете все о свойстве box-shadow. Но знаете ли вы, что есть CSS-фильтр drop-shadow, который делает нечто подобное? Как и box-shadow, мы можем передавать значения для x-offset, y-offset, blur radius и colour: .my-element { filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2)); } В отличие от box-shadow, он не принимает параметр распространения (подробнее об этом позже). Чем полезен drop-shadow? Если у нас есть box-shadow, зачем нам вообще drop-shadow? Использование...

Давайте начнем на этой неделе с замечательной демонстрации от Амита шина, в которой он сделал страницы книги анимированными только с помощью CSS: Перелистывание страниц с помощью CSS Хитрость? Каждая страница разделена на 7 сегментов, каждый со своей анимацией...