Здесь в куче опишу некоторые интересные моменты в 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 варианта:
- content-box — всё остаётся по-прежнему, к примеру, блок с width:100px и margin-right:50px будет иметь ширину 150px
- 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>
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);
}
}
Спектральный фон
Наложим три градиента, чтобы создать фон с почти полным спектром цветов, которые можно отобразить на мониторе. Вот стили:
Вот статья про градиенты: 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;
