🧮 Использование CSS-селектора :has() на примерах
Итак, :has() — это CSS-псевдокласс родительского селектора. Другими словами, с помощью :has() можно изменить родительский элемент, содержащий определённый дочерний элемент либо элемент, следующий за ним.
В этой статье автор показал, как работает этот псевдокласс на наглядном примере, создав аналог Dock из MacOS.
#учись #css
Итак, :has() — это CSS-псевдокласс родительского селектора. Другими словами, с помощью :has() можно изменить родительский элемент, содержащий определённый дочерний элемент либо элемент, следующий за ним.
В этой статье автор показал, как работает этот псевдокласс на наглядном примере, создав аналог Dock из MacOS.
#учись #css
📑 Создание сайдбара с помощью HTML, CSS и JavaScript
Этот гайд позволит Вам создать с нуля боковую панель и настроить её по своему усмотрению.
#javascript #css #html #учись
Этот гайд позволит Вам создать с нуля боковую панель и настроить её по своему усмотрению.
#javascript #css #html #учись
🎹 100 CSS-кнопок для Вашего проекта
На этом сайте находятся различные варианты кнопок, которые Вы можете использовать в своём следующем проекте. Достаточно нажать на понравившуюся кнопку и откроется окно с кодом, который нужно просто скопировать в проект.
#полезныйресурс #css
На этом сайте находятся различные варианты кнопок, которые Вы можете использовать в своём следующем проекте. Достаточно нажать на понравившуюся кнопку и откроется окно с кодом, который нужно просто скопировать в проект.
#полезныйресурс #css
This media is not supported in your browser
VIEW IN TELEGRAM
🏔 ScrollTrigger – красивый эффект перемотки экрана с подвижными элементами. Во время прокрутки горы и облака смещаются не целиком, а по отдельным слоям.
#сниппет #css
#сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
🖼 3D Scrolling Gallery – галерея с прокручивающимися изображениями, которые появляются из центра экрана при скролле мышки. Подойдет для сайтов, где важна динамика.
#сниппет #css #javascript
#сниппет #css #javascript
This media is not supported in your browser
VIEW IN TELEGRAM
📒 Шпаргалка по CSS CSSReference.io
Это бесплатное визуальное руководство по CSS. Здесь собраны примеры для каждого свойства и их детальное объяснение в виде диаграмм и иллюстраций.
#css #полезныйресурс
Это бесплатное визуальное руководство по CSS. Здесь собраны примеры для каждого свойства и их детальное объяснение в виде диаграмм и иллюстраций.
#css #полезныйресурс
📌 12 важнейших сайтов для освоения CSS в 2023 году
Авторы провели исследование и собрали 12 наиболее актуальных сайтов, которые помогут Вам продвинуться от уровня новичка до профессионала по CSS за кратчайшие сроки.
#учись #полезныйресурс #css
Авторы провели исследование и собрали 12 наиболее актуальных сайтов, которые помогут Вам продвинуться от уровня новичка до профессионала по CSS за кратчайшие сроки.
#учись #полезныйресурс #css
🗄 Сокращения в CSS / Минимизируем CSS код
Сокращенные свойства - это свойства CSS, которые позволяют одновременно устанавливать значения нескольких других свойств CSS. Используя сокращенное свойство, Вы можете писать более краткие (и часто более читаемые) таблицы стилей, экономя время и энергию.
#учись #полезныйресурс #css
Сокращенные свойства - это свойства CSS, которые позволяют одновременно устанавливать значения нескольких других свойств CSS. Используя сокращенное свойство, Вы можете писать более краткие (и часто более читаемые) таблицы стилей, экономя время и энергию.
#учись #полезныйресурс #css
🗃 Шпаргалка по всем свойствам CSS Flexbox
В этой статье, Вы рассмотрите основы CSS Flexbox. Поймёте, как работает каждое из свойств Flexbox, и получите шпаргалку к каждому свойству. В шпаргалках описано всё, что можно сделать с помощью Flexbox.
#учись #полезныйресурс #css
В этой статье, Вы рассмотрите основы CSS Flexbox. Поймёте, как работает каждое из свойств Flexbox, и получите шпаргалку к каждому свойству. В шпаргалках описано всё, что можно сделать с помощью Flexbox.
#учись #полезныйресурс #css
🐹 Все значения свойства cursor в CSS
С помощью этого свойства можно указать, какой внешний вид будет у курсора, когда пользователь наведёт мышку на элемент.
Чаще всего это свойство пригождается при вёрстке кнопок. По умолчанию браузер не меняет внешний вид курсора при наведении мыши на кнопку. Поэтому, если на кнопку можно нажать, ей следует прописать cursor: pointer, чтобы пользователь точно понял, что с элементом можно взаимодействовать.
#учись #html #css
С помощью этого свойства можно указать, какой внешний вид будет у курсора, когда пользователь наведёт мышку на элемент.
.button { cursor: pointer; }
Чаще всего это свойство пригождается при вёрстке кнопок. По умолчанию браузер не меняет внешний вид курсора при наведении мыши на кнопку. Поэтому, если на кнопку можно нажать, ей следует прописать cursor: pointer, чтобы пользователь точно понял, что с элементом можно взаимодействовать.
#учись #html #css
🗂 Интерактивная шпаргалка по HTML, CSS и JavaScript
Содержит полезные примеры кода HTML, CSS, JS и инструменты веб-разработчика. Для каждого примера есть объяснение. Например: CSS-градиент, генератор кнопок или теней для блоков, код для циклов или переменных JS.
#учись #полезныйресурс #шпаргалки #html #css #javascript
Содержит полезные примеры кода HTML, CSS, JS и инструменты веб-разработчика. Для каждого примера есть объяснение. Например: CSS-градиент, генератор кнопок или теней для блоков, код для циклов или переменных JS.
#учись #полезныйресурс #шпаргалки #html #css #javascript
🖥 Code Basics. Бесплатная платформа для изучения основ программирования с нуля
Подойдет как новичкам с нулевым опытом, так и начинающим программистом, которые не понимают как работает код, выходящий за пределы простых примеров из учебников.
#учись #полезныйресурс #html #css #javascript #python
Подойдет как новичкам с нулевым опытом, так и начинающим программистом, которые не понимают как работает код, выходящий за пределы простых примеров из учебников.
#учись #полезныйресурс #html #css #javascript #python