Crearea cadrelor folosind CSS. Efect de colț ondulat folosind doar CSS Image-Border-Width border-image-width

Vlad Merjevici

Pe site-uri web, triunghiurile sunt adesea folosite ca parte a designului elementelor; de exemplu, ele servesc ca un indicator către un obiect, îndreptând atenția cititorului către locul potrivit. Triunghiurile îndeplinesc și funcții decorative, făcând blocurile în care sunt folosite mai elegante și mai moderne. În fig. Figura 1 prezintă un exemplu de utilizare a unui triunghi într-un proiect.

Orez. 1. Triunghiuri în web design

Nu puteți crea direct un triunghi folosind CSS, așa că există două metode disponibile pentru a-l adăuga - prin border și transform .

Folosind chenar

Deși granițele create prin proprietate de frontieră, nu sunt direct legate de triunghiuri; este chenarul cel mai des folosit pentru aceasta. Dacă setăm lățimea și înălțimea elementului la zero și, de asemenea, setăm un chenar suficient de gros, vom vedea un set de patru triunghiuri (Fig. 2). Pentru claritate, marginile de pe toate părțile sunt setate la culori diferite.

Orez. 2. Adăugarea unui chenar la un element

Lăsând doar chenarul dorit și făcând restul transparent, vom obține un triunghi de culoarea dorită (Fig. 3).

Orez. 3. Element cu margini transparente

Exemplul 1 arată cum să adăugați un triunghi la un bloc folosind pseudo-elementul ::after.

Exemplul 1. Bloc cu triunghi

Pentru elementele poziționate absolut, nu sunt necesare lățimea și înălțimea zero.

Combinând limite, puteți obține încă patru tipuri de triunghiuri, care, în combinație cu cele deja menționate, ne oferă opt opțiuni. Tipul lor și codul necesar sunt date în tabel. 1.

Masa 1. Tipuri posibile triunghiuri

Vedere	Stil
	chenar: 20px solid transparent; chenar-sus: 20px verde continuu;
	chenar: 20px solid transparent; chenar-dreapta: 20px verde continuu;
	chenar: 20px solid transparent; chenar-jos: 20px verde continuu;
	chenar: 20px solid transparent; chenar-stânga: 20px verde continuu;
	chenar: 20px solid transparent; chenar-sus: 20px verde continuu; chenar-dreapta: 20px verde continuu;
	chenar: 20px solid transparent; chenar-dreapta: 20px verde continuu; chenar-jos: 20px verde continuu;
	chenar: 20px solid transparent; chenar-jos: 20px verde continuu; chenar-stânga: 20px verde continuu;
	chenar: 20px solid transparent; chenar-stânga: 20px verde continuu; chenar-sus: 20px verde continuu;

Tabelul arată că marginile invizibile ocupă spațiu, luați în considerare acest lucru atunci când poziționați elementele. De asemenea, stilul trebuie suplimentat cu lățimea și înălțimea zero sau să folosească proprietatea de poziție, așa cum sa făcut în exemplul 1.

Triunghiul poate fi transformat în alte forme dacă setați diferite grosimi de chenar. Astfel, codul pentru crearea blocului prezentat în Fig. 4, prezentat în exemplul 2.

Orez. 4. Triunghi ascuțit

Exemplul 2. Triunghi acut

Folosind chenarul obținem triunghiuri de culoare solidă pentru a crea cadrul prezentat în Fig. 5 trebuie să folosești un truc și să pui un element peste altul cu deplasare usoara. Din nou, pseudoelementele :before și :after ne vor ajuta aici (exemplul 3).

Orez. 5. Rama cu colt

Exemplul 3: Suprapunerea triunghiului

Deoarece stratificăm un element de culoare solidă peste altul, această metodă este potrivită numai pentru umplerile de culoare solidă și nu este potrivită pentru degrade sau imagini de fundal.

Folosind Transformare

Folosind transformarea, putem roti un element pătrat cu 45º și obținem un romb din el. Acesta nu este încă un triunghi ca atare, așa că lăsăm partea proeminentă de care avem nevoie la vedere și ascundem restul în spatele altui element (exemplul 4).

Exemplul 3: Transformare

Rezultatul acestui exemplu este prezentat în Fig. 6.

Orez. 6. Triunghi cu umbră

Vă aducem în atenție o selecție frumoasă de colțuri și rame care sunt destinate blocurilor de informații pentru care sunt folosite Ajutor HTMLși CSS. Tot în această notă poți alege stilul de design care se realizează pe colțuri, care vine cu un efect când treci cu mouse-ul peste un clic și setarea implicită fără niciun efect, doar un design elegant.

Ca exemplu, puteți lua o variantă, în care blocul are colțuri curbate și arată complet diferit de cel standard. Unele au o opțiune pentru plasarea diferitelor panglici sau instalarea unei imagini care este instalată în interiorul blocului.

Toate materialele prezentate sunt în formă adaptativă pentru diferite rezoluții, fie pentru un monitor mare, fie pentru cel mai mic ecran. După instalare, va avea loc o schimbare pe șantier, unde sunt plasate în principal pentru a atrage atenția, deoarece inițial există doar o structură care poate completa stilul principal.

Prima varianta:

CSS

Ugoinsa_utomatio_npones (
display: inline-block;
lățime: 295px;
poziție: relativă;
chenar: 1,5px solid #1b629e;
tranziție: toate .3s ușurință;
marja: 5px;
cursor:pointer;
}
.ugoinsa_utomatio_npones:înainte, .ugoinsa_utomatio_npones:după (
continut: "";
indicele z: -1;
afisare: bloc;
poziție: absolută;
fundal: #FFF;
sus: 50%;
stânga: 50%;
transforma: traduce(-50%, -50%);
animație-număr-iterație: 1;
transformare-origine: 50% 50%;
}
.ugoinsa_utomatio_npones:înainte (
lățime: calc(100% + 4px);
înălțime: 75%;
indicele z: 1;
tranziție: înălțime 0,6s;
}
.ugoinsa_utomatio_npones:după (
înălțime: calc(100% + 4px);
latime: 85%;
indicele z: 1;
tranziție: lățime 0,7s;
}
.ugoinsa_utomatio_npones:hover:before, .ugoinsa_utomatio_npones:focus:before (
inaltime: 50%;
}
.ugoinsa_utomatio_npones:hover:după, .ugoinsa_utomatio_npones:focus:după (
latime: 74%;
}
.sequpok_egulaned_demob (
umplutură: 29px;
indicele z: 2;
poziție: relativă;
text-align: centru;
}

Aici creăm independent o instalație pentru resursa noastră și o facem mai vizibilă, în funcție de acțiunea.

A doua varianta:

CSS

Pvobamoco-mpagensiv (
poziție: relativă;
display: inline-block;
lățime: 283px;
marjă: 7px 0 37px 0;
umplutură: 28px;
culoare: #f3eaea;
text-align: centru;
fundal: #2b22a0;
fundal: gradient liniar (în stânga jos, transparent 50%, rgba(16, 16, 16, 0,4) 0) fără repetare 100% 0 / 30px 30px, gradient liniar (-135deg, rgba(0, 0, 0) , 0) 20px, #334ab9 0);
filtru: drop-shadow(18px 28px rgba(14, 14, 14, 0.1));
}
.pvobamoco-mpagensive::inainte (
continut: " ";
poziție: absolută;
sus: 30px;
dreapta: 0;
fundal: gradient liniar (în stânga jos, rgba(0, 0, 0, 0) 50%, rgba(14, 14, 14, 0.1) 0) 100% 0 fără repetare;
lățime: 28px;
înălțime: 28px;
transformare: rotire(180deg);
}

Aici efectul nu este specificat inițial, dar se realizează o umbră frumoasă pe care o puteți crește și schimba singur gama de culori.

A treia varianta:

CSS

