کدهای آماده CSS که هر طراح وب باید بداند

سلام با توجه به گسترش کاربران علاقه مند ما به سی اس اس 3 و اچ تی ام ال 5 بر آن شدیمکد های جدیدی که در این مباحث معرفی شده در دسترس کاربران عزیز قرار دهیم.

ما را در ادامه همراهی کنید . . .

1- CSS Reset

همیشه در همه پروژه ها ابتدا باید فایل CSS Reset لود شود تا مقدارهای پیشفرض مرورگر برای تگ ها را صفر کنیم تا در همه مرورگرها بدرستی نمایش پیدا کند.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
  margin: 0; 
  padding: 0; 
  border: 0; 
  font-size: 100%; 
  font: inherit; 
  vertical-align: baselinebaseline; 
  outline: none; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
} 
html { height: 101%; } 
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; } 
   
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 
ol, ul { list-style: none; } 
   
blockquote, q { quotes: none; } 
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 
strong { font-weight: bold; }  
   
table { border-collapse: collapse; border-spacing: 0; } 
img { border: 0; max-width: 100%; } 
   
p { font-size: 1.2em; line-height: 1.0em; color: #333; } 

2- Clearfix کلاسیک

کد زیر را باید پس از عناصر شناور (float) قرار داد تا عناصر بعد این عنصر به درستی در مکان خود قرار بگیرند.

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } 
.clearfix { display: inline-block; } 
    
html[xmlns] .clearfix { display: block; } 
* html .clearfix { height: 1%; } 

3- Clearfix 2011

همانطور که از اسم این کد پیداست کد جدیدتر قطعه بالا است.

.clearfix:before, .container:after { content: ""; display: table; } 
.clearfix:after { clear: both; } 
   
/* IE 6/7 */ 
.clearfix { zoom: 1; }  

4- Transparency یا Opacity برای تمام مروگر

.transparent { 
    filter: alpha(opacity=50); /* internet explorer */ 
    -khtml-opacity: 0.5;      /* khtml, old safari */ 
    -moz-opacity: 0.5;       /* mozilla, netscape */ 
    opacity: 0.5;           /* fx, safari, opera */ 
}

5- کد Blockquote Template

توسط کد زیر میتوانید یک تمپلیت زیبا برای نقل قول های خود درست کنید.

blockquote { 
    background: #f9f9f9; 
    border-left: 10px solid #ccc; 
    margin: 1.5em 10px; 
    padding: .5em 10px; 
    quotes: "\201C""\201D""\2018""\2019"; 
} 
blockquote:before { 
    color: #ccc; 
    content: open-quote; 
    font-size: 4em; 
    line-height: .1em; 
    margin-right: .25em; 
    vertical-align: -.4em; 
} 
blockquote p { 
    display: inline; 
} 

6- گوشه های گرد با Border-Radius

توسط کدهای زیر میتوانید برای هر یک از گوشه ها یک مقدار مشخص آن را گرد کنید. که به دو صورت نوشته شده است. صورت اول هر چهار خط در یک خط نوشته شده است. اما در صورت دوم برای هر یک از گوشه ها یک خط جداگانه نوشته شده است.

#container { 
    -webkit-border-radius: 4px 3px 6px 10px; 
    -moz-border-radius: 4px 3px 6px 10px; 
    -o-border-radius: 4px 3px 6px 10px; 
    border-radius: 4px 3px 6px 10px; 
} 
   
/* alternative syntax broken into each line */ 
#container { 
    -webkit-border-top-left-radius: 4px; 
    -webkit-border-top-rightright-radius: 3px; 
    -webkit-border-bottom-rightright-radius: 6px; 
    -webkit-border-bottom-left-radius: 10px; 
       
    -moz-border-radius-topleft: 4px; 
    -moz-border-radius-topright: 3px; 
    -moz-border-radius-bottomright: 6px; 
    -moz-border-radius-bottomleft: 10px; 
}

7- Media Queryهای عمومی

توسط مدیا کوئری های زیر براحتی میتوانید انواع دستگاه ها را شناسایی کنید.

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen  
and (min-device-width : 320px) and (max-device-width : 480px) { 
  /* Styles */ 
} 
   
