CSS od shora dolů – včetně CSS3

Zveřejnění: Vaše podpora pomáhá udržovat provoz webu! Za některé služby, které na této stránce doporučujeme, dostáváme poplatek za doporučení.


Kaskádové styly (CSS) jsou jazykem, díky kterému je web krásný. Spolu s HTML a JavaScriptem je to jedna z technologií, které musí každý vývojář frontendu zvládnout.

I když je web plný zdrojů, které vám pomohou naučit se CSS, pokud jste začátečník, může být obtížné oddělit skvělé zdroje od těch, které jsou v pořádku.

V této příručce zdrojů poskytujeme základní úvod k tomu, co je CSS, čeho je schopen, a také k funkcím uvedeným v nejnovější verzi: CSS3.

Začínáme s CSS

Pokud jste připraveni skočit, tento průvodce se týká následujících pokynů:

  • Úvod do CSS: Pokud jste v CSS nováčkem, je to místo, kde začít. Tato část poskytuje základní přehled o CSS a ukazuje vás na další skvělé zdroje.
  • Co je nového v CSS3: pokud chcete prozkoumat moduly, které byly zavedeny v CSS3, vydejte se na toto téma, kde se dozvíte o mediálních dotazech, boxování, 3D transformacích, animacích, rozložení více sloupců a další.
  • Vytváření responzivních webů pomocí CSS: webové stránky se dnes musí krásně zobrazovat na zařízení jakékoli velikosti a jazyk CSS je jazyk, který k tomu vede.
  • Jak vyrobit tlačítka posuvných dveří: základní nátěr na kombinaci jQuery s CSS pro vytvoření opravdu skvělých efektů.
  • Vše o barvách CSS: vstát a jít s barvami CSS. Tato část obsahuje skvělý barevný odkaz.
  • Efektivní psaní CSS:: rychlé načítání stránek je důležitější než kdy jindy. To vám ukáže, jak napsat CSS, které mohou výrazně zkrátit dobu načítání.
  • Master CSS Online: tyto zdroje poskytují cestu k mistrovství CSS. Pokud dáváte přednost stylu výuky podle učení, tato část je pro vás.
  • Úžasná díla CSS: hledáte inspiraci? Zde jsme shromáždili některá z nejúžasnějších kreací CSS na webu.
  • Oficiální slovo na CSS3: nyní, když znáte některé CSS a naučili jste se, které moduly byly zavedeny v CSS3, je dobré se seznámit s W3C, organizací, která řídí vývoj CSS.
  • Doporučená četba: pokud se chcete učit pomocí elektronické knihy nebo brožované knihy, podívejte se do našeho seznamu doporučených knih, kde určitě najdete název, který vás zaujme.

Úvod do CSS

Úvod do CSS

CSS neboli Cascading Style Sheets je jazyk používaný k určení stylu a vzhledu webové stránky.

Obsah webové stránky, včetně záhlaví, odstavců a obrázků, se načte podle pokynů obsažených v dokumentu HTML a CSS řekne vašemu prohlížeči, jak prezentovat každý prvek v tomto dokumentu HTML..

CSS se používá k tomu, aby dělal věci jako polohové položky na webu a určoval věci, jako je barva pozadí, velikost a styl ohraničení, mezera mezi jednou položkou a další, rodina písem a mnoho dalšího.

Hlavní výhodou CSS je to, že vytváří oddělení mezi designem webové stránky a obsahem webové stránky. Oddělením obsahu od návrhů lze provést změny návrhu na celém webu úpravou několika pravidel CSS v jediném souboru CSS.

Tři místa pro psaní pravidel CSS

Než budete moci napsat jeden řádek CSS, musíte vědět, kam ji napsat a jak ji spojit s obsahem HTML, který ovlivňuje. CSS můžete psát na třech různých místech:

  • Externí list stylů: Dokument vytvořený výhradně proto, aby obsahoval pravidla CSS, která lze použít na více dokumentů HTML pomocí prvku LINK v záhlaví dokumentu HTML.
  • Interní šablona stylů: Styly CSS vložené přímo do záhlaví dokumentu HTML mezi značkami prvků stylu.
  • Vložené styly: Styly CSS přidané do jediného prvku HTML pomocí atributu stylu v dokumentu HTML.

I když existuje čas a místo pro použití interních stylů a inline stylů, drtivá většina Styly CSS se nejlépe používají pomocí externího listu stylů.

Externí šablonu stylů lze propojit s libovolným počtem dokumentů HTML, což vám umožňuje řídit vzhled celého webu z jediného souboru CSS.

Přiřazení pravidel CSS ke konkrétním prvkům HTML

Pravidla CSS se skládají ze dvou částí: selektoru a prohlášení. Každé prohlášení se také skládá ze dvou částí: majetku a hodnoty.

  • Selektory identifikujte nebo vyberte elementy HTML, na které se má pravidlo CSS použít.
  • Vlastnosti jsou jména, která popisují funkci, kterou bude pravidlo řešit. Několik běžně používaných vlastností CSS je okraj, ohraničení, barva pozadí, zarovnání textu a styl písma.
  • Hodnoty popsat, jak by se měla vlastnost objevit. Pokud je dotyčná vlastnost okraj, může být společná hodnota 10 pixelů.

Selektory a specifičnost

Stylová šablona často obsahuje konfliktní pravidla pro jeden prvek HTML. Koncept specifičnost selektoru určí, která pravidla se použijí na každý prvek HTML.

Pokud se například používá seznam odkazů pro hlavní navigaci a další seznamy jsou uvedeny v hlavním těle stránky, bude navigační seznam a seznamy v těle vyžadovat různé sady pravidel CSS.

V opačném případě budou navigační nabídka a seznam v těle stránky podléhat stejným pravidlům CSS.

Pochopení toho, jak fungují selektory CSS, je klíčem k psaní pravidel, která ovlivňují správné prvky HTML.

Zatímco nejběžnějšími selektory CSS jsou selektory id, tříd a tagů nebo prvků, další selektory, jako jsou atributy, polohové selektory, pseudoelektory a kombinace selektorů, lze použít k vytvoření pravidel s větší specifičností.

Obecná použití CSS

Existuje mnoho vlastností CSS, které se používají prakticky na každé stránce HTML. Seznámení s těmito běžnými vlastnostmi CSS vám umožní zvládnout většinu stylingových a polohovacích úkolů.

Stylingové písmo

CSS lze použít k vytvoření libovolného stylu písma. Ať už je to barva, velikost, hmotnost, výška řádku, zarovnání, případ, typ písma samotný nebo dekorace, jako jsou podtržení a přeškrtnutí, které chcete ovládat, lze pomocí vlastností CSS vytvořit požadovaný efekt..

Použitím principů specificity lze na každý prvek HTML na stránce použít odlišný styl písma.

Model krabice

Prostor kolem každého prvku HTML lze nejlépe pochopit přemýšlením o tom, co se nazývá boxový model:

