Murat BütünWeb Tasarım ve Arama Motorları Optimizasyonu

Web sayfamızın sağ alt köşesine küçük bir kutucuk ile sitenizde reklam yayınlaya bilir veya ziyaretçilerinize hızlı bir şekilde siteniz ile ilgili duyurularınızı duyurabilirsiniz. Bunu da iki satır kod ile saylayabiliriz.

[html]
.element    { position:fixed; bottom:1%; right:1%; padding:10px; font-family:Arial; background:#fffea1; border:1px solid #fc0; }
[/html]

Kullanım ;

<div>Sabit alan</div>

Merhabalar arkadaşlar bir tasarımcının en büyük sıkıntılarından bir tanesi internet explorer sorunudur. O güzel resim formatı .png internet explorerde nasıl görünür biliyoruz sanırım. Png çalışamasının arka planı beyaz görünmektedir. Artık bazı büyük web sayfaları bile sitelerini tasarlarken internet exploreri takmıyor.

[html]
#resim {
width: 200px;
height: 75px;
background-image: url(images/logo.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/logo.png’, sizingMethod=’scale’);

}
[/html]

yukarıdaki kodları kendi png dosyanıza göre düzenleyip kullanabilirsiniz

Kullanım ;

<div id="resim"></div>

Sizelere şimdi bi css kodu daha vericem ama ne kadar işinize yarar bilmiyorum. Çünkü dede yadigarı internet explorer maalesef bu desteği sağlayamıyor.

[html]

.sample {
-moz-border-radius:10px; /* all corners */
-moz-border-radius-topleft:15px; /* top left corner */
-moz-border-radius-topright:50px; /* top right corner */
-moz-border-radius-bottomleft:15px; /* bottom left corner */
-moz-border-radius-bottomright:50px; /* bottom right corner */
-moz-border-radius:10px 15px 15px 10px;  /* shorthand topleft topright bottomright bottomleft */
border:1px solid #fc0; /* border color, per usual */
}
[/html]

Kullanım ;

<div>Yaşasın açık kaynak yaşasın Firefox   </div>

Bir web sitemizin arka planında bir resim dosyası koyacağımız zaman eğer o resim dosyası desen yerine bir fotoğraf tarzı bir şey ise bu çalışmanın sabit kalması gerekmektedir, daha estetik görünmesi için ve bunu da basit 2 satırlık bir css kodu ile çözebiliriz

<style type=”text/css”>

<!–

body {

background-image: url(“resim.jpg”);

background-attachment: fixed;

margin: 0px;

}

–>

</style>