Цифровой садик - приветственная

Цифровой садик - приветственная | Полный список всего, что тут есть | RSS | Подписаться через follow.it

20.08.2024

css

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">

Единицы измерения

Ниже частичное и по ходу, не точно по доке.

Абсолютные:

  • 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;
}

Если у вас есть мысли, комментарии, предложения или отклики по поводу этой страницы или этого цифрового сада в целом, напишите мне сообщение на agnessa@agnessa.pp.ru. Мне ооочень интересно!

Задонатить.


An IndieWeb Webring 🕸💍