Izrada okvira pomoću CSS-a. Okviri i granice Okvir komentara sa CSS kutom

Oko njega stvoriti razne lijepe stvari, a prva takva lijepa stvar bit će okvir.

Prvo, pogledajmo najjednostavnije okvire. Za njihovu izradu koristi se CSS granični posjed, koji se može postaviti na sljedeće vrijednosti:

solid – čvrst okvir;

crtkano – točkasti okvir;

točkasta – točkasti okvir;

dvostruki – dvostruki linijski okvir;

žlijeb – okvir sa sjenom;

greben - s reljefom;

Još dva svojstva potrebna za stvaranje jednostavnih okvira su

širina – debljina okvira;

boja – boja okvira;

Prema tehnici kratice, vrijednosti se pišu u jednom retku, odvojene razmacima.

p(
obrub : 2px pun #ffff00 ;
}

padding – unutarnji (uvlačenje okvira od sadržaja);

margin — vanjski (margina okvira od vanjskih objekata);

Također su navedene upute za udubljenja (s koje strane i koliko se povući). Ova se svojstva koriste kada postoji potreba da se sadržaj postavi izvan središta okvira ili je sam okvir na neki način pomaknut.

top – gornja uvlaka;

desno – desno uvlačenje;

bottom – donja uvlaka;

lijevo – lijeva uvlaka

Vrijednosti ovih svojstava ispisuju se u skraćenoj verziji jedna za drugom (padding: 10px 30px 15px 20px), a prvo se postavlja gornja vrijednost, a zatim ostale u smjeru kazaljke na satu.

Ako postavite samo jednu vrijednost, to će značiti da će udubljenje sa svih strana biti isto.

p(
obrub : 2px pun #ffff00 ;

margina: 20px;
}

Ako trebate postaviti tekst ili sliku u središte okvira, tada možete dodati u selektor "p". svojstvo poravnanja teksta: centar ;

Zatim, pogledajmo kako visina i širina okvira. Visinu okvira automatski postavlja preglednik i odabire se tako da sadržaj stane u njega, uzimajući u obzir navedene uvlake. Ali širinu ćemo postaviti sami.

Postavlja se svojstvom width, a njegova vrijednost označava željenu veličinu u pikselima ili druge mjere duljine prihvaćene na webu.

p(
obrub : 2px pun #ffff00 ;
padding: 10px 20px 10px 20px;
margina: 20px;
širina: 400px;
}

Usput, zapamtite da prilikom postavljanja širine, preglednik ovu vrijednost razumije samo kao širinu sadržaja. Zatim ovoj vrijednosti dodaje zadanu debljinu ispune i ruba i prikazuje konačnu veličinu na stranici.

Zadnje što trebate učiniti je postaviti okvir na stranicu. To se radi pomoću već postojećeg svojstva margine.

A ako samo trebate postaviti blok okvira u središte stranice, tada se vrijednost auto dodaje svojstvu margine.

p(
obrub : 2px pun #ffff00 ;
padding: 10px 20px 10px 20px;
margina: 20px auto;
širina: 400px;
}

Za prvi primjer, kreirajmo html dokument i stvorite čvrste okvire za tijelo (tijelo dokumenta) i jedan odlomak.

U sljedećim primjerima promijenit će se samo CSS (ono što je zatvoreno u oznaci stila).

Pozdrav dragi budući webmasteri!
Imam 55 godina i drago mi je što vas mogu pozdraviti na svojoj web stranici.

Proizlaziti:

Sljedeći okvir je isprekidan.

p(
uvlaka teksta : 30px ;
rub : 2px isprekidano #ff4f00 ;
padding: 10px 20px 10px 20px;
margina: 20px auto;
širina: 400px;
}

Proizlaziti:

Okvir isprekidan:

p(
uvlaka teksta : 30px ;
obrub: 3px točkasto #ff4f00;
padding: 10px 20px 10px 20px;
margina: 20px auto;
širina: 400px;
}

Dvostruki okvir:

