12 úžasných funkcí CSS3, které můžete konečně začít používat

Pokud jste jako já, když uvidíte působivou ukázku nové funkce CSS3, nemůžete se dočkat, až ji začnete používat na webových stránkách. Samozřejmě pak uvidíte, že je k dispozici pouze v jednom nebo dvou hlavních prohlížečích (a to nikdy nezahrnuje IE), takže se nakonec rozhodnete počkat. Mám pro vás dobrou zprávu – s nejnovějšími verzemi prohlížeče existuje několik úžasných funkcí, které jsou konečně podporovány všude, a můžete je začít používat hned teď!

Upozornění – většina těchto funkcí nebude fungovat ve starších verzích IE (9 a nižší). Pokud tyto prohlížeče tvoří velkou část vaší demografické skupiny, obávám se, že se budete muset spolehnout na záložní. Ale pro nás ostatní je zde to, co moderní prohlížeče nabízejí:

1. CSS animace a přechody

CSS animace jsou konečně dostupné ve všech hlavních prohlížečích, dokonce i v IE (od verze 10). CSS animace lze vytvářet dvěma způsoby. První je velmi snadný, provádí se animací změn vlastností CSS pomocí transition prohlášení. Pomocí přechodů můžete vytvářet efekty při najetí myší nebo stisknutých myší nebo můžete spustit animaci změnou stylu prvku pomocí JavaScriptu. Přechod můžete vidět níže, když se vznesete nad planetou – to způsobí, že se raketa přiblíží.

Druhý způsob definování animací je o něco složitější – jde o popis konkrétních momentů animace pomocí pravidla code>@keyframe. To vám umožňuje mít opakující se animace, které nejsou závislé na akcích uživatele nebo JavaScriptu, aby se spustily. Klikněte na Upravit pro zobrazení kódu.

.container{
    width: 300px;
    height:300px;
    margin: 0 auto;
    position:relative;
    overflow:hidden;
}

.planet{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center;
}

.rocket{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket.png) no-repeat 50px center;

    /* Chrome still requires the -webkit- prefix */
    -webkit-animation:orbit 2s linear infinite;
    animation:orbit 2s linear infinite;

    transition:background-position 0.8s;
}

.container:hover .rocket{
    background-position:80px center;
}

/* Define the keyframes of the animation */

@-webkit-keyframes orbit {
    from {
        -webkit-transform:rotate(0deg);}
    to {
        -webkit-transform:rotate(360deg);
    }
}

@keyframes orbit {
    from {
        transform:rotate(0deg);

        /* I am including the -webkit-transform properties, because
           Chrome might start supporting keyframe without prefix in the future,
           but we can't be certain whether it will support prefix-free transform
           at the same time */

        -webkit-transform:rotate(0deg);}
    to {
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
    }
}
<div class="container">
    <div class="planet"></div>
    <div class="rocket"></div>
</div>

O animacích CSS je toho hodně, co se můžete dozvědět, a doporučuji vám začít tímto článkem Mozilla Developer Network (MDN). Pokud vás zajímá podpora prohlížeče, podívejte se na tuto tabulku kompatibility.

2. Výpočet hodnot pomocí calc()

Další novou a úžasnou funkcí CSS je calc() funkce. Umožňuje vám provádět jednoduché aritmetické výpočty v CSS. Můžete jej použít všude, kde je vyžadována délka nebo velikost. Co je ještě cool, je to, že můžete libovolně míchat různé jednotky, jako jsou procenta a pixely. Díky tomu je mnoho hacků rozvržení, které jste mohli používat v minulosti, zastaralých. Nejlepší zpráva? Funguje v IE9 a novějším, bez předpon.

.container{

    /* Calculate the width */
    width: calc(100% - 40px);

    background-color:#CDEBC4;
    color:#6D8B64;
    text-align:center;
    padding:25px 0;
    margin: 0 auto;
}
<div class="container">
    <p>This div has 20px on either side.</p>
</div>

Další informace o calc() zde nebo si prohlédněte tabulku kompatibility.

3. Pokročilé selektory

Pokud v dnešní době přiřazujete ID prvkům pouze proto, abyste je mohli stylizovat, pravděpodobně to děláte špatně. CSS 2.1 a CSS 3 představily řadu výkonných selektorů, díky kterým budou vaše rozvržení čistší a vaše šablony stylů úžasnější.

