css
- https://www.w3schools.com/css/default.asp - css-туториал
- https://www.w3schools.com/css/css3_backgrounds.asp - несколько бэкграундов одного элемента и ещё немного занятностей
- https://www.w3schools.com/css/css_navbar_horizontal.asp - навигационная панелька - https://www.w3schools.com/cssref/css_units.asp - единицы измерения css
- https://www.w3schools.com/cssref/css_entities.asp спецсимволы
- http://www.w3schools-fa.ir/css/css3_gradients.html - css-градиенты
- https://www.w3schools.com/css/css3_gradients.asp - Градиенты на бэкграунде.
- https://www.w3schools.com/cssref/pr_pos_vertical-align.asp - vertical-align: baseline|length/%|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
- https://www.w3schools.com/css/css3_flexbox.asp - новый для меня материал про флексбоксы и их выравнивание
- https://www.w3schools.com/css/css_rwd_mediaqueries.asp - оттеле про респонсив дезигн
- sass
- http://sass-lang.com/documentation/file.SASS_REFERENCE.html
- Sass: Syntactically Awesome Style Sheets http://sass-lang.com/
- Sass: Документация на русском языке http://sass-scss.ru/
- Интересно, почему про less не сохраняла?
- https://habr.com/ru/company/skillfactory/blog/710196/ - круговой слайдер, css + sass.
w3css
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
- https://www.w3schools.com/w3css/w3css_references.asp - референс к w3-css-ке.
- https://www.w3schools.com/w3css/w3css_buttons.asp - кнопочге в w3.css
- https://www.w3schools.com/w3css/w3css_templates.asp - css-темплейты.
- http://www.w3schools-fa.ir/w3css/w3css_sidebar.html - сайдбар
- https://www.w3schools.com/w3css/w3css_sidebar.asp - сайдбар по кнопочке и пробовалка к нему.
- https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_overall -
- https://www.quanzhanketang.com/w3css/w3css_responsive.html- всякие делилки экрана, которые потом превращаются в одну колонку на узком экране.
css, чёрный фон с прозрачностью 0.5
Пример позволяет ставить прозрачность, не задевая текст
background-color:rgba(0,0,0, 0.5);
font-display:swap, если надо грузить шрифты
How to avoid showing invisible text
The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers:
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}
The font-display API specifies how a font is displayed. swap tells the browser that text using the font should be displayed immediately using a system font. Once the custom font is ready, it replaces the system font. (See the Avoid invisible text during loading post for more information.)
https://web.dev/codelab-avoid-invisible-text - развитие темы.
подгонка контента под размер окна
main { min-height: calc(100vh - 2em); }
https://baradusov.ru/posts/2018/math-and-frontend - css-трюки в некотором количестве.
css-диагональка
background-image: linear-gradient(to top right, transparent 45%, #fff, transparent 54%)
css - выравнивание
To horizontally center a block element (like <div>), use margin: auto;
https://www.w3schools.com/css/css_align.asp - про горизонтальное и вертикальное выравнивание, в том числе отдельно про картинки.
The clearfix Hack
Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the "clearfix hack" to fix this (see example below).
Then we can add the clearfix hack to the containing element to fix this problem:
.clearfix::after {
content: "";
clear: both;
display: table;
}