🔗 ссылка
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