گرد کردن گوشه های باکس در css
#1
Note 
گرد کردن گوشه های باکس ها قبل از css3 توسط تصاویر انجام میشد که گوشه هارو به صورت تصویر طراحی و قرار میدادند ولی با امدن css3 کدی رو در اختیار شما قرار میده به نام border-radius که این گزینه این امکان رو میده که باکس های خود را گوشه هاشو گرد کنید میتونید هر کدوم از گوشه ها رو که خاستید گرد کنید ..

کد php:
<html>
<
head>
    <
meta charset="utf-8">    
<
style>
body {
  
background#EEE
  
font-familyarialhelveticasans-serif;
  
margin0;
  
padding0;
}


#wrapper {
  
width960px;
  
margin0 auto;
}


.
mydiv {
  
margin60px auto;
  
width400px;
  
height400px;
  
background-color#ff9900
}


#myDiv1 {
  
-webkit-border-radius50px;
  -
moz-border-radius50px;
}




#myDiv2 {
  
-webkit-border-top-left-radius50px;
  -
webkit-border-bottom-right-radius50px;
  -
moz-border-radius-topleft50px;
  -
moz-border-radius-bottomright50px;
}




#myDiv3 {
  
-webkit-border-radius5px 200px 30px 50px;
  -
moz-border-radius5px 200px 30px 50px;
}




#myDiv4 {
  
-webkit-border-radius100px 30px;
  -
moz-border-radius100px 30px;
}




#myDiv5 {
  
-webkit-border-radius300px;
  -
moz-border-radius300px;
}




#myDiv6 {
  
border-radius50px;
}
</
style>
</
head>
<
body>
  <
div id="wrapper">
    <
div id="myDiv1" class="mydiv"></div>
    <
div id="myDiv2" class="mydiv"></div>
    <
div id="myDiv3" class="mydiv"></div>
    <
div id="myDiv4" class="mydiv"></div>
    <
div id="myDiv5" class="mydiv"></div>
    <
div id="myDiv6" class="mydiv"></div>
  </
div>
</
body>
</
html

پاسخ
#2
Note 
با استفاده از این آموزش می توانید یک منو آبشاری ساده (کرکره ای) را با اسفاده از css و html بسازید بدون نیاز به جاوا اسکریپت.

کد php:
ul {


font-familyTahoma;
font-size12px;
margin0;
padding0;
list-
stylenone;
}
ul li {
displayblock;
positionrelative;
floatright;
}
li ul {
displaynone;
}
ul li a {
displayblock;
text-decorationnone;
color#ffffff;
border-top1px solid #ffffff;
padding5px 15px 5px 15px;
background#1e7c9a;
margin-left1px;
white-spacenowrap;
}
ul li a:hover {
background#3b3b3b;
}
li:hover ul {
displayblock;
positionabsolute;
}
li:hover li {
floatnone;
font-size11px;
}
li:hover a background#3b3b3b; }
li:hover li a:hover {
background#1e7c9a;


پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

کاربرانِ درحال بازدید از این موضوع:   1 مهمان