From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/bg/web/css/_colon_first-child/index.html | 117 ++ files/bg/web/css/_colon_nth-child/index.html | 194 ++++ files/bg/web/css/css_transitions/index.html | 120 ++ .../using_css_transitions/index.html | 1155 ++++++++++++++++++++ files/bg/web/css/index.html | 106 ++ files/bg/web/css/pseudo-classes/index.html | 145 +++ files/bg/web/css/transition-delay/index.html | 356 ++++++ files/bg/web/css/transition/index.html | 106 ++ 8 files changed, 2299 insertions(+) create mode 100644 files/bg/web/css/_colon_first-child/index.html create mode 100644 files/bg/web/css/_colon_nth-child/index.html create mode 100644 files/bg/web/css/css_transitions/index.html create mode 100644 files/bg/web/css/css_transitions/using_css_transitions/index.html create mode 100644 files/bg/web/css/index.html create mode 100644 files/bg/web/css/pseudo-classes/index.html create mode 100644 files/bg/web/css/transition-delay/index.html create mode 100644 files/bg/web/css/transition/index.html (limited to 'files/bg/web/css') diff --git a/files/bg/web/css/_colon_first-child/index.html b/files/bg/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..799ab091ba --- /dev/null +++ b/files/bg/web/css/_colon_first-child/index.html @@ -0,0 +1,117 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Оформление + - Псевдоклас + - справочник +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

CSS псевдокласът :first-child (:първо-дете) указва всеки елемент, намиращ се на първо място в списък с елементи от едно и също ниво в структурата на документа. В имплементациите на CSS3, за да бъде селектиран елемента, той трябва да има родител. В CSS4 това не е нужно.

+ +

Правопис

+ +
{{csssyntax}}
+
+ +

Примери

+ +

Пример 1

+ +

HTML

+ +
<div>
+  <p>This p is styled, as it is a p, AND the first
+     child in the div</p>
+  <p>This p is not styled; it is not the first child!</p>
+</div>
+
+<div>
+  <h2>This h2 is not styled; it is not a p!</h2>
+  <p>This p is not styled; it is not the first child!</p>
+</div>
+
+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

Резултат

+ +

{{EmbedLiveSample('Пример_1','100%',300)}}

+ +

Пример 2 - с използване на UL

+ +

HTML

+ +
<ul>
+  <li>List 1</li>
+  <li>List 2</li>
+  <li>List 3</li>
+</ul>
+ +

CSS

+ +
li{
+  color:blue;
+}
+li:first-child{
+  color:green;
+}
+ +

Резултат

+ +

{{EmbedLiveSample('Пример_2_-_с_използване_на_UL',300,100)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}Елементите няма нужда да имат родител за да бъдат селектирани.
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}Без промяна.
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}Начална дефиниция.
+ +

Съвместимост на четците

+ + + +

{{Compat("css.selectors.first-child")}}

+ +

Вижте също

+ + diff --git a/files/bg/web/css/_colon_nth-child/index.html b/files/bg/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..c3f80a2fd1 --- /dev/null +++ b/files/bg/web/css/_colon_nth-child/index.html @@ -0,0 +1,194 @@ +--- +title: ':nth-child()' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Изложение + - мрежа + - псведоклас + - справочник +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

Псевдокласът в CSS :nth-child() намира съвпадения според тяхното място в множество от съседни елементи.

+ +
/* Избира всеки четвърти елемент
+   сред всяко множество от съседи */
+:nth-child(4n) {
+  color: lime;
+}
+
+ +

Правопис

+ +

Псевдокласът nth-child  се указва с един аргумент, който представлява образец за намиране на съвпадения със съответстващи елементи. Изборът се отнася до съседни елементи, които са на едно и също ниво в йерархията на документа.

+ +

Стойности за ключови думи

+ +
+
odd
+
Избира елементи, чието местоположение в поредица от съседни елементи е нечетно: 1, 3, 5 и т.н.
+
even
+
Избира елементи, чието местоположение в поредица от съседни елементи е нечетно: 2, 4, 6 и т.н.
+
+ +

Функционално записване

+ +
+
<An+B>
+
Избира елементи, чието местоположение в поредица от съседи съответства на образеца An+B за всяко положително число или нулева стойност на n. указателят за първия елемент е 1. Стойностите A и B трябва да са от вида {{cssxref("<integer>")}}s.
+
+ +

