Мне часто задают вопрос: Возможно ли создать тени из градиентов, а не из сплошных цветов? В СSS не существует конкретного свойства для этого (поверьте мне, я проверял), а в любом посте по этой теме содержится только множество хитростей для того, чтобы получить что-то похожее на градиент. В этой статье я расскажу вам о некоторых из них.
Но для начала… ещё одна статья о градиентных тенях? Серьёзно?
Всем привет, я Кирилл, frontend разработчик компании Usetech. Сегодня я бы хотел поговорить о том, как можно улучшить производительность сайта с помощью обычных CSS свойств и на что стоит обращать внимание. Но прежде чем приступим к улучшению производительности сайта, давайте поговорим о том, какие проблемы возникают с CSS:
Парсинг лучших статей дня с habr
Всем привет, сегодня я расскажу, как можно довольно просто написать парсер на примере сайта habr для сбора лучших статей дня в виде json файла, в формате, "Название статьи": "ссылка".
Привет, друзья!
Представляю вашему вниманию перевод этой замечательной статьи, посвященной продвинутому использованию нового CSS-селектора :has().
:has() предоставляет возможность "заглядывать вперед" с помощью CSS и стилизовать родительский элемент (предка). Этот селектор может быть легко расширен для стилизации одного или нескольких дочерних элементов (потомков). Регистрация состояний или позиций элемента позволяет стилизовать почти любую комбинацию элементов как уникальных или входящих в определенный диапазон.
Обратите внимание: на сегодняшний день :has() поддерживается не всеми браузерами, поэтому использовать его в производственных приложениях пока рано.
Всем привет! Я в веб-разработке не так давно. Сейчас я пишу свой сайт, который будет выступать в качестве моего портфолио и, возможно, даже целого проекта. При добавлении модального окна для авторизации на свой сайт, я подумал, а что будет, если публиковать подобные модульные вещи, чтобы любой человек мог их скопировать и не думать о них, а использовать в разработке. То есть создать готовый модуль для встраивания. Мне, как разработчику было бы удобно использовать готовое решение, тем более написанное мною, да и делиться опытом - дело приятное :)
Когда речь идет о производительности, разработчики часто используют Lighthouse, Perfbuddy или аналогичные инструменты анализа производительности. Но когда целевой сайт имеет защиту от ботов, получить информацию не так просто. В этой статье блога мы сосредоточимся на том, где искать признаки узких мест в производительности с помощью Chrome Devtools.
Если вы работали с сайтами, содержащими много длинных текстов, особенно с сайтами на CMS, где пользователи работают в WYSIWYG-редакторе, то вы наверняка писали CSS для управления междустрочными интервалами между различными элементами типографики — заголовками, параграфами, списками и т. д.
Привет, друзья!
Представляю вашему вниманию перевод этой замечательной статьи, представляющей собой коллекцию лучших практик, которые по мнению команды Chrome DevRel являются наиболее эффективными способами улучшения показателей Core Web Vitals.
Core Web Vitals — это часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный аспект опыта взаимодействия пользователя с сайтом, измеряемый в полевых условиях и отражающий реальные действия по достижению критически важного результата, ориентированного на пользователя.
Web Vitals — это инициатива Google, цель которой — предоставить единое руководство по сигналам качества, необходимым для обеспечения хорошего взаимодействия с пользователем в Интернете (источник).
Интересно? Тогда прошу под кат.
Во множестве проектов web разработки для улучшения пользовательского опыта используются всплывающие подсказки - tooltips. В статье рассматривается создание переиспользуемого и гибко настраиваемого React компонента для отображения таких всплывающих подсказок.
Я рад пролить свет на тот факт, что CSS grid-template-rows и grid-template-columns теперь можно анимировать во всех основных веб-браузерах! Что ж, CSS Grid уже давно технически поддерживает анимацию, ведь она встроена прямо в спецификацию CSS Grid Layout Module Level 1.
Сворачивающиеся разделы с контентом, называемые как аккордеон, являются распространенным шаблоном пользовательского интерфейса. Однако контент, скрытый в свернутых разделах, становится невозможным для поиска по странице пользователем. Кроме того, нельзя ссылаться на текстовые фрагменты внутри свернутой области.
HTML-атрибут hidden=until-found и событие beforematch могут решить эти проблемы. Добавляя hidden=until-found в контейнер для вашего скрытого контента, вы позволяете браузеру искать текст в этой скрытой области и открывать раздел, если совпадение найдено.
Эта функция не только позволяет выполнять поиск на странице в скрытых разделах, но и делает этот скрытый контент доступным для поисковых систем. Google Search даже сформирует ссылки, которые прокручиваются до обнаруженного фрагмента.
Эти функции доступны в Chrome 102, поэтому давайте посмотрим, как они работают.
Переведя статью об иконках сайта, я конечно же решил настроить всё как надо на своих проектах. То есть на личном сайте и сервисе по генерации иконок (было бы странно создавать такой сервис, и не настроить для него иконки как следует). Однако, столкнулся с парочкой проблем.
"Тачка на прокачку" уже давно не выходит. А вот "Django на прокачку" снова продолжает вас радовать. В сегодняшнем эпизоде мы:
1. Узнаем, что такое препроцессоры и чем они интереснее обычного CSS;
2. Разберёмся с SASS и SCSS, узнаем, чем они отличаются;
3. И рассмотрим на практике, как использовать SASS/SCSS в Django-проекте.
Как обычно, меньше болтовни – больше кода. Центрирует картинку Макс. Выходит за рамки Егор. Статью написали авторы канала PyLounge. Поехали!
Напишем слайдеры изображений на чистых HTML и СSS. Меняем только CSS, разметка в HTML остается неизменной. Внешний вид из-за разного CSS при этом разительно различается, а в слайдеры можно вставить неограниченное число картинок. Сначала мы создали круговой слайдер с бесконечным вращением, похожий на виджет-спиннер с изображениями. Затем мы сделали слайдер, пролистывающий стопку фотографий. Продолжение — к старту курса по Fullstack-разработке на Python.
В предыдущей статье у нас получился красивый слайдер («карусель») с круговым вращением. А сегодня я создам слайдер, пролистывающий стопку «полароидных» снимков.
Пока не смотрите код, сначала я должен вам многое про него рассказать. Поехали! К старту нашего курса по Fullstack-разработке на Python.
Одни расширения добавляют в браузер новые функции, а другие предоставляют данные о посещаемых веб-страницах:
Я расскажу о разработке расширения для Chrome на Vue 3 и Quasar. Это расширение которое будет изменять размер шрифта на посещаемых веб-страницах. Подробности — к старту нашего курса по Fullstack-разработке на Python.
Слайдеры изображений, также известные как карусели картинок, очень распространены. Есть множество вариантов обычного CSS-слайдера, в котором изображения смещаются слева направо (или наоборот). Можно использовать JavaScript-библиотеки для создания красивых слайдеров со сложной анимацией. Но здесь я подойду к созданию карусели иначе.
В серии статей я расскажу вам, как создать необычные и красивые слайдеры исключительно в CSS. Если вы устали от одинаковых слайдеров, вам это понравится! Продолжение — к старту нашего курса по Fullstack-разработке на Python.
Идея этой демонстрации пришла из игры Session Skate. В начальных титрах «SESSION» каждая буква быстро исчезает. Это выглядело довольно круто, и я сразу понял, что могу сделать это с помощью view-transition, setInterval() и .textContent. Итак, я завёл себе задачу в todo, чтобы сделать это, потому что пришло время заняться фигнёй, а не работой.
Всем привет, меня зовут Кирилл, я frontend разработчик компании Usetech. CSS постоянно развивается, и некоторые полезные свойства остаются незамеченными. Возможно о них говорят не так много, как о других, но в этой статье на примерах я разберу новые и полезные свойства CSS. Ещё вы увидите раздел ресурсы, где можно почитать подробнее и глубже.
CSS свойства, которые мы рассмотрим в данной статье:
