Kao layout dizajneru, uvijek mi je ozbiljno smetala činjenica da se debljina ivice u CSS-u uzima u obzir pri formiranju širine bloka. Slažem se da je to ispravnije, ali u nekim slučajevima to je samo flagrantna nepravda, koja povlači mnoge dodatne probleme.
Jedan takav problem je bila nemogućnost da postavim raspored sa savršeno ravnomernim poravnanjem blokova duž ivica. Neki blok uvijek, ali je ispuzao izvan rubova svih ostalih. Ovaj problem je izglađen činjenicom da je "ovo puzanje" bilo maksimalno 1-2 piksela, a najčešće ga kupac jednostavno nije primijetio. Ali lično mi je to jako smetalo.
Ovo je isto kao i kupovina kineski lažnjakŠvajcarski satovi. Čini se da sve izgleda potpuno isto, ali i sami razumijete da je ovo laž.
Malo teorije
CSS standard navodi da se konačna širina bloka formira od veličine uvlačenja udubljenja, širine ivice (ako granica ima 2 vodoravne ivice, onda se i ova veličina mora pomnožiti sa 2) i širine teksta. To značenje širina da svi pokazuju na blok div i bila je širina teksta. Mnogi ljudi misle da je ovo širina bloka, ali nije. Upravo to sam i mislio.
U CSS-u postoji alat koji vam omogućava da zaobiđete ovo stanje i dozvoljava css parametar širina postavite širinu bloka bez uzimanja u obzir margina i ivica.
Rješenje problema
Da bismo lakše razumjeli, evo primjera borbe:
Parametri -moz-box-sizing i -webkit-box-sizing neophodni su kako bi starije verzije pretraživača Firefox i Safari shvatile da u ovom slučaju ne morate uključiti širinu ivice i veličine odsječaka.
Svaki specijalista mora svakodnevno pretraživati nove informacije u njihovoj oblasti delovanja. Uostalom, ne uzalud kažu da je život samo kretanje naprijed. Ako ste proživjeli dan i iz njega niste naučili ništa novo, budite sigurni da ste uzalud proživjeli ovaj dan!
P.S. Za mene, kao programera web sajtova po meri, to je veoma ozbiljan test - optimizacija sajta za pretraživače. Za mene sve ovo tražilice SEO je mračna šuma, koju pokušavam da "poklonim" drugim ljudima, jer čovek može biti profesionalac samo u jednoj oblasti, u svojoj oblasti. Ne treba mi neko drugi.
Nekoliko lekcija ranije, pogledali smo shematski prikaz blok web stranice, a također je ukratko govorio o takvom CSS svojstvu kao što je granica, pomoću kojeg možete postaviti granice za element. Ovaj put ćemo pobliže pogledati ovu nekretninu s primjerima.
Granica se nalazi između margine i dopuna. To znači da je marža per granica. Granica se može postaviti kako sa sve četiri strane (kao da blok zatvara u okvir), tako i sa jedne, dvije ili tri strane. U CSS-u možete kontrolirati debljinu, boju i stil ivica. Istražimo ovo detaljnije.
Border-width: širina granice
Via granična svojstva-width je širina ivice. Najčešće je ova veličina naznačena u pikselima. Možete postaviti iste ili različite širine za sve četiri ivice, na primjer:
/ * sve 4 ivice su široke 2px: * / border-width: 2px; / * gornja i donja granica su 2px, lijevo i desno su 4px: * / border-width: 2px 4px; / * gornji rub - 2px, lijevo i desno - 6px, donji - 3px: * / border-width: 2px 6px 3px; / * gornja granica - 2px, desna - 3px, donja - 4px, lijeva - 5px: * / granica-širina: 2px 3px 4px 5px;
Osim toga, postoje ključne riječi za širinu obruba:
- tanka - granica 2px;
- srednja - ivica širine 4px;
- debljina - 6px ivica.
Boja ivice: boja ivice
Svojstvo border-color postavlja boju za ivice. Boje se mogu specificirati u bilo kojem CSS formatu: ključne riječi, heksadecimalni ili RGB - što vam najviše odgovara. Po analogiji s prethodnim svojstvom, možete postaviti ili jednu boju za sve ivice ili odabrati različite boje za svaku ivicu.
Boja ivice: # FFFF00;
Također možete postaviti transparentnu boju tako što ćete napisati:
Boja ivice: prozirna;
Border-style: stil ivice
Zahvaljujući svojstvu u stilu obruba, možete napraviti tačkastu, dvostruku, trodimenzionalnu ivicu od pravilne ivice - postoji mnogo različita značenja... Da biste to učinili, koristite sljedeće ključne riječi:
- čvrsta - čvrsta ivica;
- dotted - tačkasta granica;
- isprekidana - isprekidana granica;
- dupla - dvostruka granica;
- žljeb - volumetrijski žljeb granica;
- greben - volumetrijska granica s debelim rubom (u stvari, obrnuto od prethodnog stila);
- početak - ekstrudirana granica;
- umetnuti - uvučena ivica (u suštini inverzna od prethodnog stila).
Kao i kod svojstava širine ivice i boje ivice, možete posebno stilizirati svaki okvir okvira – na primjer, gornji i donji rub možete napraviti isprekidanim, a desni i lijevi dvostruki rub. Ovdje sve ovisi samo o mašti.
Stil obruba: dvostruko isprekidan;
Bilješka: v različitim pretraživačima izgled granice se mogu neznatno razlikovati.
Zajedničko svojstvo CSS granice: 3 u 1
Ne morate naizmjence koristiti sva tri gore navedena svojstva da biste stilizirali ivicu. Dovoljno je znati o generalu univerzalno vlasništvo border CSS, koji će vam pomoći da stilizujete mnogo brže i uštedite prostor. Za ovo u slučajni redosled zapišite vrijednosti za sva tri svojstva:
Ivica: 2px tačkasta # FF0000;
Granice za pojedinačne strane
Sa dodatnim svojstvima obruba u CSS-u, možete stilizirati svaki obrub bloka pojedinačno. Sljedeća svojstva će vam pomoći u tome:
- border-top - stil za gornju ivicu;
- border-right - za desnu granicu;
- border-bottom - za donju ivicu;
- border-left je za lijevu granicu.
Ishodi
Sada kada znate kako nacrtati granice bloka, možete vježbati da ih kreirate. Postoji mnogo načina da se sažeto opiše stil bez previše redaka CSS fajl... Važnu ulogu ovdje igra poznavanje principa kaskadnih stilskih listova. Pogledajmo primjer.
Recimo da želite da uokvirite div sa tri čvrste sive granice, a donju ivicu napravite isprekidanom zelenom. Ovaj stil možete napisati ovako:
Div (border-desno: 8px duplo # FF0000; ivica-lijevo: 8px duplo # FF0000; ivica-dolje: 8px duplo # FF0000; ivica-vrh: 4px tačkasto # FDD201;)
Ali ovo je predugačak unos. Sve ovo se može ukratko napisati:
Div (obrub: 8px duplo # FF0000; ivica-vrh: 4px s tačkama # FDD201;)
Kao što je gore spomenuto, ovdje ćemo iskoristiti prednosti CSS kaskadnih svojstava. Prvo, pišemo stil za sve četiri strane ivice, a zatim specificiramo stil posebno za donju ivicu, čime djelomično prepisujemo prethodni stil. Veoma je važno pratiti ovaj niz redova.
Mini zadatak
Pokušajte napraviti ivicu za div dimenzija 200x200px. Stilovi za obrub bi trebali biti sljedeći:
- Neka gornje i donje ivice budu čvrste solidan, dajte im istu boju po izboru i širinu od 5 piksela.
- Napravite lijevu ivicu isprekidano, širine 3 piksela, odaberite drugu boju od prethodne.
- Udvostručite desnu ivicu duplo, širine 7 piksela, različite boje od prethodne dvije.
Na kraju, vaš rad bi trebao izgledati ovako (osim boje koju sami odaberete):
Rezultat zadatka (pogledajte u Chromeu)
Siguran sam da ste već upoznati sa svojstvom css granice. Učite li nešto novo što prije niste znali o css granicama? Pa, ne samo da ćete naučiti, već ćete vidjeti i neke nove stvari koje nikada prije niste znali!
Ne samo da se CSS3 može koristiti za zaokruživanje uglova, već se i čisti CSS kod može koristiti za kreiranje složenih oblika... U prošlosti ste mogli koristiti pozadinsku sliku da biste ostavili utisak zaobljenih uglova. Zahvaljujući novim tehnikama za korištenje granica, možemo to učiniti u čistom css kodu.
Osnove korištenja css granica
Sigurno ste već upoznati standardna upotreba svojstva granica:
Ivica: 1px puna crna;
Kod iznad će prikazati ivicu od 1px, koja će biti crna. Jednostavno i lako. Također možete malo proširiti sintaksu:
Širina ivice: debela; obrubni stil: čvrst; boja obruba: crna;
Osim toga, možete koristiti specifične vrijednosti svojstva granice širine, tri ključne riječi: tanak, srednji, debeo.
Ali korištenje proširene sintakse nije uvijek praktično. Pogledajmo primjer kada trebate promijeniti boju ivice okvira pri lebdenju mišem. U ovom slučaju, korištenje sintakse stenograma je mnogo lakše:
Kutija (ivica: 1px puna crvena;) .kutija: lebdeći (obrub: 1px puna zelena;)
Elegantnije i jednostavnije se može učiniti na sljedeći način:
Box (bord: 1px puna crvena;) .box: lebdeći (border-boja: zelena;)
Kao što vidite, napredna tehnika je korisna i kada mijenjamo samo neka svojstva: širinu, stil, boju i druge.
Border-Radius
granica-radijus je "zlatno" svojstvo CSS3 - prvo i najčešće svojstvo koje je postalo praktično i korisno. Osim IE8 i starijih, svi pretraživači prikazuju zaobljene uglove sa ovim.
Ipak, potrebno je koristiti posebne prefikse za Webkit i Mozilla da bi stil bio ispravan.
Webkit-border-radius: 10px; -moz-border-radius: 10px; radijus granice: 10px;
U današnje vrijeme možemo ukloniti posebne prefikse i koristiti standardni obrazac granica-radijus.
Još jedna prednost je što možemo koristiti posebne vrijednosti za svaku stranu bloka:
Border-top-left-radius: 20px; granica-gore-desno-radijus: 0; border-bottom-right-radius: 30px; granica-dolje-lijevo-radijus: 0;
U kodu iznad, postavljanje radijusa-gore-desno i radijusa granice-dolje-lijevo na nulu može stvoriti zadivljujuće oblike. Iako element može naslijediti neka svojstva koja će se morati vratiti na nulu.
Kao margina i padding, možemo sažimati sintaksu:
/ * gore lijevo, gore desno, dolje desno, dolje lijevo * / border-radius: 20px 0 30px 0;
Kao primjer, koristeći svojstvo border-radius, pokazat ću vam "limun" koji dizajneri često koriste kada dizajniraju web stranice:
Limun (širina: 200px; visina: 200px; pozadina: # F5F240; granica: 1px čvrsta # F0D900; granica-radijus: 10px 150px 30px 150px;)
Ići dalje od osnova
Kod mnogih dizajnera, svo znanje iz oblasti css svojstva granica, tu se završava. Ali ima ih još nekoliko cool stvari sa kojim možete kreirati neverovatne stvari!
Složene css granične strukture
Postoje mnoge tehnike za kreiranje dizajna koristeći složene granične strukture. Na primjer, pogledajmo sljedeće...
Border-Style
Uvijek koristimo dobro poznata svojstva pune, isprekidane i tačkaste. Ali postoji nekoliko drugih svojstava u stilu granice: žlijeb i greben.
Bord: 20px žlijeb # e3e3e3;
Ili u proširenoj sintaksi:
Border-color: # e3e3e3; granica širine: 20px; rubni stil: žljeb;
Iako su ova svojstva korisna, ona nisu osnova za složene okvire.
Outline
Najpopularnija tehnika kreiranja dupli okvir- korištenje svojstva outline.
Kutija (obrub: 5px čvrsta # 292929; obris: 5px čvrsta # e3e3e3;)
Ova metoda odlično funkcionira, iako nas ograničava na samo dvije kutije. Ponekad trebate kreirati granicu gradijenta koja se sastoji od mnogo slojeva... kako onda?
Pseudoelementi
Kada Outline tehnika nije dovoljna alternativnim sredstvima je korištenje pseudo elemenata: prije i: poslije. Pomoću kojih elementu možete dodati dodatne okvire:
Kutija (širina: 200px; visina: 200px; pozadina: # e3e3e3; pozicija: relativna; ivica: 10px čvrsto zelena;) / * Kreirajte dva okvira sa ista širina kontejnera * / .box: poslije, .box: prije (sadržaj: ""; pozicija: apsolutna; vrh: 0; lijevo: 0; dno: 0; desno: 0;) .box: poslije (obrub: 5px puna crvena; obris: 5px puna žuta;) .kutija: prije (ivica: 10px puna plava;)
Ne baš elegantnog izgleda, ali najmanje, radi. Malo je problematično razumjeti redoslijed boja unutar okvira... ali možete razumjeti.
Box-Shadow
Zanimljiv "djetinjast način" za stvaranje ovog efekta je korištenje svojstva CSS3 box-shadow:
Kutija (ivica: 5px puna crvena; sjena okvira: 0 0 0 5px zelena, 0 0 0 10px žuta, 0 0 0 15px narandžasta;)
U ovom slučaju, bili smo pametniji, koristeći posebno dizajnirano svojstvo senke kutije. Promjenom parametara x, y, zamućenja na "nulu", možemo koristiti različite boje za kreiranje mnogo okvira.
Ali postoji problem, u starijim pretraživačima koji ne razumiju svojstva box-shadow, bit će vidljiv samo jedan crveni okvir od 5px.
“Zapamti! Dizajn web stranice treba da izgleda unakrsno, odnosno isto u svim pretraživačima. Uključujući stare verzije."
Promjena uglova
Pored polovnih jednostavno značenje border-radius, možemo specificirati dva odvojena - odvajajući ih sa / odredićemo horizontalni i vertikalni radijus.
Na primjer:
Border-radijus: 50px / 100px; / * horizontalni radijus, vertikalni radijus * /
... to je isto kao:
Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;
Ova tehnika je prikladna za stvaranje jedinstvenih oblika blokova. Na primjer, evo kako stvoriti efekt umotanog papira:
Kutija (širina: 200px; visina: 200px; pozadina: # 666; radijus-gore-levo: 15em 1em; granica-dole-desno-radijus: 15em 1em;)
CSS oblici koji koriste obrub
Ova tehnika pokazuje kako možete kreirati css forme, koristeći elemente sa nultim dimenzijama visine i širine. Jeste li iznenađeni? Pogledajmo primjer...
Za sljedećih nekoliko primjera koristit ćemo sljedeće oznake:
... i sljedeći osnovni stil:
Kutija (širina: 200px; visina: 200px; pozadina: crna;)
Većina čest primjer koristeći CSS oblici - stvaranje strelice koja teče. Tajna iza ove strelice je u stvaranju granice različite boje za svaku stranu. Zatim, stavljamo atributi širine i visina za 0.
Dodijeli div blok klasa strelice:
Strelica (širina: 0; visina: 0; ivica-vrh: 100px puna crvena; ivica-desno: 100px puna zelena; ivica-donja: 100px puna plava; ivica-lijevo: 100px puna žuta;)
Da bismo demonstrirali, prvo koristimo proširenu sintaksu. Dalje, možemo ukloniti dodatni kod koristeći skraćenu sintaksu:
Strelica (širina: 0; visina: 0; ivica: 100px puna; boja ivice: crvena zelena plava žuta;)
Zanimljivo, zar ne? Sada ćemo instalirati prozirne boje sa svih strana osim plave strane.
Strelica (širina: 0; visina: 0; ivica: 100px puna; boja ivice dna: plava;)
Ispalo je odlično! Ali to je u suprotnosti semantički raspored, kreirajte .arrow div, samo da dodate strelicu na stranicu. U tu svrhu možemo koristiti pseudoelemente, što ćemo sada i učiniti.
Kreirajte govorni balon
Da bismo kreirali oblačić govora, potreban nam je mali komad čisti CSS kod i jedan div blok.
Oblačić govora (položaj: relativan; boja pozadine: # 292929; širina: 200px; visina: 150px; visina linije: 150px; / * okomito središte * / boja: bijela; poravnanje teksta: centar;)
Oblačić: poslije (sadržaj: "";)
U ovoj fazi ćemo kreirati strelicu koju smo radili ranije, dodati je elementu i sve što ostaje je pozicioniranje:
Oblačić: poslije (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; ivica: 10px puna; boja ivice: crvena zelena plava žuta;)
Ako želimo da strelica pokazuje prema dolje, morat ćemo postaviti sve ivice na transparentne osim gornje.
Govorni oblačić: poslije (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; ivica: 10px čvrsta; ivica-top-boja: crvena;)
Kada kreiramo ovo CSS oblik, ne možemo konkretno odrediti veličinu strelice. Umjesto toga, možemo postaviti svojstvo border-width, koje će postaviti veličinu za strelicu. Također ćemo postaviti poziciju strelice u donjem dijelu sredine. U skladu s tim, za to koristimo vrijednosti top i left.
Govorni oblačić: poslije (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; ivica: 15px čvrsta; ivica-top-boja: crvena; vrh: 100%; lijevo: 50%;)
Osim toga, ostaje nam da damo boju istu kao i blok. Zapamtite, prilikom pozicioniranja morate uzeti u obzir veličinu drugih okvira koji su nevidljivi (15px). Također ćemo bloku dati zaobljene uglove.
Speech-bubble (/ *… ostali stilovi * / border-radijus: 10px;) .speech-bubble: after (sadržaj: ""; pozicija: apsolutna; širina: 0; visina: 0; granica: 15px čvrsta; granica-vrh -boja: # 292929; vrh: 100%; lijevo: 50%; margina lijevo: -15px; / * prilagodi širinu ivice * /)
Nije loše, ha? Koristeći nekoliko css klasa i podešavanja granica, možete kreirati takvu stvar.
/ * Upotreba oblačića govora: Primijenite klasu.speech-bubble i.speech-bubble-DIRECTION kao što je prikazano ispod
Bonus! Centriranje okomito unutar bloka
Za jedan red teksta možete koristiti visinu reda. Ali ako imate dva ili više linija tekst... Najbolje rješenjeće postaviti svojstvo prikaza na tabelu i staviti sav tekst u pasus. Ovako to izgleda html markup:
Speech-bubble (/ * drugi stilovi * / display: table;) .speech-bubble p (display: table-cell; vertical-align: middle;)
Nismo ograničeni na trouglove. CSS je sposoban da prikaže sve vrste oblika - čak i srca i znak biološke opasnosti.
Biohazard (širina: 0; visina: 0; ivica: 60px čvrsta; ivica-radijus: 50%; ivica-gore-boja: crna; ivica-donja-boja: crna; granica-lijevo-boja: žuta; granica-desno- boja: žuta ;)