Keculosubes_aspectsiveb (
poziție: relativă;
display: inline-block;
lățime: 295px;
umplutură: 30px;
marja: 9px;
înălțime minimă: 91px;
chenar: 2px solid #BFE2FF;
text-align: centru;
}
.malugeke_deculos (
lățime: 148px;
înălțime: 148px;
preaplin: ascuns;
poziție: absolută;
}
.malugeke_deculos::înainte, .malugeke_deculos::după (
poziție: absolută;
indicele z: -1;
continut: "";
afisare: bloc;
chenar: 5px solid #2980b9;
}
.malugeke_deculos span (
poziție: absolută;
afisare: bloc;
lățime: 223px;
umplutură: 15px 0;
culoare de fundal: #337AB7;
box-shadow: 0 5px 10px rgba(12, 12, 12, 0.1);
culoare: #f3f0f0;
font: 700 18px/1 "Lato", sans-serif;
text-shadow: 0 1px 1px rgba(8, 8, 8, 0.1);
text-transform: majuscule;
text-align: centru;
}
.malugeke_deculos-sus-stânga (
sus: -10px;
stânga: -10px;
}
.malugeke_deculos-sus-stânga::înainte, .malugeke_deculos-sus-stânga::după (
chenar-stânga-culoare: transparent;
}
.malugeke_deculos-top-left::before (
sus: 0;
dreapta: 0;
}
.malugeke_deculos-sus-stânga::după (
stânga: 0;
jos: 0;
}
.malugeke_deculos-sus-stânga span (
dreapta: -25px;
sus: 30px;
transformare: rotire(-45deg);
}
.malugeke_deculos-sus-dreapta (
sus: -10px;
dreapta: -10px;
}
.malugeke_deculos-sus-dreapta::înainte, .malugeke_deculos-sus-dreapta::după (
chenar-top-culoare: transparent;
chenar-dreapta-culoare: transparent;
}
.malugeke_deculos-sus-dreapta::before (
sus: 0;
stânga: 0;
}
.malugeke_deculos-sus-dreapta::după (
dreapta: 0;
jos: 0;
}
.malugeke_deculos-sus-dreapta span (
stânga: -25px;
sus: 30px;
transformare: rotire(45deg);
}

Tot ce rămâne este să alegeți banda din dreapta sau din stânga pentru a o instala pe bloc, unde banda în sine va servi pentru a scrie un titlu pe ea. De asemenea, schimbați culoarea sau setați inițial blocul implicit care este instalat sub panglici.

Aici un dezvoltator web îl poate proiecta frumos, pentru că pentru asta există deja un cadru complet, unii oameni pun umbre, totul depinde de paleta de culori a resursei de Internet și, în general, unde vei fi și în ce scop vei plasa astfel de un cadru original.

Pentru a crea diverse lucruri frumoase în jurul lui, iar primul lucru atât de frumos va fi cadrul.

În primul rând, să ne uităm la cele mai simple cadre. Pentru a le crea, CSS utilizează proprietatea border, care poate fi setată la următoarele valori:

solid – cadru solid;

punctat – cadru punctat;

punctat – cadru punctat;

dublu – cadru dublu linie;

groove – cadru cu umbră;

creasta - cu relief;

Încă două proprietăți necesare pentru a crea cadre simple sunt

lățime – grosimea cadrului;

culoare – culoarea cadrului;

Conform tehnicii de abreviere, valorile sunt scrise pe o singură linie, separate prin spații.

p(
chenar : 2px solid #ffff00 ;
}

padding – intern (indentarea cadrului din conținut);

margin — extern (marginea cadrului față de obiectele externe);

De asemenea, sunt specificate indicații pentru indentări (din ce parte și cât să se retragă). Aceste proprietăți sunt utilizate atunci când este nevoie de a plasa conținutul decentrat în cadru, sau cadrul în sine este decalat într-un fel.

top – liniuță de sus;

dreapta – indentare dreapta;

fund – indentare de jos;

stânga – liniuță din stânga

Valorile acestor proprietăți sunt scrise într-o versiune prescurtată una după alta (padding: 10px 30px 15px 20px), iar valoarea de vârf este setată mai întâi, iar apoi restul în sensul acelor de ceasornic.

Dacă setați o singură valoare, aceasta va însemna că indentarea pe toate părțile va fi aceeași.

p(
chenar : 2px solid #ffff00 ;

marja: 20px;
}

Dacă trebuie să plasați text sau o imagine în centrul cadrului, atunci puteți adăuga proprietatea text-align: center la selectorul „p”;

În continuare, să ne uităm la modul în care înălțimea și lățimea cadrului. Înălțimea cadrului este setată automat de browser și este selectată în așa fel încât conținutul să se încadreze în el, ținând cont de indentările specificate. Dar lățimea o vom stabili noi înșine.

Este setat de proprietatea width, iar valoarea sa indică dimensiunea dorită în pixeli sau alte măsuri de lungime acceptate pe web.

p(
chenar : 2px solid #ffff00 ;
umplutură: 10px 20px 10px 20px;
marja: 20px;
latime: 400px;
}

Apropo, amintiți-vă că atunci când setați lățimea, browserul înțelege această valoare doar ca lățime a conținutului. Apoi adaugă umplutura specificată și grosimea chenarului la această valoare și afișează dimensiunea finală pe pagină.