Правопис

+ +
{{csssyntax}}
+
+ +

Примери

+ +

Примерни образци за избор

+ +
+
tr:nth-child(odd) or tr:nth-child(2n+1)
+
Избира нечетните редове в таблица в HTML: 1, 3, 5 и т.н.
+
tr:nth-child(even) or tr:nth-child(2n)
+
Избира четните редове  в таблица в HTML: 2, 4, 6 и т.н.
+
:nth-child(7)
+
Избира седмия елемент.
+
:nth-child(5n)
+
Избира всеки пети елемент: 5 [=5x1], 10 [=5x2], 15 [=5x3], и т.н. 
+
:nth-child(3n+4)
+
Избира четвъртия елемент след всеки трети. Поредицата започва от нула: 4 [= (3x0)+4], 7 [= (3x1)+4], 10 [= (3x2)+4], 13 [= (3x3)+4], etc.
+
:nth-child(-n+3)
+
Избира първите три елемента в множество от съседи. [=-0+3, -1+3, -2+3]
+
p:nth-child(n)
+
Избира всеки елемент <p> в множество от съседи. Избират се същите елементи както при обикновен избор p, но се прилагат по-точни указания.
+
p:nth-child(1) or p:nth-child(0n+1)
+
Избира всеки първи елемент <p>  в множество от съседи. Това е същото като {{cssxref(":first-child")}} и има същата точност.
+
+ +
+
p:nth-child(n+8):nth-child(-n+15)
+
Избира от осмия до петнадесетия елемент <p> включително в множество от съседи. 
+
+ +

 

+ +

Подробен пример

+ +

HTML

