visibility в CSS и зачем оно используется?visibility — это CSS-свойство, которое управляет видимостью элемента, но при этом не удаляет его из документа. Оно позволяет скрывать элементы без изменения их занимаемого пространства.<div class="box">Этот блок всегда виден</div>
<div class="box hidden">А этот скрыт, но занимает место</div>
<style>
.box {
width: 200px;
height: 50px;
border: 1px solid black;
text-align: center;
line-height: 50px;
}
.hidden {
visibility: hidden; /* Элемент становится невидимым, но остаётся на месте */
}
</style>
•
visibility: hidden; скрывает элемент, но он по-прежнему занимает место в разметке.•
display: none; убирает элемент полностью (в отличие от visibility).Это свойство помогает управлять интерфейсом без изменения структуры страницы.
CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤3🔥2
pointer-events в CSS и зачем оно используется?pointer-events — это CSS-свойство, которое управляет тем, может ли элемент реагировать на клики, наведение и другие события мыши. Оно позволяет делать элементы "прозрачными" для взаимодействия пользователя.<button class="disabled-btn">Нажми меня</button>
<style>
.disabled-btn {
background-color: gray;
color: white;
pointer-events: none; /* Элемент игнорирует клики */
cursor: not-allowed;
}
</style>
•
pointer-events: none; делает кнопку некликабельной, но оставляет её видимой.• Это удобно для отключения кнопок, слоёв с анимацией или создания "сквозных" элементов.
• Значение
pointer-events: auto; возвращает стандартное поведение.Свойство
pointer-events полезно для дизайна UI, управления интерактивностью и создания анимаций.CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤2🔥2
HTML and CSS
Год: 2023
Автор: Kumar T
Язык: Английский
#en #HTML #CSS
CodeBase | Frontend | #book
Год: 2023
Автор: Kumar T
Язык: Английский
Веб―разработчики - это ваше универсальное руководство по HTML и CSS! Научитесь использовать HTML для форматирования текста и структурирования веб-страниц. Разберитесь со структурой HTML-документа, прежде чем создавать формы, ссылаться на гиперссылки, встраивать активный контент и многое другое. Затем оформляйте свои страницы с помощью CSS: создавайте согласованные дизайны с помощью селекторов, модели box, каскадного алгоритма и наследования. Дополните свой опыт разработки на стороне клиента знакомством с JavaScript. С подробными примерами кода вы освоите HTML и CSS в кратчайшие сроки!
Ваше полное руководство по HTML5 и CSS3
#en #HTML #CSS
CodeBase | Frontend | #book
👍4✍2👏2
🔗 ссылка
CodeBase | Frontend | #CSS #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
user-select в CSS и зачем оно используется?user-select — это CSS-свойство, которое управляет возможностью выделения текста пользователем. Оно полезно для защиты контента от копирования или улучшения UX в интерфейсах.<p class="no-select">Этот текст нельзя выделить.</p>
<style>
.no-select {
user-select: none; /* Запрещает выделение текста */
}
</style>
•
user-select: none; запрещает выделение текста пользователем.•
user-select: all; позволяет выделять весь текст при клике.•
user-select: text; (по умолчанию) разрешает выделение.Свойство
user-select удобно для защиты контента, предотвращения случайного выделения и улучшения взаимодействия с пользователем.CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7✍5👏2
Дронов_В_А_HTML_и_CSS_25_уроков_для_начинающих_2020.pdf
7.2 MB
HTML и CSS. 25 уроков для начинающих
Год: 2020
Автор: Дронов В. А.
Язык: Русский
#RU #CSS #HTML
CodeBase | Frontend | #book
Год: 2020
Автор: Дронов В. А.
Язык: Русский
В книге 25 иллюстрированных уроков, 100 практических упражнений на тему разработки простых веб-сайтов и более 50 заданий для самостоятельной работы. Дано введение в веб-разработку, раскрыты основы HTML, CSS и работы в WWW. Объяснено, как с помощью HTML структурировать и форматировать текст, работать с графикой и мультимедиа, таблицами, гиперссылками, веб-формами, фреймами и метаданными. Рассказано, как средствами CSS оформлять веб-страницы, использовать блоки, списки и таблицы, изображения и гиперссылки, элементы управления, фон и колонки, располагать, выводить и скрывать элементы, делать макеты веб-страниц, выполнять преобразования, анимацию, медиазапросы и др.
Электронное приложение-архив на сайте издательства содержит коды всех примеров и пяти учебных веб-сайтов.
#RU #CSS #HTML
CodeBase | Frontend | #book
👍4🔥4👏2
aspect-ratio в CSS и зачем оно используется?
aspect-ratio — это CSS-свойство, которое позволяет задавать соотношение сторон элемента (ширина к высоте). Оно особенно полезно для адаптивной верстки, когда нужно сохранить форму элемента независимо от содержимого или экрана.<div class="box"></div>
<style>
.box {
width: 100%;
aspect-ratio: 16 / 9; /* Соотношение 16:9 */
background-color: lightblue;
}
</style>
•
aspect-ratio: 16 / 9; заставляет элемент сохранять форму прямоугольника с шириной в 16 единиц и высотой в 9.• Это особенно удобно для видео, изображений, контейнеров с неизвестной высотой.
• Работает без необходимости использовать
padding-hack или JavaScript.Свойство
aspect-ratio делает вёрстку проще и адаптивнее без дополнительных обёрток и расчётов.CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥4✍1
object-position в CSS и зачем оно используется?
object-positionobject-fit для обрезки.<img src="image.jpg" class="preview" alt="Пример изображения">
<style>
.preview {
width: 300px;
height: 200px;
object-fit: cover;
object-position: top right; /* Смещаем фокус к верхнему правому углу */
}
</style>
•
object-fit: cover; обрезает изображение, чтобы оно заполнило контейнер.•
object-position: top right; указывает, какую часть изображения показывать в приоритете.• Можно использовать значения вроде
center, bottom, 20% 80% и др.Свойство
object-position позволяет точно управлять отображением медиа внутри контейнера и удобно при создании адаптивных и эстетичных интерфейсов.CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
CodeBase | Frontend | #курс #html #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
white-space в CSS и зачем оно используется?
white-space<div class="text">
Этот текст
сохраняет пробелы
и переносы.
</div>
<style>
.text {
white-space: pre; /* Сохраняем пробелы и переносы */
border: 1px solid black;
}
</style>
•
white-space: normal; — пробелы схлопываются, текст переносится автоматически (значение по умолчанию).•
white-space: nowrap; — текст не переносится.•
white-space: pre; — сохраняются все пробелы и переносы, как в коде.Это свойство полезно для оформления кода, вывода логов и управления форматированием текста.
CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤3👏1
text-overflow в CSS и зачем оно используется?text-overflow управляет тем, как обрезается текст, выходящий за пределы блока. Оно работает вместе с overflow: hidden и white-space: nowrap, чтобы отображать, например, троеточие.<div class="truncate">Очень длинный текст, который не помещается</div>
<style>
.truncate {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #ccc;
}
</style>
...), не выходя за рамки блока. Это удобно для заголовков, превью и адаптивных карточек в UI.CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Неизвестно полезный CSS
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Здесь собраны фишки CSS, которые пригодятся каждому. Что-то, возможно, вы уже знаете, но наверняка тут найдётся для вас что-то новенькое.
В этой подборке про вертикальный текст, clip-path, контрастность текста и не только.
Кстати, это уже 6 подборка советов, остальные вы найдёте в конце статьи.
CodeBase | Frontend | #CSS
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Здесь собраны фишки CSS, которые пригодятся каждому. Что-то, возможно, вы уже знаете, но наверняка тут найдётся для вас что-то новенькое.
В этой подборке про вертикальный текст, clip-path, контрастность текста и не только.
Кстати, это уже 6 подборка советов, остальные вы найдёте в конце статьи.
CodeBase | Frontend | #CSS
👍6❤2🔥2
Как создать сайт. Комикс-путеводитель по HTML, CSS и WordPress
Год: 2019
Автор: Станислав Ломакин
Язык: Русский
#RU #HTML #CSS
CodeBase | Frontend | #book
Год: 2019
Автор: Станислав Ломакин
Язык: Русский
Пытаясь сделать сайт для своего портфолио, художница Ким попадает на удивительную планету. Чтобы вернуться домой, ей придется выучить азы HTML, победить злобного дракона 404, подружиться с веб-гуру и доброй колдуньей CSS и выяснить, что таится за стенами WordPress-сити.
В формате увлекательного комикса книга познакомит детей с языками HTML и CSS, а также с конструктором сайтов WordPress.
#RU #HTML #CSS
CodeBase | Frontend | #book
👍4✍2🔥1
Свойство
flex-grow определяет, как свободное пространство внутри контейнера делится между дочерними элементами. Оно задаёт коэффициент роста: чем больше значение, тем больше элемент занимает места.
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
<style>
.container {
display: flex;
width: 300px;
border: 1px solid #ccc;
}
.item {
padding: 10px;
color: white;
}
.item1 { flex-grow: 1; background: #007bff; }
.item2 { flex-grow: 2; background: #28a745; }
.item3 { flex-grow: 1; background: #dc3545; }
</style>
CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤3✍1
position: sticky в CSS и зачем оно используется?position: sticky фиксирует элемент внутри его родителя, когда он достигает определённого положения при прокрутке.Это удобно для заголовков, меню и панелей, которые должны оставаться на виду при скролле.
<div class="section">
<h2 class="sticky-title">Заголовок</h2>
<p>Контент...</p>
</div>
<style>
.section {
height: 1500px;
padding: 20px;
}
.sticky-title {
position: sticky;
top: 0;
background: white;
padding: 10px;
border-bottom: 1px solid #ccc;
}
</style>
.section.CodeBase | Frontend | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2❤1🥰1
Веб_дизайн_для_начинающих_HTML,_CSS,_jаvascript_и_веб_графика.pdf
15 MB
Веб-дизайн для начинающих. HTML, CSS, JavaScript и веб-графика
Год: 2021
Автор: Дженнифер Нидерст Роббинс
Язык: Русский
#Web #Design #HTML #CSS #JavaScript
CodeBase | Frontend | #book
Год: 2021
Автор: Дженнифер Нидерст Роббинс
Язык: Русский
Книга поможет освоить веб-дизайн, не имея опыта. На практических примерах показано, как создать простой сайт и постепенно его совершенствовать. Рассказано о создании веб-страниц, содержащих текст, ссылки, изображения, таблицы и формы. Описано применение CSS для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации. Даны основы языка JavaScript и подчеркнута его важность в веб-дизайне. Описано создание, оптимизация и сокращение времени загрузки веб-изображений.
#Web #Design #HTML #CSS #JavaScript
CodeBase | Frontend | #book
🔥3
Сайтом можно пользоваться не только с использованием мышки, но и при помощи клавиатуры. При переключении клавишей Tab элементу добавляется псевдокласс
:focus, и мы можем задать для него красивые стили.a:focus {
outline: 2px solid hotpink;
}CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4