Ty jsou podporovány ve všech hlavních prohlížečích včetně IE9 a novějších. Klikněte na Upravit zobrazíte zdrojový kód příkladu.

/* Style the elements (nothing interesting here) */

p{
    font-size: 16px;
    width: 420px;
    margin: 20px auto 0;
    text-align:center;
}

.container{
    width: 420px;
    margin:50px auto 0;
    overflow: hidden;
    padding:5px;
}

.elem{
    width:30px;
    height:30px;
    margin:4px;
    background-color:#A0DFAC;
    float:left;
}

.elem span{
    position:absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:5px;
    border:2px solid #fff;
}

/* Selectors for matching the first letter and line: */

p::first-letter{
    background-color: #666;
    color: #FFF;
    font-size: 24px;
    font-style:normal;
    display: inline-block;
    padding: 0 5px;
    border-radius: 3px;
    margin-right: 2px;
    font-family: serif;
}

p::first-line{
    font-size: 18px;
    text-transform: smallcaps;
    font-style: italic;
    text-decoration: underline;
}

/* Make the first and last elements purple */

.elem:first-child,
.elem:last-child{
    background-color:#948bd8;
}

/* Make every other element rounded */

.elem:nth-child(odd){
    border-radius:50%;
}

/* Make the sixth element red */

.elem:nth-child(6){
    background-color:#cb6364;
}

/* Style the element which contains the span */

.elem:not(:empty){
    background-color:#444;
    position:relative;

    -webkit-transform:rotate(25deg);
    transform:rotate(25deg);

}

/* Target elements by attribute */

.elem[data-foo=bar1]{
    background-color:#aaa;
}

.elem[data-foo=bar2]{
    background-color:#d7cb89;
}

/* The attribute value should start with bar. This matches both
   of the above elements */

.elem[data-foo^=bar]{
    width: 16px;
    height: 16px;
    margin: 11px;
}

/* The element that follows after the one with data-foo="bar2" attribute */

.elem[data-foo=bar2] + .elem{
    background-color:#78ccd2;
}
<p>This is a regular paragraph of text, which has a number of awesome CSS3 styles applied..</p>

<div class="container">
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"><span></span></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem" data-foo="bar1"></div>
    <div class="elem" data-foo="bar2"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="elem"></div>
</div>

Další informace o těchto selektorech najdete zde nebo se podívejte, které prohlížeče je podporují.

4. Generovaný obsah a počítadla

Generovaný obsah je mocný nástroj v rukou vývojářů, zpřístupněný podle ::before a ::after pseudo prvky. Tato funkce vám umožňuje používat méně HTML k dosažení stejných rozložení. To je výhodné zejména v případech, kdy potřebujete další stíny rámečků nebo jiné vizuální prvky, které by vyžadovaly další rozpětí nebo divy. Nakonec získáte minimálnější a sémanticky správnější HTML.

CSS3 také poskytuje pseudoprvkům přístup k čítačům, které lze zvýšit pomocí pravidla CSS. Mohou také přistupovat k atributům z nadřazených prvků, které je obsahují. Viz zdroj příkladu níže.

.container{

    /* Set a counter named cnt to 0 */
    counter-reset: cnt;

    position:relative;
    text-align:center;
    padding:20px 0;
    width:420px;
    height: 160px;
    margin: 0 auto;
}

/* You can style pseudo elements and give them content,
   as if they were real elements on the page */

.container::before{
    display: block;
    content:'Hover over these items:';
    font-size:18px;
    font-weight:bold;
    text-align:center;
    padding:15px;
}

.container span{
    display:inline-block;
    padding:2px 6px;
    background-color:#78CCD2;
    color:#186C72;
    border-radius:4px;
    margin:3px;
    cursor:default;
}

/* Create a counter with a pseudo element */

.container span::after{

    /* Every time this rule is executed, the 
       counter value is increased by 1 */
    counter-increment: cnt;

    /* Add the counter value as part of the content */
    content:" #" counter(cnt);

    display:inline-block;
    padding:4px;
}

/* Pseudo elements can even access attributes of their parent element */

.container span::before{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    content:attr(data-title);
    color:#666;

    opacity:0;

    /* Animate the transitions */
    -webkit-transition:opacity 0.4s;
    transition:opacity 0.4s;
}