+ +
<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 3, 5, and 7 are selected.</p>
+<div class="first">
+  <span>Span 1!</span>
+  <span>Span 2</span>
+  <span>Span 3!</span>
+  <span>Span 4</span>
+  <span>Span 5!</span>
+  <span>Span 6</span>
+  <span>Span 7!</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-child(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 5, and 7 are selected.<br>
+   3 is used in the counting because it is a child, but it isn't
+   selected because it isn't a <code>&lt;span&gt;</code>.</p>
+<div class="second">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-of-type(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 4, 6, and 8 are selected.<br>
+   3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
+   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
+   children of that type. The <code>&lt;em&gt;</code> is completely skipped
+   over and ignored.</p>
+<div class="third">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+</div>
+
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

Изход

+ +

{{EmbedLiveSample('Detailed_example', 550, 550)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}Добавя правопис за of <selector>  и уточнява, че за съвпадащите елементи не е задължително да имат родители.
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Първоначално определение.
+ +

Съвместимост

+ +
+ + +

{{Compat("css.selectors.nth-child")}}

+
+ +

Вижте също

+ + diff --git a/files/bg/web/css/css_transitions/index.html b/files/bg/web/css/css_transitions/index.html new file mode 100644 index 0000000000..afbb21c6e6 --- /dev/null +++ b/files/bg/web/css/css_transitions/index.html @@ -0,0 +1,120 @@ +--- +title: CSS Transitions +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - Преглед + - Преход + - Справка + - Транзишън +translation_of: Web/CSS/CSS_Transitions +--- +
{{CSSRef}}
+ +

CSS Преходите  са модул от CSS, който ви позволява да създавате плавни преходи между стойностите на свойствата в CSS. Поведението на тези преходи може да бъде контролирано чрез уточняване на тяхната функция, продължителност и редица други атрибути.

+ +

Справка

+ +

Свойства

+ +
+ +
+ +

Наръчници

+ +
+
Използване на CSS преходи
+
Ръководство как стъпка-по-стъпка да създадете преход в CSS. Статията описва всички важни CSS свойства и обяснява как те си взаимодействат.
+
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментар
{{SpecName('CSS3 Transitions')}}{{Spec2('CSS3 Transitions')}}Първоначална дефиниция.
+ +

Съвместимост с браузъри

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0 {{property_prefix("-webkit")}}
+ 26.0		{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10.011.6 {{property_prefix("-o")}}
+ 12.10 #		3.0 {{property_prefix("-webkit")}}
+ 6.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1 {{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}10.0 {{property_prefix("-o")}}
+ 12.10 #		3.2 {{property_prefix("-webkit")}}
+
+ +

Вижте също

+ + diff --git a/files/bg/web/css/css_transitions/using_css_transitions/index.html b/files/bg/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..57eb945326 --- /dev/null +++ b/files/bg/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,1155 @@ +--- +title: Използване на CSS преходи +slug: Web/CSS/CSS_Transitions/Using_CSS_transitions +tags: + - CSS + - CSS преходи + - Напреднали + - Преходи + - наръчник +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +

{{CSSref}}

+ +

CSS преходите предоставят способ за контролиране на скоростта на анимацията при промяна на CSS свойствата. По този начин, вместо промяната в свойството да се приложи незабавно, бихме могли да предизвикаме промната да се случи за определен период от време. Например, ако сменяте цвета на елемента от бял на черен, обикновено това става мигновено. С активиран CSS преход, промените настъпват на определени интерали които съответстват на скоростта и могат да бъдат персонализирани.

+ +

Анимации, които включват преходи между две състояния, могат да бъдат наречени безусловни, тъй като състоянията между началното и крайното са определени от самия бразър.

+ +

A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

+ +

CSS преходите позволяват да изберете кои свойства да анимирате (като  ги посочите изрично), кога да започне анимацията ( като зададете отложено начало),колко продължителен ще е самият преход (като зададете продължителност) или как да бъде изпълнен прехода (като се определи времевата функция, т.е. линейно или бързо в началото и със забавяне в края).

+ +

Кое CSS свойство може да бъде преходно?

+ +

Авторът може да определи кои свойства на своето уеб творение да анимира и по какъв  начин. Това дава поле за създаване на сложни преходи. Поради това, че няма смисъл в анимирането на някои свойства, списъкът със свoйства, подходящи за анимиране е ограничен до определен брой.

+ +
Бележка: Наборът от елементи, подходящи за анимиране, се променя в зависимост от разработването на спецификациите.
+ +

Стойността auto  е в повечето слуаи доста сложен случай. Спецификаците препоръчват да не се изпълняват анимации от или към стойност auto. Някои потребителски агенти, като тези произхождащи от Gecko, следват тези изисквания, докато други, базирани на WebKit, не са толкова стриктни. Използване на анимации с auto  може да доведе до непредвидими резултати, зависещи от браузера и неговата версия, поради това трябва да бъдат избягвани.

+ +

Задаване на преходи

+ +

CSS преходите се контролират чрез свойството {{cssxref("transition")}} . Това е и най-правилният начин за тяхното конфигуриране. Той помага да се преодолее фактът, че списъците с параметрите са несинхронни, а продължителното дебъгване на CSS  може да бъде доста неприятно.

+ +

Можете да контролирате  отделните компоненти на прехода чрез следните свойства:

+ +

(Забележете, че тези преходи се въртят в цикъл непрекъснато само за цел да покажем пример, CSS преходите само визуализират промяна на някое свойство от дедено начало до определен край. Ако се нуждаете от визуализиране на цикъл, погледнете в свойството на CSS анимация.)

+ +
+
{{cssxref("transition-property")}}
+
Задава името или имената на свойствата, върху които трябва да бъде проложен преход. Само свойствата, които са изброени тук, биват анимирани по време на преходите, промените по другите свойства настъпват незабавно- както е по подразбиране.
+
{{cssxref("transition-duration")}}
+
Задава продължитеността за която трябва да настъпо промяната. Можете да зададете една профължителност, която да важи за всички свойства по време на прехода или различни такива, които позволяват всяко свойство да се променя за различен период от време. +
+
+

transition-duration: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_0_5s", 275, 150)}}
+
+ +
+

transition-duration: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_1s",275,150)}}
+
+ +
+

transition-duration: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_2s",275,150)}}
+
+ +
+

transition-duration: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_4s",275,150)}}
+
+
+
+
{{cssxref("transition-timing-function")}}
+
Задава функцията, зависеща от времето, по която  свойствата да бъдат изчислени за междинните точки на прехода.Тази функция се нарича времева функция и калкулира стойностите на свойствата за тези междинни точки. Повече времеви функции могат да бъдат зададени чрез предоставяне на графика на съответната функция. Тя трябва да се състои от четири точки, които да дефинират кубична крива на Безие ( две крайни и двете междинни, които лесно управляват формата на кривата).  Можете да изберете колко плавно (easing) ще се извърши прехода от този помощен сайт . +
+
+

transition-timing-function: ease

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: linear

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+
+
+
{{cssxref("transition-delay")}}
+
Определя колко продължително е забавянето между момента, в който свойството е променено и този, в който преходът в действително започва. +
+
+

transition-delay: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_0_5s",275,150)}}
+
+ +
+

transition-delay: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_1s",275,150)}}
+
+ +
+

transition-delay: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_2s",275,150)}}
+
+ +
+

transition-delay: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_4s",275,150)}}
+
+
+
+
+ +

CSS синтаксисът е следния:

+ +
div {
+    transition: <property> <duration> <timing-function> <delay>;
+}
+ +

Примери

+ +

Пример за анимиране на едно свойство

+ +

Този пример показва преход в големината на шрифта с продължителност 4 секунди и 2 секунди забавяне между момента, в който потребителя посочи с показалеца на мишката върху елемента и началото на анимирания ефект:

+ +
#delay {
+  font-size: 14px;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+}
+
+#delay:hover {
+  font-size: 36px;
+}
+
+ +

Пример за анимиране на няколко свойства

+ + + +

CSS съдържание

+ +
.box {
+    border-style: solid;
+    border-width: 1px;
+    display: block;
+    width: 100px;
+    height: 100px;
+    background-color: #0000FF;
+    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
+    transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+
+.box:hover {
+    background-color: #FFCCCC;
+    width: 200px;
+    height: 200px;
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+ +

{{EmbedLiveSample('Multiple_animated_properties_example', 600, 300)}}

+ +

Когато списъците със стойности на свойствата са с различни дължини

+ +

Ако списъкът със стойности на някое от свойствата на прехода е по-къс от другите, неговите стойности се преповтарят, за да съответстват на дължината на другите. Например:

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+
+ +

Горното ще се приеме като:

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}
+ +

Подобно на това, ако списъкът на някое от свойствата на прехода е по-дълъг от този на списъка с имената на свойствата, върху които трябва да се приложи прехода- {{cssxref("transition-property")}}, то първият бива отрязан, за да пасне. Ако имаме следния CSS:

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}
+ +

Това ще бъде интерпретирано като:

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}
+ +

Използване на преходи за подчертаване на меню

+ +

Често срещана употреба на CSS е за подчертаване елементите на меню, когато потребителя посочва с показалеца на мишката върху тях. Лесно е да се използват преходи,  за да се направи ефекта още по-привлекателен.

+ +

Преди да преминем към частите от кода, можете да погледнете  примерна демонстрация (ако вашият браузър поддържа преходи).

+ +

Първо, сглобяваме менюто с HTML:

+ +
<nav>
+  <a href="#">Home</a>
+  <a href="#">About</a>
+  <a href="#">Contact Us</a>
+  <a href="#">Links</a>
+</nav>
+ +

След това, с  написаното в CSS пресъздаваме как искаме да изглежда това меню и как да реагира. Съществените аспекти са показани тук:

+ +
a {
+  color: #fff;
+  background-color: #333;
+  transition: all 1s ease-out;
+}
+
+a:hover,
+a:focus {
+  color: #333;
+  background-color: #fff;
+}
+
+ +

Това стилизиране изразява изгледа на менюто- с цветове за фон и за текст, които се сменяват, когато се посочи с мишката върху дадения елемент ( {{cssxref(":hover")}} ) и когато елементът е на фокус( {{cssxref(":focus")}} ).

+ +

Примери с JavaScript

+ +
+

Трябва да се внимава, когато се използват преходи непосредствено след:

+ + + +

Това се приема като сякаш първоначалното състояние никога не е настъпвало и елементът е винаги в своето крайно състояние. Това лесно се заобикаля, като се приложи  window.setTimeout() с необходимите милисекунди преди да променяте свойството, върху което смятате да приложите преход.

+
+ +

Използване на преходи за гладко изпълнение на JavaScript

+ +

Преходите са чудесен инструмент, който прави нещата да се случват плавно без да нарушавате функционалността зададена с  JavaScript. Ето един пример:

+ +
<p>Click anywhere to move the ball</p>
+<div id="foo"></div>
+
+ +

Чрез JavaScript можете да визуализирате как движите топка до определена позиция:

+ +
var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
+    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
+},false);
+
+ +

