site-ul webmaster

Pentru a crea banda, avem nevoie doar tag-ul h2. Pentru a produce banda folosim pseudo-elemente: înainte și: după.
Pentru benzile simple pot utiliza CSS, pentru a reduce numărul de imagini încărcate în browserul utilizatorului.
Banda va fi afișată în toată frumusețea ei numai în browserele moderne care acceptă CSS3. În browserele mai vechi ar fi o bandă de simplu, care se extinde dincolo de paginile site-ului.
Structura este foarte simplă. Textul încheiat în etichetă

Acesta va fi afișat sub formă de bandă:

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „>

Bandă pe CSS3

Efectul centurii este din nou în vogă. Pentru a crea banda, avem nevoie doar să etichetați

utilizarea

Acest element de design poate fi utilizat pentru fundaluri de meniu, antete, și alte părți.

Argumente pro și contra

Pentru benzile simple, este posibil să se utilizeze CSS, pentru a reduce numărul de imagini încărcate în browser-ul utilizatorului.
Banda va fi afișat în browserele moderne care acceptă CSS3.

? 200 '200px': '' + (this.scrollHeight + 5) + 'px'); „> .ribbon<
lățime: 70%;
padding: 55px;
margin: 0 auto;
culoare de fundal: #fff;
frontieră: solid 1px # 333;
border-radius: 6px;
-webkit-border-radius: 6px;
-Moz-border-radius: 6px;>

h2 <
Poziția: relativă;
lățime: 50%;
font-size: 1.5em;
font-weight: bold;
padding: 20px 6px 6px 70px;
margin: 30px 10px 10px -75px;
culoare: # 000000;
background-color: # B14444;
text-shadow: 0px 1px 2px #bbb;
-webkit-box-shadow: 0px 2px 4px # 888;
-Moz-box-shadow: 0px 2px 4px # 888;
box-shadow: 0px 2px 4px # 888;>

h2: după <
conținut: '';
Poziția: absolută;
lățime: 0;
înălțime: 0;
stânga: 0px;
top: 100%;
border-width: 5px 10px;
Stil de frontieră: solid;
border-color: # 666 # 666 transparent transparent;>

h2: înainte <
conținut: '';
Poziția: absolută;
lățime: 30px;
înălțime: 0;
stânga: -30px;
top: 12px;
border-width: 20px 10px;
Stil de frontieră: solid;
border-color: # B14444 # B14444 # B14444 transparent;>

background-color: # B14444; - culoare panglică
border-color: # B14444 # B14444 # B14444 transparent; - culoarea secțiunii pliate. Culoarea ar trebui să se potrivească cu culoarea porțiunii principale a benzii.

Dimensiunea și culoarea creat ei înșiși.