CSS3 Colturi rotunjite
.rounded-corners {
border-radius: 10px; /* Future Proof & IE9 */
-webkit-border-radius: 10px; /* Safari & Chrome */
-moz-border-radius: 10px; /* Firefox */
-o-border-radius: 10px; /* Opera */
}
Proprietatea border-radius permite crearea cu usurinta a colturilor rotunjite in designul elementelor, fara a fi nevoie de imagini sau mai multe tag-uri.
Internet Explorer suporta border-radius incepand cu IE9, dar puteti folosi libraria de functii JavaScript DD_roundies ca sa afisati colturi rotunjite in navigatoare web care nu recunosc aceasta proprietate CSS;
Exemplu:
width:300px;
height:120px;
border:2px solid blue;
border-radius:28px;
Rezultat:
Curs CSS - http://ayekdesign.blogspot.com
Colturile rotunjite pot fi create si independent, folosind cele patru proprietati individuale: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, si border-bottom-left-radius.
Exemplu:
width:300px;
height:120px;
background-color:#bbfeda;
border:2px solid blue;
border-top-left-radius:20px;
border-bottom-right-radius:38px;
Rezultat:
Curs CSS - http://ayekdesign.blogspot.com/
Exemplu:
.post img, table.tr-caption-container {
background: none repeat scroll 0 0 #F2F2F2;
border: 1px solid #DDDDDD;
padding: 5px;
border-radius:4px;
}
#footer {
background: none repeat scroll 0 0 #1775CD;
border-radius: 0 0 6px 6px;
clear: both;
color: #EFEFEF;
font: 12px Arial;
letter-spacing: 0;
margin: 0 auto 20px;
padding-bottom: 20px;
padding-top: 15px;
text-align: center;
text-transform: none;
width: 960px;
}
#PageList1 {
height: 30px;
margin: 0 auto;
width: 960px;
background:#1775cd;
padding:5px 0px;
border-radius:6px 6px 0 0;
}
.PageList li a {
border-radius: 16px 16px 16px 16px;
color: #FFFFFF;
font: bold 12px arial;
padding: 5px 7px;
margin:0 5px 0 15px;
border:1px solid #1775cd;
}
#searchbox {
-moz-background-inline-policy: continuous;
background: #eeeeee url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOomTNTl01sco1M0NJv1RzrdpuGJwXRwGbdhENkG4DqdzAX70p_Rfq249xJ5cbRkoIGsGsotGdM4Qj2vJHcBH_JW40Iskjx33VRAM3kIKAqJlQdLTcp-TGPFqzJYWJgGwgADlxf9i87Lk/s1600/search.png") no-repeat scroll right;
float: right;
height: 29px;
margin-right: 20px;
margin-top: -36px;
width: 195px;
border-radius:6px;
border:1px solid #1466b3;
}
.gr{background: none repeat scroll 0 0 #F2F2F2;
border: 1px solid #DDDDDD;
padding: 5px;
border-radius:4px;}
0 comentarii:
Trimiteți un comentariu