.container span:hover::before{
    opacity:1;
}
<div class="container">
    <span data-title="I have a wonderful title!">This is item</span>
    <span data-title="These titles are shown only using CSS, no JavaScript is used!">This is item</span>
    <span data-title="Hello there!">This is item</span>
    <span data-title="Generated content is awesome!">This is item</span>
</div>

Generovaný obsah je podporován všude, včetně IE9 a novějších.

5. Přechody

Přechody dávají webovým designérům možnost vytvářet plynulé přechody mezi barvami, aniž by se museli uchýlit k obrázkům. Přechody CSS také vypadají skvěle na displejích sítnice, protože jsou generovány za běhu. Mohou být lineární nebo radiální a lze nastavit opakování. Existují již nějakou dobu, ale po několika menších změnách syntaxe během posledních měsíců jsou konečně dostupné téměř všude, bez prefixů!

.container{
    text-align:center;
    padding:20px 0;
    width:450px;
    margin: 0 auto;
}

.container div{
    width:100px;
    height:100px;
    display:inline-block;
    margin:2px;

    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD;
    border-radius:2px;

    color:#666;
    vertical-align: top;
    line-height: 230px;
    font-size: 12px;
}

#el1{
    background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
}

#el2{
    background:radial-gradient(#77d19e,#46c17b);
}

#el3{
    background:repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);
}

#el4{
    background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px);
}
<div class="container">
    <div id="el1">Linear</div>
    <div id="el2">Radial</div>
    <div id="el3">Repeating Lin.</div>
    <div id="el4">Repeating Rad.</div>
</div>

Podívejte se na podrobný návod zde a tabulku kompatibility zde.

6. Webfonty

Dokážete si představit, že bývaly doby, kdy jsme byli omezeni pouze na hrstku „bezpečných webových“ písem a nic jiného? Je těžké tomu uvěřit, vzhledem k tomu, že dnes máme služby jako Google Fonts a Typekit, které vám umožňují vkládat krásná písma jednoduchým zahrnutím šablony stylů do vaší stránky. Existují dokonce fonty ikon, jako je fontawesome, které obsahují pěkné vektorové ikony namísto písmen nebo čísel. To vše bylo umožněno pravidlem code>@font-face, které vám umožňuje definovat název, vlastnosti a zdrojové soubory písem, na které se později můžete odkázat v font /font-family prohlášení.

h1{
    /* Using the custom font we've included in the HTML tab: */
    font-family: Satisfy, cursive;
    font-weight:normal;
    font-size:24px;
    padding-top: 60px;
}
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" />

<h1>This is my pretty webfont!</h1>

Všimněte si, že kvůli bezpečnostním omezením v prohlížečích jsem nemohl vložit místní písmo do vloženého editoru výše, takže jsem místo toho použil písmo z Google Webfonts. Ale můžete vidět funkční příklad zde.

S některými řešeními fungují webová písma v prohlížečích starých jako IE6. Dvě hostované služby, které jsem zmínil výše, vyřeší tyto případy za vás, takže nemusíte.

7. Velikost krabice

Jedinou největší příčinou bolestí hlavy pro začátečníky v CSS je krabicový model. Standardizační orgány k tomu pravděpodobně měly své důvody, ale nepřipadá mi vůbec intuitivní, aby šířka a výška CSS prvku byla ovlivněna jeho odsazením a ohraničením. Tato malá (nesprávná) funkce narušuje rozvržení a způsobuje zmatek, ale konečně existuje způsob, jak obnovit náš zdravý rozum pomocí box-sizing pravidlo. Můžete jej nastavit na border-box , díky čemuž se prvky chovají přesně tak, jak očekáváte. Přesvědčte se sami:

.container{
    text-align:center;
}

.container div{

    /* Setting the box-sizing method: */
    box-sizing:border-box;

    /* Firefox still requires the -moz prefix */
    -moz-box-sizing:border-box;

    width:120px;
    height:120px;
    display:inline-block;
    vertical-align:top;
}

/* Thanks to box-sizing, we can set whatever padding and border
   we want, and the elements will still keep the same size */

#el1{
    color:#524480;
    background-color:#B2A4E0;
}

#el2{
    padding:8px;
    border:10px solid #9ec551;
    background-color:#fff;
}

