Made in HTML/CSS – Telegram
Made in HTML/CSS
1.38K subscribers
754 photos
41 videos
2 files
677 links
Научись классно верстать и создавать сайты благодаря Made in HTML/CSS.
По рекламе - https://news.1rj.ru/str/ZilantTG
Download Telegram
Visual Studio Code (или VS Code) от Microsoft — это удобный текстовый редактор для разработчиков, который работает на Windows, macOS и Linux. Инструмент поддерживает множество языков программирования от JavaScript до Python и предлагает широкий функционал для написания, отладки и тестирования кода.

С помощью VS Code можно настраивать среду разработки под индивидуальные задачи, используя расширения и встроенные инструменты.



🌐 Читать статью

Made in HTML/CSS
👍4🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Спецификация CSS Scroll Snap позволяет привязывать положение прокрутки к определённым элементам или местоположению после того, как пользователь прокрутил страницу или элемент.

Это полезно для создания каруселей или галерей, где нужно, чтобы элементы останавливались в заданных позициях при прокрутке.


Made in HTML/CSS
🔥8
LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS.

Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.

LESS добавляет много нужных динамических свойств в CSS. Он вводит переменные, операции, function-like элементы и примеси. Возможность писать таблицы стилей модульно избавит вас от многих хлопот.


🌐 Читать статью

Made in HTML/CSS
👍3👨‍💻2
Media is too big
VIEW IN TELEGRAM
Свойство backdrop-filter в CSS позволяет применять графические эффекты, такие как размытие или изменение цвета, к области за элементом.

Это полезно для создания эффектов, таких как размытие фона за полупрозрачными элементами, что может улучшить визуальное восприятие и выделить контент на переднем плане.


Made in HTML/CSS
🔥7
Если разработчики будут произвольно использовать HTML и CSS, это приведёт к путанице и непредсказуемости в отображении сайтов. Поэтому существует Всемирный консорциум W3C, который разрабатывает и утверждает стандарты веб-вёрстки.

Таким образом, валидная вёрстка — это код, выполненный в соответствии со спецификациями W3C.


🌐 Читать статью

Made in HTML/CSS
👍5🔥2
Свойство aspect-ratio в CSS позволяет задать соотношение сторон элемента, управляя его шириной и высотой.

Это упрощает создание элементов с фиксированными пропорциями, таких как изображения или видео, без необходимости использовать дополнительные контейнеры или скрипты.


Made in HTML/CSS
🔥9
& — мощное дополнение к CSS, позволяющее создавать селекторы без повторений и способствующее улучшению организованности и понимания кода.


Статья объясняет, как использовать селектор & в CSS для создания более гибких и организованных стилей. Он помогает упростить написание кода, особенно при работе с вложенными стилями и псевдоклассами. Это делает CSS более читаемым и удобным в поддержке.


🌐 Читать статью

Made in HTML/CSS
👍8
This media is not supported in your browser
VIEW IN TELEGRAM
Свойство resize в CSS определяет, может ли пользователь изменять размер элемента, такого как текстовое поле, и если да, то в каком направлении.

Оно может принимать значения none, both, horizontal или vertical, позволяя управлять поведением изменения размера элемента.


Made in HTML/CSS
👍10
WebGradients представляет собой бесплатную коллекцию из 180 линейных градиентов, которые можно использовать в качестве фонов для любых элементов вашего веб-сайта. Эти градиенты легко интегрировать благодаря кроссбраузерному CSS3-коду, который можно быстро скопировать и использовать. Также доступны PNG-версии каждого градиента, что позволяет примменять их даже без написания кода.

Made in HTML/CSS
👍11
This media is not supported in your browser
VIEW IN TELEGRAM
Свойство scroll-behavior в CSS определяет, как происходит прокрутка внутри элемента или всего документа. Оно может принимать значения auto, smooth.

Значение smooth позволяет включить плавную прокрутку, делая переходы более мягкими и приятными для пользователя.