p(
uvlaka teksta : 30px ;
rub : 5px dvostruko #ff4f00 ;
padding: 10px 20px 10px 20px;
margina: 20px auto;
širina: 400px;
}

Utor okvira:

p(
uvlaka teksta : 30px ;
rub : 7px utor #ff4f00 ;
padding: 10px 20px 10px 20px;
margina: 20px auto;
širina: 400px;
}

Greben okvira:

p(
uvlaka teksta : 30px ;
rub : 10px greben #ff4f00 ;
padding: 10px 20px 10px 20px;
margina: 20px auto;
širina: 400px;
}

Da biste to učinili, uklonite obrub i dodajte border-radius i box-shadow.

p(
rubni radijus: 10px;
okvir-sjena : 0 0 0 3px #ff4f00 ;
uvlaka teksta : 30px ;
padding: 10px 20px 10px 20px;
margina: 20px auto;
širina: 400px;
}

Zamutite vanjski rub okvira. Da biste to učinili, u svojstvu box-shadow povećajte treću znamenku.

p(
rubni radijus: 10px;
okvir-sjena : 0 0 7px 3px #ff4f00 ;
uvlaka teksta : 30px ;
padding: 10px 20px 10px 20px;
margina: 20px auto;
širina: 400px;
}

Napravimo višebojni okvir. Da biste to učinili, dodajte još nekoliko skupova vrijednosti s različitim bojama svojstvu box-shadow, odvojenih zarezima.

p(
rubni radijus: 10px;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
uvlaka teksta : 30px ;
padding: 10px 20px 10px 20px;
margina: 20px auto;
širina: 400px;
}

Možete napraviti krug u okviru. Da biste to učinili, postavite odlomak iste visine i širine, odnosno napravite kvadrat, promijenite vrijednost radijusa granice

p(
rubni radijus: 50%/50%;
okvir-sjena : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
ispuna: 40px;
margina: 20px auto;
širina: 130px;
visina: 130px;
poravnanje teksta: središte;
}

Ako se poigrate s razlomačkom vrijednošću polumjera granice, možete napraviti bilo koju vrstu elipse.

Prvi broj u razlomku je zavoj okomite komponente kuta, drugi je vodoravna.

I posljednja stvar koju ćemo danas napraviti je okvir s promjenjivom bojom. Promijenit će se kada zadržite kursor.

Ova je opcija implementirana pomoću pseudoklase :hover.

p(
rubni radijus: 10px;
okvir-sjena : 0 0 0 4px #ff4f00 ;
uvlaka teksta : 30px ;
padding: 10px 20px 10px 20px;
margina: 20px auto;
širina: 400px;
}
p:lebdjeti (
rubni radijus: 10px;
okvir-sjena : 0 0 0 4px #00ff62 ;
uvlaka teksta : 30px ;
padding: 10px 20px 10px 20px;
margina: 20px auto;
širina: 400px;
}

U mirnom stanju:

Pri lebdenju:

Ista se metoda može primijeniti na višebojni okvir i promijeniti jednu boju kada lebdite kursorom.

Želim vam kreativni uspjeh.

Skretanje

Dva se Irca tuku na ulicama Dublina. Drugi im prilazi, skida šešir i pita:
- Oprostite, je li ovo privatna svađa ili netko može intervenirati?..

1. , , - CSS svojstva
2. (Transparentno) - CSS svojstvo. Odgovoran za stvaranje dijagonalnog okvira
3. "px" - vrijednost u pikselima

U ovom članku ćemo razgovarati s vama o stvaranju okvira, ali ne običnih kvadratnih, već zaobljenih. Imaju više prekrasan pogled nego obični kvadratni okviri bez zaobljenja.

Vlasništvo širenje prostora za kreativne ideje povećanje broja mogući elementi oblikovati. I u kombinaciji s promjenom stila okvira, koristeći vrijednosti svojstava , možete izraditi poseban okvir koji nećete naći nigdje drugdje.

U ovom ćemo članku pobliže pogledati stvaranje okruglih okvira i više. U CSS-u postoji nešto poput trokutastih okvira, ali više o tome u nastavku.

Zaokruživanje okvira pomoću

Ovo CSS svojstvo omogućuje zaokruživanje granica elementa. Neki ga programeri koriste, bez stvaranja vidljivih granica, za stvaranje izgleda na zaobljenom spremniku "tijela".

Koristeći standardne polumjere, možete stvoriti zaobljene oblike, poput kruga ili ovala.

Za praćenje rada ovog svojstva dovoljno je postaviti svojstvo . Iako njegov naziv sadrži riječ "border", on se ne odnosi izravno na stvaranje okvira. Zaokružuje rubove web elementa, a ne njegovu granicu.

Samo imanje je skraćenica za četiri svojstva: , , I . Svaki od njih specificira radijus zakrivljenosti za svaki od četiri kuta.

Jednostavna nekretnina može koristiti jednu ili 4 vrijednosti. Radi isto kao i s imovinom ili .

Zaokruživanje se može primijeniti na sve HTML elemente, ali ne u svim slučajevima. Neki ga preglednici ne prihvaćaju prilikom učitavanja okvira koji imaju svojstvo , s vrijednošću "sažmi".

Možete koristiti različite vrijednosti za određivanje polumjera zakrivljenosti, ali najčešće je vrijednost navedena u pikselima. To je zato što su najprikladniji za detalje malih značajki.

Osim uobičajenog zaokruživanja, možete koristiti dodatni radijus, na primjer, za stvaranje elipse.

Da biste to učinili, morate podijeliti vrijednosti razlomkom.

Vlasništvo - primjeri:

Sada ćemo pokazati nekoliko primjera stvaranja zaobljene granice. Da biste ih detaljnije proučili, preuzmite naše izvore.

Stvaranje trokuta pomoću

Za stvaranje trokuta morate koristiti svojstvo . Ali ovdje će se njegova upotreba malo razlikovati od stvaranja običnih okvira.

Prvo postavite element trokuta na nultu širinu i visinu.

Nakon toga zapišite nekoliko svojstava. Prva je glavna stvar, svojstvo okvira. Stvoren je gotovo isto kao i obično. Postavite širinu, vrstu linije i unesite vrijednost "transparentno". Odgovoran je za stvaranje trokuta.

Kako biste stvorili ravnu stranu trokuta, trebate stvoriti zasebnu liniju okvira za ovu stranu.

Zaključak

Sada znate sve o nekretnini , što će vam omogućiti stvaranje jedinstvenih elemenata dizajna. Osim toga, trokuti stvoreni s "obrubom" izvrsni su ukrasni komadi koji se mogu postaviti na bilo koju web stranicu.

U početku se može činiti vrlo teškim, ali ako budete vježbali, bit će lakše nego što mislite. Preuzmite naše izvore i proučite njihov kod kako biste bolje razumjeli kako vlasništvo funkcionira. Želimo vam puno sreće u studiranju!

Svojstvo CSS border koristi se za stvaranje ruba objekta, odnosno debljine ruba, njegove boje i stila. Ovo se svojstvo široko koristi u HTML-u. Možete stvoriti različite efekte za bolju percepciju sadržaja na stranici. Na primjer, dizajnirajte bočnu traku, zaglavlje web stranice, izbornik itd.

1. Sintaksa CSS obruba

granica: širina obruba stil obruba boja obruba | naslijediti;

• border-width - debljina granice. Možete ga postaviti u pikselima (px) ili koristiti standardne vrijednosti tanak, srednji, debeli (razlikuju se samo po širini u pikselima)
• border-style - stil prikazanog obruba. Može uzeti sljedeće vrijednosti
  • nijedan ili skriven - poništava obrub
  • točkasti – točkasti okvir
  • crtkana - okvir od crtica
  • puna - jednostavna linija (najčešće korištena)
  • dvostruki - dupli okvir
  • utor - užlijebljeni 3D rub
  • greben, umetak, ispad - različiti efekti 3D okvira
  • naslijediti - vrijednost se primjenjuje nadređeni element
• border-color - boja obruba. Može se postaviti pomoću konkretno ime boje ili u RGB formatu (pogledajte nazive html boja za stranicu)

Vrijednosti u svojstvu CSS granice mogu se postaviti bilo kojim redoslijedom. Najčešće korišteni niz je "boja stila debljine".

2. Primjeri s različitim CSS granicama

2.1. Primjer. Različiti stilovi dizajna rubova

rubni stil: isprekidan

rubni stil: isprekidan

rubni stil: čvrsta

stil obruba: dvostruko

border-style: žlijeb

rubni stil: greben

rubni stil: umetnuti

border-style: početak

Četiri različita okvira

rubni stil: točkasto

rubni stil: isprekidan

rubni stil: čvrsta

stil obruba: dvostruko

border-style: žlijeb

rubni stil: greben

rubni stil: umetnuti

border-style: početak

Četiri različita okvira

2.2. Primjer. Promjena boje okvira pri lebdenju mišem

Ovaj primjer je vrlo jednostavan, ali zanimljiv. Pokazuje kako se pseudoklasa :hover i CSS granica mogu koristiti za stvaranje jednostavnih efekata (kao što su izbornici).

Kada mišem prijeđete preko bloka, boja okvira će se promijeniti

Ovako to izgleda na stranici:

2.3. Primjer. Kako napraviti prozirni rubni okvir

Okvir može biti proziran. Ovaj je učinak rijedak, ali ponekad može biti vrlo koristan za web dizajnere. Za postavljanje prozirnosti potrebno je koristiti set boja u obliku RGBA (R, G, B, P), gdje posljednji parametar postavlja prozirnost ( pravi broj od 0,0 do 1,0)

Ovako to izgleda na stranici:

3. Debljina granice: svojstvo širine granice

Postavlja debljinu linije. Prethodno smo to naveli u jednom opisu granice.

CSS sintaksa border-width

širina granice: tanak | srednje | debeli | značenje;

• tanka - debljina tanke linije
• srednje - prosječna debljina linije
• debeli - debela debljina linije

Dolje je nekoliko primjera. Najneobičnija stvar bit će različita debljina obruba sa svake strane.

border-width: tanka

border-width: srednje

border-width: debeo

Različite debljine na rubovima

Ovako to izgleda na stranici:

border-width: tanka

border-width: srednje

border-width: debeo

Različite debljine na rubovima

4. Kako napraviti rubni okvir samo na jednom rubu (border)

CSS svojstvo obruba ima izvedena svojstva za postavljanje jednostranih obruba na element:

• border-top - postaviti granicu na vrhu (gornja granica)
• border-bottom - za postavljanje granice na dnu (donja granica)
• border-desno - za postavljanje granice s desne strane (desna granica)
• border-left - za postavljanje granice s lijeve strane (lijeva granica)

Te se granice mogu kombinirati, tj. Napišite svoj okvir za svaki smjer. Sintaksa je potpuno ista kao i granica.

Tu su i svojstva

• border-top-color - postavite boju gornjeg ruba
• border-top-style - postavljanje stila gornjeg ruba
• border-top-width - postavljanje debljine gornjeg ruba
• itd. za svaki smjer

Po mom mišljenju, lakše je napisati sve u redu nego stvoriti dodatni tekst u stilovima. Na primjer, sljedeća svojstva bit će ista

/* Opis dva identična stila: */

4.1. Primjer. Prekrasan okvir za isticanje citata

Primjer okvira citata

Ovako to izgleda na stranici:

Primjer okvira citata

Bilješka
Za svaku stranu možete postaviti zasebnu granicu.

5. Kako dodati više obruba html elementu

Ponekad je potrebno napraviti nekoliko obruba. Navedimo primjer

5.1. Prva opcija s više obruba

