» » » Начальные CSS для шаблона
502 0  

Начальные CSS для шаблона

Каждый шаблон имеет стандартные стили, но иногда приходится долго мучится чтобы найти нужный способ прописать стиль.

Вот и решил собрать все самые необходимые стили для начала работ по верстке дизайна сайта.

  Начальные скрипты   меню через checkbox   Кнопка вверх   Тени для текста

 


Основные:

.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;}

/*--- Сылка на 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) {} - два последних
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)}
}

---

Буквица:

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;}

 /* Анимация вправо - разворот на 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);}
}

Выравнивание по центру:

/*Для контейнра с абсолютом */
{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%);}


Выпадающее меню через инпут:

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%);

градиент css


Трансформация:

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".

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019