Made in HTML/CSS
🔥6
BGJar — это бесплатный генератор SVG-фонов для ваших веб-сайтов, блогов и приложений. Он предлагает широкий выбор настраиваемых фоновых изображений, которые можно легко интегрировать в ваш проект. Эти SVG-фоны адаптивны и поддерживают масштабируемость, что делает их идеальными для использования на различных устройствах и экранах.

Made in HTML/CSS
👍3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
В HTML используются элементы <input type="radio"> для создания радио-кнопок, которые позволяют выбрать один из нескольких вариантов. Каждый элемент <input> обернут в <label>, чтобы увеличить область клика.

В CSS применяются псевдоэлементы ::before и ::after для создания визуальных эффектов, таких как фон и анимация. Селекторы состояния, такие как :hover и :checked, изменяют стили при наведении и выборе. Анимации и переходы делают изменения плавными, а Flexbox помогает выровнять элементы. Свойство appearance: none убирает стандартный вид радио-кнопок, позволяя задать свой стиль.


Made in HTML/CSS
👍6🔥1👨‍💻1
GitLens — это мощное расширение для Visual Studio Code, которое значительно улучшает работу с Git, предоставляя дополнительные инструменты и функции для управления версиями кода.

С помощью GitLens вы можете:

Просматривать историю изменений: Легко отслеживать, кто и когда вносил изменения в код (особенно полезно в командной работе).
Сравнивать ветки и коммиты: Быстро видеть различия между ветками или коммитами.
Использовать улучшенные аннотации: Видеть, кто является автором каждой строки кода прямо в редакторе, что помогает в отладке и ревью кода.


Made in HTML/CSS
👍5🔥2
place-items — это удобное CSS-свойство, которое позволяет быстро центрировать или выравнивать элементы внутри контейнера по вертикали и горизонтали одновременно.

Оно объединяет два свойства: align-items (выравнивание по вертикали) и justify-items (выравнивание по горизонтали).

Made in HTML/CSS
🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
Auto Rename Tag - плагин для Visual Studio Code, предназначенный для автоматического переименования парных HTML/XML-тегов. Этот инструмент значительно упрощает работу с разметкой, особенно когда требуется изменить имя тега.

Когда вы изменяете открывающий тег, закрывающий тег автоматически обновляется, и наоборот.


Made in HTML/CSS
🔥7👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Проект представляет собой анимацию 3D-кубов, вращающихся с различными углами и скоростями. Кубы располагаются в сетке и имеют уникальные анимации, создающие динамичный визуальный эффект.

Made in HTML/CSS
🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Peek - плагин для Visual Studio Code (VS Code) предназначен для улучшения работы с CSS, предоставляя разработчикам возможность быстро находить и просматривать стили, применяемые к элементам HTML.

Made in HTML/CSS
👍6🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Загрузка с размытием в JavaScript — это технология, которая позволяет отображать размытое изображение с низким разрешением до загрузки его полной версии.

Made in HTML/CSS
👍6🔥2
Удивительный инструмент для тренировки навыков — BigDevSoon!

Это платформа задачами, которые помогут улучшить ваши умения. Здесь вы найдете задания на любой вкус: от базовой верстки до сложных проектов с JavaScript, анимациями и другими веб-технологиями.

Особенности платформы:

★ Классификация проектов по уровням сложности — junior, regular и senior.
★ Дизайны Figma для каждого проекта.
★ Игровая система для отслеживания прогресса.


🌐 Прочитать статью

Made in HTML/CSS
🔥4👍3
This media is not supported in your browser
VIEW IN TELEGRAM
3d ротация при наведении позволяет карточки обрести объёмный вид за счет 3d анимации.

Очень полезное свойство, если вы хотите оживить ваши картинки


Made in HTML/CSS
👍8
This media is not supported in your browser
VIEW IN TELEGRAM
Плагин HTML to CSS для Visual Studio Code упрощает процесс написания и управления CSS-стилями для HTML-элементов. Среди его основных возможностей выделяется автоматическая генерация CSS (Создает базовые стили для HTML-элементов, что удобно для начальной настройки или быстрого прототипирования) и извлечение классов и ID (Извлекает имена классов и ID из HTML и создает соответствующие CSS-селекторы)

Made in HTML/CSS
👍8