online: 7; azi: 1548; total: 52003 Webdesign - Css - 23

Cerc si Oval cu CSS

Cerc si Oval create cu un singur tag HTML (DIV) si cateva proprietati CSS.

Cerc

<style type="text/css">
#circle {
 width: 180px;
 height: 180px;
 background: #abcdef;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 padding:15px;
}
</style>

<div id="circle"><br/><br/>Cursuri online:<br/>discant.ro</div>
Rezultat:


Cursuri online:
discant.ro

Forma Ovala

- Raza trebuie sa fie jumatate din lungime si inaltime, la care se adauga valoarea padding-ului (in acest exemplu: (240 / 2) + 15 = 135, si (120 / 2) + 15 = 75).
<style type="text/css">
#oval {
 width: 240px;
 height: 120px;
 background: #89f899;
 -moz-border-radius: 135px / 75px;
 -webkit-border-radius: 135px / 75px;
 border-radius: 135px / 75px;padding:15px;
}
</style>

<div id="oval"><br/>Cursuri Programare Web:<br/>http://discant.ro</div>
Rezultat:

Cursuri Programare Web:
http://discant.ro