Schéma modelu boxu

Model boxu se skládá ze tří vlastností CSS: výplně, ohraničení a okraje. Tyto vlastnosti lze použít na jakýkoli prvek HTML. Nejjednodušší je pochopit tyto tři vlastnosti jako příklad.

Zvažte následující prvek odstavce HTML:

Odstavec textu.

Jaký bude účinek psaní následujícího pravidla CSS?

p {
čalounění: 10px;
ohraničení: pevná 1px;
marže: 10px;
}

Tento odstavec se zdá být obklopen:

  • Nejprve, 10 pixelů výplně (prázdné místo) na všech stranách textu odstavce,
  • Za druhé, pevný rámeček o šířce 1 pixel kolem odstavce a výplně,
  • Zatřetí, 10 pixelů okraje (prázdné místo) mezi rámečkem a jakýmkoli sousedním prvkem.

To se nazývá krabicový model. Každý prvek je nejprve orámován prázdným prostorem zvaným výplň, dále ohraničením a nakonec prázdným prostorem zvaným okraj.

Použití plaváků

Plováky se používají k odesílání prvků HTML vlevo nebo vpravo od jejich nadřazeného prvku, aniž by je přerušily z celkového toku dokumentu HTML. Spolu se svým sesterským majetkem je jasné, že jsou jedním z nejlepších způsobů, jak vytvořit rozvržení webových stránek.

I když se nebudeme snažit pokrýt vše, co je o floatech vědět, je důležité mít základní znalosti o tom, jak fungují, jakmile se začnete učit CSS.

Nejjednodušší je porozumět floatům v kontextu textového procesoru. Zvažte obrázek v textovém dokumentu.

Každý obrázek bude obvykle umístěn zcela doprava, s textem tekoucím na levé straně obrázku, nebo zcela doleva, s textem tekoucím na pravé straně obrázku. Na webových stránkách je tohoto vzhledu dosaženo pomocí vlastnosti float.

Vlastnost float má čtyři přijatelné hodnoty: doleva, doprava, žádná a dědí. V případě výše uvedeného příkladu:

  • Pokud se na obrázek vztahuje pravidlo CSS s vlastností float a hodnotou vlevo, bude umístěn na levé straně nadřazeného prvku, přičemž text na pravé straně teče..
  • Právo na hodnotu by fungovalo přesně podle očekávání.
  • Žádný by nezabránil plovoucímu prvku v obou směrech.
  • Zdědění by způsobilo, že prvek zdědí hodnotu float použitou na nadřazený prvek.

Plováky se běžně používají k vytváření nabídek navigace na webu. Nabídka pro navigaci na webu obvykle sestává z neuspořádaného seznamu HTML, přičemž každá položka seznamu se vznáší vlevo nebo vpravo, což má za následek, že se položky seznamu, které se objevují vedle sebe, spíše než naskládají do seznamu odrážek.

Například typické navigační menu může vypadat takto v HTML:

  • Domov

  • Náš obchod

  • O nás

  • Kontaktujte nás.

Bez jakýchkoli pravidel CSS by se toto menu zobrazilo jako seznam s odrážkami, přičemž každá položka by se objevila na novém řádku. Aby se každá položka zobrazila v jednom vodorovném řádku začínajícím od levé strany stránky, bylo možné použít následující pravidlo CSS.

li {
plavat vlevo;
}

Všimněte si, že pro zjednodušení tohoto příkladu jsme použili značku položky seznamu li jako selektor CSS. Ve skutečnosti by se to nikdy nestalo. Typicky by třída byla přiřazena k samotnému seznamu nebo ke každé položce seznamu a tato třída by byla použita jako selektor.

Vyčistěte float

Další vlastností často používanou ve spojení s plováky je jasná vlastnost. Když je jeden prvek plovoucí, všechny následující prvky se posouvají nahoru a zarovná se vedle plovoucího prvku.

V případech, kdy chcete, aby následující prvky začínaly pod plovoucí položkou, nikoli vedle ní, můžete pomocí vlastnosti clear vynutit jejich spuštění na novém řádku..

Právě jsme poškrábali povrch toho, co lze udělat s plováky a jasnou vlastností, ale našli jsme tento skvělý článek od CSS-Tricks, který poskytuje hloubkové prozkoumání tohoto tématu..

Použití vlastnosti pozice

Vlastnost CSS position je další metoda, která se často používá k vytváření rozvržení webových stránek. Na rozdíl od vlastnosti float se vlastnost position často používá k vylamování prvků z přirozeného toku dokumentu HTML a k velmi specifickému diktování jejich pozice..

S vlastností position lze použít dvě hodnoty: relativní a absolutní. Po použití jedné z těchto hodnot lze použít další vlastnosti, jako je horní, dolní, levá a pravá, k velmi specifickému umístění postiženého prvku..

Použití vlastnosti position k vytvoření rozvržení není bez rizik. Na rozdíl od vlastnosti float se prvky umístěné pomocí vlastnosti position budou překrývat s ostatními položkami, čímž se vytvoří potenciál pro další problémy s velikostí mezi prohlížeči a zobrazovací oblastí.

Jde však o široce používanou vlastnost ve světě vývoje CSS a vy byste se měli dobře naučit základům používání vlastnosti position.

Co je nového v CSS3

Co je nového v CSS3

Zatímco CSS2 byla jediná specifikace, CSS3 byla rozdělena do více než padesáti různých modulů, každý v jiné fázi vývoje a přijetí.

Průběžné práce na CSS3 jsou řízeny konsorciem World Wide Web Consortium nebo W3C a nabízejí centralizované umístění, kde můžete sledovat veškeré probíhající normalizační práce CSS3..

