Неизвестно полезный 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