Cssstylingcodesnippets

Css styling code snippets

Yazar: Emre Çördükler | Yayın Tarihi: 03 Şubat 2011 | Yorum Kategori: Css Htm jQuery Menü

ğğğğğğğğğğğğğğğğğğğğğğğğğğğğğğğğğğğğğğğğ
Css

body {
	margin: 0;
	padding: 0;
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
}
h1 {
	font: 5em normal Georgia, 'Times New Roman', Times, serif;
	text-align:center;

}
h1 span { color: #8fc1c7; }
h1 small{
	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 1.5em;
	display: block;
	color: #ccc;
}
.container {
	margin: 0 auto;
	width: 600px;
}

pre code {
	margin: 0 0 0 40px;
	padding: 18px 0;
	display: block;
}
.code {
	margin: 20px 0;
}
.code h2 {
	margin: 0;
	font-size: 1.5em;
	padding: 5px 10px 5px 25px;
	background: url(https://img.webme.com/pic/h/hibycocuk/icon_code.gif) no-repeat 5px 6px;
}
pre {
	font-size: 12px;
	padding: 0;
	margin: 20px;
	background: #f0f0f0;
	border-left: 1px solid #ccc;
	line-height: 20px;
	background: url(https://img.webme.com/pic/h/hibycocuk/pre_code_bg.gif) repeat-y left top;
	width: 600px;
	overflow: auto;
	overflow-Y:hidden;
}
pre.ylw {
	background: url(https://img.webme.com/pic/h/hibycocuk/pre_code_bg_ylw.gif) repeat-y left top;
	border: none;
}




pre.blk {
	background: url(https://img.webme.com/pic/h/hibycocuk/pre_code_bg_blk.gif) repeat-y left top;
	border: none;
	color: #fff;
}

Htm

<div class="code">
<h2>CSS</h2>
<pre><code>pre {
	font-size: 12px;
	padding: 0;
	margin: 20px;
	background: #f0f0f0;
	border-left: 1px solid #ccc;
	line-height: 20px;
	background: url(images/pre_code_bg.gif) repeat-y left top;
	width: 600px;
	overflow: auto;
	overflow-Y:hidden;
}

</code></pre>
</div>
Sarı açık code bu (:
<div class="code">
<h2>CSS</h2>
<pre class="ylw"><code>pre.ylw {
	background: url(images/pre_code_bg_ylw.gif) repeat-y left top;
	border: none;
}
</code></pre>
</div>

Siyah Code bu (:
<div class="code">
<h2>CSS</h2>
<pre class="blk"><code>pre.blk {
	background: url(images/pre_code_bg_blk.gif) repeat-y left top;
	border: none;
	color: #fff;
}
</code></pre>
</div>

</div>