Zatímco práce na různých modulech CSS3 probíhají, mnoho modulů již má široké přijetí a mnoho webů je široce používá. Zde je deset nejdůležitějších vlastností CSS3, které již získaly široké přijetí a jsou podporovány všemi moderními prohlížeči.

  • Zatímco schopnost vytvářet jednoduché animace je možné pomocí JavaScriptu dlouhou dobu, animace CSS lze nyní vytvářet pomocí jednodušší syntaxe CSS.
  • výpočet Funkce, která je nyní k dispozici s CSS3, je velmi užitečná pro vytváření citlivých rozvržení. Lze jej použít k sčítání, odečtení, násobení nebo dělení a výsledek výpočtu se pak použije jako hodnota vlastnosti.
  • Různé pokročilé selektory byly přidány s CSS3, což umožňuje větší míru specificity při výběru prvků pro pravidla CSS.
  • Přidání přechody jako typ pozadí umožnil vývojářům CSS vytvářet působivé pozadí, které se rychle stahuje a zobrazuje.
  • Vlastnosti šířky a výšky použité na prvek neobsahují výplň, ohraničení a okraj. Výsledkem je, že výplň, okraj a ohraničení zvětšují velikost prvku za určenou šířkou a výškou. To již dlouho frustrovalo vývojáře CSS, kteří se uchýlili ke složité matematice a doladění rozložení webových stránek. S novou vlastností velikosti rámečku však lze použít rámeček hodnoty, který vynutí vycpávky, ohraničení a okraj v rámci omezení zadané šířky a výšky, čímž se zjednoduší návrh rozvržení webové stránky..
  • CSS lze použít k použití ohraničení na jakýkoli prvek HTML a pomocí vlastnosti border-image je vytváření a používání vlastního ohraničení snazší než kdykoli předtím. Syntaxe samotné nemovitosti je docela složitá, ale jakmile se dostanete na kloub, můžete rychle vytvořit jedinečná ohraničení pro jakýkoli prvek na webu.
  • Mediální dotazy určit, zda výřez zařízení používaného pro přístup k webu splňuje určité určené vlastnosti. Modul @media CSS3 je jedním z klíčových nástrojů používaných k vytváření responzivních webů. Pomocí dotazů na média může vývojář CSS vytvořit pravidla CSS, která se použijí, pouze pokud jsou splněny určité funkce médií, jako je šířka a výška výřezu a možnosti barevného zobrazení. Tímto způsobem mohou vývojáři CSS na základě výsledků dotazu na média přemístit a změnit velikost prvků nebo je všechny skrýt dohromady..
  • Použitím více pozadí vytvoření specifického efektu pozadí je s CSS3 snadnější než kdy jindy. Pomocí vlastnosti pozadí lze na jakýkoli prvek použít více obrázků na pozadí, barev a přechodů.
  • Použitím sloupce vytvořit rozvržení inspirované novinami je s vlastnostmi sloupců v CSS3 snazší než kdy dříve. Vlastnost může být použita pro snadné nastavení počtu sloupců a šířky a vytvoření kontejneru, kde obsah snadno přechází z jednoho sloupce do následujícího. Sloupce jsou také užitečné pro vytváření flexibilních navigačních nabídek.
  • 3D transformace jsou možné pomocí CSS3. Toto je složitý předmět, který zvládnete, a vy se budete dobře učit, když si přečtete o transformacích CSS a poté si projdete několik tutoriálů.

Vytváření responzivních webů pomocí CSS

Vytváření responzivních webů pomocí CSS

Existují stovky, ne-li tisíce, různých velikostí zobrazení a rozlišení zařízení, které se každý den používají pro přístup k webu, a v důsledku toho už nestačí mít jediný web v plné velikosti a jeden nebo dva návrhy pro menší zařízení..

Dnes musí být váš web viditelný na velkých obrazovkách, malých zařízeních a každé velikosti výřezu mezi nimi.

Za tímto účelem musí vaše webové stránky CSS splňovat tři principy řízení responzivního webového designu.

  • Nejprve musí být páteř nebo mřížka, která definuje vaše celkové rozvržení, tekutá.
  • Za druhé, obrázky musí automaticky měnit velikost, aby se krásně zobrazovaly na jakémkoli zařízení.
  • Zatřetí, mediální dotazy musí být použity k vyřešení bodů, kde se rozpadne původní návrh tekutiny.

Když se blíží nový projekt webového designu, mnoho zkušených návrhářů začíná s mobilní první technika. Web navržený touto technikou začíná nejjednodušším designem určeným pro nejmenší výřez a přidáním dalších stylů se roste velikost výřezu.

První mobilní metoda nabízí dvě pozoruhodné výhody:

  • Zaprvé nutí projektanta, aby identifikoval základní funkce webové stránky a použil je jako základ pro návrh webové stránky. Poměrně často webové stránky v plné velikosti obsahují obsah, jako jsou widgety, nabídky apod., Které nejsou při prohlížení na mobilním zařízení součástí webu. První mobilní přístup pomáhá zajistit, aby se hlavní účel a funkčnost webu dostaly do centra pozornosti napříč všemi velikostmi výřezu.
  • Za druhé, návštěvníci webových stránek, kteří k webu přistupují z mobilního telefonu, stahují méně pravidel CSS a zdrojů webových stránek. Pokud se celý web načítá jako první, mobilní uživatel stáhne mnohem více zdrojů, než je nutné. Přístup mobilní první načte pouze vhodné položky do mobilního zařízení, uloží některá vzácná data návštěvníka a vytvoří uplněnější zážitek z načítání stránek.

Učení reagovat design

Jedním z nejlepších způsobů, jak se naučit responzivní designové techniky, je jednoduchý praktický responzivní projekt. Vytvořením prvního responzivního designu webu získáte lepší přehled o pojmech, o nichž jsme hovořili.

S rostoucí popularitou rozvržení stylů sloupců se objevila nová výzva pro designéry webů: výzva přizpůsobit rozložení sloupců zařízením každé velikosti..

Naštěstí existují zdroje, které pomáhají začátečníkům i zkušeným vývojářům CSS naučit se pracovat s touto novou vlastností CSS v pohotovém prostředí.

Dalším skvělým způsobem, jak začít pochopit, jak se nejlepší vývojáři CSS přizpůsobují webům, je podívat se na responzivní web v různých velikostech vedle sebe. Media Queries je jeden web, na kterém můžete vidět stovky responzivních návrhů webových stránek v různých velikostech na jedné obrazovce.

Jak vyrobit tlačítka posuvných dveří

Jak vyrobit tlačítka posuvných dveří

Pouhým použitím CSS můžete vytvářet skvěle vypadající a výkonná tlačítka. S trochou jQuery můžete udělat ještě více.

Níže vám ukážeme, jak pořídit jednoduché obrázky tlačítek a nastavit je tak, aby se na vašem webu použily jako přepínatelná tlačítka všech velikostí. Nakonec vytvoříte kód opakovaně použitelných tlačítek, který můžete použít ke generování podobných tlačítek.

Kliknutím na obrázek přepnete animaci.

Tlačítka posuvných dveří Příklad 1

Vytváření obrázků

Technika, kterou použijeme k vytvoření těchto tlačítek, se nazývá CSS s posuvnými dveřmi. K nastavení těchto tlačítek potřebujeme pro každou verzi tlačítka dva obrázky – v našem případě dva obrázky černého tlačítka a dva obrázky modrého tlačítka, celkem čtyři obrázky.

Pro vytvoření těchto obrázků začneme solidními tlačítky.

Modré tlačítko
Černé tlačítko

Musíme rozdělit každé tlačítko na dva obrázky:

  • Obraz na levé straně bude co nejužší a bude stále zachycovat celý poloměr rohů tlačítka.
  • Pravý obrázek bude co nejširší, ve skutečnosti budeme chtít použít program pro manipulaci s obrázkem, abychom několikrát zkopírovali tělo tlačítka, abychom s ním mohli vytvořit opravdu dlouhá tlačítka..

Zde jsou obrázky, se kterými skončíme po jejich rozřezání na vhodné velikosti:

