Izrada okvira pomoću CSS-a. Efekt uvijenog kuta koji koristi samo CSS Image-Border-Width border-image-width

Vlad Merzhevich

Na web stranicama trokuti se često koriste kao dio dizajna elemenata; na primjer, služe kao pokazivač na neki objekt, usmjeravajući pažnju čitatelja na pravo mjesto. Trokuti također obavljaju dekorativne funkcije, čineći blokove u kojima se koriste elegantnijim i modernijim. Na sl. Slika 1 prikazuje primjer korištenja trokuta u dizajnu.

Riža. 1. Trokuti u web dizajnu

Ne možete izravno stvoriti trokut pomoću CSS-a, tako da postoje dvije dostupne metode za njegovo dodavanje - kroz obrub i transformaciju.

Korištenje granice

Iako su granice stvorene kroz granični posjed, nisu izravno povezani s trokutima, za to se najčešće koristi rub. Postavimo li širinu i visinu elementa na nulu, te također postavimo dovoljno debeo rub, vidjet ćemo skup od četiri trokuta (slika 2). Radi jasnoće, obrubi na svim stranama postavljeni su u različite boje.

Riža. 2. Dodavanje obruba elementu

Ostavljajući samo željeni obrub, a ostatak prozirnim, dobit ćemo trokut željene boje (slika 3).

Riža. 3. Element s prozirnim granicama

Primjer 1 pokazuje kako dodati trokut bloku pomoću pseudoelementa ::after.

Primjer 1. Blok s trokutom

Za apsolutno pozicionirane elemente nije potrebna nulta širina i visina.

Kombiniranjem granica dobivamo još četiri vrste trokuta, što u kombinaciji s već spomenutima daje osam opcija. Njihov tip i tražena šifra navedeni su u tablici. 1.

Stol 1. Moguće vrste trokuta

Pogled	Stil
	obrub: 20px čvrsti proziran; border-top: 20px jednobojno zeleno;
	obrub: 20px čvrsti proziran; border-desno: 20px puno zeleno;
	obrub: 20px čvrsti proziran; border-bottom: 20px jednobojno zeleno;
	obrub: 20px čvrsti proziran; rub-lijevo: 20px puno zeleno;
	obrub: 20px čvrsti proziran; border-top: 20px jednobojno zeleno; border-desno: 20px puno zeleno;
	obrub: 20px čvrsti proziran; border-desno: 20px puno zeleno; border-bottom: 20px jednobojno zeleno;
	obrub: 20px čvrsti proziran; border-bottom: 20px jednobojno zeleno; rub-lijevo: 20px puno zeleno;
	obrub: 20px čvrsti proziran; rub-lijevo: 20px puno zeleno; border-top: 20px jednobojno zeleno;

Tablica pokazuje da nevidljivi rubovi zauzimaju prostor, uzmite to u obzir prilikom postavljanja elemenata. Stil također mora biti dopunjen nultom širinom i visinom ili koristiti svojstvo position, kao što je učinjeno u primjeru 1.

Trokut se može oblikovati u druge oblike ako postavite različite debljine obruba. Dakle, kod za kreiranje bloka prikazan na Sl. 4, prikazano u primjeru 2.

Riža. 4. Oštri trokut

Primjer 2. Oštrokutni trokut

Korištenjem obruba dobivamo jednobojne trokute za stvaranje okvira prikazanog na sl. 5 morate upotrijebiti trik i staviti jedan element na drugi blagi pomak. I ovdje će nam pomoći pseudoelementi :before i :after (primjer 3).

Riža. 5. Okvir s kutom

Primjer 3: Prekrivanje trokuta

Budući da slojevito postavljamo jedan jednobojni element na drugi, ova je metoda prikladna samo za jednobojne ispune i nije prikladna za gradijente ili pozadinske slike.

Korištenje transformacije

Koristeći transformaciju, kvadratni element možemo rotirati za 45º i od njega dobiti romb. Ovo još nije trokut kao takav, pa izbočeni dio koji nam je potreban ostavimo na vidiku, a ostatak sakrijemo iza drugog elementa (primjer 4).

Primjer 3: Transformacija

Rezultat ovog primjera prikazan je na sl. 6.

Riža. 6. Trokut sa sjenom

Predstavljamo vam prekrasan izbor uglova i okvira koji su namijenjeni za informativne blokove koji se koriste za Pomoć za HTML i CSS. Također u ovoj bilješci možete odabrati stil dizajna koji je napravljen na uglovima, koji dolazi s efektom kada lebdite iznad klika i zadanu postavku bez ikakvih efekata, samo moderan dizajn.

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:

CSS

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:nakon (
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:hover:after, .ugoinsa_utomatio_npones:focus:after (
širina: 74%;
}
.sequpok_egulaned_demob (
ispuna: 29px;
z-indeks: 2;
položaj: relativan;
poravnanje teksta: središte;
}

Ovdje samostalno stvaramo instalaciju za naš resurs i činimo je uočljivijom, ovisno o kojoj akciji.

Druga opcija:

CSS

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, prozirno 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);
}

Ovdje učinak nije inicijalno naveden, ali je napravljena prekrasna sjena koju možete sami povećati i promijeniti gamu boja.

Treća opcija:

CSS

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: transparentan;
}
.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);
}

Ostaje samo odabrati desnu ili lijevu traku kako bi je instalirali na blok, gdje će sama traka poslužiti da se na nju ispiše naslov. Također promijenite boju ili inicijalno postavite zadani blok koji je instaliran ispod vrpci.

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.

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

Prvo, pogledajmo najjednostavnije okvire. Da bi ih stvorio, CSS koristi svojstvo granice, koje 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(
rub : 2px solid #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.

vrh – 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(
rub : 2px solid #ffff00 ;

margina: 20px;
}

Ako trebate postaviti tekst ili sliku u središte okvira, tada možete dodati svojstvo text-align: center na “p” selektor;

Zatim, pogledajmo kako visina i širina okvira. Visinu okvira automatski postavlja preglednik, a 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(
rub : 2px solid #ffff00 ;
padding: 10px 20px 10px 20px;
margina: 20px;
širina: 400px;
}

Usput, zapamtite da kada postavite širinu, preglednik tu 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(
rub : 2px solid #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).

Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.

Результат:

Следующая рамка dashed (пунктир).

p{
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Результат:

Рамка dotted :

p {
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка double :

p {
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка groove :

p {
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка ridge :

p {
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для этого уберём border , и добавим border-radius и box-shadow .

p {
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.

p {
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Сделаем разноцветную рамку. Для этого в свойство box-shadow , через запятую, добавим ещё несколько комплектов значений с разными цветами.

p {
border-radius : 10px ;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p {
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding : 40px ;
margin : 20px auto ;
width : 130px ;
height : 130px ;
text-align : center;
}

Если поиграть с дробным значением border-radius , можно сделать эллипс любого вида.

Первое число в дроби — это изгиб вертикальной составляющей угла, второе — горизонтальной.

И последнее, что мы сегодня сделаем — рамка с изменяющимся цветом. Изменяться он будет при наведении курсора.

Реализуется эта опция при помощи псевдокласса :hover .

p {
border-radius : 10px ;
box-shadow : 0 0 0 4px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}
p:hover {
border-radius : 10px ;
box-shadow : 0 0 0 4px #00ff62 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

В спокойном состоянии:

При наведении курсора:

Этот же метод можно применить к разноцветной рамке, и менять при наведении курсора, какой нибудь один цвет.

Желаю творческих успехов.

Перемена

На улице Дублина двое ирландцев дерутся. К ним подходит еще один, снимает шляпу и спрашивает:
— Простите, это частная драка или любой может вмешаться?..

Влад Мержевич

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента (border внутри);
• outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

• создание сложных разноцветных рамок;
• добавление рамки к элементу при наведении на него курсора мыши;
• сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
• для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания .

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

Пример 1. Создание рамки

U u ovom primjeru oko elementa je dodan crni okvir koji je bijelim rubom odvojen od pozadine (slika 1).

Riža. 1. Okvir oko elementa

Okvir kada koristite: lebdite

Prilikom dodavanja okvira preko bordera širina elementa se povećava, što je dosta vidljivo kada se kombinira border i pseudoklasa :hover. Postoje dva načina da ovo "pobijedite". Najjednostavnije je zamijeniti border s outline, što, kao što znamo, ne utječe na veličinu elementa (primjer 2).

Primjer 2: okvir na lebdenju

obris nije uvijek prikladan, makar samo zato što zaokruživanje kutova ne utječe na njega. Ovdje je prikladna druga metoda - dodajte nevidljivi okvir ili okvir koji odgovara boji pozadine, a zatim promijenite njegove parametre kada lebdite (primjer 3). Tada neće doći do pomaka elementa, budući da okvir u početku već postoji. Ali uvijek se sjećamo da je širina elementa zbroj vrijednosti širine, obruba s lijeve strane i obruba s desne strane. Slična je situacija i s visinom.

Primjer 3: okvir na lebdenju

Obrub oko polja obrasca

U nekim preglednicima (Chrome, Safari, najnovije verzije Opera) mali okvir u boji prikazuje se oko polja obrasca kada dobiju fokus (slika 2). Da biste ga uklonili, samo dodajte vrijednost none svojstvu outline u stilovima, kao što je prikazano u primjeru 4.

Riža. 2. Uokvirite rubove

Primjer 4. Uklanjanje okvira

Okviri putem box-shadowa

Iako je svojstvo box-shadow namijenjeno za dodavanje sjene oko elementa, ono se također može koristiti za stvaranje obruba koji se ne mogu stvoriti korištenjem obruba ili obrisa. To je sve zahvaljujući činjenici da broj sjena može biti neograničen, čiji su parametri navedeni odvojeni zarezima.

Da biste dobili okvir, prva tri parametra trebaju biti postavljena na nulu; oni su odgovorni za položaj sjene i njeno zamućenje. Četvrti parametar u ovom slučaju je odgovoran za debljinu obruba, a peti postavlja boju obruba. Za drugi okvir, četvrti parametar je jednak zbroju debljina dvaju okvira.

Primjer 4 pokazuje kako dodati dva okvira i jednu granicu s desne strane koristeći jedno svojstvo box-shadow.

Primjer 4: Korištenje box-shadowa

Rezultat ovog primjera prikazan je na sl. 3.

Riža. 3. Okviri stvoreni svojstvom box-shadow

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 neće biti 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 (position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; )

Presavijeni kut se stvara pomoću pseudoelementa koji se nalazi u gornjem kutu pravokutnika. 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 crte 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, svi moderan preglednik ima neku vrstu pogreške u vezi sa svojstvom border-radius (uključujući one koji koriste svojstvo bez prefiksa). Ova situacija znači potrebu za dodatnim radom.

Samo Webkit preglednici mogu napraviti zaobljene kutove za pseudo-elemente ako imaju samo 2 poteza. 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. Ovaj problem možete zaobići postavljanjem boje barem jednog dijela poteza na prozirnu.

Boja pozadine bit će vidljiva kroz prozirni obris. U idealnom slučaju, ovaj će pristup generirati učinak i sadržavati minimum koda. Ali Opera 11 samo prikazuje boju pozadine kroz prozirni obrub 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; border-radius:0 0 0 5px; display:block; width:0; )

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 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); display:block; width:0; /* Prevladavanje ograničenja Firefoxa 3.0 */ ) .note.rounded ( -webkit-border-radius:5px; -moz-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-radius: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 radi lošije kada koristite sliku kao pozadinu za element nego kada koristite obična boja. Ali druge metode organiziranja savijenih kutova također imaju takva ograničenja.