Чрез прилагане на стилизиране можете да го направите плавно без никакви особени усилия. Просто добавяте преход към елемента и всяка промяна ще се случва плавно:

+ +
p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 1s;
+}
+
+ +

Можете да се упражнявате тук: http://jsfiddle.net/9h261pzo/291/

+ +

Отчитане на началото и края на преход

+ +

Можете да използвате събитието {{event("transitionend")}} ,за да засичате дали анимираното движение е свършило да се изпълнява. То е обект тип {{domxref("TransitionEvent")}} и има две допълнително добавени свойства извън типичните за обектите от тип {{domxref("Event")}} :

+ +
+
propertyName
+
Низ, който показва името на CSS свойството, чойто преход е приключил.
+
elapsedTime
+
Плаващо число, което показва броя секунди от които вече тече прехода към момента на инициирането на събитието. Тази стойност не е засегната от стойноста за отложен преход {{cssxref("transition-delay")}}.
+
+ +

Както обикновено, можете да използвате метода ("EventTarget.addEventListener", "addEventListener()")}} за наблюдаване:

+ +
el.addEventListener("transitionend", updateTransition, true);
+
+ +

Можете да отчетете началото на прехода чрез  {{event("transitionrun")}} (задейства се преди всякакво зададено отлагане във времето) и {{event("transitionstart")}} ( задейства се след всякаво зададено отлагане във времето) по същия начин:

+ +
el.addEventListener("transitionrun", signalStart, true);
+el.addEventListener("transitionstart", signalStart, true);
+ +
Бележка: Събитието transitionend не се задейства, ако преходът е прекратен преди да е завършено поради това, че елементът е променен чрез {{cssxref("display")}}: none или е променена стойността на някое анимиращо свойство.
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоментар
{{SpecName('CSS3 Transitions', '', '')}}{{Spec2('CSS3 Transitions')}}Първоначална дефиниция
+ +

Съвместимост с браузъри

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0 {{property_prefix("-webkit")}}
+ 26.0		{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1010.5 {{property_prefix("-o")}}
+ 12.10		3.2 {{property_prefix("-webkit")}}
transitionend event1.0[1]
+ 26.0		{{CompatGeckoDesktop("2.0")}}1010.5[2]
+ 12
+ 12.10		3.2[1]
+ 6.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		1010 {{property_prefix("-o")}}
+ 12.10		3.2
transitionend event2.1[1]{{CompatGeckoMobile("2.0")}}1010[2]
+ 12
+ 12.10		3.2[1]
+
+ +

[1] Chrome 1.0, WebKit 3.2 and Android 2.1 изпълняват го като нестандартното  webkitTransitionEnd. Chrome 26.0 and WebKit 6.0 го изпълняват като стандартното  transitionend.

+ +

[2] Opera 10.5 and Opera Mobile 10 го изпълняват като oTransitionEnd, версия 12 като otransitionend  и версия 12.10 като стандартното transitionend.

+ +

Вижте също

+ + diff --git a/files/bg/web/css/index.html b/files/bg/web/css/index.html new file mode 100644 index 0000000000..45635d6122 --- /dev/null +++ b/files/bg/web/css/index.html @@ -0,0 +1,106 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Landing + - Layout + - NeedsTranslation + - Reference + - TopicStub + - 'l10n:priority' +translation_of: Web/CSS +--- +
{{CSSRef}}
+ +

Cascading Style Sheets (CSS) e стилов език използван, за да опише оформлението на документи, написани на HTML или XML (включително диалекти на XML като SVG, MathML или {{Glossary("XHTML", "", 1)}}). CSS описва как елементите трябва да се явят на екрана, на хартия, по време на разговор или на друга медийна платформа.

+ +

CSS е един от основните езици на open Web и е стандартен сред уеб браузърите според W3C specification. Създаден на нива, CSS1 в момента е неподдържан, CSS2.1 е препоръчителен и  CSS3, който в момента е разделен на по-малки модули, напредва към стандартизация.

+ +
+ + +
+
+

Tutorials

+ +

Our CSS Learning Area features multiple modules that teach CSS from the ground up — no previous knowledge required.

+ +
+
Introduction to CSS
+
This module starts with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.
+
Styling text
+
This module discusses text styling fundamentals, including setting fonts, boldness, italics, line and letter spacing, text drop shadows, and other text properties. This module finishes with applying custom fonts to your page, and styling lists and links.
+
Styling boxes
+
This module looks at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model, then look at controlling box layouts by setting margins, borders, and padding, custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.
+
CSS layout
+
At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so you can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and newfangled layout tools like flexbox.
+
+
+ +
+

Reference

+ + + +

Cookbook

+ +

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

+ +

Tools for CSS development

+ + + +

Meta bugs

+ +
    +
  • Firefox: {{bug(1323667)}}
    • +
+
+
+
+ +

See also

+ + diff --git a/files/bg/web/css/pseudo-classes/index.html b/files/bg/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..090a054efa --- /dev/null +++ b/files/bg/web/css/pseudo-classes/index.html @@ -0,0 +1,145 @@ +--- +title: Псевдокласове +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Избор на елементи + - Псевдоклас + - Селектори + - справочник +translation_of: Web/CSS/Pseudo-classes +--- +
{{CSSRef}}
+ +

Псевдокласовете са ключови думи, добавени към селектор, описващи специфично състояние на указаните елементи. Примерно, можем да използваме {{ Cssxref(":hover") }} за да сменим фона на елемент, когато потребителят мине с мишката върху него.

+ +
div:hover {
+  background-color: #F89B4D;
+}
+ +

Чрез псевдокласовете можете да определяте външния вид на елемент, не само според местоположението му в дървото на документа (пр. {{ cssxref(":first-child") }}), но също и според външни фактори, каквито са историята на разглеждането (пр. {{ cssxref(":visited") }}), състоянието на елемента (пр. {{ cssxref(":checked") }} при някои елементи за формуляри), мястото на мишката (пр. {{ cssxref(":hover") }} позволява да се установи дали мишката се намира върху елемента)...

+ +
+

Бележка: За разлика от псевдокласовете, псевдоелементите служат за стилизиране на конкретна част от html елемент. 

+
+ +

Правопис

+ +
selector:pseudo-class {
+  свойство: стойност;
+}
+
+ +

Както при обикновените класове, можете да изредите заедно колкото искате псевдокласове в един указател за избор на елементи (селектор).

+ +

Индекс на стандартни псевдокласове:

+ +
+ +
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Fullscreen') }}{{ Spec2('Fullscreen') }}Дефинира :fullscreen.
{{ SpecName('HTML WHATWG') }}{{ Spec2('HTML WHATWG') }}Без промяна спрямо {{ SpecName('HTML5 W3C') }}.
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Дефинира :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column() и :matches().
+ Без значителни промени спрямо псевдокласовете дефинирани в {{SpecName('CSS3 Selectors')}} и {{SpecName('HTML5 W3C')}} (семантичното значение не е взето предвид).
{{ SpecName('HTML5 W3C') }}{{ Spec2('HTML5 W3C') }}Дефинира семантично значение в контекста на HTML за :link, :visited, :active, :enabled, :disabled, :checked и :indeterminate.
+ Дефинира :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write и :dir().
{{ SpecName('CSS3 Basic UI') }}{{ Spec2('CSS3 Basic UI') }}Дефинира :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only и :read-write, но без да ги обвързва със семантично значение.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Дефинира :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty и :not().
+ Дефинира синтаксиса на :enabled, :disabled, :checked и :indeterminate, но без да ги обвързва със семантично значение.
+ Без значителни промени в псевдокласовете дефинирани в {{SpecName('CSS2.1')}}.
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}Дефинира :lang(), :first-child, :hover и :focus.
+ Без значителни промени в псевдокласовете дефинирани в {{SpecName('CSS1')}}.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Дефинира :link, :visited и :active, но без да ги обвързва със семантично значение.
+ +