Modré tlačítko vlevoModré tlačítko vpravoModré tlačítko vpravo
Černé tlačítko vlevoČerné tlačítko vpravoČerné tlačítko vpravo

Jakmile budou vytvořeny všechny čtyři obrázky, můžete začít kódovat.

Tlačítko HTML

Naše tlačítko HTML se bude skládat ze tří komponent: vnější obal div, kotevní prvek a prvek rozpětí.

Tlačítko Text

Ve výše uvedeném bloku kódu jsou všechny tři prvky rozděleny do samostatných řádků, takže můžete snáze vidět, co se děje.

V praxi je však pravděpodobně budete chtít udržovat všechny vložené, zvláště pokud používáte systém pro správu obsahu (CMS), jako je WordPress, který vloží značky odstavců po každém přerušení řádku.

Přidání obrázků tlačítka

Pokud nyní vykreslíte trochu HTML z výše uvedeného příkladu, dostanete pouze odkaz, který říká „Text tlačítka“. Dalším krokem, který budeme chtít udělat, je přidat obrázek tlačítka do našeho kódu.

Než to však uděláme, přidáme trochu vnějšího obalu do vnějšího obalu div, abychom mohli vidět, co se děje trochu jasněji.

.posuvné tlačítko {
display: inline-block;
šířka: auto;
okraj: 20px;
}

Tento kousek kódu jednoduše přidá nějaké místo kolem našeho tlačítka a vynutí obsahující div, aby se zmenšil na velikost odkazu a textu. Nyní jsme připraveni přidat naše obrázky tlačítek.

.posuvný odkaz {
background-image: url (‘blue-button-right.png’);
background-size: auto 100%;
Pozice na pozadí: vpravo;
pozadí-opakování: ne-opakování;
}
.posuvný text {
background-image: url (‘blue-button-left.png’);
background-size: auto 100%;
Pozice na pozadí: vlevo;
pozadí-opakování: ne-opakování;
}

Nyní jsme přidali náš obrázek tlačítka. Bohužel zatím není moc na co se podívat. Pokud se také přiblížíte a podíváte se pozorně, všimnete si, že obrázek vlevo je ve skutečnosti jen nahoře na obrázku vpravo. Ne účinek, o který usilujeme.

Špatné tlačítko

Styl tlačítka

Pojďme přidat trochu textu kolem textu. Díky tomu bude naše tlačítko vypadat spíš jako tlačítko. Kromě toho musíme změnit zobrazení prvků rozpětí a kotvy na vložený blok, aby oba tyto prvky reagovaly na výplň a okraje tak, jak chceme..

.posuvný odkaz {
display: inline-block;
}
.posuvný text {
čalounění: 20px;
display: inline-block;
}

Tento kód dá našemu tlačítku určitou velikost. Stále však máme problém s překrýváním mezi levým a pravým obrázkem. Co potřebujeme udělat, je použít okraj k posunutí pravého obrázku o trochu doprava a pak použít stejný negativní okraj na levý obrázek.

.posuvný odkaz {
levý okraj: 17px;
}
.posuvný text {
levý okraj: -17px;
}

Hodnota 17 pixelů je použitelná pro naše konkrétní obrázky tlačítek. Pokud používáte různé obrázky, budete muset tuto hodnotu doladit pokusem a omylem, dokud tlačítko nebude vypadat správně..

Než se pustíme do toho, pojďme také do textu tlačítka přidat styling.

.posuvný text {
barva: #fff;
velikost písma: 14pt;
rodina fontů: ‘Open-Sans’, Arial, sans-serif;
textová transformace: velká písmena;
font-weight: bold;
zarovnání textu: střed;
}

V tomto okamžiku vypadá naše tlačítko jako tlačítko!

Dobré tlačítko

Efekt přechodu na tlačítko

Pokud nyní umístíte kurzor myši na tlačítko, není vizuální indikace, že je myš nad tlačítkem. Opravme to přidáním efektu přechodu.

.sliding-text: hover, .sliding-text: active {
stín stínu: vložení 0 0 0 1 000 pixelů rgba (255 255 255, .2);
}

I když to jistě funguje, je to trochu drsné. Zaprvé, efekt přechodu vznášedlem přechází dovnitř a ven příliš tvrdě. Zadruhé, pokud umístíte tlačítko na tmavém pozadí, všimnete si, že efekt přechodu přesahuje zaoblené rohy tlačítka.

Oba tyto problémy můžeme vyřešit pomocí několika řádků kódu přidaných do prvku rozpětí.

.posuvný text {
-vlastnost webkit-transition: box-shadow; / * Safari * /
-doba trvání přechodu webkitu: .2s; / * Safari * /
vlastnost-transition: box-shadow;
doba přechodu: .2s;
poloměr ohraničení: 12px;
}

Nyní se náš vznášející efekt přechází dovnitř a ven v průběhu dvou setin sekundy – malé uvolnění, ale natolik, aby se přechod cítil hladce. Za druhé, pravidlo o poloměru okraje zaokrouhlí rohy efektu přechodu, aby se vešly na obrázek.

Všimněte si, že hodnota 12 pixelů, kterou jsme použili pro poloměr ohraničení, je specifická pro náš obrázek tlačítka. Pokud používáte jiný obrázek, musíte tuto hodnotu doladit.

Přepínání obrázků tlačítek

Právě teď můžeme přidat atribut URL kotevního prvku href a naše tlačítka budou skvěle fungovat jako odkazy. V horní části tohoto příspěvku však byl gif, který prokázal přepínací efekt, který změnil obrázek tlačítka. Pojďme nyní projít procesem vytváření přepínacích tlačítek.

Nejprve musíme do tlačítek přidat nový obrázek. Postupujeme tak, že přidáme obrázky tlačítek do nové třídy a poté pomocí tlačítka jQuery přepínáte třídu po kliknutí na tlačítko.

Začněme s CSS.

.aktuální tlačítko .sliding-link {
background-image: url (‘black-button-right.png’);
}
.aktuální tlačítko .sliding-text {
background-image: url (‘black-button-left.png’);
}

Momentálně přepínací efekt nefunguje. Pokud však ručně přidáte tlačítko aktuální třídy do oddílu div kontejneru s tlačítky, zobrazí se druhá verze tlačítka.

Chcete-li přepínat mezi dvěma verzemi tlačítka po kliknutí, budete muset pomocí tlačítka jQuery zapnout a vypnout aktuální třídu tlačítka pro tlačítko.

Než to však uděláme, musíme se rozhodnout, která tlačítka chceme přepínat. Můžeme to udělat přidáním třídy do všech tlačítek, která chceme použít jako přepínací tlačítka. K tomuto účelu použijeme přepínací tlačítko třídy.

Abychom označili jakékoli tlačítko jako přepínací tlačítko, přidali bychom tuto třídu do vnějšího obalu div:

Nyní můžeme pomocí jQuery zapnout a vypnout třídu aktuálního tlačítka pro toto tlačítko.