Ultimul lucru de făcut este să poziționați cadrul pe pagină. Acest lucru se face folosind proprietatea marjă deja existentă.

Și dacă trebuie doar să poziționați blocul de cadru în centrul paginii, atunci valoarea auto este adăugată la proprietatea marjă.

p(
chenar : 2px solid #ffff00 ;
umplutură: 10px 20px 10px 20px;
marja: 20px automat;
latime: 400px;
}

Pentru primul exemplu, să creăm document htmlși creați cadre solide pentru blocul de corp (corpul documentului) și un paragraf.

În următoarele exemple, doar CSS (ceea ce este inclus în eticheta de stil) se va schimba.

Здравствуйте уважаемые будущие веб-мастера!
Мне 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. Создание рамки

ÎN în acest exemplu se adaugă un cadru negru în jurul elementului, care este separat de fundal printr-un chenar alb (Fig. 1).

Orez. 1. Încadrați în jurul elementului

Cadru când se utilizează: hover

Când se adaugă un cadru prin chenar, lățimea elementului crește, ceea ce este destul de vizibil când se combină chenar și pseudo-clasa :hover. Există două moduri de a „câștiga” acest lucru. Cel mai simplu lucru este să înlocuiți chenar cu outline , care, după cum știm, nu afectează dimensiunea elementului (exemplul 2).

Exemplul 2: Cadru pe Hover

conturul nu este întotdeauna potrivit, fie și numai pentru că rotunjirea colțurilor nu îl afectează. A doua metodă este potrivită aici - adăugați un cadru invizibil sau un cadru care se potrivește cu culoarea de fundal, apoi modificați parametrii acestuia când treceți cu mouse-ul (exemplul 3). Atunci nu va avea loc nicio deplasare a elementului, deoarece cadrul inițial există deja. Dar ne amintim întotdeauna că lățimea elementului este suma valorilor lățimii, chenarul din stânga și chenarul din dreapta. Situația este similară cu înălțimea.

Exemplul 3: Cadru pe Hover

Chenar în jurul câmpurilor de formular

În unele browsere (Chrome, Safari, ultimele versiuni Opera) un mic cadru colorat este afișat în jurul câmpurilor de formular atunci când acestea primesc focalizare (Fig. 2). Pentru a-l elimina, trebuie doar să adăugați valoarea none la proprietatea contur din stiluri, așa cum se arată în exemplul 4.

Orez. 2. Încadrați în jurul marginilor

Exemplul 4. Scoaterea cadrului

Cadre prin box-shadow

Deși proprietatea box-shadow este destinată să adauge o umbră în jurul unui element, poate fi folosită și pentru a crea chenare care nu pot fi create folosind border sau outline . Acest lucru se datorează faptului că numărul de umbre poate fi nelimitat, ai căror parametri sunt enumerați separați prin virgule.

Pentru a obține un cadru, primii trei parametri ar trebui setați la zero; aceștia sunt responsabili pentru poziția umbrei și estomparea acesteia. Al patrulea parametru în acest caz este responsabil pentru grosimea chenarului, iar al cincilea setează culoarea chenarului. Pentru al doilea cadru, al patrulea parametru este egal cu suma grosimilor celor două rame.

Exemplul 4 arată cum să adăugați două cadre și un chenar la dreapta folosind o singură proprietate casetă-umbră.

Exemplul 4: Utilizarea box-shadow

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 3. Cadre create de proprietatea box-shadow

În acest tutorial vom crea efectul de colțuri ondulate fără a folosi imagini sau marcaje suplimentare. Funcționează excelent în toate browserele moderne și este potrivit pentru design-uri de site-uri web cu scheme de culori simple.

Acest efect a fost folosit în demonstrația pentru lecția „Multiple backgrounds and strokes using CSS2”. În plus, utilizarea colțurilor ondulate în designul unui site web real poate fi văzută în exemplul lui Yiibu. Dar site-ul Yiibu folosește imagini, iar noi folosim pseudo-elemente și CSS.

start

Nimic complicat. Orice element va funcționa și nu va fi necesară nicio marcare suplimentară. Totul începe cu un simplu dreptunghi pictat. Browserele care nu acceptă pseudo-elemente (IE6 și IE7) îl vor scoate și ele.

Adăugarea proprietății position:relative face posibilă poziționarea absolută a pseudo-elementelor.

