CodeBase | Frontend
2.14K subscribers
380 photos
149 videos
5 files
566 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
⚙️ Что такое свойство 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
👍83🔥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
👍72🔥2
HTML and CSS

Год: 2023
Автор: Kumar T
Язык: Английский


Веб―разработчики - это ваше универсальное руководство по HTML и CSS! Научитесь использовать HTML для форматирования текста и структурирования веб-страниц. Разберитесь со структурой HTML-документа, прежде чем создавать формы, ссылаться на гиперссылки, встраивать активный контент и многое другое. Затем оформляйте свои страницы с помощью CSS: создавайте согласованные дизайны с помощью селекторов, модели box, каскадного алгоритма и наследования. Дополните свой опыт разработки на стороне клиента знакомством с JavaScript. С подробными примерами кода вы освоите HTML и CSS в кратчайшие сроки!
Ваше полное руководство по HTML5 и CSS3



#en #HTML #CSS

CodeBase | Frontend | #book
👍42👏2
🖥 Курс: "Верстка простого сайта для самых маленьких, html/css подробное объяснение"!

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

🕞 Продолжительность: 4:00:18

🔗 ссылка

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
👍75👏2
Дронов_В_А_HTML_и_CSS_25_уроков_для_начинающих_2020.pdf
7.2 MB
HTML и CSS. 25 уроков для начинающих

Год: 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🔥41
⚙️ Что такое свойство object-position в CSS и зачем оно используется?

object-position
— это CSS-свойство, которое управляет положением содержимого внутри элемента, например, изображения или видео, особенно когда используется object-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
🖥 Курс: "Верстка простого сайта для самых маленьких, html/css подробное объяснение"!

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

🕞 Продолжительность: 4:00:18

🔗 Ссылка

CodeBase | Frontend | #курс #html #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
⚙️ Что такое свойство white-space в CSS и зачем оно используется?

white-space
— это CSS-свойство, которое управляет отображением пробелов и переносом строк внутри элемента. Оно определяет, как браузер будет обрабатывать пробелы, табуляции и переводы строк.

➡️ Пример:

<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
👍93👏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