Kouzelný soubor .htaccess. Pokud .htaccess nefunguje
Jsem si jistý, že jste již obeznámeni s vlastností border css. Dozvíte se něco nového, co jste dříve nevěděli? css ohraničení? Nejen, že se naučíte, ale také uvidíte několik nových věcí, které jste dosud nevěděli!
CSS3 lze použít nejen k vytvoření zaoblených rohů, ale k vytvoření lze použít i čistý CSS kód složité tvary. Dříve jste mohli použít obrázek na pozadí k vytvoření vzhledu zaoblených rohů. Díky novým technikám pro použití border to dokážeme s čistým CSS kódem.
Základy používání css border
Pravděpodobně jste již obeznámeni standardní použití vlastnosti ohraničení:
Ohraničení: 1px plná černá;
Výše uvedený kód bude mít na výstupu 1px okraj, který bude černý. Snadné a jednoduché. Můžete také trochu rozšířit syntaxi:
Šířka okraje: tlustý; styl ohraničení: pevný; barva okraje: černá;
Jako doplněk můžete použít specifické hodnoty hraniční vlastnosti- šířka, tři klíčová slova: tenký, střední, tlustý.
Použití rozšířené syntaxe však není vždy praktické. Podívejme se na příklad, kdy potřebujete změnit barvu rámečku bloku při najetí myší. V tomto případě je použití zkrácené syntaxe mnohem jednodušší:
Box ( orámování: 1px plný červený; ) .box:hover ( rám: 1px plný zelený; )
Elegantnější a jednodušší způsob, jak to udělat, je:
Box ( border: 1px symetricky červená; ) .box:hover ( border-color: green; )
Jak vidíte, pokročilá technika se hodí i tehdy, když měníme jen některé vlastnosti: šířku, styl, barvu a další.
Hraniční poloměr
Pohraniční-poloměr- Toto je "zlatá" vlastnost CSS3 - první, nejběžnější vlastnost, která se stala praktickou a užitečnou. Kromě IE8 a verzí níže se zobrazují všechny prohlížeče zaoblené rohy pomocí tohoto.
Pro správný styl je však nutné použít speciální předpony pro Webkit a Mozillu.
Webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
V dnešní době můžeme odstranit speciální předpony a používat standardní formulář hraniční poloměr.
Další výhodou je, že můžeme použít speciální hodnoty pro každou stranu bloku:
Poloměr okraje vlevo nahoře: 20 pixelů; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;
Ve výše uvedeném kódu lze nastavením border-top-right-radius a border-bottom-left-radius na "null" dosáhnout úžasných tvarů. I když prvek může zdědit některé vlastnosti, které bude nutné resetovat.
Podobně jako u margin a padding můžeme komprimovat syntaxi:
/* vlevo nahoře, vpravo nahoře, vpravo dole, vlevo dole */ border-radius: 20px 0 30px 0;
Jako příklad aplikace vlastnosti border-radius, ukážu vám „citrón“, který návrháři často používají při navrhování webových stránek:
Citron ( šířka: 200px; výška: 200px; pozadí: #F5F240; rám: 1px plný #F0D900; okraj-rádius: 10px 150px 30px 150px; )
Pojďme za základy
Mnoho designérů má veškeré znalosti v css oblasti hraniční vlastnosti zde končí. Ale existují i další skvělé věci, které můžete použít k vytvoření úžasných věcí!
Komplexní css hraniční struktury
Existuje mnoho technik pro vytváření návrhů pomocí složitých hraničních struktur. Podívejme se například na následující...
Hraniční styl
Vždy používáme nejznámější vlastnosti plné, čárkované a tečkované. Existuje však několik dalších vlastností ve stylu ohraničení: drážka a hřeben.
Ohraničení: 20px drážka #e3e3e3;
Nebo v rozšířené syntaxi:
Barva ohraničení: #e3e3e3; border-width: 20px; border-style: groove;
I když jsou tyto vlastnosti užitečné, nejsou základem pro vytváření složitých snímků.
Obrys
Nejoblíbenější technika tvorby dvojitý rám- použití vlastnosti obrysu.
Box ( ohraničení: 5px plný #292929; obrys: 5px plný #e3e3e3; )
Tato metoda funguje skvěle, i když nás omezuje pouze na dva snímky. Někdy potřebujete vytvořit přechodovou hranici, která se skládá z mnoha vrstev... jak potom?
Pseudoprvky
Když technika obrysu nestačí, alternativní prostředky je použít pseudo prvky:before a:after. Pomocí kterých můžete k prvku přidat další rámečky:
Box ( šířka: 200px; výška: 200px; pozadí: #e3e3e3; pozice: relativní; okraj: 10px plná zelená; ) /* Vytvořte dvě pole se stejnou šířkou kontejneru */ .box:after, .box:before ( obsah: ""; pozice: absolutní vlevo: 0;
Nevypadá to moc elegantně, ale aspoň to funguje. Je trochu obtížné zjistit pořadí barev uvnitř rámečků... ale můžete na to přijít.
Box-Shadow
Zajímavým „dětským způsobem“ k vytvoření tohoto efektu je použití vlastnosti box-shadow CSS3:
Box ( orámování: 5px plná červená; rámeček-shadow: 0 0 0 5px zelená, 0 0 0 10px žlutá, 0 0 0 15px oranžová; )
V tomto případě jsme byli chytřejší a použili jsme vyhrazenou vlastnost box-shadow. Změnou parametrů x, y, rozostření na nulu můžeme použít různé barvy k vytvoření více snímků.
Ale je tu problém: ve starších prohlížečích, které nerozumí vlastnosti box-shadow, bude viditelný pouze jeden 5px červený rámeček.
„Pamatuj! Design stránek by měl vypadat pro různé prohlížeče, tedy stejně ve všech prohlížečích. Včetně starších verzí."
Změna úhlů
Kromě toho použitého jednoduchý význam border-radius, můžeme zadat dva samostatné - oddělujeme je skrz / uvedeme horizontální a vertikální rádius.
Například:
Poloměr ohraničení: 50px / 100px; /* horizontální poloměr, vertikální poloměr */
...toto je ekvivalentní:
Poloměr okraje vlevo nahoře: 50 pixelů 100 pixelů; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;
Tato technika je vhodná pro vytváření jedinečných tvarů bloků. Zde je například postup, jak vytvořit efekt zabaleného papíru:
Box ( šířka: 200px; výška: 200px; pozadí: #666; border-top-left-radius: 15 em 1 em; border-bottom-right-radius: 15 em 1 em; )
CSS formuláře pomocí ohraničení
Tato technika ukazuje, jak můžete vytvářet formuláře CSS při použití prvků s nulovými rozměry výšky a šířky. Překvapený? Podívejme se na příklad...
Pro několik následujících příkladů použijeme následující označení:
...a následující základní styl:
Pole ( šířka: 200px; výška: 200px; pozadí: černé; )
Nejčastější příklad pomocí CSS formy - vytvoření tekoucí šipky. Tajemství této šipky spočívá ve vytvoření hranice s různé barvy pro každou ze stran. Pak položíme atributy šířky a výška na 0.
Pojďme přiřadit div blok třída šípů:
Šipka ( šířka: 0; výška: 0; okraj-horní: 100px plná červená; border-right: 100px plná zelená; okraj-dolní: 100px plná modrá; border-left: 100px plná žlutá; )
Pro demonstraci nejprve použijeme rozšířenou syntaxi. Dále můžeme odstranit extra kód pomocí zkrácené syntaxe:
Šipka ( šířka: 0; výška: 0; ohraničení: 100px plné; barva ohraničení: červená zelená modrá žlutá; )
Zajímavé, že? Nyní provedeme instalaci transparentní barvy na všech stranách kromě modré strany.
Šipka ( šířka: 0; výška: 0; ohraničení: 100 pixelů; barva ohraničení: modrá; )
Dopadlo to skvěle! Ale to je v rozporu sémantické rozložení , vytvořte div .arrow, stačí přidat na stránku šipku. K tomuto účelu můžeme použít pseudoprvky, což nyní uděláme.
Vytvořte bublinu
K vytvoření Bublinu("Speech temnota"), potřebujeme malý kousek čisté CSS kód a jeden blok div.
Bublina ( pozice: relativní; barva pozadí: #292929; šířka: 200px; výška: 150px; výška řádku: 150px; /* svisle na střed */ barva: bílá; zarovnání textu: na střed; )
Speech-bubble:after ( content: ""; )
V této fázi vytvoříme šipku, kterou jsme vytvořili dříve, přidáme ji k prvku a zbývá ji pouze umístit:
Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; )
Pokud chceme, aby šipka směřovala dolů, budeme muset nastavit všechny okraje na průhledné kromě horního.
Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; )
Když toto vytvoříme CSS tvar, nemůžeme konkrétně uvést velikost šipky. Místo toho můžeme nastavit vlastnost border-width, která šipce přiřadí velikost. Nastavíme také polohu šipky dole uprostřed. V souladu s tím používáme hodnoty nahoře a vlevo.
Speech-bubble:after ( content: ""; position: absolute; width: 0; height: 0; border: 15px full; border-top-color: red; top: 100%; left: 50%; )
Navíc mu stačí dát stejnou barvu jako blok. Pamatujte, že při umísťování je třeba vzít v úvahu velikost ostatních okrajů, které jsou neviditelné (15px). Bloku dáme také zaoblení v rozích.
Speech-bubble ( /* … další styly */ border-radius: 10px; ) .speech-bubble:after ( content: ""; pozice: absolutní; šířka: 0; výška: 0; okraj: 15px plný; border-top -barva: #292929; horní okraj: -15px;
Není to špatné, co? Použití několika třídy css a hraniční triky, můžete vytvořit takovou věc.
/* Použití řečových bublin: Použijte třídu .speech-bubble a .speech-bubble-DIRECTION, jak je uvedeno níže
Bonus! Vertikální centrování uvnitř bloku
Pro jeden řádek textu můžete použít výšku řádku. Ale pokud máte dva nebo více řádků textu... Nejlepší řešení nainstaluje zobrazit vlastnost na stůl a celý text vložte do odstavce. Takhle to vypadá na html označení:
Speech-bubble ( /* další styly */ display: table; ) .speech-bubble p ( display: table-cell; vertical-align: middle; )
Neomezujeme se na trojúhelníky. CSS umí vykreslovat různé tvary- dokonce srdce a znamení biologického nebezpečí.
Biohazard ( šířka: 0; výška: 0; ohraničení: 60px plný; okraj-poloměr: 50 %; border-top-color: black; border-bottom-color: black; border-left-color: yellow; border-right- barva: žlutá)
Závěr
