پر استفاده ترین ترفند های CSS

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

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

   



   



.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-گوشه های گرد شده توسط عکس

width="15" height="15" class="corner"

style="display: none" />


CONTENT




width="15" height="15" class="corner"

style="display: none" />





.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;

}