Начальные CSS для шаблона
Каждый шаблон имеет стандартные стили, но иногда приходится долго мучится чтобы найти нужный способ прописать стиль.
Вот и решил собрать все самые необходимые стили для начала работ по верстке дизайна сайта.
Начальные скрипты меню через checkbox Кнопка вверх Тени для текста
Градиенты Ссылки Фон Списки data-name Трансформация Меню input Анимация Відео Шрифт Селекторы атрибутов
Основные:
.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} /*--- Наибольшие значение ---*/
}
/*--- Контур и тень ---*/
.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;}
/*--- Сылка на 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);
/* Выборка *****/
======
.hedv a:nth-child(2){} - второй элемент из всех существующих в (.hedv)
.hedv a:nth-of-type(2) - второй элемент - только из (a)
======
li:first-child {} - первый элемент
li:last-child {} - последний элемент
li:nth-child(2){} - второй элемент
li:nth-last-child(-n+2) {} - два последних
li:nth-last-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)}
}---
Буквица:
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;} /* Возобновить маркер */
/* Изображение вместо маркера */
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;}
<div class="tab-hypinv">
<dl>
<dt>---</dt> <dd>---</dd>
</dl>
</div>
<style>
.tab-hypinv{margin:20px 0 20px 0;}
.tab-hypinv dl {margin:0;padding:0;}
.tab-hypinv dt, .tab-hypinv dd {display:block;width:38%;height:25px;float:left;margin:0;padding:6px 0 6px 15px; }
.tab-hypinv dd {color:#000;width:50%;float:left;}
.tab-hypinv dd:hover, .tab-hypinv dt:hover {color:#000;background-color: #ececec;}
</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;Другие варианты:
/* ---------- Смена размена фона для спрайта: ----------*/
{width: 20px;height:23px;background:url(../images/sprit.png);background-position:0 -308px!important;background-size:20px auto;}
{-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 елемента: ----------*/
{background: url(/img/9.png),url(/img/10.png); background-position: 0 0,100% 0; background-repeat: no-repeat;}
/* ---------- прозрачный фон: ----------*/
background: rgba( 255, 0, 0, 0.5);
/* ---------- Растянуть фон: ----------*/
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;}Сдвиг фона при прокрутке:
/* Пример для фона из двух рисунков */
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);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;} /* Анимация бегущей строки */
.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;}
Выравнивание по центру:
/*Для контейнра с абсолютом */
{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);}
}Цвет.
Инверсия цвета:
{-webkit-filter: invert(100%);filter: invert(100%);}Выпадающее меню через инпут:
ВАРИАНТ 1.
.btn-khop {cursor:pointer;}
.btn-khop:after {content:"";display:block;width:145px; height:25px;background:url('../images/sp.png'); background-position:-297px -138px;}
.noinp, .menu{display:none;}
.noinp:checked ~ .menu{display:block;border: 3px solid #df4a36;margin-top:-3px;}
.noinp:checked ~ .btn-khop:after {background-position:-447px -138px;}
/* html код */
<input type="checkbox" id="hmt" class="hidmknop" >
<label class="btn-menu" for="hmt" tabindex="1">
<i class="bg-ic_search"></i>
<span class="first"></span><span class="second"></span><span class="third"></span>
<div class="rammenu">ПОШУК</div>
</label>
ВАРИАНТ 2 с анимированым хрестиком.
#hmt {display:none;}
.btn-menu{display:inline-block;width:30px;height:30px;margin-left:20px;padding:0px;cursor:pointer;position:relative;transform:translateZ(0);transition:left .23s;}
.btn-menu span{display:none;height:3px;background:#af6f00;margin:6px 0 0;transition:all .1s linear .23s;}
.rammenu {color:#fff;display:none;}
.hidmknop:checked ~ .btn-menu span{display:block;width:100%;position:absolute;top:0;left:0;}
.hidmknop:checked ~ .btn-menu i {display:none;}
.hidmknop:checked ~ .btn-menu span.first{transform:rotate(45deg);-webkit-transform:rotate(45deg);top:7px;height:2px;color:#a7a9ab;}
.hidmknop:checked ~ .btn-menu span.second{opacity:0;}
.hidmknop:checked ~ .btn-menu span.third{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);top:7px;height:2px;color:#a7a9ab;}
.hidmknop:checked ~ .btn-menu .rammenu{display:block;width:350px;height:35px;position:absolute;bottom:-50px;left:-40px;border: 1px solid #cea06f;background: rgba( 104, 131, 98, 0.4);}
.hidmknop:checked ~ .btn-menu:before{content:'\2939';white-space:pre;position:absolute;bottom:-18px;left:6px;color:#cea06f;font-size:33px;}
.btn-menu .bg-ic_search {margin:0;}
/* html код */
<input type="checkbox" id="hmt" class="hidmknop" >
<label class="btn-menu" for="hmt" tabindex="1"><span class="first"></span><span class="second"></span><span class="third"></span></label>
<div class="rammenu">
содержимое меню
</div>Градиент:
Генератор градиента онлайн - colorzilla.com
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(1.2, 0.5);
/* отобразить по горизонтали */
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".