Вижте също

+ + diff --git a/files/bg/web/css/transition-delay/index.html b/files/bg/web/css/transition-delay/index.html new file mode 100644 index 0000000000..95d3000e7b --- /dev/null +++ b/files/bg/web/css/transition-delay/index.html @@ -0,0 +1,356 @@ +--- +title: transition-delay +slug: Web/CSS/transition-delay +tags: + - CSS + - CSS преходи + - CSS свойство + - Справка +translation_of: Web/CSS/transition-delay +--- +
{{CSSRef}}
+ +

СSS sвойството  transition-delay определя колко време трябва да се изчака преди да започне ефекта на прехода за промянана стойността на зададеното свойство.

+ +
{{EmbedInteractiveExample("pages/css/transition-delay.html")}}
+ + + +

Забавянето може да е нула, положително или отрицателно:

+ + + +

Можете да зададете множество отлагания, което се употребява при преходи на на няколко свойства. Всяко отлагане ще бъде приложено към съответното свойство, така както са упоменати в списъка {{cssxref("transition-property")}}, който пък списък има приоритет и се води главен списък. Ако има по-малко на брой отлагания, отколкото свойства в главния списък, то списъкът с отлаганията ще бъде повтарян докато не се изравни по членове с главния. Ако пък има повече отлагания, отколкото свойства в главния списък, то списъкът със забавянията ще бъде отрязан до толкова, колкото да съответства на главния. И в двата случая  CSS декларирането си остава валидно.

