CSS3 Opakující se přechody [Tipy CSS3]

Existuje mnoho CSS3 funkcí, které mění způsob, jakým zdobíme webové stránky, z nichž jeden je CSS3 Přechody. Před CSS3, určitě potřebujeme obrazy vytvořit efekt přechodu; nyní jsme schopni zajistit stejné (a lepší) efekty pouze pomocí CSS

V našich předchozích příspěvcích jsme diskutovali dva typy přechodů, které lze dosáhnout pomocí CSS3:

• Radiální a
• Lineární gradienty.

Tentokrát se podíváme na jejich sourozence: opakované přechody.

Základní opakování

Opakující se přechody je v podstatě rozšíření. Syntaxe je podobná tomu, jak definujeme radiální a lineární gradienty, pouze to, jak název napovídá, bude také opakovat barvy v zadaném směru. Pro opakování lineárních gradientů můžeme použít tuto funkci: opakovaný lineární gradient, zatímco opakujeme radiální nebo eliptické gradienty, používáme tuto funkci: opakující se radiální gradient.

 / * Linear * / .gradient pozadí: opakovaný lineární gradient (0deg, # f9f9f9, #ccccccc 20px);  / * Radiální * / .gradient pozadí: opakující se radiální gradient (50% 50%, kruh, # f9f9f9, #ccccccc 20px);  

Neexistuje velký rozdíl pro ostatní na kódu, s výjimkou opakování barev. Níže je uvedeno jednoduché znázornění, jak toto opakování barev funguje.

Ačkoliv obraz nahoře ilustruje pouze opakování lineárních gradientů, základní myšlenka platí i pro radiální gradienty, ve kterých se barvy budou opakovat nekonečně, v tomto případě v libovolném směru. Demo zobrazíte kliknutím na níže uvedený odkaz.

• Zobrazit ukázku

V další části vám ukážeme, jak můžeme v reálných příkladech využít opakované přechody CSS3.

Příklad: Vytváření vzorů

Nejběžnější implementace Opakující se přechody je vytvořit vzory pozadí. V tomto příkladu budeme vytvářet jednoduché vertikální pruhy.

 .gradient pozadí: opakovaný lineární gradient (0deg, # f9f9f9, # f9f9f9 20px, #ccccccc 20px, #ccccccc 40px);  

Všimněte si, jak definujeme dvě různé barvy - # f9f9f9 a #cccccc - na stejném místě, 20px. Tento příklad zvýrazní rozdíl mezi těmito dvěma barvami a odstraní nejasnosti.

Pro orientaci jednoduše změníme úhel - 90deg bude jej orientovat vodorovně, zatímco 45deg nasměruje ho šikmo a tak dále.

• Zobrazit ukázku

Příklad: Vytvoření čáry

V tomto druhém příkladu se chystáme vytvořit papírovou linii, kterou můžete často vidět v poznámkovém bloku. Abychom tento efekt vytvořili, potřebujeme jen div, žádné obrázky, pouze CSS.

 .gradient width: auto; výška: 500px; okraj: 0 50px; pozadí: -webkit-opakující-lineární gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); pozadí: -moz-opakující se lineární gradient (-90deg, # f9f9f9, # f9f9f9 20px, #ccccccc 21px); pozadí: -o-opakující se lineární gradient (-90deg, # f9f9f9, # f9f9f9 20px, #ccccccc 21px); pozadí: opakovaný lineární gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); velikost pozadí: 100% 21px;  

Všimli jsme si také CSS3 velikost pozadí vlastnost pro určení velikosti obrázků pozadí 100%, 20px. CSS3 Gradients sice zobrazují „barvy“, ale ve skutečnosti jsou kategorizovány jako obrázky, není barva.

Dále použijeme :před pseudo-element přidat pruh na levé straně papíru.

 .gradient: before content: ""; displej: inline-block; výška: 500px; šířka: 4px; border-left: 4px double # FCA1A1; poloha: relativní; vlevo: 30px;  

A jsme hotovi, je to opravdu jednoduché? Nyní můžeme vidět všechny v akci z odkazů níže.

• Zobrazit ukázku
• Stáhněte si zdroj

Další zdroje

• Přechody Webkit CSS3
• CSS3 Přechody na Microsoft Developer Network