Web And Application Developer & Oracle DBA
CSS
CSS ile gölge efekti verin
21 Şub
merhaba sevgili dostlarm 
önceleri gölge efekti vermek için resimeri parçalar arkaplana atardık vs vs, geçende lazım olan bu işlem için artık CSS var
nasılmı? buyrun ;
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 0px 0px 5px #888888;
}
işte hepsi bu kadarcık
box-shadow: 0px 0px 5px #888888; satırı işimi hallediyor.
1. 0px üstten
2. 0px soldan
5px ise derecesi.
#888888 de anlaşıldığı gibi renk tonu
iyi çalışmalar.
3 views
mikemmel CSS3 butonlar
8 Şub
Minimal markup
<a href="" class="button">Buton</a>
Örnek buton, ikonsuz
<a href="" class="button add">Ekle</a>
burda ekleme ikonkı (+) artı ikonu eklenmıs
CSS
buyrun efenim bu da css kodumuz:
.button
{
display: inline-block;
white-space: nowrap;
background-color: #ccc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
.button:hover
{
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
}
.button:active
{
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
.button:focus
{
outline: 0;
background: #fafafa;
}
.button:before
{
background: #ccc;
background: rgba(0,0,0,.1);
float: left;
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em;
border-radius: .15em 0 0 .15em;
pointer-events: none;
}
/* Hexadecimal entities for the icons */
.add:before
{
content: "\271A";
}
.edit:before
{
content: "\270E";
}
.delete:before
{
content: "\2718";
}
.save:before
{
content: "\2714";
}
.email:before
{
content: "\2709";
}
.like:before
{
content: "\2764";
}
.next:before
{
content: "\279C";
}
.star:before
{
content: "\2605";
}
.spark:before
{
content: "\2737";
}
.play:before
{
content: "\25B6";
}
kaynak : http://www.red-team-design.com/just-another-awesome-css3-buttons
4 views
Css ile Tarayıcı Sıfırlama
27 Ara
Merhaba arkadaşlar bu yazıda her zaman kullanmanız gerekli olan tarayıcıları sıfırlama yönteminden bahsedeceğim. Tarayıcılar için belirli bir standart olmadığından dolayı farklı form elemanları tarayıcılarda farlı görünüyorlar. Bu yüzden bir tarayıcıya uyumlu olan tasarımınız başka bir tarayıcıda aynı görüntüyü vermiyor. Bu sorunu çözmek için de oluşturacağınız css dosyasına aşağıda vereceğim kodları eklemeniz gerekmektedir. Vereceğim kodlar bütün form elemanlarını kapsayacak şekilde düşünülmüştür. Siz isterseniz kullanmayacağınız elemanları çıkarabilirsiniz. Şimdi tarayıcı sıfırlama kodlarını yazalım.
html, body, div, span, p, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, strong, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}
:focus {outline:0;}
body {line-height:1; color:black; background:white;}
ol, ul {list-style:none;}
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left ;font-weight:normal;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
Yukarıda ki css kodları ile tasarımınız bütün tarayıcılarda aynı görünümü verecektir. Umarım çok fazla geçmeden bütün tarayıcılar bir standarda girer bizim de bu işlemi yapmaya ihtiyacımız kalmaz.
22 views
div-css bilmeniz gereken kodlar
24 Ara
sayfanızı yukarıya yapıştırmak için:
PHP Kodu:
body
{
margin-top: 0px;
}
div içinde scrollbar:
1. kaydırma çubukları sürekli görünen: (overflow: scroll)
PHP Kodu:
.div1
{
overflow: scroll;
height: 100px;
width: 100px;
}
<div class="div1">asd asasd asdsad asd asd d<br /><br /><br /><br /><br /><br /><br /></div>
2. kaydırma çubuğu yazı alanı taşınca görünen: (overflow: auto)
PHP Kodu:
.div1
{
overflow: auto;
height: 100px;
width: 100px;
}
<div class="div1">asd asasd asdsad asd asd d</div>
yan yana div kutular: (float)
1. sola dayalı: (float: left;)
PHP Kodu:
.div2
{
border: solid 1px black;
float: left;
height: 100px;
width: 100px;
}
<div class="div2">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
2. sağa dayalı: (float: right)
PHP Kodu:
.div2
{
border: solid 1px black;
float: right;
height: 100px;
width: 100px;
}
<div class="div2">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
div’i sayfaya göre ortaya almak: (margin-left: auto; margin-right: auto; ikisi bir arada kullanılmalı)
PHP Kodu:
.div3
{
border: solid 1px black;
height: 100px;
margin-left: auto;
margin-right: auto;
width: 100px;
}
<div class="div3"></div>
24 views
CSS ile arkaplan ortalama
5 Kas
merhabalar
css ile büyük boyutlu resimleri web sitemizde arkaplan a ortalanmış fix halde bulundurmak için;
body {
background-position: 50% 0;
background-image:url('images/bg.jpg');
background-repeat:no-repeat;
background-color: #C6E685;
}
504 views