#el3{
    padding:32px;
    background-color:#ccc;
}
<div class="container">
    <div id="el1">Element 1</div>
    <div id="el2">Element 2</div>
    <div id="el3">Element 3</div>
</div>

Další informace o pravidle pro velikost krabice najdete zde nebo si prohlédněte tabulku kompatibility.

8. Obrázky ohraničení

border-image vlastnost umožňuje zobrazit vlastní navržené okraje kolem prvků. Okraje jsou obsaženy v jediném obrázku (sprajtu), přičemž každá oblast tohoto obrázku odpovídá jiné části ohraničení. Zde je obrázek použitý v níže uvedeném příkladu.

p{
    text-align:center;
    padding:20px;
    width:340px;
    margin: 0 auto;

    /* Set the border and border image properties */
    border:30px solid transparent;
    border-image:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 round;
}
<p>Say hello to a fancy border image!</p>

Pro podrobnější pohled se podívejte na tuto stránku MDN a tento článek o tricích CSS. Obrázky ohraničení jsou podporovány ve všech hlavních prohlížečích a IE11.

9. Mediální dotazy

Mediální dotazy jsou naprostou nutností, pokud to s webdesignem myslíte vážně. Existují již nějakou dobu, ale stojí za zmínku, protože změnily způsob, jakým vytváříme webové stránky. Dříve platilo, že jste měli běžný web, dostatečně široký, aby se vešel na nejmenší rozlišení monitoru používaného v té době, a samostatný mobilní web. V dnešní době vytváříme stránky, které jsou responzivní a které se přizpůsobují typu zařízení, orientaci a rozlišení.

Dotazy na média jsou překvapivě snadno použitelné – vše, co musíte udělat, je uzavřít CSS styly do bloku chráněného pravidlem code>@media. Každý blok kód>@media se aktivuje, když je splněna jedna nebo více podmínek. Zkuste například změnit velikost této stránky. Zahrnul jsem to také do editoru níže; zkuste odstranit blok code>@media, abyste viděli, co se stane.

/* Style the main content and the sidebar */

.container{
    width:900px;
    margin: 0 auto;
    overflow:hidden;
}

.main-section{
    background-color:#CDEBC4;
    color:#6D8B64;
    width:520px;
    float:left;
    height:500px;
}

.sidebar{
    background-color:#ccc;
    width:350px;
    float:right;
    height:400px;
}

.container p{
    padding-top:100px;
    text-align:center;
}

.note{
    text-align:center;
    padding-top:60px;
    font-style:italic;
}

/* This simple media query makes the column layout
   linear on smaller screens */

@media (max-width:900px){

    .container{
        width:100%;
    }

    .main-section, .sidebar{
        width:auto;
        margin-bottom:20px;
        float:none;
    }

}
<div class="container">

    <aside class="sidebar"><p>This is the sidebar<p></aside>

    <div class="main-section">
        <p>The main content of the article goes here</p>
    </div>

</div>

Dotaz na média může obsahovat kontroly rozlišení a orientace zařízení, barevné hloubky, hustoty pixelů a další. Přečtěte si podrobný článek zde a podívejte se na tabulku kompatibility.

10. Více pozadí

S více pozadími mohou návrháři dosáhnout velmi zajímavých efektů. Mohou skládat různé obrázky jako pozadí stejného prvku. Každý obrázek (nebo vrstva) lze posouvat a animovat nezávisle, jak můžete vidět v ukázce níže (zkuste najet myší na obrázek). Všechna pravidla CSS související s pozadím nyní mohou obsahovat seznam vlastností oddělených čárkami, každou pro konkrétní obrázek na pozadí:

.space{

    /* Pass a comma separated list of backgrounds: */
    background:url('https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big.png') no-repeat center 70px, url('https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg') no-repeat bottom center;

    width:200px;
    height:200px;
    margin: 0 auto;

    border-radius:3px;

    /* Animate the positions of both of the backgrounds */
    transition:background-position 1s;
}

.space:hover{
    /* The same goes for properties like background-position and repeat */
    background-position:35% 20px, top right;
}
<div class="space"></div>

Další informace o různých pozadích naleznete zde. Podpora prohlížeče je velmi dobrá - všechny poslední verze toto pravidlo podporují (viz tabulka).

11. Sloupce CSS