$ (‘. přepínací tlačítko’). click (function () {
$ (this) .toggleClass (‘aktuální tlačítko’);
návrat false;
});

V tomto kódu se děje několik věcí. Pojďme to projít.

Nejprve načteme jQuery z knihoven hostovaných společností Google. Pokud váš web již používá jQuery, můžete vynechat první element skriptu.

Druhý element skriptu obsahuje jednoduchou funkci jQuery.

Funkce sleduje jakýkoli prvek pomocí přepínače třídy. Po kliknutí na libovolný prvek s touto třídou se spustí funkce, která zapíná nebo vypíná aktuální tlačítko třídy pro kliknutý prvek..

Nakonec funkce vrátí hodnotu false, která zabrání výchozímu chování odkazu, kterým je znovu načíst stránku, protože náš atribut kotevního prvku href bude na přepínacím tlačítku prázdný.

Po přidání těchto bitů kódu můžeme přepnout tlačítko na obsah našeho srdce.

Kliknutím na obrázek přepnete animaci.

Tlačítko posuvných dveří Příklad 2

Celý zdrojový kód

Pokud jste postupovali krok za krokem, vytvořili jste pro tato tlačítka plnou verzi zdrojového kódu. Pokud jste se však nedohodli, můžete celý zdrojový kód tlačítka v tomto tutoriálu uchopit zkopírováním níže uvedeného kódu do HTML dokumentu.

Tlačítka posuvných dveří

.posuvné tlačítko {
display: inline-block;
šířka: auto;
okraj: 20px;
}
.posuvný odkaz {
background-image: url (‘blue-button-right.png’);
background-size: auto 100%;
Pozice na pozadí: vpravo;
pozadí-opakování: ne-opakování;
display: inline-block;
levý okraj: 17px;
}
.posuvný text {
background-image: url (‘blue-button-left.png’);
background-size: auto 100%;
Pozice na pozadí: vlevo;
pozadí-opakování: ne-opakování;
display: inline-block;
čalounění: 20px;
levý okraj: -17px;
barva: #fff;
velikost písma: 14pt;
rodina fontů: ‘Open-Sans’, Arial, sans-serif;
textová transformace: velká písmena;
font-weight: bold;
zarovnání textu: střed;
-vlastnost webkit-transition: box-shadow; / * Safari * /
-doba trvání přechodu webkitu: .2s; / * Safari * /
vlastnost-transition: box-shadow;
doba přechodu: .2s;
poloměr ohraničení: 12px;
}
.sliding-text: hover, .sliding-text: active {
stín stínu: vložení 0 0 0 1 000 pixelů rgba (255 255 255, .2);
}
.aktuální tlačítko .sliding-link {
background-image: url (‘black-button-right.png’);
}
.aktuální tlačítko .sliding-text {
background-image: url (‘black-button-left.png’);
}


Přepínací tlačítko

Tlačítko propojení

$ (‘. přepínací tlačítko’). click (function () {
$ (this) .toggleClass (‘aktuální tlačítko’);
návrat false;
});

Dobré použití tlačítka

Poslední kousek skládačky je správně využít nová tlačítka. Zde je několik nápadů, jak začít:

  • Přidejte URL k atributu kotevního prvku href a pomocí tlačítka propojte libovolnou webovou stránku. Uvědomte si, že k tomu budete chtít vynechat třídu přepínacích tlačítek z ovinovacího tlačítka.
  • Použijte další jQuery nebo JavaScript k zobrazení nebo skrytí dalších informací, když je tlačítko přepnuto.
  • Pokud se opravdu cítíte ambiciózní, použijte tlačítka pro navigaci na webu a pomocí jQuery určete, zda se aktuální stránka shoduje s adresou URL tlačítka, a přepněte třídu aktuálního tlačítka, pokud se obě shodují.

Vše o barvách CSS

Vše o barvách CSS

Jednou z nejdůležitějších – a potenciálně matoucí – věcí, kterou lze specifikovat pomocí CSS, je barva. Téměř všechny prvky na webové stránce lze obarvit pomocí CSS.

Vlastnosti barev CSS

Jedním z detailů, který často objevuje nové front-end vývojáře, je vlastnost CSS color. To, že je matoucí, je to, že barva neovládá samotný prvek, ale text uvnitř prvku.

Barva samotného prvku (pole) bude obvykle řízena barvou pozadí, barvou ohraničení nebo zkratkou na pozadí a ohraničením, které obsahují informace o barvě. Barvu můžete také nastavit na stín pole.

Barva pozadí prvku obvykle pokrývá jeho obsah, výplň a okrajovou oblast. Toto je obvyklé chování představované tvůrci standardu CSS. Existují však způsoby, jak nastavit výplň a obsah na různé barvy.

Barevná prohlášení

Kromě různých vlastností CSS, které lze použít k určení barvy, existují tři různé způsoby identifikace barvy v CSS: RGB, hexadecimální hodnota nebo název.

/ * Všechny tři budou stejné barvy. * /

.red-rgb {
barva pozadí: rgb (255, 0, 0);
}

.červeno-hex {
barva pozadí: # ff0000;
}

.červené jméno {
barva pozadí: červená;
}

Druhá (hexadecimální hodnota) je nejběžnější, ale začneme RGB, protože hexadecimální hodnoty nedávají smysl, pokud nerozumíte, jak RGB funguje.

Hodnoty RGB

Počítačové monitory, televizní obrazovky a další podobné displeje mají pixely. Na barevných displejích je každý pixel rozdělen do tří dílčích pixelů: červený, zelený a modrý.

Jedná se o tzv. „Primární barvy světla“. Kombinace těchto tří barev s různou intenzitou může být použita k vytvoření jakékoli barvy, kterou je lidské oko schopno vidět. Toto je známé jako „aditivní míchání barev“.

(Stojí za to vědět, že to má co do činění s lidským okem, a nikoli se samotným světlem.)

Různé obrazovky displeje mají různé schopnosti, pokud jde o rozsah intenzit, které mohou jednotlivé dílčí pixely produkovat. Velmi jednoduchý displej může mít pouze dvě intenzity pro každou barvu (vypnuto nebo zapnuto), zatímco velmi kvalitní displej může mít mnohem více gradací.

Počítače standardně používají rozsah od nuly (0 – úplně mimo) až 255 (po celou dobu) pro každý dílčí pixel (například 128 je v polovině cesty). Toto je 256 možných intenzit pro každý dílčí pixel, což znamená, že hodnota každého dílčího pixelu může být uložena jako 8bitový bajt (28 = 256).

Protože existují tři barvy, z nichž každá je reprezentována 8 bity, celkový počet barev, které lze takto reprezentovat, je více než 16 milionů (256 3 = 16 777 216)..

Tento rozsah barev lze reprezentovat pouhým zaznamenáním hodnoty každého dílčího pixelu, například takto:

rgb (0, 128, 255)

