Css Teknikleri

Katagori : Web Tasarım  Etiketler : css web web-2.0 web2 tasarım kalite css-örnek site web

Web 2.0 ile birlikte css iyice yaygınlaşmaya başladı. Tasarımda kalite ve ayfa hızı için artık vazgeçilmez bir unsur durumunda. Bende size en çok kullanılan css uygulamarından bir kaçtane örnek vereceğim.

<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>
.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}

<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>


ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}


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

<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>


label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}


label {
text-align: right;
width: 75px;
padding-right: 20px;
}


br {
clear: left;
}

<h1><span></span>CSS Gradient Text</h1>


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


<!–>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<!–>

Katagoriler