Rozvržení založené na sloupcích bylo notoricky obtížné vytáhnout v CSS. Obvykle to zahrnovalo použití JavaScriptu nebo zpracování na straně serveru, které rozděluje obsah do různých prvků. To je zbytečně komplikované a ubírá to drahocenný vývojový čas tomu, na čem skutečně záleží. Naštěstí nyní existuje způsob, jak to obejít pomocí CSS columns pravidlo:

.container{
    width: 500px;
    margin: 0 auto;
}

/* Creating columns is as simple as this: */

.container p{
    -moz-columns:3;
    -webkit-columns:3;
    columns:3;
}
<div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque urna nec eros ornare, ac tristique diam porta. Donec fermentum velit eget dignissim condimentum. Sed rutrum libero sit amet enim viverra tristique. Mauris ultricies ornare arcu non adipiscing. Sed id ipsum vitae libero facilisis pulvinar id nec lacus. Ut lobortis neque et luctus mattis. Morbi nunc diam, elementum rutrum tellus non, viverra mattis diam. Vestibulum sed arcu tincidunt, auctor ligula ut, feugiat nisi. Phasellus adipiscing eros ut iaculis sagittis. Sed posuere vehicula elit vel tincidunt. Duis feugiat feugiat libero bibendum consectetur. Ut in felis non nisl egestas lacinia. Fusce interdum vitae nunc eget elementum. Quisque dignissim luctus magna et elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nunc lorem, convallis consequat fermentum eget, aliquet sit amet libero.</p>
</div>

Toto pravidlo má dobrou podporu, i když stále vyžaduje předpony. Kde se věci hroutí, je podpora některých dalších pravidel souvisejících se sloupci a rozdíly mezi prohlížeči při zacházení s rohovými případy.

12. CSS 3D transformace

Není nic okázalejšího a plného lahůdek než působivé 3D CSS demo. Ačkoli jeho užitečnost mimo ukázky nebo portály je sporná, 3D CSS nabízí návrhářům a vývojářům některé výkonné funkce, které si mohou získat srdce uživatelů, pokud jsou prováděny s dobrou mírou.

Procházejte zdrojový kód následujícího příkladu klepnutím na Upravit , abyste viděli, jak byl vyroben.

.container{

    /* How pronounced should the 3D effects be */
    perspective: 800px;
    -webkit-perspective: 800px;

    background: radial-gradient(#e0e0e0, #aaa);
    width:480px;
    height:480px;
    margin:0 auto;
    border-radius:6px;
    position:relative;
}

.iphone-front,
.iphone-back{

    /* Enable 3D transforms */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    /* We are using two separate divs for the front and back of the
       phone. This will hide the divs when they are flipped, so that the
       opposite side can be seen:  */

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    width:200px;
    height:333px;

    position:absolute;
    top:50%;
    left:50%;
    margin:-166px 0 0 -100px;

    background:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/iphone.png) no-repeat left center;

    /* Animate the transitions */
    transition:0.8s;
}

.iphone-back{

    /* The back side is flipped 180 deg by default */
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);

    background-position:right center;
}

.container:hover .iphone-front{
    /* When the container is hovered, flip the front side and hide it .. */
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
}

.container:hover .iphone-back{
    /* .. at the same time flip the back side into visibility */
    transform:rotateY(360deg);
    -webkit-transform:rotateY(360deg);
}
<div class="container">
    <div class="iphone-front"></div>
    <div class="iphone-back"></div>
</div>

Tento kód byl vytvořen podle našeho výukového programu přihlašovacího formuláře podobného Apple, který vám doporučuji přečíst. Pokud se chcete o 3D CSS dozvědět více, podívejte se na tento podrobný úvod. Pokud nepotřebujete cílit na starý IE, podpora prohlížeče je také velmi dobrá.

Další hodné zmínky

Existují další pozoruhodné funkce, které stojí za zmínku. Pokud jste to ještě neudělali, měli byste přestat používat předpony pro border-radius a box-shadow . Nyní můžete také použít data-uri jako obrázky na pozadí v každém prohlížeči. opacity je také všude podporován, stejně jako velmi užitečný background-size vlastnost.

Ještě nějaký čas zbývá, než se podpora napříč prohlížeči pro flexbox objeví , code>@supports, filters a CSS masks , ale jsem si jistý, že to čekání bude stát za to!