V tomto příkladu je červený dílčí pixel úplně pryč, zelený dílčí pixel je na polovině cesty a modrý dílčí pixel je úplně zapnutý. Tato barva vypadá takto:

V tomto systému je bílá (všechny barvy po celou dobu) rgb (255, 255, 255) a černá (všechny barvy vypnuté) je rgb (0, 0, 0).

Barvy RGB lze také zadat v procentech, s použitím desetinné tečky s jedinou koncovou číslicí:

rgb (0,0, 50,0, 100,0)

Toto použití není příliš běžné.

Hexové hodnoty

Kompaktnější způsob psaní stejných přesných informací je použití hex hodnot. Hodnota hexadecimální barvy se zapisuje znakem hash (libra) následovaným šesti hexadecimálními znaky ve třech párech:

# 0080ff

První pár představuje červenou hodnotu, druhý pár představuje zelenou hodnotu a třetí pár představuje modrou hodnotu. V tomto příkladu 00 znamená vůbec žádnou červenou, 80 znamená zelenou na půl cesty a ff znamená modrou celou. Toto je stejná barva jako rgb (0, 128, 255).

To se může zdát trochu matoucí, pokud nepoužíváte hexadecimální čísla. V našem normálním desetinném systému může mít každá číslice 10 hodnot (0-9). Při hexadecimálním číslování má každá číslice 16 možných hodnot (0-9, a-f).

To umožňuje reprezentovat všechny hodnoty od 0 do 255 dvěma číslicemi, 0-ff. Další informace naleznete v tomto šestnáctkovém průvodci.

V tomto systému je bílá #ffffff a černá je # 000000.

Hexové hodnoty barev jsou nejčastějším způsobem určování barev v CSS.

Barevné názvy CSS

Posledním způsobem, jak určit konkrétní barvu, je použít jeden z předdefinovaných názvů barev. W3C udržuje a příležitostně aktualizuje seznam oficiálních názvů barev, které lze použít místo číslovaných barevných kódů. Například lze použít černou místo # 000000.

V prvních dnech webu pomohly tyto pojmenované barvy definovat malou neoficiální sadu „webových bezpečných barev“, které byly dobře podporovány ve většině prohlížečů a zobrazovacích obrazovek..

Největší výhodou dnešních barevných názvů je, že se snadněji zapamatují. Například, lightblue je snadnější zapamatovat (a psát správně) než jeho ekvivalenty, # add8e6 nebo rgb (173, 216, 230).

Seznam barevných jmen CSS

Název barvy
Hexové hodnoty
Příklad barvy
aliceblue# f0f8ff
starožitnost# faebd7
aqua# 00ffff
akvamarín# 7fffd4
blankyt# f0ffff
béžový# f5f5dc
bisque# ffe4c4
Černá# 000000
blanchedalmond# ffe4c4
modrý# 0000ff
blueviolet# 8a2be2
hnědý# a52a2a
burlywood# deb887
cadetblue# 5f9ea0
chartreuse# 7fff00
čokoláda# d2691e
korál# ff7f50
chrpy# 6495ed
cornsilk# fff8dc
karmínový# dc143c
tmavě modrá# 00008b
darkcyan# 008b8b
darkgoldenrod# b8860b
tmavě šedá# a9a9a9
tmavozelený# 006400
tmavošedý# a9a9a9
darkkhaki# bdb76b
darkmagenta# 8b008b
darkolivegreen# 556b2f
darkorange# ff8c00
darkorchid# 9932cc
tmavě červená# 8b0000
darksalmon# e9967a
darkseagreen# 8fbc8f
darkslateblue# 483d8b
darkslategray# 2f4f4f
darkslategrey# 2f4f4f
temné světlo# 00ced1
darkviolet# 9400d3
sytě růžová# ff1493
deepskyblue# 00bfff
dimgray# 696969
dimgrey# 696969
dodgerblue# 1e90ff
ohnivá cihla# b22222
květinový# fffaf0
lesní zeleň# 228b22
fuchsie# ff00ff
gainsboro#dcdcdc
strašidelný# f8f8ff
zlato# ffd700
Goldenrod# daa520
šedá# 808080
zelený# 008000
zelená žlutá# adff2f
Šedá# 808080
medovice# f0fff0
hotpink# ff69b4
indianred# cd5c5c
indigo# 4b0082
slonová kost# fffff0
khaki# f0e68c
levandule# e6e6fa
levandule# fff0f5
trávník# 7cfc00
citrón#fffacd
světle modrá# add8e6
lightcoral# f08080
lightcyan# e0ffff
lightgoldenrodyellow# fafad2
světle šedá# d3d3d3
světle zelená# 90ee90
světle šedá# d3d3d3
světle růžová# ffb6c1
lightsalmon# ffa07a
lightseagreen# 20b2aa
lightskyblue# 87cefa
lightslategray# 778899
světelného světla# 778899
lightsteelblue# b0c4de
světle žlutá# ffffe0
Limetka# 00ff00
Limetkově zelená# 32cd32
prádlo# faf0e6
kaštanová# 800000
mediumaquamarine# 66cdaa
mediumblue# 0000cd
mediumorchid# ba55d3
středně fialová# 9370 dB
střednězelená# 3cb371
mediumslateblue# 7b68ee
středněprstý# 00fa9a
střednědobý# 48d1cc
středněvelká# c71585
půlnoční modrá# 191970
mintcream# f5fffa
mistyrose# ffe4e1
mokasín# ffe4b5
navajowhite#ffdead
námořnictvo# 000080
Oldlace# fdf5e6
olivový# 808000
olivedrab# 6b8e23
oranžový# ffa500
oranžová červená# ff4500
orchidej# da70d6
palegoldenrod# eee8aa
světlezelená# 98fb98
paleturquoise#afeeee
palevioletred# db7093
papayawhip# ffefd5
broskev# ffdab9
Peru# cd853f
růžový# ffc0cb
švestka# dda0dd
Modrý prášek# b0e0e6
nachový# 800080
rebeccapurple# 663399
Červené# ff0000
rosybrown# bc8f8f
královská modrá# 4169e1
sedlo hnědá# 8b4513
losos# fa8072
písek# f4a460
zelené moře# 2e8b57
mušle# fff5ee
sienna# a0522d
stříbrný# c0c0c0
modrá obloha# 87ceeb
slateblue# 6a5acd
slategray# 708090
šedá břidlice# 708090
sníh#fffafa
springgreen# 00ff7f
steelblue# 4682b4
opálení# d2b48c
šedozelená# 008080
bodlák# d8bfd8
rajče# ff6347
tyrkysový# 40e0d0
fialový# ee82ee
pšenice# f5deb3
bílý#ffffff
bílý kouř# f5f5f5
žlutá# ffff00
žluto zelená# 9acd32

