css
- html и заодно w3c schools
- https://www.w3.org/TR/?filter-tr-name=&status%5B%5D=standard&tags%5B%5D=css - поиск стандартов по 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.
- https://habr.com/ru/company/ruvds/blog/719892/ - игрухи для освоения css, сама не играла, но ссыль прикопала.
- https://habr.com/ru/post/726224/ - чота там про новенькое
- https://habr.com/ru/articles/768304/ - Наклонные края с постоянным углом
- https://habr.com/ru/companies/ruvds/articles/746478/ - занятные неочевидности. https://habr.com/ru/companies/ruvds/articles/745668/ и тут еще шизанутости. https://habr.com/ru/companies/ruvds/articles/749734/
- https://habr.com/ru/companies/ruvds/articles/779814/ опять всякого, как можно.
- https://habr.com/ru/articles/780840/ - занятное про текстуру из шума.
- https://github.com/gongzhitaao/orgcss — типа, чтоб оргмодное покрасивше выглядело.
- норм варианты для стихов –
white-space: pre-line|pre-wrap|break-spaces
Первый съедает двойные и более пробелы, второй нет. Оба переносят строки и по переносам строки, и когда нужно, чтоб текст оставался видимым. Третий не очень поняла, чем отличается от второго. https://www.w3.org/TR/css-text-3/#propdef-white-space
w3css
По мне на сейчас простой способ писать css не совсем с нуля. Ну, и basecss – совсем аскетичный способ для того же.
<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- всякие делилки экрана, которые потом превращаются в одну колонку на узком экране.
Единицы измерения
Ниже частичное и по ходу, не точно по доке.
Абсолютные:
- px — пиксели, 1 px = 1/96 in;
- pt — пункты, 1 pt = 1/72 in;
- mm — миллиметры;
- in — дюймы;
- cm — сантиметры;
- Q — четверть миллиметра 1 Q = ¼ mm
- pc — пики, 1 pc = 12 pt.
(кажется, из этих использовала только px и pt)
Относительные:
- % — размер в % относительно ширины родительского блока;
- lh — высота строки элемента;
- ch — ширина символа 0;
- ex — x-высота шрифта, измеряется в высоте символа x в нижнем регистре,
- vh — % высоты окна браузера;
- vw — % ширины окна браузера;
- vmax — большее значение высоты vh или ширины окна браузера vw;
- vmin — меньшее значение высоты vh или ширины окна браузера vw;
- em — размер шрифта относительно размера шрифта родительского элемента;
- rem — размер шрифта относительно размера шрифта корневого элемента ("root em" — "корневой em".).
(из этих - применяла % и em. А возможностей-то, возможностей…)
Обрезать текст, поставить многоточие
Тырено из https://t.me/katerina_profrontend
Многострочный, тут обрезали на третьей строке.
p { display: -webkit-box; max-width: 450px; -webkit-line-clamp: 3; overflow: hidden; -webkit-box-orient: vertical; }
Вебкитовости настораживают, конечно.
- -webkit-line-clamp - количество строк;
- overflow: hidden; - скрывает текст за пределами;
- display: -webkit-box и -webkit-box-orient: vertical; - устаревшие свойства, но без них многоточие работать не будет.
Однострочный:
.text { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
- white-space: nowrap; - предотвращает перенос строк внутри элемента;
- overflow: hidden; - управляет отображением содержимого, которое выходит за границы элемента
- text-overflow: ellipsis; - определяет, как отображается переполненный текст, который не помещается в пределах элемента
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 - про горизонтальное и вертикальное выравнивание, в том числе отдельно про картинки.
Тож центрировать что попало :)
display: flex; justify-content: center; align-items: center; width: max-width;
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; }