Написано 2016.07.03
Оригинальная ссылка:22 Essential CSS Recipes
Всем привет, сегодня мы рассмотрим несколько очень полезных трюков CSS, давайте начнем!
режим смешивания
Не так давно браузеры Firefox и Safari начали поддерживать режимы наложения, подобные Photoshop, но в браузерах Chrome и Opera необходимо добавить префикс. Возьмите каштан:
// 你也可以尝试不同的样式
.blend {
background: #fff;
}
.blend img {
mix-blend-mode: darken;
}
Градиентная граница
Теперь вы даже можете использовать градиенты в границах.
Использовать градиентную границу очень просто, просто установитеz-indexПсевдоэлемент может быть:
.box {
margin: 80px 30px;
width: 200px;
height: 200px;
position: relative;
background: #fff;
float: left;
}
.box:before {
content: '';
z-index: -1;
position: absolute;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
background-image: linear-gradient(90deg, yellow, gold);
}
Конкретные примеры см.здесь, или см.здесьиспользуетbackground-clipиbackground-originАтрибуты. В ближайшем будущем, возможно, все браузеры будут поддерживатьborder-imageproperties, окончательный код будет выглядеть так:
.box {
border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%);
border-image-slice: 1; /* set internal offset */
}
переход по z-индексу
может ты не знаешьz-indexПереход также поддерживается! На каждом шаге перехода его значение не меняется, поэтому вы думаете, что он не поддерживает переходы, но это так.взять каштан
currentColor
Мы можем использовать этот метод для определения текущего цвета, чтобы не повторять его слишком часто. Этот метод очень полезен при использовании значков SVG, поскольку их цвет определяется родительским элементом. Обычно делаем так:
.button {
color: black;
}
.button:hover {
color: red;
}
.button:active {
color: green;
}
.button svg {
fill: black;
}
.button:hover svg {
fill: red;
}
.button:active svg {
fill: green;
}
но мы можем использоватьcurrentColorСделай это:
svg {
fill: currentColor;
}
.button {
color: black;
border: 1px solid currentColor;
}
.button:hover {
color: red;
}
.button:active {
color: green;
}
Прикрепите другие примеры с псевдоэлементами:
a {
color: #000;
}
a:hover {
color: #333;
}
a:active {
color: #666;
}
a:after,
a:hover:after,
a:active:after {
background: currentColor;
...
}
Object Fit
Вы помните установку фонового изображения для решения некоторых проблем?background-sizeКак насчет атрибутивных моментов? Теперь вы можете использоватьobject-fitАтрибуты, браузеры webkit поддерживают его, и Firefox будет поддерживать его в ближайшем будущем.
.image__contain {
object-fit: contain;
}
.image__fill {
object-fit: fill;
}
.image__cover {
object-fit: cover;
}
.image__scale-down {
object-fit: scale-down;
}
Стили для переключателей и флажков
Давайте стилизуем чекбоксы вместе без изображений:
<!-- html -->
<input type="checkbox" id="check" name="check" />
<label for="check">Checkbox</label>
<!-- css -->
input[type=checkbox] {display: none;}
input[type=checkbox] + label:before {
content: "";
border: 1px solid #000;
font-size: 11px;
line-height: 10px;
margin: 0 5px 0 0;
height: 10px;
width: 10px;
text-align: center;
vertical-align: middle;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
}
Как видите, мы скрываем исходный флажок и вместо него используем псевдоэлементы и псевдоклассы.:checked(IE9+), чтобы выразить это. Когда он выбран, настройкаcontentВ нем будут отображаться символы в кодировке Unicode.
Стоит отметить, что кодировка Unicode записывается по-разному в CSS и HTML. В CSS это шестнадцатеричное число, начинающееся с обратной косой черты, а в HTML — десятичное число, например
✓. Давайте добавим анимацию к нашему флажку:
<!-- checkbox -->
input[type=checkbox] + label:before {
content: "\2713";
color: transparent;
transition: color ease .3s;
}
input[type=checkbox]:checked + label:before {
color: #000;
}
<!-- radio -->
input[type=radio] + label:before {
content: "\26AB";
border: 1px solid #000;
border-radius: 50%;
font-size: 0;
transition: font-size ease .3s;
}
input[type=radio]:checked + label:before {
font-size: 10px;
}
здесьвсе кодировки Unicode и могут бытьздесьопыт.
Счетчики в CSS
Хорошо известно, что в CSS можно использовать счетчики:
<!-- html -->
<ol class="list">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<!-- css -->
.list {
counter-reset: i; //reset conunter
}
.list > li {
counter-increment: i; //counter ID
}
.list li:after {
content: "[" counter(i) "]"; //print the result
}
Мы определяем идентификатор вcounter-resetкак начальное значение (по умолчанию 0). Вы можете установить другое значение вcounter-incrementкак увеличивающееся значение для каждого шага.
Расширенные счетчики CSS
Вы можете подсчитать, сколько флажков отмечено пользователем:
<!-- html -->
<div class="languages">
<input id="c" type="checkbox"><label for="c">C</label>
<input id="C++" type="checkbox"><label for="C++">C++</label>
<input id="C#" type="checkbox"><label for="C#">C#</label>
<input id="Java" type="checkbox"><label for="Java">Java</label>
<input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>
<input id="PHP" type="checkbox"><label for="PHP">PHP</label>
<input id="Python" type="checkbox"><label for="Python">Python</label>
<input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>
</div>
<p class="total">
Total selected:
</p>
<!-- css -->
.languages {
counter-reset: characters;
}
input:checked {
counter-increment: characters;
}
.total:after {
content: counter(characters);
}
Также можно сделать простой калькулятор:
<!-- html -->
<div class="numbers">
<input id="one" type="checkbox"><label for="one">1</label>
<input id="two" type="checkbox"><label for="two">2</label>
<input id="three" type="checkbox"><label for="three">3</label>
<input id="four" type="checkbox"><label for="four">4</label>
<input id="five" type="checkbox"><label for="five">5</label>
<input id="one-hundred" type="checkbox"><label for="one-hundred">100</label>
</div>
<p class="sum">
Sum
</p>
<!-- css -->
.numbers {
counter-reset: sum;
}
#one:checked { counter-increment: sum 1; }
#two:checked { counter-increment: sum 2; }
#three:checked { counter-increment: sum 3; }
#four:checked { counter-increment: sum 4; }
#five:checked { counter-increment: sum 5; }
#one-hundred:checked { counter-increment: sum 100; }
.sum::after {
content: '= ' counter(sum);
}
Это также работает, см.DEMOистатья.
Иконки меню без изображений
Вы помните, как часто вам приходилось нуждаться в иконке «гамбургер»?
Вот как минимум 3 способа добиться этого: 1. Тени
.shadow-icon {
position: relative;
}
.shadow-icon:after {
content: "";
position: absolute;
left: 0;
top: -50px;
height: 100%;
width: 100%;
box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000;
}
2. Градиент
.gradient-icon {
background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);
}
3. УТФ-8
Вы можете напрямую использовать стандартный символ: ☰ (Unicode: U+2630, HTML: ☰). Вы также можете гибко установить его цвет или размер, как и другие элементы. Смотретьпример.
Вы также можете использовать SVG, значки шрифтов или установить через псевдоэлементыborderРамка.
@Supports
Это новый называетсяsupportsCSS-выражение. Как следует из названия, он может определять, поддерживаются ли определенные настройки браузерами, не все браузеры поддерживают его, но вы все равно можете использовать его в качестве основного средства обнаружения:
@supports (display: flex) {
div { display: flex; }
}
/*You can check prefixes*/
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
float: none;
}
}
visibility: visible
По вашей оценке, установите один наvisibility: visibleЭлемент помещается в наборvisibility: hiddenЧто происходит внутри элемента?
.hidden {
visibility: hidden;
}
.hidden .visible {
visibility: visible;
}
Вы можете подумать, что ни один элемент не отображается, но на самом деле весь родительский элемент скрыт, а дочерний элемент — нет. посмотри пожалуйстаDEMO.
position: sticky
Мы нашли новую функцию, вы можете создать новуюstickyэлемент атрибута. его производительность иfixedТо же самое, но не блокирует никаких элементов. тебе лучше посмотретьпримерТолько браузеры Mozilla и Safari поддерживают это свойство, но вы также можете использовать его следующим образом:
.sticky {
position: static;
position: sticky;
top: 0px;
}
Мы получим один в поддерживаемых браузерахstickyattribute, и в браузерах, которые его не поддерживают, это будет обычный элемент. Это полезно, когда вам нужно создать мобильную страницу с незаменимыми подвижными элементами.
новая единица измерения
Не так давно были введены некоторые новые единицы измерения для описания размера различных элементов, а именно:
- vw (ширина области просмотра) — 1% от ширины окна браузера.
- vh (высота области просмотра) — то же, что и выше, но используется для описания высоты.
- vmin и vmax устанавливают максимальное и минимальное значения между vh и vw.
Интересно, что почти все современные браузеры хорошо их поддерживают, так что вы можете смело ими пользоваться. Зачем нужны эти новые юниты? Поскольку они упрощают определение различных размеров, вы не указываете никаких процентов или чего-либо еще для родительского элемента, см. пример:
.some-text {
font-size: 100vh;
line-height: 100vh;
}
Или вы можете установить красивое всплывающее окно посередине экрана:
.blackSquare {
background: black;
position: fixed;
height: 50vh;
width: 50vw;
left: 25vw;
top: 25vh;
}
Это выглядит довольно круто, взгляните на codepenпримербар~ Но у этих новых устройств все еще есть некоторые недостатки:
- IE9 должен использовать vm вместо vmin.
- iOS7 может иметь ошибки при использовании vh.
- vmax еще не полностью поддерживается.
украшение текста
Мы можем изменить эффект при выделении текста с помощью нескольких строк кода:
*::selection {
color: #fff;
background: #000;
}
*::-moz-selection {
/*Only Firefox still needs a prefix*/
color: #fff;
background: #000;
}
Вы можете определить не только цвет текста при его выделении, но и цвет тени или фона.
Прокрутка элементов на сенсорном экране
Если вам нужно установить прокрутку для некоторых элементов на сенсорном экране, вам нужно не толькоoverflow: scroll / auto,по-прежнему необходимо-webkit-overflow-scrolling: touch;На самом деле мобильные браузеры иногда работают некорректно.overflow: scroll / auto, он может прокручивать всю страницу, а не ту ее часть, которую вы хотите.-webkit-overflow-scrollingЭта проблема решена, вы можете испытать ее в своем реальном проекте.
Используйте аппаратное ускорение
Иногда анимация может привести к зависанию компьютера пользователя. Чтобы избежать этой проблемы, на некоторых элементах можно использовать аппаратное ускорение:
.block {
transform: translateZ(0);
}
Вы не заметите разницы, но браузер выполнит аппаратное 3D-ускорение для этого элемента, вwill-changeЭтот метод полезен до тех пор, пока это специальное свойство не поддерживается полностью.
Unicode Classes
Вы можете называть классы символами Unicode:
.❤ {
...
}
.☢ {
...
}
.☭ {
...
}
.★ {
...
}
.☯ {
...
}
Но это шутка, никогда не используйте его в больших проектах, так как не все компьютеры поддерживают символы Unicode.
вертикальная процентная маржа
На самом деле вертикальное выравнивание рассчитывается на основе ширины родительского элемента, а не высоты. Определите два элемента:
<!-- html -->
<div class="parent">
<div class="child"></div>
</div>
<!-- css -->
.parent {
height: 400px;
width: 200px;
}
.child {
height: 50%;
padding-top: 25%;
padding-bottom: 25%;
width: 100%;
}
Теоретически высота дочернего элемента будет равна половине высоты родительского элемента, но вот что мы получаем на самом деле:
Помните, что процент дочернего элемента зависит от ширины родительского элемента.
Поля кнопок в Firefox
Firefox использует собственный способ расчета полей кнопок. Звучит немного странно, но он автоматически добавляет некоторые поля:
Эта проблема может быть устранена путем:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: none;
padding:0;
}
Color + Border = Border-Color
Мало кто знает, что определение цвета текста элемента означает, что также определен цвет границы этого элемента:
input[type="text"] {
color: red;
border: 1px solid;
}
Пасхальные яйца древних браузеров
Если вам все еще нужно адаптироваться к IE7 или аналогичным старым браузерам, вы можете использовать символ смайлика при определении хака, например:
body {
:) background: pink;
}
Разве это не весело?
Если вы считаете, что мой перевод хорош, ставьте лайк и подписывайтесьмоя колонка, я буду продолжать выпускать более захватывающий контент. Если вы найдете какие-либо ошибки или упущения, пожалуйста, поправьте меня, увидимся в следующий раз!