Ovako to izgleda na stranici:

Postoji i drugi način kroz sjenčanje.

5.2. Prekrivajte sjene za stvaranje više obruba

Ovako to izgleda na stranici:

6. Zaokruživanje kutova na granicama (radijus granice)

Za stvaranje lijepi okviri koristiti CSS svojstvo border-radius (dostupno samo u CSS3). Može se koristiti za izradu zaobljenih kutova, što stvara potpuno drugačiji izgled. Na primjer

7. CSS uvučena linija

Depresivne linije mogu izgledati impresivno na tamnoj pozadini, što nije prikladno za svako mjesto.

Ovako to izgleda na stranici:

Da biste pristupili granici iz JavaScripta, morate napisati sljedeću konstrukciju:

document.getElementById("elementID").style.border= "VRIJEDNOST"

Kao primjer možete uzeti jednu varijantu, gdje blok ima zakrivljene kutove, a izgleda potpuno drugačije od standardnog. Neki imaju mogućnost postavljanja raznih vrpci ili ugradnju slike koja se ugrađuje unutar bloka.

Sav prezentirani materijal je u prilagodljivom obliku za različite rezolucije, bilo za veliki monitor ili najmanji ekran. Nakon instalacije, promjena će se dogoditi na mjestu, gdje su uglavnom postavljeni kako bi privukli pozornost, jer u početku postoji samo struktura koja može nadopuniti glavni stil.

Prva opcija:

Ugoinsa_utomatio_npones (
prikaz: inline-block;
širina: 295px;
položaj: relativan;
obrub: 1,5 px čvrsti #1b629e;
prijelaz: sve .3s lakoća;
margina: 5px;
kursor:pokazivač;
}
.ugoinsa_utomatio_npones:prije, .ugoinsa_utomatio_npones:poslije (
sadržaj: "";
z-indeks: -1;
prikaz: blok;
pozicija: apsolutna;
pozadina: #FFF;
vrh: 50%;
lijevo: 50%;
transformiraj: prevedi (-50%, -50%);
broj ponavljanja animacije: 1;
transformacija-porijeklo: 50% 50%;
}
.ugoinsa_utomatio_npones:prije (
širina: calc(100% + 4px);
visina: 75%;
z-indeks: 1;
prijelaz: visina 0,6s;
}
.ugoinsa_utomatio_npones:nakon (
visina: calc(100% + 4px);
širina: 85%;
z-indeks: 1;
prijelaz: širina 0,7s;
}
.ugoinsa_utomatio_npones:lebdjeti:prije, .ugoinsa_utomatio_npones:focus:prije (
visina: 50%;
}
.ugoinsa_utomatio_npones:lebdjeti:nakon, .ugoinsa_utomatio_npones:fokus:nakon (
širina: 74%;
}
.sequpok_egulaned_demob (
ispuna: 29px;
z-indeks: 2;
položaj: relativan;
poravnanje teksta: središte;
}

Druga opcija:

Pvobamoco-mpagensive (
položaj: relativan;
prikaz: inline-block;
širina: 283px;
margina: 7px 0 37px 0;
ispuna: 28px;
boja: #f3eaea;
poravnanje teksta: središte;
pozadina: #2b22a0;
pozadina: linearni gradijent (lijevo dolje, transparentno 50%, rgba(16, 16, 16, 0.4) 0) bez ponavljanja 100% 0 / 30px 30px, linearni gradijent(-135deg, rgba(0, 0, 0) , 0) 20 px, #334ab9 0);
filter: drop-shadow(18px 28px rgba(14, 14, 14, 0.1));
}
.pvobamoco-mpagensive::prije (
sadržaj: " ";
pozicija: apsolutna;
gore: 30px;
desno: 0;
pozadina: linearni gradijent (dolje lijevo, rgba(0, 0, 0, 0) 50%, rgba(14, 14, 14, 0.1) 0) 100% 0 bez ponavljanja;
širina: 28px;
visina: 28px;
transformacija: rotacija (180 stupnjeva);
}

Treća opcija:

Keculosubes_aspectsiveb (
položaj: relativan;
prikaz: inline-block;
širina: 295px;
ispuna: 30px;
margina: 9px;
min-visina: 91px;
rub: 2px puna #BFE2FF;
poravnanje teksta: središte;
}
.malugeke_deculos (
širina: 148px;
visina: 148px;
preljev: skriven;
pozicija: apsolutna;
}
.malugeke_deculos::prije, .malugeke_deculos::poslije (
pozicija: apsolutna;
z-indeks: -1;
sadržaj: "";
prikaz: blok;
rub: 5px čvrsti #2980b9;
}
.malugeke_deculos raspon (
pozicija: apsolutna;
prikaz: blok;
širina: 223px;
ispuna: 15px 0;
boja pozadine: #337AB7;
okvir-sjena: 0 5px 10px rgba(12, 12, 12, 0.1);
boja: #f3f0f0;
font: 700 18px/1 "Lato", sans-serif;
tekst-sjena: 0 1px 1px rgba(8, 8, 8, 0.1);
transformacija teksta: velika slova;
poravnanje teksta: središte;
}
.malugeke_deculos-gore-lijevo (
gore: -10px;
lijevo: -10px;
}
.malugeke_deculos-top-lijevo::prije, .malugeke_deculos-gore-lijevo::poslije (
border-left-color: transparent;
}
.malugeke_deculos-gore-lijevo::prije (
vrh: 0;
desno: 0;
}
.malugeke_deculos-gore-lijevo::nakon (
lijevo: 0;
dolje: 0;
}
.malugeke_deculos-gornji lijevi raspon (
desno: -25px;
gore: 30px;
transformacija: rotacija (-45 stupnjeva);
}
.malugeke_deculos-gore-desno (
gore: -10px;
desno: -10px;
}
.malugeke_deculos-top-desno::prije, .malugeke_deculos-top-desno::poslije (
border-top-color: proziran;
border-desno-boja: prozirna;
}
.malugeke_deculos-gore-desno::prije (
vrh: 0;
lijevo: 0;
}
.malugeke_deculos-gore-desno::nakon (
desno: 0;
dolje: 0;
}
.malugeke_deculos-gornji desni raspon (
lijevo: -25px;
gore: 30px;
transformacija: rotacija (45 stupnjeva);
}

Ovdje ga web programer može lijepo dizajnirati, jer za to već postoji kompletan okvir, neki ljudi stavljaju sjene, sve ovisi o paleti boja internetskog izvora i općenito gdje ćete biti i za koju ćete svrhu postaviti takve originalni okvir.

U ovom vodiču stvorit ćemo učinak zakrivljenih kutova bez korištenja slika ili dodatnih oznaka. Sjajno radi u svim modernim preglednicima i dobro je prilagođen dizajnu web stranica s jednostavnim shemama boja.

Ovaj efekt korišten je u demonstraciji za lekciju "Višestruke pozadine i potezi pomoću CSS2". Osim toga, korištenje zakrivljenih kutova u dizajnu prave web stranice može se vidjeti na primjeru Yiibu. Ali Yiibu stranica koristi slike, a mi koristimo pseudoelemente i CSS.

Početak

Ništa komplicirano. Bilo koji element će poslužiti i nije potrebno dodatno označavanje. Sve počinje jednostavnim oslikanim pravokutnikom. Preglednici koji ne podržavaju pseudoelemente (IE6 i IE7) također će ga prikazati.

Dodavanje svojstva position:relative omogućuje apsolutno pozicioniranje pseudoelemenata.