+ +

Синтаксис

+ +
/* <time> values */
+transition-delay: 3s;
+transition-delay: 2s, 4ms;
+
+/* Global values */
+transition-delay: inherit;
+transition-delay: initial;
+transition-delay: unset;
+
+ +

Стойности

+ +
+
{{cssxref("<time>")}}
+
Отнася се до времето, което се ичаква между старта на преходния ефект и промяната на стойността на свойството.
+
+ +

Официален синтаксис

+ +
{{csssyntax}}
+ +

Примери

+ +
+
+

transition-delay: 0.5s

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_0_5s",275,150)}}
+
+ +
+

transition-delay: 1s

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_1s",275,150)}}
+
+ +
+

transition-delay: 2s

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_2s",275,150)}}
+
+ +
+

transition-delay: 4s

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_4s",275,150)}}
+
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатутКоментар
{{SpecName('CSS3 Transitions', '#transition-delay-property', 'transition-delay')}}{{Spec2('CSS3 Transitions')}}Първоначална дефиниция
+ +

{{cssinfo}}

+ +

Съвместимост с браузъри

+ + + +

{{Compat("css.properties.transition-delay")}}

+ +

Вижте същo

+ + diff --git a/files/bg/web/css/transition/index.html b/files/bg/web/css/transition/index.html new file mode 100644 index 0000000000..a1060b9dd2 --- /dev/null +++ b/files/bg/web/css/transition/index.html @@ -0,0 +1,106 @@ +--- +title: transition +slug: Web/CSS/transition +tags: + - CSS + - CSS преходи + - CSS свойства + - Справка +translation_of: Web/CSS/transition +--- +
{{CSSRef}}
+ +

CSS свойството  transition  е общото свойство за {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }} и {{ cssxref("transition-delay") }}.

+ +
{{EmbedInteractiveExample("pages/css/transition.html")}}
+ + + +

Преходите ви позволяват да определите преминаването между две състояния на елемент. Различните състояния могат да бъдат зададени чрез псево класове като {{cssxref(":hover")}} или {{cssxref(":active")}} или динамично зададени чрез JavaScript.

+ +

Синтаксис

+ +
/* За 1 свойство */
+/* property name | duration */
+transition: margin-right 4s;
+
+/* property name | duration | delay */
+transition: margin-right 4s 1s;
+
+/* property name | duration | timing function */
+transition: margin-right 4s ease-in-out;
+
+/* property name | duration | timing function | delay */
+transition: margin-right 4s ease-in-out 1s;
+
+/* За 2 свойства */
+transition: margin-right 4s, color 1s;
+
+/* За всички променени свойства */
+transition: all 0.5s ease-out;
+
+/* Глобални стойности */
+transition: inherit;
+transition: initial;
+transition: unset;
+
+ +

Свойството transition се задава като един или повече прехода, всеки от които е за отделно свойство, разделени чрез запетая.

+ +

Всеки преход за отделните свойства описва преходът, който трябва да бъде приложен на съответното свойство(или на специалните стойности all и none). Това включва:

+ + + +

Вижте, как се употребяват списъците от стойности на свойства, когато са с различна дължина. Накратко, ако има повече описания на прехода, отколкото реалния брой на свойствата за анимиране, то тези излишни описания се пренебрегват.

+ +

Официален синтаксис

+ +
{{csssyntax}}
+ +

Примери

+ +

Има няколко примера за CSS преходи в статията Използване на CSS Преходи .

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатутКоментар
{{ SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}{{ Spec2('CSS3 Transitions') }}Първоначална дефиниция
+ +

{{cssinfo}}

+ +

Съвместимост с браузъри

+ + + +

{{Compat("css.properties.transition")}}

+ +

Вижте също

+ + -- cgit v1.2.3-54-g00ecf