Начальные CSS для шаблона
Каждый шаблон имеет стандартные стили, но иногда приходится долго мучится чтобы найти нужный способ прописать стиль.
Очень большое пособие по CSS
Вот и решил собрать «все самые необходимые стили», head, для начала работ по верстке дизайна сайта.
Начальные скрипты меню через checkbox Кнопка вверх Тени для текста
Градиенты Ссылки Фон Списки data-name Трансформация Меню input Анимация Відео Шрифт Селекторы атрибутов Transition CSS селекторы CSS фильтры ТЕНЬ
Основные:
.fon-pod-kolonky::after {content: ''; background: #f9f7f7; width:400px; height: 9999px; position: absolute; top: 0; left:-400px; }
.menu:before{content:'\2939';white-space:pre;position:absolute;bottom:-18px;left:6px;color:#cea06f;font-size:33px;}
.btn:before{content:'Меню';}
.trukytnuk:before{content:'';display:block;width:1px;height:1px;background:none;border: 20px solid transparent; border-top: 20px solid #761a1b; position: absolute;left: 50%; bottom:-40px; margin-left:-10px;top:auto;right:auto; }
.sprite:before {content:"";display:block;width:15px;height:18px; background:url(../images/sprit.png) -1726px -491px; position:absolute;top:7px; left:4px;opacity:.6;}
/*--- Высота блока на 100% ---*/
height: 100vh; /*--- 100% от высоты видимой области страницы в браузере ---*/
height: 100vw; /*--- 100% от ширины ---*/
{width: 100vm; width: 100vmin;} /*--- Наименьшие значение ---*/
{width: vmax} /*--- Наибольшие значение ---*/
}
width: calc(25% - 30px);
/*--- Контур и тень ---*/
.blackramka {border: 1px solid #000;}
.punkramka {border: 1px dashed #c9c9c9;}
.texkontyr {text-shadow: black 1px 1px 0, black -1px -1px 0, black -1px 1px 0, black 1px -1px 0;}
.texkontyr-mini {text-shadow: 0px 1px 1px black;}
.ten {box-shadow: rgb(0 0 0 / 99%) 0px 0px 20px;}
/*--- Сылка на 100% ---*/
a {display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:12;}
/*--- Спрайт ---*/
[class*='bg-']{display:inline-block; background:url(../images/sprit.png) no-repeat -12px -235px;}
.bg-kvadrat {width:58px; height:58px;background-position: -1392px -413px;}
/*--- Прозрачный фон ---*/
background:rgba(75, 105, 68, 0.4);
/*--- Стилизованій Чекбокс ---*/
.sort-spis label::before { border-radius:3px; display: block; width:15px;height:15px; content: ""; background: #fff; border: var(--lightgray) solid 2px;position: absolute; top:-3px; left:-27px; z-index:1;}
.sort-spis input[type="checkbox"]:checked ~ label::before { background:var(--suniy); border: var(--suniy) solid 2px;}
.sort-spis input[type="checkbox"]:checked ~ label::after{content: "\f17c"; font-family: Flaticon; color: #fff; position: absolute; top: -1px; left: -24px; z-index:3;}
/* Выборка *****/
======
.hedv a:nth-child(2){} - второй элемент из всех существующих в (.hedv)
.hedv a:nth-of-type(2) - второй элемент - только из (a)
======
:nth-child(-n+3) - выбрать первых 3 элемента
li:first-child {} - первый элемент
li:last-child {} - последний элемент
li:nth-child(2){} - второй элемент
li:nth-last-child(-n+2) {} - два последних
tr td:nth-child(odd) - все первые строки
odd - Все нечетные номера элементов.
even - Все четные номера элементов.
число - Нумерация ведется последнего!!! элементfа в списке.
li:first-of-type {}
li:last-of-type {}
li:only-of-type {}
li:nth-of-type(2n) {}- Каждый второй элемент - толь с li? тругие теги игнорируются в подсчете
li:nth-last-of-type {}
/* Трансформация *****/
.rdar {transform: scale(1.0, 1.0) translatey(20px) rotate(2deg) skew(2deg, 2deg) ;}
/* Анимация **********/
{ animation: marquee 19s infinite alternate linear; transition: all 0.3s ease-out;}
@keyframes marquee{
0% {transform: translate(0, 0);}
100% {transform: translate(-100%, 0)}
}
/* Разные картинки **********/
.no-webp #start{background-image: url('/resources/images/bg-1-0.png');}
.webp #start{background-image: url('/resources/images/bg-1-0.webp');}
<picture>
<source srcset="/images/banner/mal.webp" type="image/webp">
<img src="/images/banner/mal.jpg" >
</picture>--- * Подробнее о разных картинках
Буквица:
p:first-letter{font-size:2.5em; padding:2px; margin-right:6px;float:left; line-height:0.33em;}Гиперсылки:
<a href="" target="_blank" rel="external noopener noreferrer"></a>
<a href="tel:+3804441112301">+38 (044) 111-23-01</a>
<a href="mailto:classic@ukr.net">classic@ukr.net</a>
<a href="https://t.me/europa_brend"></a>
<a href="viber://add?number=380971111111"></a>
--- Якорь----
<a href="#top">Наверх</a>
<p id="top"></p>
Спрайты:
/*--- SPRITE ---*/
[class*='sp-']{display:inline-block; background: url('../images/sp-ikokr.png') no-repeat; overflow:hidden;width: 32px; height: 32px;}
.sp-logo-1 {background-position: -5px -0px;}
/*--- Уменьшить спрайт - смотрите здесь пункт - ФОН ---*/
или
-webkit-transform: scale(1.5, 1.5);transform: scale(1.5, 1.5);
~
-webkit-transform:scale(0.4, 0.4) ;transform: scale(0.4, 0.4);Линии до и после элемента:
<div class="vismotreli"><h5><span>Вы уже смотрели:</span></h5></div>
.vismotreli h5 {position: relative; overflow: hidden;font-size: 24px;font-weight: 200;text-align: center;color: #777;margin-bottom: 10px;text-transform: uppercase;}
.vismotreli h5 > span {display: inline-block;margin: 0.4em;}
.vismotreli h5 > span:before, h5 > span:after {content: '';position: absolute;width:25%;border-top: 1px solid #777;margin-top:20px;}
.vismotreli h5 > span:before {margin-left: -30%;}
.vismotreli h5 > span:after {margin-left: 6%}Границы:
{border:2px solid red; border-top-left-radius:25px;} li {list-style-type: none;} /* Убираем маркеры */
li {display:list-item;list-style: circle;} /* Возобновить маркер */
/* Изображение вместо маркера */
ul {list-style-image: url(images/book.png);}
/* Спрайт вместо маркера в тексте */
li:before {content: "";float: left;width: 16px;height: 16px;margin: 4px 5px 0 0;background: url(../images/sprite.png) no-repeat -66px -56px;}
/* Спрайт вместо маркера */
.spost li {list-style:none;position:relative;margin-bottom:10px;}
.spost li:before {content: "";width: 16px;height: 16px;background: url(../images/sp.png) no-repeat -1512px -332px;position:absolute;left:-20px;top:5px;}
<dl class="spk-dl">
<dt><s class=""></s></dt>
<dd>Better than 99%</dd>
</dl>
<style>
.spk-dl {width:100%; padding:5px 0; font-size:1.2em; display:flex; flex-flow: row wrap;justify-content: space-between;}
.spk-dl dt {width:30px;margin:0; padding:0;}
.spk-dl dd {width: calc(100% - 50px);margin:0; padding:0;}
</style>---
Счетчик css:
.spisok ul {margin: 0 0 0 40px;}
.spisok > ul > li {counter-increment:step-counter; list-style:none;position:relative;line-height:2.2;font-size:16px;}
.spisok > ul > li:before {content:counter(step-counter);}---
Фон:
Универсальная запись для фона:
background:#fff url(../images/sprit-jpg.jpg) 0px -746px no-repeat;Другие варианты:
/* ---------- Смена размена фона для спрайта: ----------*/
Вариант 1 (если нужен точный размер):
{width: 20px;height:23px;background:url(../images/sprit.png);background-position:0 -308px!important;background-size:20px auto;}
Вариант 2:
{-webkit-transform: scale(1.5, 1.5);transform: scale(1.5, 1.5);}
{-webkit-transform: scale(0.7, 0.7);transform: scale(0.7, 0.7);}
/* ----------- несколько фонов-картинок для 1 елемента: ----------*/
.frame {background:
url(/example/image/animate-bg3.png) 90% 90% no-repeat fixed,
url(/example/image/animate-bg2.png) 40% 40% no-repeat fixed,
url(/example/image/animate-bg1.jpg) no-repeat fixed;
background-size: auto, auto, cover;
}
/* ----------- несколько фонов-катинок + цвет для 1 елемента: ----------*/
{background:
url('../images/sprit.png') -15px -15px no-repeat,
url(../images/pogoda/pogoda-spr.png) top center no-repeat,
#000;
}
/* ---------- прозрачный фон: ----------*/
background: rgba( 255, 0, 0, 0.5);
или
background: transparent;
/* ---------- Растянуть фон: ----------*/
background: url(images/mybg.png) 100% 100% no-repeat;
background-size: cover;
или
background: url(images/mybg.png) no-repeat center center fixed;
background-size: cover;
/* ---------- Сдвигаем фон за границы блока ----------*/
{background-position: right -510px bottom 0px;}* auto -Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки
.cover - Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока
.contain - Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Сдвиг фона при прокрутке:
/* Пример для фона из двух рисунков */
background-image: url(images/pattern-left.png), url(images/pattern-right.png);
background-repeat: repeat-y, repeat-y;
background-position: left, right;
background-attachment: fixed, fixed;
Значения:
fixed - Делает фоновое изображение элемента неподвижным.
scroll - Позволяет перемещаться фону вместе с содержимым.
inherit - Наследует значение родителя.
local - Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.Тень:
box-shadow:25px 32px 50px 0px rgba(49, 49, 49, 0.24);css тень для выпадающего меню:
box-shadow: 0px 15px 19px 0px rgba(11, 71, 91, 0.38);data-name:
Дополнительный элемент с помощью вывода через функкцию attr:
<b class="telhed" data-name="097-479-12-18">
<a href="tel:+380974791218">097-479-12-18</a>
</b>
---- Стиль:
.telhed:after {content: attr(data-name);position: absolute;top: 2px;left: 2px;z-index:-2;}Выравнивание по центру:
/*Для контейнра с абсолютом */
{position:absolute;top:0;left:0;bottom:0;right:0;}
/*Для контейнра с релатив */
{margin:0 auto;}Для вставки через content:
.element:before {content: 'с \a0 приветом \0a из \a0 Киева';white-space: pre;}
/* разделители */
\0a — перенос строки
\a0 — неразрывный пробел
\20 — пробелСтили, зависящие от языка страницы
.test:lang(ru) {/* стили для русского языка */}
.test:lang(uk) {/* стили для украинского языка */}
-------
Указываем текущий язык страницы.
<html lang="ru">…</html>
Псевдоэлементы css:
::after Для вывода желаемого контента после элемента
::before до элемента, к которому он добавляется
::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется
::first-line задает стиль первой строки форматированного текста
::selection Применяет стиль к выделенному пользователем фрагменту текстаКартика для Retina-экранов (example@2x.png - в 2 раза больше example.png)
.icon {background-image: url(example.png); background-size: 200px 300px;height:300px;width:200px;}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
.icon {background-image: url(example@2x.png);}
}filter: url(resources.svg);
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* Применение нескольких фильтров */
filter: contrast(175%) brightness(3%);
Инверсия цвета:
{-webkit-filter: invert(100%);filter: invert(100%);}
Сделать все белым:
filter: brightness(0) invert(1);
Еще вариант:
filter: hue-rotate(-360deg);
Если нужно полностью поменять цвет:
{filter: sepia() saturate(100000%) hue-rotate(154deg);}Выпадающее меню через инпут:
Реализация меню - здесь
Градиент:
Генератор градиента онлайн - colorzilla.com
СМОТРЕТЬ - примеры градиента на чистом css
background: linear-gradient(to top, #fefcea, #f1da36);
/* Несколько градиентов */
background: linear-gradient(to top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
/* Несколько прозрачных градиентов */
background-image: linear-gradient(to top, rgba(30,87,153,0), rgba(30,87,153,0.8), rgba(30,87,153,1), rgba(30,87,153,1), rgba(41,137,216,1), rgba(30,87,153,1), rgba(30,87,153,1), rgba(30,87,153,0.8),rgba(30,87,153,0));Полоски градиентом.
background-color: #f0f0f0; /* Цвет фона */
background-image: linear-gradient(transparent 50%, #a3e5a3 50%);Трансформация:
div {transition: background 0.3s ease, color 0.2s linear;}
/* поворот */
transform: rotate(360deg);
transform: rotateY(360deg);
transform: rotateX(360deg);
/* наклон */
transform: skewX(20deg);
/* смещение */
transform:translateX(20px); или translate(-20px, 20px);
/* размер */
transform:scale(0.5, 0.5);
transform:scale(1.4, 1.4);
/* отобразить по горизонтали */
transform:-webkit-transform: scale(-1, 1); transform: scale(-1, 1); filter: FlipV;}
/* отобразить по вертикали */
transform:-webkit-transform: scale(1, -1); transform: scale(1, -1); filter: FlipV;}
/* сдвиг по вертекали и горизонтали */
transform: translate(50px, 50px)
transform: translateY(50px);
transform: translateX(50px);
/* 3-D */
transform: rotate3d(-5,0,-1,16deg);Вставка видео:
<div class="videofon">
<video autoplay muted controls loop poster="{THEME}/images/video/kosmos.jpg" class="viddeo ">
<source src="{THEME}/images/video/kosmos.mp4" type="video/mp4">
<source src="{THEME}/images/video/kosmos.webm" type="video/webm">
<!-- <source src="{THEME}/images/video/kosmos.ogv" type="video/ogg"> -для старых браузеров -->
</video>
</div>
<style>
#video-fon {
width: 100%;
height: 100%;
min-width:100%; min-height:100%;
position:fixed;top:0;left:0;z-index:1;
}
.videofon {position:relative;overflow:hidden;min-width:100%; width:100%; height:646px;background:url(../images/fon-sitka.png); }
.viddeo {
width: 100%; min-width:100%;
height: auto%; min-height:auto%;
position:absolute;top:0;left:0;z-index:-10;
}
</style>Селекторы атрибутов:
input[type="text"] {} – выберет текстовый инпут
[class*='bg-'][class^="bg-"] – выберет класы с началом: bg- .
[div|="val"] – атрибут равен val или начинается с val-, например равен "val-1".
[span*="val"] – атрибут содержит подстроку val, например равен "myvalue".
[a~="val"] – атрибут содержит val как одно из значений через пробел.
[class~="delete"] верно для "edit delete" и неверно для "undelete" или "no-delete".
[class$="val"] – атрибут заканчивается на val, например равен "myval".
a:not([class]) - все ссылки без класса.Подключение шрифтов
@font-face {
font-family: 'FontName';
src: url('webfont.eot'); /* IE9+ Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super modern browsers */
url('webfont.woff') format('woff'), /* Modern browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#FontName') format('svg'); /* Legacy iOS */
}Transition:
transition: 0.2s border-bottom ease-in;
transition: 0.5s 0.1s height, 0.5s 0.1s padding, 0.5s 0.1s margin, 0.3s color, 0.6s visibility;
transition: 0.5s 0.1s height, 0.5s 0.1s padding, 0.5s 0.1s margin, 0.3s color, 0.6s visibility;
transition: 0.5s height cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s padding cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s margin cubic-bezier(0.73, 0.32, 0.34, 1.5), 0.5s 0.2s color, 0.2s background-color;Перечень свойст которые анимируются через transition - смотреть
/* Анимация бегущей строки */
.marquee {color:red; font-size:17px;width:200%; animation: marquee 16s linear infinite;}
@keyframes marquee {0% {margin-left:100%} 100% {margin-left:-50%}}
/* Повтор анимации */
{animation-iteration-count: 3;}
infinite - Анимация проигрывается бесконечно.
/* Задержка анимации */
{animation-delay: 2s;}
/* Оставляет на последнем кадре */
{animation-fill-mode: forwards;}
/* Отменить анимацию / viesdtop-название анимации */
{animation-play-state: paused;}
начать:
{animation-play-state: running;}
/* Анимация вправо - разворот на 180 - влево */
.Ваш стиль {animation: avtom, avtomd2 10s linear infinite;}
@keyframes avtom {
0% {left:440px;transform:scale(1.0, 1.0);}
50% {left:80%; transform:scale(0.5, 0.5);}
51% {}
100% {}
}
@keyframes avtomd2 {
0% { background-position: -604px -278px;}
50% { background-position: -604px -278px;}
51% {left:80%; transform:scale(0.5, 0.5);}
61% {left:65%; transform:scale(0.5, 0.5);}
100% {left:440px; transform:scale(1.0, 1.0);}
}Функции анимаци - смотреть