Napomena ( pozicija: relativna; širina: 30%; padding: 1em 1.5em; margina: 2em auto; boja: #fff; pozadina: #97C02F; )

Presavijeni kut kreiran je pomoću pseudoelementa koji je pozicioniran unutra gornji kut pravokutnik. Pseudo element nema širinu ni visinu, ali ima debeo potez. Promjenom debljine poteza promijenit ćemo veličinu presavijenog kuta.

U ovom primjeru, gornji i desni dio poteza imaju boje koje odgovaraju boji pozadine nadređenog pravokutnika. Lijevi i donji dio poteza su tamnije ili svjetlije boje od boje pozadine pravokutnika.

Napomena:prije (sadržaj:""; pozicija:apsolutno; vrh:0; desno:0; širina obruba:0 16px 16px 0; stil obruba:čvrsta; boja obruba:#658E15 #fff; )

To je sve što vam je potrebno za stvaranje jednostavnog efekta psećih ušiju sličnog onome koji se koristi na Yiibu stranici.

Firefox 3.0 ne dopušta pozicioniranje pseudoelemenata. Možete koristiti nekoliko svojstava da to popravite u ovom pregledniku.

Napomena:prije ( ... prikaz:blok; širina:0; )

Dodavanje svijetle sjene

Izgled kuta može se malo poboljšati dodavanjem svojstva box-shadow (za one preglednike koji to podržavaju) pseudo-elementu. Postavljanjem svojstva overflow:hidden na klasi elementa skriva se dio sjene, što prekida efekt uvijanja.

Napomena:prije ( ... -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

Zaobljeni kutovi

Također je relativno lako koristiti ovu tehniku ​​u kombinaciji sa zaobljenim kutovima. Nažalost, svaki moderni preglednik ima neku vrstu greške koja se odnosi na svojstvo border-radius (uključujući one koji koriste svojstvo bez prefiksa). Ova situacija znači potrebu za dodatnim radom.

To mogu učiniti samo Webkit preglednici zaobljeni kutovi za pseudoelemente ako imaju samo 2 potezna dijela. Opera 11 i Firefox 3.6 stvaraju nered koji suzi oči. Štoviše, Opera 11 ima najveću pogrešku u ovom procesu.

Korištenje sve četiri strane uklanja probleme u Operi 11 i Firefoxu 3.6. Ali ovu metodu rješenje rezultira pogreškom u Safariju 5 koja rezultira nazubljenom dijagonalnom linijom. Zaobići ovaj problem možete postaviti boju za barem jedan dio poteza na prozirnu.

Boja pozadine bit će vidljiva kroz prozirni obris. U idealnom slučaju, ovaj pristup će generirati učinak i sadržavati minimum koda. Ali Opera 11 pokazuje boja pozadine kroz transparentni potez samo ako je postavljeno svojstvo border-radius.

Note-rounded:before ( content:""; position:absolute; top:0; right:0; border-width:8px; border-color:#fff #fff transparent transparent; background:#658E15; -webkit-border- bottom-left-radius:5px; -moz-border-radius:0 0 0 5px;

CSS datoteka za demo stranicu sadrži komentare koji su korisni za rad. Svaki preglednik ima svoje osobine kada koristi svojstvo border-radius ili rubne elemente bez širine ili visine.

Konačni kod

Ispod je sav CSS kod potreban za stvaranje efekta uvijenog kuta sa suptilnim sjenama pomoću samo jednog HTML elementa.

Položaj: rođak; širina:30%; podstava:1em 1,5em; margina:2em auto; boja:#fff; pozadina:#97C02F; preljev: skriven; ) .note:before ( content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15 ; pozadina:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px rgba(0,0,0,0,2); 0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0, 0.2); display:block;0; /* Prevladavanje ograničenja Firefoxa 3.0 */ .note.rounded ( -webkit-border-radius:5px; border-radius:5px; ) . note.rounded:before ( border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border- radius:0 0 0 5px; border- polumjer:0 0 0 5px )

Zaključak

Demo stranica sadrži primjere s različitim bojama kako biste bili sigurni da je učinak jednostavan za korištenje.

Imajte na umu da ova tehnika manje funkcionira kada koristite sliku kao pozadinu za element nego kada koristite jednostavnu boju. Ali druge metode organiziranja savijenih kutova također imaju takva ograničenja.