Початковий 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);}Выпадающее меню через инпут:
:bully: Реализация меню - здесь
Градиент:
Генератор градиента онлайн - 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);}
}Функции анимаци - смотреть