/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
  /* Styles */ 
} 
   
/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
  /* Styles */ 
} 
   
/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
  /* Styles */ 
} 
   
/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
  /* Styles */ 
} 
   
/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
  /* Styles */ 
} 
   
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
  /* Styles */ 
} 
   
/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
  /* Styles */ 
} 
   
/* iPhone 4 ----------- */ 
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { 
  /* Styles */ 
}  

8- Moder font stacks

توسط کدهای زیر میتوانید نمونه های مختلف fontها را که میتوان (پیشنهاد میشود) در یک font-family قرار داد ببینید. که البته برای فونت های انگلیسی است.

/* Times New Roman-based serif */ 
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; 
   
/* A modern Georgia-based serif */ 
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 
   
/*A more traditional Garamond-based serif */ 
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 
   
/*The Helvetica/Arial-based sans serif */ 
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 
   
/*The Verdana-based sans serif */ 
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; 
   
/*The Trebuchet-based sans serif */ 
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; 
   
/*The heavier “Impact” sans serif */ 
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; 
   
/*The monospace */ 
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; 

9- سفارشی کردن استایل متن های انتخاب شده

توسط کدهای زیر میتوان استایل متن هایی که توسط کاربر انتخاب میشود را سفارشی کرد.

::selection { background: #e2eae2; } 
::-moz-selection { background: #e2eae2; } 
::-webkit-selection { background: #e2eae2; } 

10- مخفی کردن متن H1 برای Logo

امروزه برای قرار دادن لوگوی سایت ها ابتدا یک H1 با مقدار نام سایت قرار میدهند سپس درون H1 عکس را هم قرار میدهند. اینکار برای سئو انجام میشود. اما باید مقدار متن درون H1 را برداشت که با استفاده از کد زیر میتوان اینکار را انجام داد.

h1 { 
    text-indent: -9999px; 
    margin: 0 auto; 
    width: 320px; 
    height: 85px; 
    background: transparent url("images/logo.png") no-repeat scroll; 
} 

11- Polaroid Image Border

توسط کد زیر میتوان یک تمپلیت برای قرار دادن عکس درون یک Box درست کرد, که زیبا است.

img.polaroid { 
    background:#000; /*Change this to a background image or remove*/ 
    border:solid #fff; 
    border-width:6px 6px 20px 6px; 
    box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */ 
    -webkit-box-shadow:1px 1px 5px #333; 
    -moz-box-shadow:1px 1px 5px #333; 
    height:200px; /*Set to height of your image or desired div*/ 
    width:200px; /*Set to width of your image or desired div*/ 
}  

12- Anchor Link Pesudo Classes

توسط کد زیر میتوان برای حالت های مختلف یک تگ a استایل نوشت.

a:link { color: blue; } 
a:visited { color: purple; } 
a:hover { color: red; } 
a:active { color: yellow; }

13- Fullscreen Backgrouns with CSS3

توسط کد زیر میتوان Backgroundهای یک عنصر را به صورت 100% در آورد.

html {  
    background: url('images/bg.jpg') no-repeat center center fixed;  
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

14- قرار دادن عنصر در وسط از نظر عمودی

توسط کد زیر میتوان یک عنصر را در وسط عنصر والد از نظر عمودی قرار داد. بدون استفاده از javascript

.container { 
    min-height: 6.5em; 
    display: table-cell; 
    vertical-align: middle; 
} 

15- نمایش اسکرول عمودی

زمانی که مطالب سایت شما از ارتفاع صفحه کمتر میشود اما شما میخواهید قالب شما تا پایین صفحه کشیده شود توسط کد زیر میتوان این کار را انجام داد.

html { height: 101% }

16- تمپلیتی برای CSS3 Gradient

#colorbox { 
    background: #629721; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721)); 
    background-image: -webkit-linear-gradient(top, #83b842, #629721); 
    background-image: -moz-linear-gradient(top, #83b842, #629721); 
    background-image: -ms-linear-gradient(top, #83b842, #629721); 
    background-image: -o-linear-gradient(top, #83b842, #629721); 
    background-image: linear-gradient(top, #83b842, #629721); 
}

17- تمپلیتی برای @Font-Face

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
    url('webfont.woff') format('woff'), /* Modern Browsers */ 
    url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */ 
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 
       
body { 
    font-family: 'MyWebFont', Arial, sans-serif; 
}

18- کد Box-shadow برای تمام مروگرها

#mydiv {  
    -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); 
    -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); 
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); 
}

19- کد Box-shadow داخلی برای تمام مرورگرها

#mydiv {  
    -moz-box-shadow: inset 2px 0 4px #000; 
    -webkit-box-shadow: inset 2px 0 4px #000; 
    box-shadow: inset 2px 0 4px #000; 
}

20- قرار دادن footer در پایین صفحه

#footer { 
    position: fixed; 
    left: 0px; 
    bottom: 0px; 
    height: 30px; 
    width: 100%; 
    background: #444; 
}

21- استایل دادن به لینک ها بر اساس مقصد آنها

کد های زیر برای هر نوع (http, mail, pdf) مقصد تگ a یک نوع استایل نوشته است, که میتواند خیلی کاربردی باشد. البته میتوان برای تمام فرمت های دیگر هم خودتان بنویسید (بر اساس کد pdf).

/* external links */ 
a[href^="http://"] { 
    padding-right: 13px; 
    background: url('external.gif') no-repeat center rightright; 
} 
    
/* emails */ 
a[href^="mailto:"] { 
    padding-right: 20px; 
    background: url('email.png') no-repeat center rightright; 
} 
    
/* pdfs */ 
a[href$=".pdf"] { 
    padding-right: 18px; 
    background: url('acrobat.png') no-repeat center rightright; 
}  

22- ایجاد Box-shadow برای بالای سایت

توسط کد زیر براحتی میتوان برای بالای سایت ها Box-shadow ایجاد کرد.

body:before { 
    content: ""; 
    position: fixed; 
    top: -10px; 
    left: 0; 
    width: 100%; 
    height: 10px; 
   
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 
    box-shadow: 0px 0px 10px rgba(0,0,0,.8); 
    z-index: 100; 
}  

23- استایل دادن به tooltip

حتما پلاگین های jquery زیادی دیدید که برای استایل دادن به tooltip ساخته شده اند. اما HTML5 واقعا در هر کجا که فکر کنید برای طراح امکان سفارشی سازی را انجام داده است. فقط کد زیر را درون استایل کپی کنید و مقدار های tooltip برای عناصر را با استفاده از خصوصیت data-tooltip تعریف کنید.

a {  
    border-bottom:1px solid #bbb; 
    color:#666; 
    display:inline-block; 
    position:relative; 
    text-decoration:none; 
} 
a:hover, 
a:focus { 
    color:#36c; 
} 
a:active { 
    top:1px;  
} 
    
/* Tooltip styling */ 
a[data-tooltip]:after { 
    border-top: 8px solid #222; 
    border-top: 8px solid hsla(0,0%,0%,.85); 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent; 
    content: ""; 
    display: none; 
    height: 0; 
    width: 0; 
    left: 25%; 
    position: absolute; 
} 
a[data-tooltip]:before { 
    background: #222; 
    background: hsla(0,0%,0%,.85); 
    color: #f6f6f6; 
    content: attr(data-tooltip); 
    display: none; 
    font-family: sans-serif; 
    font-size: 14px; 
    height: 32px; 
    left: 0; 
    line-height: 32px; 
    padding: 0 15px; 
    position: absolute; 
    text-shadow: 0 1px 1px hsla(0,0%,0%,1); 
    whitewhite-space: nowrap; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -o-border-radius: 5px; 
    border-radius: 5px; 
} 
a[data-tooltip]:hover:after { 
    display: block; 
    top: -9px; 
} 
a[data-tooltip]:hover:before { 
    display: block; 
    top: -41px; 
} 
a[data-tooltip]:active:after { 
    top: -10px; 
} 
a[data-tooltip]:active:before { 
    top: -42px; 
} 

24- نمایش URL تگهای a در زمان چاپ

@media print   {   
  a:after {   
    content: " [" attr(href) "] ";   
  }   
}