• info@komp.center
  • Прием онлайн заказов ежедневно с 9:00 до 21:00

Полезные фишки CSS. Пояснения некоторых стилей

Полезные фишки CSS. Пояснения некоторых стилей

Здесь в куче опишу некоторые интересные моменты в CSS, которые ускорят написание стилей и помогут вам сделать ваш сайт лучше. Статья будет всегда обновляться.

Serif и sans-serif в шрифтах

font-family: «Times New Roman», Times, serif; — это значит, что будет искаться шрифт Times New Roman, если его нет, то любой из шрифтов Times.

serif — если не будет Times New Roman, то будет искаться какой-нибудь с засечками на концах штрихов символов, а если sans-serif — то шрифты не имеющие засечек.

Margin: 0 auto — выравнивание блока по центру

Если у блока есть ширина, то с помощью этого стиля он будет горизонтально центрироваться. Этот прием не работает, если элемент не блочный или у него не указана ширина. Стиль понимается во всех браузерах, включая IE 8-10, но не работает на Windows Phone.

Работает только для горизонтальных отступов, также для изображений. Не будет работать для абсолютно и фиксировано позиционированных элементов.

Очищающий clearfix

Если в контейнере несколько блоков, к примеру 1, 2, 3, сверху вниз располагающимися, то 3-й блок может уйти вверх перед 2, как будто бы не правильно определяется высота, с float блоки накладываются друг на друга, начинают «плавать». Родительский блок, содержащий элементы с float теряет высоту.

Чтобы избежать такую проблему создаётся еще один блок, следующий за этими 3-мя со стилем clear:both, все последующие элементы за «плавающими» останутся на своих местах. По сути, добавляется ещё один блок, отменяющий действие float. Обычно добавляют не блок, а у родительского добавляют стиль

.родительский_блок:after {
content
: » «;
clear
: both;
display
: table;
}

Математика с помощью calc

Это функция, которая считает длину, ширину, отступы, размер шрифта, заливку и т.д. Очень удобно то, что позволяет считать фиксированные размеры с процентами, а также размеры шрифтов em и пиксели.

Пример, свойства width: calc(50% — 20px) — то есть ширина на 20 пикселей из 50% доступной области. Между словом calc и круглой скобкой не должно быть пробелов. Операторы, такие как + или -, отделяются пробелами с двух сторон.

Очень много фишек описано в https://webformyself.com/nachinaem-rabotat-s-css-calc/.

Размер блока. Свойство box-sizing

Оно сообщает браузеру, каким образом производить расчет ширины и высоты элемента. Т.к. у блока может быть кроме ширины еще и отступы, то размеры его будут отличаться от заданных (к ним будут прибавляться или отниматься отступы). Тут 2 варианта:

  1. content-box — всё остаётся по-прежнему, к примеру, блок с width:100px и margin-right:50px будет иметь ширину 150px
  2. border-box — ширина останется 100px у блока, а для контента останется 100-50=50px/

Оптимизация сайта под разные экраны через @media

В качестве устройств браузер смотрит на следующие типы: aural, braille, handheld, print, projection, screen, tty, tv. стили будут применяться только в случае, когда активизировался данный тип устройства.

Всё просто, копируем себе и вписываем нужный размер экрана:
@media screen and (max-width: 1100px) {
класс 1 или id {
стиль 1
}
…….
класс 10 или id {
стиль 1
}}

Эти стили будут работать для устройств с шириной экрана меньше 1100px. Screen and можно не писать.

Также в больший размер экрана @media screen and (mix-width: 1024px) {…} или несколько условий: @media (min-width: 500px) and (max-width: 1000px) {}. Исключаем диапазон @media (min-width: 1024px), (max-width: 1280px) {

Кроме оператора and, который связывает условия, доступны not (медиазапрос в противоположном случае), only (используется, чтобы скрыть стили от старых браузеров, поддерживающих синтаксис медиа-запросов CSS2).

Размер текста

При указании параметра в абсолютных единицах (px (пиксель), pt (пункт), pc (пика)), его величина не будет меняться относительно значения родительского элемента. Кроме этого можно использовать ключевые слова: xx-small, x-small, small, medium, large, x-large, xx-large. Так же можно указать размер шрифта словом в относительном выражении: larger, smaller.

Например: font-size: larger; При использовании такого CSS-свойства шрифт будет более крупным чем в родительском блоке. При использовании smaller – шрифт будет меньше чем родительском блоке.

При использовании относительных единиц, таких как: %, em, rem, размер шрифта будет рассчитываться относительно родительского элемента: увеличиваться или уменьшаться. Например: font-size: 2em, что значит, что размер будет в 2 раза больше родительского значения.

Также расчёт размера шрифта может осуществляться относительно ширины или высоты области просмотра. Для этого можно воспользоваться такими единицами измерения как:

  • 1vw – 1% от ширины области просмотра
  • 1vh – 1% от высоты области просмотра
  • 1vmin — 1% от меньшей стороны окна браузера
  • 1vmax — 1% от большей стороны окна браузера

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

Всё просто: text-shadow: 1px 1px 0 grey, -1px -1px 0 grey;

Иконка мыши внизу экрана для скролла вниз

Спасибо https://codepen.io/philth/pen/jPvLRm:

<div class=»cont»>

<div class=»mouse»>
<span></span>
</div>

</div>

.mouse {
border: 2px solid #ffffff;
border-radius: 13px;
bottom: 40px;
display: block;
height: 46px;
left: 50%;
margin: 0 auto 0 -26px;
position: absolute;
width: 26px;
}
.mouse span {
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
background: none repeat scroll 0 0 #ffffff;
border: 1px solid transparent;
border-radius: 4px;
display: block;
height: 4px;
margin: 6px auto;
width: 4px;
}
@keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}

Спектральный фон

Наложим три градиента, чтобы создать фон с почти полным спектром цветов, которые можно отобразить на мониторе. Вот стили:

background:
        linear-gradient(red, transparent),
        linear-gradient(to top left, lime, transparent),
        linear-gradient(to top right, blue, transparent);
    background-blend-mode: screen;

Вот статья про градиенты: https://webformyself.com/effekty-rezhimov-nalozheniya-fona-css/

Затемнение изображения/фона

  • Можно затемнить весь блок с помощью filter: brightness(50%);
  • Можно с помощью свойства .ваш_блок:before, на него наложить полупрозрачный background или .ваш_блок:after {background: rgba(35, 38, 40, 0.5); }
  • Если нам нужно затемнить background изображение, оставляя текст внутри изображения тем же цветом:
    background-color: rgba(0,0,0,.7);
    background-blend-mode: darken;
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии