Štýl CSS, ak vezmeme samotnú definíciu, je jazyk na popis vzhľadu dokumentu. To znamená, že HTML je zodpovedné za štruktúru stránky a šablóna so štýlmi CSS je zodpovedná za celý dizajn. Zhromaždil som tu informácie, ktoré vám umožnia voľne používať šablónu štýlov. Nebudem písať o tom, ako je potrebné to poznať, pretože je jasné, že bez toho stránku do viac-menej normálneho vzhľadu nedostanete. Ak sa niekto práve začína učiť štýly CSS, potom tieto materiály stačia na to, aby sa začal učiť CSS.
Aby ste získali štruktúrované znalosti a čo najefektívnejšie aplikovali HTML + CSS + JS pre svoje projekty a pre projekty zákazníkov, musíte sa pravidelne vzdelávať a udržiavať si svoju úroveň.
Ale je dobré mať základ. Mnohí, ktorí sa učia sami, uniknú mnohým základným veciam a klienti potom trpia a človek nechápe, prečo je nespokojný.
Aby sa predišlo takýmto situáciám, je potrebné získať základné zručnosti v správnom poradí. Ak vytvárate webové stránky a chcete v tomto rásť ďalej, potom odporúčam zamerať sa na vzdelávanie v online školách.
Nezaberie vám to čas z hlavného zamestnania, ale s pomocou učiteľov, ktorým môžete položiť otázku, veľmi rýchlo porastiete.
Jednou z týchto online škôl je Netológia a páčil sa mi kurz „“, ako alternatíva z inej školy Skillbox aj vzdelávací kurz „“. Pozorne si ich preštudujte a hlavne učitelia, ktorí tento kurz vyučujú.
1. Základné veci
Začnem od úplných základov. Keď som založil túto stránku, napísal som malý návod na učenie sa šablón CSS štýlov. Lekcie sú vhodné ako pre začínajúcich, tak aj pre tých, ktorí už vedia niečo na osvieženie vedomostí. Tam je všetko zarámované do obrázkov a na reálnych príkladoch.
Malá odbočka: keď som sám začal študovať tému budovania stránok, naučil som sa takmer všetky HTML tagy a veľmi ma nenadchli. Ale potom, čo som sa začal učiť šablónu so štýlmi CSS a skúšal každú z vlastností, sa mi to tak páčilo (nevytvoril by som, keby sa mi to nepáčilo). Videl som, že len pomocou CSS sa dajú robiť úžasné veci. Nie je to programovací jazyk, ktorého učenie trvá mesiace. Štýlový list je možné zvládnuť za jeden (maximálne dva) týždne.
Samozrejme, absolútne všetky vlastnosti a ich hodnoty sa nenaučíte a ani nemusíte! Stačí poznať základy, aby ste ho mohli začať aplikovať a využívať vo svojich projektoch. Jednou z dôležitých nuancií je, že vlastnosť, ktorú ste sa práve naučili, musíte OKAMŽITE aplikovať na skutočný príklad. Nech je to vaša vlastná stránka alebo jednoduchá HTML stránka – na tom nezáleží. Je dôležité, aby ste sa pokúsili písať vlastnými rukami a videli výsledok.
Na svojej stránke mám veľa príkladov, ktoré používajú CSS. Len a spolu obsahuje viac ako 100 lekcií! Keď budete vedieť aspoň základy, potom môžete pokojne meniť a aplikovať všetky príklady z lekcií.
Moje lekcie o základoch kaskádových štýlov CSS
2. Cheat Sheets CSS a CSS3
Naučili ste sa základy a po pár dňoch ste s „úspechom“ na všetko zabudli a pravdepodobne si myslíte, že to nie je vaše a všetko je komplikované. Chcem vás hneď trochu rozveseliť - sám nepoznám všetky vlastnosti CSS. Ale čo mi bráni vidieť ich na internete?
Je pravda, že keď prejdete na stránky Yandex alebo Google, zadáte požiadavku, ktorú potrebujete. A ak stále neposkytne to, čo potrebujete pri vyhľadávaní. Môžete tak stráviť veľa času a stále nenájdete to, čo skutočne hľadáte.
Našťastie dobrí ľudia zostavili veľmi užitočné cheaty, ktoré mi pomohli viac ako raz. Stačí prísť na to, kde čo je a nájsť tie správne nehnuteľnosti potom nie je ťažké.
Cheat Sheets CSS a CSS3
Sú to jednoducho nepostrádateľné materiály pre usporiadanie a dizajn stránky. Čas na rozptýlenie a hľadanie popisu nehnuteľností na internete sa mnohonásobne skracuje.
Je pravda, že ako viete, čím viac tvoríte stránky alebo robíte dizajn, tým menej sa musíte pozerať na túto nápovedu, pretože všetky potrebné vlastnosti vždy zostávajú v pamäti. Ale mať túto sadu cheatov po ruke nebude zbytočné.
Je to ako v škole: aj keď nepoužívate cheat sheet, stále je to v duši akosi pokojnejšie 😆 .
Dodatok k lekcii - HTML cheat sheets
Okrem CSS cheat sheets existujú aj HTML cheat sheety. Ak ste zabudli nejaký tag, vždy si ho môžete pozrieť v tomto HTML cheat sheete. Odkaz na stiahnutie sa zobrazí po kliknutí na jedno z tlačidiel sociálnych médií pod týmto videom.
Záver
Ak ste začiatočník a len sa učíte základy CSS, moje lekcie CSS sú pre vás ako stvorené. Materiál v nich je prezentovaný stručne a stačí si zopakovať vlastnými rukami, o čom je lekcia. Skúsenejší webmasteri si tiež budú môcť obnoviť svoje znalosti rýchlym prečítaním všetkých lekcií. Môžete si tiež stiahnuť CSS a CSS3 cheat sheets, ktoré vám pomôžu zapamätať si hlavné vlastnosti a budú vždy po ruke, v takom prípade si môžete rýchlo vyhľadať a zapamätať si potrebné informácie.
A samozrejme, hlavné body článku.
css- Cascading Style Sheets (kaskádové štýly) - nástroj, ktorý umožňuje nastaviť rôzne vizuálne vlastnosti HTML tagov.
Oficiálna stránka vývojárov: http://www.w3.org/TR/CSS21/cover.html.
CSS sa skladá z pravidiel. Pravidlá sú meno a hodnota. Sú oddelené dvojbodkou (názov pravidla: hodnota pravidla). Do hodnôt pravidiel neuvádzame žiadne úvodzovky! Príklad:
Farba: červená; pozadie: #cccccc ;
Ale ako súvisí CSS s HTML? Ako predpísať štýly dokumentu v html kóde? Sú na to 3 riešenia:
- Príloha (inline).
- Vkladanie.
- Prepojenie.
Základom dokumentu je html a už je naň aplikovaný css. Je to k dokumentu, css sám o sebe nič neznamená.
Metóda vnorenia (inline) CSS
Používa sa atribút style. Môže byť vložený do akéhokoľvek vizuálne zobrazeného prvku. css pravidlá sú napísané štýlom (názov pravidla: hodnota pravidla), niekoľko pravidiel je oddelených bodkočiarkou (; je koniec pravidla v css):
obyčajný text
"color:red; background:#cccccc"> Tento odsek má použitý vložený štýl.
Metóda vkladania CSS
Používa sa špeciálny prvok „style“, v ktorom sú napísané pravidlá css. Vo vnútri štýlu píšeme iba jazyk css. Príklad:
< style type= "text/ css">p ( farba: červená ; pozadie: #cccccc )Tu je použitý štýl vnorenia. obyčajný textV tomto príklade sme napísali pravidlo pre odsek prvku „p“. V 2. riadku máme napísaný selektor (na aké značky sa bude pravidlo css vzťahovať). Samotné pravidlo je napísané v zložených zátvorkách „( )“.
Prvok „style“ je umiestnený iba v prvku „head“.
Spôsob prepojenia CSS
Aby sa do dokumentu nepísalo zakaždým štýl (nie aby sa dokument načítal), musíte pravidlá css napísať na jedno miesto a aplikovať ich na rôzne dokumenty (na neobmedzený počet).
Aby sme to dosiahli, odstránime všetky pravidlá css v samostatnom textovom súbore. Zvyčajne má tento súbor príponu .css. A potom hneď vidíte, že sú v nej napísané pravidlá štýlu. S ničím sa nepomýlite.
Ako potom môžeme prepojiť tento samostatný súbor css s naším html dokumentom? Ak to chcete urobiť, použite nasledujúci kód v sekcii head:
Tie. zadajte súbor so štýlmi prostredníctvom hypertextového odkazu naň. Prehliadač načíta súbor štýlu a pravidlá z neho aplikuje na celý dokument. Funguje to v podstate rovnako ako prvok „style“, ale v samostatnom súbore. A do akéhokoľvek dokumentu môžeme vložiť odkaz na súbor css. To je veľmi výhodné, pretože Upravujem štýly v jednom súbore; po načítaní šablóny štýlov raz, keď prejdete na ďalšie stránky, prehliadač už nebude hľadať tento súbor css, získa ho z vyrovnávacej pamäte (typ dočasného ukladania stiahnutých súborov). Tým šetrím návštevnosť a zrýchľujem zobrazovanie stránky.
Pozor! Prvok „link“ nebude fungovať s jedným atribútom href. Pretože tento hypertextový odkaz sa používa na rôzne účely. Toto je hypertextový odkaz služby, ktorý môže ukazovať na rôzne typy súborov, ktoré možno použiť na rôzne účely pre vaše stránky. Atribút rel (rel="stylesheet") sa používa na označenie prehliadača, že ide o šablónu so štýlmi. Označuje typ vzťahu medzi nahraným dokumentom a naším hlavným dokumentom. Prehliadač teraz chápe, že načítavaný dokument je šablóna so štýlmi.
css znamená „Cascading Style Sheets“ (z angl. Cascading Style Sheets). CSS je súbor parametrov, ktoré zobrazujú prvok na webovej stránke. Tieto parametre môžu byť špecifikované v samostatnom súbore a môžu byť zapísané priamo v HTML kóde stránky. Naša webová stránka môže napríklad obsahovať nasledujúce prvky: názov článku, odseky, citácie, poznámky pod čiarou, obrázky, videá, odkazy. Môžete si nastaviť konkrétny štýl zobrazenia – veľkosť, farbu, hrúbku okraja atď.
Pri práci s webom sa odporúča použiť samostatný súbor so štýlmi a nevkladať kód s nastavením štýlu na samostatné stránky. To výrazne skráti čas - keď poznáte umiestnenie šablóny štýlov, môžete vždy rýchlo nájsť konkrétny štýl a upraviť ho. Súbor štýlu má príponu .css, jeho názov je zvyčajne style.css.
Vrátane súboru CSS
Existuje niekoľko spôsobov, ako zahrnúť súbor CSS. Budeme hovoriť o dvoch metódach, ktoré sa najčastejšie používajú pri vytváraní webových stránok:
1. Väzba. Táto metóda sa používa, keď je potrebné nastaviť štýly pre všetky stránky webu v jednom súbore. Táto metóda sa často používa pri vytváraní stránky. Ak chcete zahrnúť predlohu, použite príkaz , ktorý musí byť umiestnený v tele štítku
.Prvé dve vlastnosti indikujú prehliadaču, že stránka používa CSS, potom sa špecifikuje adresa súboru so štýlmi.
2. Vkladanie do štítkov dokumentu. Pri tejto metóde sa štýl pre konkrétny prvok stránky nastavuje priamo v kóde HTML. Napríklad:
Tu sme napísali štýly podľa toho pre kontajnery
Uveďme príklad šablóny štýlov - vytvorte súbor style.css a napíšte štýly:
body ( font-family: Arial, Verdana, Sans-serif; /* Font-family */ font-size: 12pt; /* Primárna veľkosť písma v bodoch */ background-color: #f0f0f0; /* Farba pozadia webovej stránky * / farba: #000000; /* Farba tela */ ) h1 ( farba: #a52a2a; /* Farba hlavičky */ veľkosť písma: 24pt; /* Veľkosť písma v bodoch */ rodina písma: Georgia, Times, serif ; /* Skupina písiem */ hrúbka písma: normálna; /* Normálna hrúbka textu */ )
Tu sme naštylizovali telo stránky.
a pre hlavičku. Môžete tiež nastaviť špecifické štýly pre akékoľvek iné prvky webovej stránky.
Teraz prepojme našu šablónu so štýlmi s webom:
Pripojenie CSS k webu Ahoj svet!
Toto je moja prvá stránka so štýlmi css
Tak sme prišli na to čo je css, prečo sa používa táto technológia, sme sa naučili, ako prepojiť štýly s webom. Tento tutoriál je akýmsi úvodom do kaskádových štýlov. V ďalších tutoriáloch si povieme o CSS technológii podrobnejšie.
Od autora: Dobrý deň, milí čitatelia portálu webformyself. Pri vytváraní stránok je veľmi dôležitý dizajn webového zdroja. To má na svedomí css jazyk (kaskádové štýly), o ktorom si dnes niečo povieme. Alebo skôr o jeho spojení a využití. Zvážte niektoré štýly css pre web, ktoré sa používajú pri navrhovaní webových stránok.
css pripojenie
Dnes už len ťažko niekde nájdete webovú stránku, ktorá by bola vytvorená čisto pomocou možností html. V skutočnosti by bol vzhľad takýchto stránok jednoducho hrozný, a preto, keď je označenie potrebných prvkov pripravené, je potrebné ich okamžite navrhnúť, a to pomocou css v samostatnom súbore.
Treba povedať, že vo všeobecnosti existujú aj možnosti zahrnutia štýlov do html súboru. Môžu byť napríklad definované pomocou atribútu style alebo rovnakej značky. Toto sa nazýva inline štýly. Tento prístup dnes nie je vítaný a porušuje moderné vývojové štandardy.
Ale ako to urobiť správne, pýtate sa? Ak to chcete urobiť, musíte vytvoriť nový súbor s príponou css a potom ho pripojiť k html. To sa robí veľmi jednoducho pomocou značky odkazu, ktorá je zodpovedná za pripojenie externých súborov. Robí sa to takto:
< link rel = "stylesheet" type = "text/css" href = "style.css" > |
Značka je jednoduchá, ako ste už pochopili. Poviem vám trochu viac o jeho atribútoch:
rel = "stylesheet" - vo všeobecnosti sa atribút rel zapisuje na určenie úlohy súboru na stránke. V našom prípade je úlohou šablóna štýlov, ktorá je označená.
type = "text/css" - takzvaný MIME typ, ktorý sa zvyčajne uvádza pre všetky zahrnuté súbory, aby ich prehliadač správne interpretoval. Moderné webové prehliadače tento atribút písať nemusia.
href = "style.css" je štandardný atribút, ktorý určuje adresu nášho externého súboru. V tomto prípade sa píše na základe toho, že súbor má štýl názvu, príponu css a nachádza sa v rovnakom priečinku ako html dokument.
Ako vidíte, pri pripájaní css súborov sa zmení iba atribút href, všetko ostatné meniť netreba. Na stránku môžete pripojiť toľko štýlov, koľko chcete, ale nie viac ako 2-4 sa považujú za optimálne, pretože príliš veľa požiadaviek na server tiež nie je príliš dobré.
Kde môžem získať hotové štýly CSS pre web?
No s tým spojením je dúfam všetko viac-menej jasné. Vy však vytvárate prázdny súbor a aby ste videli efekt jeho pridávania, musíte pravidlá buď napísať sami, alebo ich odniekiaľ prevziať.
Na webe je napríklad množstvo bezplatných html šablón. Ak si stiahnete niektorý z nich, potom vo vnútri určite bude hotová šablóna štýlov s potrebnými pravidlami pre dizajn webových stránok. Správne však bude fungovať iba pre vlastný html dokument. Faktom je, že tieto dva jazyky sú spojené pomocou takzvaných selektorov.
Selektor je vlastnosť jazyka css, ktorá je preň jedinečná. Na čo sú potrebné? No predstavte si tento kód:
Text nadpisu
Text v odseku
A ako môžeme napríklad štylizovať odsek a nadpis v css? Na to slúžia selektory, aby ste získali prístup len k prvkom, ktoré potrebujete. Napríklad:
p( font-size: 12px; ) .title( font-size: 36px; )
veľkosť písma: 12px; názov ( veľkosť písma: 36px; |
Veľkosť písma všetkých odsekov sme nastavili na 12 pixelov, pričom prvky s triedou title (v našom prípade h1) dostali oveľa väčšiu veľkosť 36 pixelov. Všimnite si, že v prípade odsekov sa štýly vzťahujú na všetky, bez ohľadu na to, koľko ich je na stránke.
Druhý selektor riešil iba jeden prvok – triedu názvu. Samozrejme, môžete vytvoriť ďalšie prvky s presne rovnakou triedou, nie je to zakázané a dostanú rovnaké pravidlo, ale ak jednoducho napíšeme značku h1 v html (bez triedy title), nebudú pridané žiadne pravidlá pre to.
Takto pohodlne umožňuje css vybrať potrebné prvky a nechať na pokoji tie, ktoré nie sú potrebné. Čo to má spoločné s hotovými štýlmi, ktoré nájdete na internete? Všetko je naviazané na určité triedy a identifikátory, takže tieto tabuľky nemôžete len tak pripojiť k žiadnym takýmto súborom, nebudú fungovať, ak zodpovedajúce triedy nebudú priradené k html potrebných prvkov.
Napríklad v šablóne štýlov vidíme nasledujúci kód:
Nav( šírka: 300px; pozadie: aqua; ... ) .nav a( display: block; color: #ccc; ... )
Nav ( šírka: 300px |
Už z toho môžeme usúdiť, že niekde na našej html stránke musí byť prvok s triedou nav a musia v ňom ležať odkazy. Ak je to pravda, potom sa na ne použije vzhľad a podľa toho sa zmení aj ich vzhľad. Ak sa takéto prvky nenájdu, kód sa jednoducho ignoruje.
Na nete opäť nájdete množstvo hotových šablón, v ktorých môžete vidieť toto prepojenie triedy, takže ak v html niečo zmeníte, je potrebné urobiť príslušné operácie v šablóne štýlov.
Ako vytvoriť štýly CSS pre web?
CSS nie je niečo strašidelné a extrémne zložité. Ide o bežnú technológiu vytvorenú ľuďmi na dizajn webových stránok, ktorá má svoje pravidlá. Stačí im porozumieť a aj vy budete môcť pomocou tohto jazyka vytvárať vzhľad webových zdrojov.
Najdôležitejšou podmienkou rýchleho rozvoja je neustála prax spojená s novými poznatkami, ktoré sa sami naučíte. Naši vám môžu poskytnúť podobnú prax.
Okrem toho sa môžete naučiť a zvládnuť základy css v našej prémiovej sekcii. Existuje jeden z kurzov, ktorý sa úplne venuje základným vlastnostiam tohto jazyka. .
Hlavne sa rozhodne nalaďte na štúdium a zahoďte predsudky, že je to veľmi ťažké. Pomôcť môžete aj bezplatnými materiálmi na našej webovej stránke, článkami a videonávodmi. Ak chcete, môžete ich použiť na získanie základných vedomostí, ktoré sú potrebné pri práci s css.
Týmto sa s vami lúčim. Prečítajte si náš blog webformyself, aby ste zlepšili svoje znalosti o tvorbe webových stránok.
Dnes sa chceme ponoriť trochu hlbšie do procesu vývoja. Keď vyvíjate webovú stránku alebo aplikáciu od začiatku, určite budete potrebovať zbierku vzorov, ktoré vám pomôžu s vývojom. To je to, o čom budeme dnes hovoriť. Pripravili sme pre vás malý výber úryvkov CSS pripravených na použitie!
Skôr ako budete pokračovať, dovoľte mi vysvetliť vám, ako sa to stalo. Snažili sme sa veci klasifikovať podľa ich typu a dostali sme vylepšenia pre prvky na úrovni bloku, odkazy, vstupné prvky, obyčajný text atď.
Zdôraznili sme tiež vlastnosť opätovnej použiteľnosti, preto sme použili triedy. Štýly nie sú priamo nasmerované na prvok, ale na triedy s nesémantickým názvom, ktorý je možné použiť a potom znova použiť.
Môžete tiež vytvoriť triedy tried pre niektoré veci a prispôsobiť ich pre svoje vlastné projekty. Môže to vyzerať takto:
moja trieda(
/* Moje úžasné štýly tu */
}
moja-trieda.vlastna(
/* Špecifické štýly pre .my-class, iba ak má iba triedu .custom */
}
Takže trieda .custom sama o sebe nič neznamená, ale ak ju použijete na prvok .my-class, môžete štýly .my-class trochu zmeniť. Rozumiete, čo tým myslíme?
Teraz ste pochopili podstatu a prejdime k vzorom. Začnime prvkami na úrovni bloku.
Všimnite si, že v tomto návode sme nepoužili predpony, ale štýly s predponou môžete vidieť v súbore CSS.
Prvky na úrovni bloku
Vytvárate galériu obrázkov a chcete na svoje obrázky použiť malý štýl? Navrhujete šablónu pre svoje blogové príspevky a chcete sa zamerať na vedľajší blok? Píšete životopis a chcete svoju fotografiu trochu vylepšiť? Teraz máte takúto príležitosť!
značkovanie
Tu sme pre celú sekciu zobrali rozdelenie s triedou na úrovni bloku a použili sme ďalšie triedy. Samozrejme, tu môžete robiť, čo chcete, keďže ide o prvok na úrovni bloku. Ak chcete na obrázok použiť jeden z týchto štýlov, nezabudnite k nemu pridať display: block.
Základné CSS
V ukážke sme na náš malý div použili niekoľko riadkov CSS:
na úrovni bloku (
šírka: 120px
výška: 120px;
okraj: 20px
poloha: relatívna;
plavák: vľavo;
}
Môžete nájsť viac štýlov pre písmo, ale toto je len na demonštračné účely. Zamerajme sa na základné štýly.
Tiene
Jedným z najjednoduchších spôsobov, ako pridať hĺbku prvku na úrovni bloku, je použiť tieň. Tiene sú však dosť nebezpečné: môžu okamžite zničiť váš dizajn. Ak nám neveríte, stačí sa pozrieť na tiene na stránkach.
Základom je nastaviť veľmi jemné tiene prvku bloku. Nemali by ste používať hustý tmavý tieň, ktorý akoby kričal "HEJ, SOM TU, POZRITE SA!". Je potrebné niečo sofistikované.
Vrhať tieň (
pozadie: #9479fa;
}
Drop-shadow.top(
box-shadow: 0 -4px 2px -2px rgba(0,0,0,0,4)
}
Drop-shadow.right(
box-shadow: 4px 0 2px -2px rgba(0,0,0,0,4)
}
Drop-shadow.bottom(
box-shadow: 0 4px 2px -2px rgba(0,0,0,0,4)
}
Vrhnúť tieň.left (
box-shadow: -4px 0 2px -2px rgba(0,0,0,0,4)
}
Pozrite sa, ako používame zápornú hodnotu rozpätia tieňa na dodanie hĺbky samotnému tieňu. Takto to vyzerá reálnejšie. Aspoň si to myslíme.
Poznámka: Farba použitá v deklarácii box-shadow sa môže líšiť v závislosti od farby pozadia vášho prvku. Čím svetlejší blok, tým svetlejší musí byť tieň, aby bol kontrast slabý.
Poznámka: nebudete môcť pridávať triedy k rovnakému prvku v rôznych smeroch, pretože tieto prepíšu pôvodné. Ak chcete, aby rámček mal viac ako jeden tieň poľa, stačí vytvoriť viacero možností tieňa poľa.
Tieto 4 príklady majú za cieľ zvýrazniť obsah vonkajšou žiarou, čiernou alebo bielou, rozmazanou alebo nie, v závislosti od toho, čo chcete, a čo je dôležitejšie, od pozadia krabice (monotónne, textúra, obrázok atď.).
Div (
pozadie: #69D2E7;
}
zdôrazniť-tmavé (
box-shadow: 0 0 5px 2px rgba(0,0,0,.35)
}
zdôrazniť-svetlo(
box-shadow: 0 0 0 10px rgba(255,255,255,.25)
}
zdôrazniť-vložiť(
box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5)
}
Zdôrazniť okraj (
box-shadow: inset 0 0 0 7px rgba(255,255,255,.5)
}
V neposlednom rade pri riešení tieňov sú dva reliéfne efekty. Prvý je veľmi malý, pretože vytvára malý odraz svetla na samom vrchu objektu, a druhý je zložitejší. Vyzerá to skvele na kruhových prvkoch, ako sú tlačidlá.
Div (
pozadie: #8ec12d;
farba: #333;
}
Reliéfne svetlo (
box-shadow: inset 0 1px 0 rgba(255,255,255,0,7);
}
Reliéfne ťažké (
border: 1px solid rgba(0,0,0,0.05);
krabicový tieň:
vložka 0 2px 3px rgba(255,255,255,0,3),
inset 0 -2px 3px rgba(0,0,0,0,3),
0 1px 1px rgba(255,255,255,0,9);
}
prechody
Niekedy nie je potrebné použiť jemný prechod na prvok, aby ste vytvorili mierny reliéf. Cieľom bolo poskytnúť vám prechod, ktorý nemusíte meniť, ak zmeníte obrázok na pozadí alebo farbu.
Div(
farba pozadia: #DEB8A0;
box-shadow: 0 0 0 1px #a27b62;
}
Gradient-light-linear (
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}
gradient-tmavý-lineárny (
background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
}
Vo všeobecnosti je technikou pridanie priehľadnej až priehľadnejšej vrstvy prechodu na vrch prvku. Približne rovnako ako sa to robí vo Photoshope. Celkom jednoducho.
Upozorňujeme, že prechody nemusia v niektorých prehliadačoch (napríklad IE9) fungovať a budete sa musieť postarať o núdzové riešenia.
Takže to bola tá ľahšia časť. Teraz sa poďme zaoberať radiálnymi gradientmi. Chcete svojim blokovým prvkom pridať pútavé svetelné efekty, však? Potom potrebujete radiálne gradienty. Začnime jednoduchou verziou pre prehliadače s podporou.
Gradient-light-radial (
background-image: radial-gradient (stred 0, kruh najvzdialenejší roh, rgba(255,255,255,0,4), rgba(255,255,255,0));
}
gradient-tmavý-radiálny (
background-image: radial-gradient (stred 0, kruh najvzdialenejší roh, rgba(0,0,0,0,15), rgba(0,0,0,0));
}
Okrem skutočnosti, že sme museli skontrolovať našu syntax zakaždým, keď sme chceli pridať radiálny gradient, všetko išlo celkom jednoducho, však?
Zaoblené rohy
Všimli ste si, že už mnoho rokov sa bojuje o to, aby všetky moderné prehliadače mohli mať border-radius bez predpony a teraz, keď ich máme, trend smeruje k tomu, že zaoblené rohy už nikto nepotrebuje?
V závislosti od dizajnu môžu ostré rohy vyzerať pekne alebo všetko pokaziť. V každom prípade možno budete chcieť k niekoľkým prvkom pridať polomer okraja. Aj malé. Preto sme vytvorili niekoľko tried.
Div (
pozadie: #fca1cc;
}
svetlo zaoblené (
border-radius: 3px
}
silne zaoblené (
border-radius: 8px
}
Plne zaoblené (
polomer okraja: 50 %
}
Hlaveň zaoblená (
border-radius: 20px/60px
}
Naša teória o polomere hraníc (na základe veľkosti prvku):
* Pri 0px budeme mať ostré rohy.
* Medzi 1 a 4px dostaneme mierne zaoblené rohy. Väčšina ľudí ani nepovie, že tieto rohy sú zaoblené, ale určite si nebudú myslieť, že tieto rohy sú ostré ako nôž!
* Medzi 5 a 10 pixelmi skončíte s tým, čo považujeme za hrozné rohy. Vyzerajú, ako keby ste sa snažili nasledovať inštinkt „rob, pretože môžeme robiť“. Navyše, ako sme už povedali, móda pre zaoblené rohy je takmer preč.
Pri používaní možnosti border-radius by ste mali pamätať na dve možnosti:
* border-radius: 50 % nám dáva dokonalý kruh, ak vykresľujete štvorcový prvok. Ak je to obdĺžnik, potom sa zmení na elipsu.
* Aby ste dosiahli polomer okraja v štýle ikony, ideálny pomer by bol 6,4, ak budete postupovať podľa rady. Ak teda máte štvorec s rozmermi 100 x 100 px a chcete ho zmeniť na ikonu, budete musieť použiť polomer okraja 16 px (100/6,4=15,625).
Tým sa ukončia dekorácie pre blokové prvky. Prejdime teraz k odkazom. Odkazy, samozrejme, stretávame na každom kroku. Od navigácie po externé odkazy, od odkazov na sociálne siete po kotvy, odkazy sú všade!
Teraz poďme vytvoriť rozdiel medzi vloženými odkazmi a blokovanými odkazmi. Vložené odkazy sú vo väčšine prípadov kotvy z aktuálnej stránky na inú stránku niekde na internete. Blokové odkazy sú o niečo viac multitaskingové: tlačidlá, navigačné ponuky atď.
značkovanie
Už si to asi pochopil. Pre túto časť potrebujeme 2 rôzne kontexty: vetu s odkazom pre možnosť vnoreného odkazu a jednoduchý odkaz pre príklad blokového odkazu. V druhom prípade používame značku ukotvenia, ale môžete použiť vstupné prvky alebo tlačidlo.
Toto je fiktívny text, ktorý zobrazuje vložený odkaz.
Odkaz
Inline odkazy
Snažili sme sa čo najviac vzdialiť od štandardného podčiarknutia odkazu a zmeny farby pri prechode myšou. Tu je dobré byť trochu kreatívnejší a potom môžete urobiť niečo atraktívne. Nieje to?
Inline-link-1 (
displej: inline-block
marža: 0 0,2 em;
výplň: 3px
pozadie: #97CAF2;
border-radius: 2px
/* Štýly písma */
text-dekorácia: žiadna;
font-weight: bold;
farba: biela;
}
inline-link-1:hover (
pozadie: #53A7EA
}
inline-link-1:active (
pozadie: #C4E1F8
}
Inline-link-1:navštívené (
pozadie: #F2BF97
}
Dôležité: Nezabudnite pridať navštívený stav k vloženým odkazom. Niektorí ľudia chcú vedieť, ktoré odkazy už navštívili. Tu sme použili otočenie o 180 stupňov okolo kruhu palety odtieňov. To nám umožňuje jednoducho rozlíšiť štandardné odkazy od navštívených.
Tento príklad je veľmi účinný, ak chcete zvýrazniť vložené odkazy. Povedali by sme, že to závisí od vašich preferencií dizajnu: niektorí ľudia chcú, aby boli odkazy jasne definované, zatiaľ čo iní chcú, aby boli odkazy obrovské ako prvky výzvy na akciu. Toto je vaša osobná voľba.
Toto bol "komplexný" príklad. Pozrime sa na niečo jednoduchšie, založené na štandardných štýloch odkazov.
.inline-link-2 (
displej: inline-block
border-bottom: 2px prerušovaná rgba(0,0,0,0,9);
/* Štýly písma */
text-dekorácia: žiadna;
farba: #777;
}
inline-link-2:hover (
border-bottom-style: bodkovaný;
}
inline-link-2:active (
border-bottom-style: pevné
}
Inline-link-2:visited (
border-bottom: 2px solid #97CAF2;
}
Ide o to, aby sa pre štandardný stav urobila bodkovaná čiara. Keď umiestnite kurzor myši na odkaz, čiara sa zmení na bodkovanú a ak na ňu kliknete, úplne sa podčiarkne.
Naša posledná myšlienka je, že pseudoprvok vytvorí malú šípku pred odkazom. Týmto spôsobom môžeme používateľom povedať, že odkaz vedie mimo webovú stránku.
Inline-link-3 (
displej: inline-block
poloha: relatívna;
padding-left: 6px
/* Štýly písma */
text-dekorácia: žiadna;
farba: #6AB3EC;
text-shadow: 0 1px 1px rgba(255,255,255,0,9);
}
inline-link-3:hover (
farba: #3C9CE7;
}
Inline-link-3:before (
obsah: "25BA";
veľkosť písma: 80%
displej: inline-block
padding-right: 3px;
pointer-events: none;
}
Inline-link-3:hover:before (
farba: #F2BF97;
}
Blokovať odkazy
Teraz sa pozrime na príklad s blokovými odkazmi. Vo väčšine prípadov, keď môže používateľ interagovať s vašou stránkou alebo aplikáciou, by mal byť vybavený tlačidlom. Tlačidlo na potvrdenie komentára, prechod na inú stránku, autorizáciu a mnoho ďalšieho. Bez ohľadu na to, aký prvok na to použijete ("a", "input type="submit", "button" atď.), možno budete chcieť použiť nejaký zaujímavý štýl na prilákanie používateľov.
Prvý príklad je najjednoduchší. V niektorých prevedeniach však vyzerá veľmi dobre. Tu máme, samozrejme, na mysli Windows 8.
Metro (
displej: inline-block
výplň: 10px
okraj: 10px
pozadie: #08C;
/* Štýly písma */
farba: biela;
font-weight: bold;
text-dekorácia: žiadna;
}
Metro: podržte sa (
pozadie: #0AF
}
Zachovajme teda rovnaký základ, ale použijeme 3D efekt. Tento efekt pravdepodobne spoznáte, ak budete postupovať podľa CSS-Tricks. Dokonca využívame detskú triedu.
Metro.three-d (
poloha: relatívna;
krabicový tieň:
1px 1px #53A7EA,
2px 2px #53A7EA,
3px 3px #53A7EA;
prechod: všetko 0,1s uvoľnenie;
}
Metro.three-d:active(
box-shadow: žiadny
hore: 3px;
vľavo: 3px;
}
Nevyzerá to cool? Najmä keď je aktívny. Takže dosť na tému metro.
Skúsme niečo jednoduchšie. Tento príklad bude priehľadný s tesným okrajom a miernym tieňom.
Ohraničený odkaz (
displej: inline-block
výplň: 8px
orámovanie: 3px plné #FCB326;
border-radius: 6px
krabicový tieň:
0 2px 1px rgba(0, 0, 0, 0,2),
vložka 0 2px 1px rgba(0, 0, 0, 0,2);
/* Štýly písma */
text-dekorácia: žiadna;
veľkosť písma: 14px;
text-transform: veľké písmená;
farba: #222;
}
Bordered-link:hover (
farba okraja: #FDD68B
}
Bordered-link:active (
farba okraja: #FEE8BD
}
Poďme vytvoriť niečo atraktívnejšie.
Moderné (
displej: inline-block
okraj: 10px
padding: 8px 15px;
pozadie: #B8ED01;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px
prechod: uvoľnenie všetkých 0,3 s;
krabicový tieň:
0 2px 2px rgba(0,0,0,0,3),
0 0 4px 1px rgba(0,0,0,0,2);
/* Štýly písma */
text-dekorácia: žiadna;
text-shadow: 0 1px rgba(255,255,255,0,7);
}
Moderné: vznášajte sa (
pozadie: #C7FE0A
}
Môžeme dokonca pridať trochu zložitejšie tiene polí s nasledujúcou triedou:
Embosovaný odkaz (
krabicový tieň:
inset 0 -3px 2px rgba(0,0,0,.17),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
Modern.embossed-link(
krabicový tieň:
vložka 0 1px 0 rgba(255,255,255,0,5),
0 2px 2px rgba(0,0,0,0,3), 0 0 4px 1px rgba(0,0,0,0,2),
vložka 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.15),
vložka 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1), 0 3px 2px rgba(0,0,0,.2);
}
Modern.embossed-link:active (
krabicový tieň:
inset 0 -2px 1px rgba(255,255,255,0,2),
vložka 0 3px 2px rgba(0,0,0,0,12);
}
V neposlednom rade je trieda, ktorá pridáva pseudo prvok, ktorý nám umožňuje, aby to vyzeralo, že tlačidlo je súčasťou pozadia.
sokel(
poloha: relatívna;
z-index: 2;
}
sokel:po (
obsah: "";
z-index: -1;
pozícia: absolútna;
border-radius: 6px
krabicový tieň:
vložka 0 1px 0 rgba(0,0,0,0,1),
vložka 0 -1px 0 rgba(255,255,255,0,7);
hore: -6px;
dole: -6px
vpravo: -6px;
vľavo: -6px;
pozadie: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}
Možno budete chcieť zmeniť hodnotu parametra border-radius, aby vyhovovala vašim potrebám. V závislosti od polomeru okraja tlačidla to môže vyzerať zvláštne.
Vstupné prvky
Ako sme uviedli v predchádzajúcich tutoriáloch, formuláre sú všade na webe a väčšina z nich sú vstupné polia. Bohužiaľ, predvolené štýly pre vstupné polia sú dosť neatraktívne. Sme si istí, že to dokážeme lepšie!
značkovanie
CSS kód
Začnime niečím jednoduchým: nahraďte predvolený okraj a pridajte zaoblené rohy.
.simple-input(
displej:blok;
výplň: 5px
orámovanie: 4px plné #F1B720;
border-radius: 5px
farba: #333;
prechod: uvoľnenie všetkých 0,3 s;
}
Jednoduchý vstup: podržte kurzor myši (
border-radius: 8px
}
Jednoduchý vstup: focus(
obrys: žiadny;
border-radius: 8px
farba okraja: #EBD292;
}
Vstupné polia sú dosť zvláštne prvky, takže sme nastavili display:block, aby sme to uľahčili. Výplň je tu preto, aby dala obsahu nejaký priestor.
Chceli ste niekedy znova vytvoriť vstupné polia z iOS?
.mac (
displej:blok;
hranica: žiadna
border-radius: 20px
padding: 5px 8px;
farba: #333;
krabicový tieň:
0 0 4px rgba(0,0,0,0,1);
}
Mac:focus(
obrys: žiadny;
krabicový tieň:
vložka 0 2px 0 rgba(0,0,0,.2),
0 0 4px rgba(0,0,0,0,1),
0 0 5px 1px #51CBEE;
}
Skúsme urobiť niečo s prechodmi pozadia a tiež naniesť trochu vnútorného box-shadow.
Hĺbka (
displej:blok;
border: 1px solid rgba(255,255,255,0,6);
pozadie: linear-gradient(#eee, #fff);
prechod: uvoľnenie všetkých 0,3 s;
krabicový tieň:
vložka 0 1px 4px rgba(0,0,0,0,4);
výplň: 5px
farba: #555;
}
Hĺbka: zaostrenie (
obrys: žiadny;
background-position: 0 -1.7em;
}
Ako posledný príklad urobme niečo trochu originálnejšie. Nie blok, len čiara. Tu môžete pridať aj atraktívne písmo.
riadok(
displej:blok;
hranica: žiadna
farba: #333;
pozadie: priehľadné;
border-bottom: 1px bodkovaná čierna;
padding: 5px 2px 0 2px;
}
line:focus(
obrys: žiadny;
farba okraja: #51CBEE;
}
Poďme si to zhrnúť
Dizajn obsahu je komplexná úloha. Ale mať tieto vopred pripravené triedy po ruke vám môže ušetriť veľa času pri vývoji webovej stránky alebo aplikácie, najmä ak nie ste oboznámení s CSS.
Hlavnou myšlienkou je mať tieto triedy vo svojich kaskádových štýloch (alebo v samostatnom súbore, ak používate preprocesor) a volať ich pri vývoji značky. Alebo jednoducho skopírujte štýly, ktoré potrebujete na rýchly štýl.
Na záver vám môžeme len odporučiť, aby ste tieto triedy používali na vlastné návrhy, ak vám vyhovujú. Venujte niekoľko hodín vytvoreniu vlastnej zbierky zaujímavých tried pre vývoj rozhrania a uvidíte, koľko času môžete ušetriť na budúcich projektoch.
Ďakujeme, že ste si prečítali návod! Samozrejme, ak máte nejaké otázky, neváhajte sa ich opýtať v komentároch!
Pozor! Nemáte povolenie na zobrazenie skrytého textu.
Táto príručka bola preložená na žiadosť používateľa, ktorý je naším pravidelným čitateľom od novembra 2009.
Súvisiace články
Zlaté čísla Ako predať krásne telefónne číslo
Ťažba kryptomeny: čo to je jednoduchými slovami
Najlepší operačný systém pre laptop: Kompletná recenzia
Programy na sťahovanie hudby od spolužiakov Stiahnite si smutnú pesničku od spolužiakov zo sociálnej siete
Mobilná verzia prehliadača Yandex