Další zdroje barev CSS

  • Stručný průvodce CSS od W3Schools je rychlý přehled tématu s dalšími příklady.
  • CSS Color Converter je online nástroj, který převezme jakýkoli barevný formát a převede jej na všechny ostatní, plus poskytuje možné volby palety barev.
  • CSS Color Reference od Mozilla Developer Network je jedním z nejlepších míst, kde můžete získat informace o různých barevných standardech a specifikacích.
  • Barvy, pozadí a přechody: Přidání individuality pomocí CSS (2015), Eric A Meyer, je skvělá kniha, která podrobně popisuje barvy CSS..

Efektivní psaní CSS

Efektivní psaní CSS

Psaní efektivního CSS je neuvěřitelně důležité. Dnešní uživatelé internetu mají velmi krátkou pozornost, takže čím déle se váš web načítá, tím vyšší je šance, že se dotknou tlačítka Zpět.

Pokud stavíte jednoduchý web, na efektivním CSS to tak moc nezáleží. Tyto webové stránky jsou však stále vzácnější. Pokud stavíte velké a složité stránky, měli byste se zajímat o efektivitu vašeho CSS.

Níže uvádíme, proč je efektivní CSS důležitý, jak psát účinnější selektory, a nabízíme některé nástroje, které vám mohou dále optimalizovat váš kód..

Proč efektivní CSS záležitosti

Nezohlednění účinnosti CSS při psaní kódu může vážně poškodit celkový výkon vaší stránky. A poslední věcí, kterou chcete, je mít web s pomalým načítáním.

Vaším cílem je co nejjednodušší vykreslení kódu v prohlížeči – dokonce i prohlížeče, které běží méně efektivně.

Byly vzneseny argumenty, že není úkolem autora starat se o optimalizaci selektorů, měl by to být kód motoru, který sestavuje kód. I když je to do jisté míry pravda, ne každý uživatel bude používat moderní prohlížeč.

Stále existují uživatelé po celém světě, kteří mají přístup pouze ke starším počítačům a prohlížečům. Nenáviděli byste tyto uživatele potrestat jen proto, že nemají přístup k nejnovějším technologiím. Možná se to časem změní.

Ale mít na paměti své uživatele, když píšete kód, je vždy dobrý nápad.

Selektory jsou nejdůležitější

Jedním z nejdůležitějších aspektů psaní efektivního CSS je porozumění tomu, jak jej prohlížeče čtou a kompilují. Velká věc, kterou je třeba pochopit, je, že čtou zprava doleva.

Začíná voličem klíčů a pohybuje se doleva, aby hledal předky v selektoru pravidla. Poté bude pokračovat v pohybu doleva, dokud nebude pravidlo dokončeno, nebo bude mít za následek nesoulad.

Pokud tedy váš kód čte ul > li a img, pak první věc, která bude interpretována, je img.

Selektor klíčů je poslední část, kterou jsme přiřadili na konec selektoru.

Čtyři typy CSS selektorů

Existují čtyři hlavní typy selektorů CSS, které musíte znát a používat správnou cestu, aby byl váš kód CSS efektivní. Níže uvedené selektory jsou seřazeny z hlediska jejich účinnosti. Ti nahoře jsou nejúčinnější a nejméně dole.

Selektor ID

Selektor ID odkazuje na konkrétní prvek HTML pomocí atributu ID a vypadá takto:

# main-navigation

V HTML by to bylo použito takto:

Výběr třídy

Selektor třídy vybere prvky v rámci specifického přiřazení třídy a vypadá takto:

.centrum

V HTML by to bylo použito takto:

Selektor značek

Selektory značek jsou méně účinné než ID a třídy, takže by se měly používat střídmě. Za správných okolností však mohou být efektivní. Selektory značek obecně vypadají takto:

ul

V HTML bude značka jednoduše stylizována podle diktátu CSS, kdykoli je značka použita (ul v tomto případě).

Univerzální selektor

Univerzální selektor lze použít na jakýkoli prvek v dokumentu. Chcete-li psát efektivní CSS, měli byste se vyhnout používání univerzálního selektoru, kdykoli je to možné. Univerzální selektor je označen takto:

*

Efektivní pravidla CSS, která si musíte pamatovat

Je třeba mít na paměti několik klíčových pravidel, která vám pomohou psát účinnější CSS. Přijetím těchto pravidel k srdci se váš kód CSS načte mnohem rychleji a bude fungovat lépe ve všech webových prohlížečích v okolí.

Nepoužívejte potomky

Potomek selektor jsou libovolné dva selektory, které nejsou odděleny kombinátorem. Selektor potomků je nejméně účinný selektor a může mít skutečně negativní dopad na výkon.

Příkladem potomků, které byste neměli používat, patří:

záhlaví h3

zápatí str

.tělo div

Neznačujte ID

Protože ID mohou odkazovat pouze na jediný prvek, nemá smysl je kvalifikovat pomocí konkrétní značky, s níž budou použity. Například,

li # left-navigation

Není nutné sdělit prohlížeči, na jakou značku bude selektor aplikován. Místo toho je to efektivnější:

# left-navigation

Všimněte si, že to samé platí pro třídy, ale v menší míře. Ani nekvalifikujte třídy.

Používejte dědičnost CSS co nejvíce

Dědičnost majetku je důležitou věcí, kterou zvládnout. Zjistěte, které vlastnosti budou předávány z jednoho prvku na druhý, a nechte je dělat svou práci.

Například se zdědí velikost písma. Pokud jej tedy nastavíte pro tělo dokumentu, není nutné jej nastavovat pro značky p a li.

Omezte svá pravidla

Přidání příliš mnoha pravidel ke značkám zpomalí váš kód CSS a značně zkomplikuje proces přiřazování.

Například

tělo .widget-left #widget

Toto je špatný kód. Jen se toho moc děje. Na druhou stranu:

#widget

.widget-left

Jsou mnohem efektivnější.

Implementace výše uvedených tipů pomůže zefektivnit váš kód CSS. Pokud chcete otestovat svůj kód nebo najít ještě více způsobů, jak jej zefektivnit, podívejte se na některé z níže zvýrazněných nástrojů.

Nástroje pro vylepšení vašeho CSS

Pokud budete mít na paměti výše uvedená pravidla, bude váš kód CSS mnohem efektivnější.

Pokud však ještě hledáte optimalizaci kódu CSS, existují nástroje, které vám tam pomohou. Níže uvádíme několik nástrojů, které vám pomohou zkomprimovat váš CSS, definovat selektory a dokonce pro vás vytvořit vaše ID.

  • Stresové testování CSS: je to skvělé v tom, že na vašem webu provádí mikroúpravy, jako je posouvání, přibližování, změna velikosti a další. A to vše za méně než 30 sekund. Poté vám pošle zprávu o účinnosti vašeho CSS.
  • Definování ID CSS: zavaděč CSS webového balíčku je velmi užitečným nástrojem. Může vám pomoci určit třídy a ID a může vám dokonce pomoci s optimalizací CSS.
  • Omezte své selektory CSS: zobrazí všechny aktuálně vybrané selektory CSS, které používají selektory prvků. To vám umožní snížit počet používaných selektorů, takže můžete snížit celkové zatížení paměti. Pomocí tohoto nástroje můžete připojit libovolnou adresu URL, takže můžete studovat i jiné weby.
  • Zmenšit kód CSS: zmenší váš stávající kód CSS. Čím méně kódu musíte kompilovat, tím lépe. Poskytuje screenshot „před“ a „po“, takže můžete vidět změny, které tento nástroj provedl.
  • Komprimujte soubory CSS: gzipování souborů CSS vám pomůže vyčistit je. Může tak pomoci snížit celkovou velikost odpovědi HTTP a tím i dobu odezvy serveru.