Notă (poziție:relativ; lățime:30%; umplutură:1em 1.5em; margine:2em auto; culoare:#fff; fundal:#97C02F; )

Un colț pliat este creat folosind un pseudo-element care este poziționat în colțul de sus al dreptunghiului. Pseudoelementul nu are lățime sau înălțime, dar are o contur groasă. Schimbând grosimea cursei, vom modifica dimensiunea colțului pliat.

În acest exemplu, părțile de sus și din dreapta ale traseului au culori care se potrivesc cu culoarea de fundal a dreptunghiului părinte. Părțile din stânga și de jos ale traseului au o culoare mai închisă sau mai deschisă decât culoarea de fundal a dreptunghiului.

Notă: înainte ( conținut:""; poziție: absolut; sus:0; dreapta:0; lățime chenar:0 16px 16px 0; stil chenar:solid; culoarea chenar:#658E15 #fff; )

De atât ai nevoie pentru a crea un simplu efect de ureche de câine similar cu cel folosit pe site-ul Yiibu.

Firefox 3.0 nu permite poziționarea pseudo-elementelor. Puteți folosi câteva proprietăți pentru a remedia acest lucru în acest browser.

Notă: înainte ( ... afișare: bloc; lățime: 0; )

Adăugând o umbră ușoară

Aspectul colțului poate fi ușor îmbunătățit prin adăugarea unei proprietăți box-shadow (pentru acele browsere care o acceptă) la pseudo-element. Setarea proprietății overflow:hidden pe clasa de element ascunde o parte din umbră, care întrerupe efectul de ondulare.

Notă: înainte de ( ... -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); )

Colturi rotunjite

De asemenea, este relativ ușor să utilizați această tehnică împreună cu colțurile rotunjite. Din păcate, toată lumea browser modern are un fel de eroare legată de proprietatea border-radius (inclusiv cei care folosesc proprietatea fără prefix). Această situație înseamnă nevoia de muncă suplimentară.

Doar browserele Webkit pot face colțuri rotunjite pentru pseudo-elemente dacă au doar părți în 2 timpi. Opera 11 și Firefox 3.6 creează o mizerie uluitoare. Mai mult, Opera 11 are eroarea maximă în acest proces.

Utilizarea tuturor celor patru laturi elimină problemele din Opera 11 și Firefox 3.6. Dar aceasta metoda soluția are ca rezultat o eroare în Safari 5 care are ca rezultat o linie diagonală zimțată. Puteți rezolva această problemă setând culoarea a cel puțin unei părți a cursei la transparent.

Culoarea de fundal va fi vizibilă prin conturul transparent. În mod ideal, această abordare va genera un efect și va conține un minim de cod. Dar Opera 11 arată culoarea de fundal doar prin chenarul transparent dacă proprietatea border-radius este setată.

Notă rotunjită: înainte ( conținut: ""; poziție: absolut; sus: 0; dreapta: 0; lățime chenar: 8px; culoare chenar: #fff #fff transparent transparent; fundal:#658E15; -webkit-border- raza-stânga-jos:5px; -moz-border-radius:0 0 0 5px; chenar-radius:0 0 0 5px; display:block; width:0; )

Fișierul CSS pentru pagina demo conține comentarii care sunt utile pentru a lucra. Fiecare browser are propriile sale particularități atunci când folosește proprietatea border-radius sau elemente de margine fără lățime sau înălțime.

Cod final

Mai jos este tot codul CSS necesar pentru a crea un efect de colț ondulat cu umbre subtile folosind doar un element HTML.

Poziție:rudă; latime:30%; umplutura: 1em 1.5em; margine:2em auto; culoare:#fff; fundal:#97C02F; preaplin:ascuns; ) .notă:înainte ( conținut:""; poziție:absolut; sus:0; dreapta:0; lățime chenar:0 16px 16px 0; stil chenar:solid; culoarea chenar:#fff #fff #658E15 #658E15 ; fundal:#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; /* Depășirea limitărilor Firefox 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- rază:0 0 0 5px; rază-chenar:0 0 0 5px; )

Concluzie

Pagina demo conține exemple care utilizează diferite culori pentru a vă asigura că efectul este ușor de utilizat.

Rețineți că această tehnică funcționează mai rău atunci când utilizați o imagine ca fundal pentru un element decât atunci când utilizați culoare simplă. Dar și alte metode de organizare a colțurilor îndoite au astfel de limitări.