CSS полезности

[IgorA100]

Ускорение загрузки за счет preload

Код: Выделить всё<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />
<link rel="preload" href="/fonts/mywofffont.woff2" as="font" type="font/woff2" crossorigin>


https://stackoverflow.com/questions/133 ... face-fonts

Написать текст по вертикали:

Код: Выделить всё<span class="flapLabel" style="white-space: nowrap;transform: rotate(180deg);writing-mode: vertical-rl;">content in place</span>


[IgorA100]

Красивые CSS checkboxes для тега input
https://getcssscan.com/css-checkboxes-examples

Еще отличный вариант, без добавления дополнительных тегов:
https://css-tricks.com/custom-styling-f ... -features/

[IgorA100]

Обводка текста

Код: Выделить всё-1px -1px 0 #878787, 0 -1px 0 #878787, 1px -1px 0 #878787, 1px 0 0 #878787, 1px 1px 0 #878787, 0 1px 0 #878787, -1px 1px 0 #878787, -1px 0 0 #878787


https://stackoverflow.com/questions/266 ... e-with-css

[IgorA100]

Кастомный кроссбраузерный ползунок диапазона
В основном используется CSS, но и немного JS тоже присутствует.
https://doka.guide/recipes/input-range-style/

4.jpg (16.92 КБ) 911903 просмотра

И еще решение: https://stackoverflow.com/questions/657 ... me-browser

[IgorA100]

Анимация текста с использованием CSS:
https://proglib.io/p/tekst-kotoryy-vau- ... 2025-03-17

[IgorA100]

Варианты 3D текста:

Код: Выделить всё.text-3d {
/*color: #ffffff;*/
color: transparent;
text-shadow: 1px 1px 0 #cccccc,
2px 2px 0 #c9c9c9,
3px 3px 0 #bbb,
4px 4px 0 #b9b9b9,
5px 5px 0 #aaa,
6px 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1);
}

Код: Выделить всё.text-4d {
color: transparent;
text-shadow: -4px 4px hsla(0, 0%, 70%, .4),
             -3px 3px hsla(0, 0%, 60%, .2),
             -2px 2px hsla(0, 0%, 70%, .2),
             -1px 1px hsla(0, 0%, 70%, .2),
             0px 0px hsla(0, 0%, 50%, .5),
             1px -1px hsla(0, 0%, 30%, .6),
             2px -2px hsla(0, 0%, 30%, .7),
             3px -3px hsla(0, 0%, 32%, .8),
             4px -4px hsla(0, 0%, 30%, .9),
             5px -5px hsla(0, 0%, 30%, 1.0);
          }

Код: Выделить всё.text-41d {
color: transparent;
text-shadow: -4px 4px hsla(0, 0%, 70%, .4),
             -3px 3px hsla(0, 0%, 65%, .2),
             -2px 2px hsla(0, 0%, 60%, .2),
             -1px 1px hsla(0, 0%, 55%, .2),
             0px 0px hsla(0, 0%, 50%, .5),
             1px -1px hsla(0, 0%, 40%, .6),
             2px -2px hsla(0, 0%, 38%, .7),
             3px -3px hsla(0, 0%, 37%, .8),
             4px -4px hsla(0, 0%, 36%, .9),
             5px -5px hsla(0, 0%, 35%, 1.0);
          }

Код: Выделить всё.text-41d-mini {
color: transparent;
text-shadow: -2px 2px hsla(0, 0%, 60%, .2),
             -1px 1px hsla(0, 0%, 55%, .2),
             0px 0px hsla(0, 0%, 50%, .5),
             1px -1px hsla(0, 0%, 40%, .6),
             2px -2px hsla(0, 0%, 38%, .7);
          }

Код: Выделить всё.text-42d {
color: transparent;
text-shadow: -4px 4px hsla(0, 0%, 70%, .1),
             -3px 3px hsla(0, 0%, 65%, .2),
             -2px 2px hsla(0, 0%, 60%, .3),
             -1px 1px hsla(0, 0%, 55%, .4),
             0px 0px hsla(0, 0%, 50%, .5),
             1px -1px hsla(0, 0%, 40%, .6),
             2px -2px hsla(0, 0%, 38%, .7),
             3px -3px hsla(0, 0%, 37%, .8),
             4px -4px hsla(0, 0%, 36%, .9),
             5px -5px hsla(0, 0%, 35%, 1.0);
          }