Psaní efektivního CSS je dobrý nápad

Je na vás, zda se rozhodnete optimalizovat svůj CSS. U dnešních moderních prohlížečů to není úplně nutné. Pokud však vytváříte složitý web, vyplatí se to.

A co víc, stále můžete mít uživatele, kteří mají starší nastavení, a je také chytrý nápad vyhovět jejich potřebám. Doufejme, že tato sekce vám pomůže právě to a napsat účinnější CSS.

Master CSS online

Master CSS online

Existuje mnoho míst online, kde můžete sledovat videa, kompletní návody a dokonce i kód v prohlížeči, když se učíte CSS. Přestože jsou k dispozici desítky, ne-li stovky zdrojů, zde je několik našich oblíbených bezplatných míst, kde se dozvíte o CSS.

Pokud jste v CSS opravdu novým, Neboj se internetu je video série pro začátečníky, která představuje CSS i HTML. Pokud začínáte od nuly, jedná se o dobře vyrobenou řadu, která nezastrašuje ty, kteří se právě vydávají na cestu, aby se naučili CSS.

Pokud jste nikdy nenapsali šablonu stylů, dobré místo pro psaní prvního je Výukový program CSS poskytovaný konsorciem World Wide Web (W3C). Tento tutoriál neposkytuje mnoho vysvětlení, takže pokud jste praktický student, může to být ideální místo, kde začít.

Psaní HTML a CSS vyžaduje použití textového editoru, ukládání souborů se správným formátováním a záhlavími a prohlížení práce pomocí prohlížeče. Pokud byste raději procházeli programem, který vám umožní upravovat soubory přímo v prohlížeči, Codecademy je přesně to, co hledáte.

Dalším zdrojem, který pokrývá téměř stejnou oblast jako Codecademy, ale který vyžaduje, abyste se naučili, jak používat textový editor a jak ukládat soubory ve správném formátu, je Naučte se kódovat HTML a CSS od Shay Howe. Jakmile zvládnete základy, je k dispozici také pokročilý program.

Řízení rozvržení stránky je jedním z nejzávažnějších a nejdůležitějších úkolů, které se CSS provádějí. Pokud máte potíže s ovládáním rozvržení, tutoriál od Naučte se rozvržení je přesně to, co potřebujete.

Síť Mozilla pro vývojáře nabízí kurz CSS, který pokrývá všechny základní funkce CSS způsobem, který vás připraví na přechod na náročnější témata.

Pokud chcete solidní základ, ze kterého se můžete stát plnohodnotným vývojářem CSS, můžete udělat mnohem horší než tutoriál MDS CSS.

A konečně, žádný seznam zdrojů by nebyl úplný bez uvedení organizace, která řídí vývoj CSS.

I když rozhodně nejjednodušší návod v tomto seznamu, je komplexní a podrobný. Pokud je vaším cílem naučit se trochu CSS, nejedná se o tutoriál pro vás, ale pokud se vydáváte na cestu stát se plnohodnotným vývojářem CSS, je to dobrý návod, jak se dostat pod pás.

Inspirace designu

Úžasná díla CSS

Pokud hledáte inspiraci pro design, nebo chcete získat lepší představu o tom, co může CSS udělat, zde je několik míst, kde si můžete prohlédnout představená díla CSS.

  • Creative Bloq sestavil tento kurátorský seznam dvaceti dvou působivých animací CSS. Při jejich prohlížení mějte na paměti, že mnoho z těchto animací kromě CSS využívá i JavaScript.
  • Ocenění CSS Design Awards vytvořilo tento seznam deseti animací s ukázkami a návody, abyste mohli aplikovat koncepty na své vlastní projekty.
  • MDN DemoStudio je místo, kde si můžete prohlédnout stovky dem ukázek CSS seřazených podle popularity, počtu zhlédnutí, stavu trendů, nebo nejprve zobrazit nejnovější dema.
  • Mnoho animací vybraných pro předchozí seznamy jsou hostovány u Code Pen a přímo na pera vám umožní přístup k obrovskému množství působivých animací vytvořených pomocí HTML, CSS a JavaScript..
  • Pokud jste viděli všechny fantastické animace, které vás zajímají, a místo toho chcete vidět, jak lze CSS použít k úplné změně celého webu bez provedení jedné změny HTML, podívejte se na tyto elegantní návrhy webových stránek, které zdůrazňují sílu CSS.

Oficiální slovo na CSS3

Oficiální slovo na CSS3

W3C je organizace, která řídí vývoj webových standardů, včetně modulů CSS3. Když se učíte CSS a vylepšujete své dovednosti, měli byste se seznámit s W3C a technickou dokumentací, kterou nabízejí.

Domovská stránka W3C CSS je spouštěcí platformou pro všechny věci CSS na W3C. Na této stránce najdete informace o probíhajících standardních vývojových pracích.

Doporučené čtení

Doporučené čtení

Jedním z nejúčinnějších způsobů, jak rozvinout hlubší porozumění a odborné znalosti s CSS3, je použít více zdrojů a metod výuky.

Pokud jste vyzkoušeli tutoriál nebo dva a chcete vyzkoušet další metodu, nebo pokud raději pracujete z psaného textu, zde je několik nejlepších textů CSS na trhu:

  • CSS3 pro webové designéry (2010), autor: Dan Cedarholm: S předmluvou Jeffreyho Zeldmana, zakladatele A List Apart, a potvrzeních od Chris Coyier z CSS-Tricks a Eric Meyer, autor několika knih o CSS, tento text od Dan Cedarholm, spoluzakladatel Dribbble, je zlatým standardem pro texty CSS3.
  • HTML a CSS: Design a Build Websites (2011), Jon Duckett: Tyto texty zahrnují HTML i CSS a jsou jedním z nejpopulárnějších a respektovaných úvodů k oběma tématům.
  • Učte se CSS za jeden den a učte se dobře (2015), Jamie Chan: Pokud jste začátečník v CSS a chcete se rychle dostat na základy, tato kniha je pro vás.
  • CSS: The Missing Manual (2015), David Sawyer McFarland: Tento text není zaměřen čistě na začátečníky, nýbrž zahrnuje pokročilá témata, jako je Flexbox a použití Sassu. Pokud jste připraveni na další úroveň od stavu začátečníka, tento text vám tam pomůže.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map