با سلام گرم خدمت خوانندگان عزیز سایت،اینبار با یک مطلب در رابطه با CSS در خدمت شما عزیزان هستم،در این پست به معرفی ۱۰ ترفند پر استفاده در سی اس اس که توسط طراحان عزیزمون مورد استفاده قرار میگیره، پرداختیم،این مطلب برای همه عزیزان چه مبتدی ها و چه حرفه ای ها سودمند بوده، چرا که مبتدی ها چیزیایی یاد میگیرن و حرفه ای ها یا به اطلاعاتشون اضافه میشه یا مروری براشونه

۱-گرد کردن گوشه ها بدون عکس:

 


   



   


 
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

2-لیست با قالب سفارشی

 


 
This is line one


 
Here is line two


 
And last line


 
ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
 
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
 

3-فرم های بدون تیبل

Name
Address
City

label,input { display: block; width: 150px; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; padding-right: 20px; } br { clear: left; }

4-blockquote دوگانه

  
blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

5-افکت Gradient برای متن

 

CSS Gradient Text
 
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
 

 

6-میانه عمودی بدون line-height

 
div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}
 
Content here
 

7-گوشه های گرد شده توسط عکس

 




 
CONTENT




 
.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
 
.roundcont p {
margin: 0 10px;
}
 
.roundtop {
background: url(tr.gif) no-repeat top right;
}
 
.roundbottom {
background: url(br.gif) no-repeat top right;
}
 
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
 

8-کلاس نیم های(class name) چندگانه

 

 
.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}

9-میانه افقی

 
 

 
#container {
margin:0px auto;
}
 

10-بزرگ کردن حرف اول جمله (Drop Caps)

 
 This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap. 
 
p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}