Colturi Rotunjite In Css

gaby · August 22, 2007

Pentru a crea colturi rotunjite cel mai simplu mod ar fi prin folosirea CSS-ului.
Un exemplu de colturi rotunjite create cu ajutorul CSS-ului aveti mai jos (bineinteles acesta poate fi personalizat dupa nevoi):

Dupa tagurile <head></head> introduceti codurile:

<style type="text/css">
.chenar{display:block}
.chenar *{
 display:block;
 height:1px;
 overflow:hidden;
 font-size:.01em;
 background:#0099CC}
.chenar1{
 margin-left:3px;
 margin-right:3px;
 padding-left:1px;
 padding-right:1px;
 border-left:1px solid #66e26d;
 border-right:1px solid #66e26d;
 background:#0099CC}
.chenar2{
 margin-left:1px;
 margin-right:1px;
 padding-right:1px;
 padding-left:1px;
 border-left:1px solid #9cec9e;
 border-right:1px solid #9cec9e;
 background:#0099CC}
.chenar3{
 margin-left:1px;
 margin-right:1px;
 border-left:1px solid #27d635;
 border-right:1px solid #27d635;}
.chenar4{
 border-left:1px solid #66e26d;
 border-right:1px solid #66e26d}
.chenar5{
 border-left:1px solid #31d83e;
 border-right:1px solid #31d83e}
.chenarfg{
 background:#0099CC}
</style>

Apoi introduceti intre tagurile <body></body> ce avem mai jos:

<b class="chenar">
<b class="chenar1"><b></b></b>
<b class="chenar2"><b></b></b>
<b class="chenar3"></b>
<b class="chenar4"></b>
<b class="chenar5"></b></b><div class="chenarfg">
<!-- content goes here -->
PC Troubleshooting<br/>
Tutoriale CSS, PHP, HTML, MYSQL<br/>
Tutoriale web design<br/>
Passion for computers
</div>

<b class="chenar">
<b class="chenar5"></b>
<b class="chenar4"></b>
<b class="chenar3"></b>
<b class="chenar2"><b></b></b>
<b class="chenar1"><b></b></b></b>
</div>

Un alt exemplu gasiti si aici: http://viralpatel.net/blogs/rounded-corner-css-without-images/

Succes :pct: !

varzaru.marius · February 1, 2010

o explicatie mai detaliata se poate?

gaby · February 3, 2010

Mai detaliat de atat ? Incearca sa urmezi instructiunile date mai sus.

Iti recomand sa inserezi codurile date de mine mai sus in Dreamweaver 8 pentru ca are posibilitatea de vizualizare atat a codului scris de tine cat si a previzualizarii codului in format interpretat de browser, iar cu ajutorul acestui program vei putea face cateva teste pentru a intelege mai bine codurile.

Exemplu:

+alex008 · January 9, 2012

Am un site html (mai mult sau mai putin :)) ) si am in body textul intre <h2>text</h2> si in fisierul css

#meniu h2 {

height: 30px;

margin: 30px 0 0 0;

padding: 5px 10px 0 10px;

background: #84102b repeat-x;

letter-spacing: normal;

font-size: 14px;

color: #FFFFFF;

}

Imi apar ca niste dreptunghiuri, cum pot sa fac sa apare cu colturile rotunsite? ce ar trebui sa adaug mai exact?

+skyler_sdf · January 10, 2012

i use this:


div {

      height: 100px;

      width: 300px;

      }


.rounded-corners {

      border-radius: 15px;

      -moz-border-radius:15px;

      -webkit-border-radius:15px;

}

where -moz>>support firefox, -webkit>>support Safari&Google Chrome

+skyler_sdf · January 10, 2012

more details about how it works: Link

Sign In

Colturi Rotunjite In Css

Recommended Posts

gaby

varzaru.marius

gaby

+alex008

+skyler_sdf

+skyler_sdf

Please sign in to comment

Recently Browsing 0 members

Activity

Browse

Important Information