İnternet Hizmetleri,Hosting Çözümleri
CSS
DIV + CSS Kullanımı Kolaylığı
8 May
Merhaba arkadaÅŸlar bu dersimizde DIV (diversion) kullanımından bahsedeceÄŸiz. Site tasarlarken ilk aklımıza gelen kullandığımız Editör üzerinden tablo sürükleyip çalışmamımıza atmaktır. Bunu hangimiz yapmıyoruz ki? Åžimdi asıl soru ÅŸu aslında DIV kullansak nasıl olur?Â
Projenin büyüklüğünü düşünün, binlerce tablo olduğunu daha yazarken yoruluyoruz. Ama DIV ve CSS kullandığımızda bunları kombine ettiğimizde tek sayfa üzerinde kolaylıkla projeye şekil verebiliriz. Şimdi bu DIV Taglarına ve kullanım yerlerine bakalım. Şunuda söylemeden geçemeyeceğim yalnız halen CSS & DIV sıkıntısı çıkaran tarayıcı sorunları vardır (Explorer, Fire Fox, Opera, Netscape e.t.c).
Klasik bir sayfa yapımızda en basit şekli ile;
Header: Banner alanı olarak kullanız genelde sitenin üst alanıdır.Â
<h1> Ä°LK WEB SAYFAMIZ </h1>
Navigation: Genellikle listeleme yapmak için kullanacağımız durumlardır.Â
<ul id="navigation">Siyah</ul>
CSS ile 3 Resimli Yuvarlak Köşeli Kutular
8 May
Css ile yuvarlak köşeli kutular yapmanın yöntemleri birden fazla. Daha önce 4 tane resimle esnek kutular yapmayı anlatmıştım. Bu derste ise 3 resimle sabit genişlikli kutular yapmayı anlatacağım. Öncelikle 3 tane, bu şekillerde resimlere ihtiyacımız var:
Bunlar benim Photoshop’da 800px geniÅŸlik için hazırladığım resimlerin nasıl hazırlandığını görmek isterseniz PSD’yi buraya tıklayarakindirebilirsiniz.
Åžimdi de örnek sayfamızın kodlarını verelim: Bu yazının devamını okuyun »
Uzamayan Div’lere Kesin Çözüm
8 May
Float kullandığınız div’lerde uzamama sorunu oluÅŸabilir.
ÖrneÄŸin iki sütunlu bir çalışma yaptınız. Sütunlar için de doÄŸal olarak float kodunu kullandınız. Ä°ÅŸte uzamama sorunu burda karşımıza çıkıyor.Â
Bir örnekle sorunu açıklayacağım.
CSS 3 ile Resimsiz Oval Köşeler
8 May
CSS 3 ile hiç resim kullanmadan düz köşeleri oval hale getirebileceğinizi biliyor muydunuz?
Baştan uyarayım arkadaşlar, css 3 kullanarak oval köşeler yaparsanız şu tarayıcılarda düzgün olarak gözükür:
- Mozilla Firefox
- Google Chrome
- Safari
Razıysanız derse geçelim. Öncelikle oval köşeler yapmak için iki ayrı kod kullanacağız çünkü firefox ile safari’nin algıladıkları kodlar farklı. ( Chrome ve Safari aynı CSS altyapısını kullandığı için, ikisinde bir kodla oval köşeler oluÅŸturabiliyoruz. )
Firefox’ta oval köşeler için aÅŸağıdaki kodu kullanıyoruz:
-moz-border-radius
Photoshop CS2 ve CS3 ‘teki ÅŸablonların CSS çıktısı
8 May
Photoshop programı ile yapılan grafik bazlı çalışmaların web ortamında rahat kullanılması için otomatik olarak CSS ‘ye nasıl dönüştürebileceÄŸimizi anlatıyoruz.
Adobe Photoshop programının CS2 ve CS3 sürümlerinden önceki versiyonlarında ImageReady diye ayrı bir program vardı bu programla aşağıda anlatacağımız olay gerçekleştirilebiliyordu fakat şimdi ImageReady programı yoktur. Abdullah Tekin hocamın bu konudaki dersini buradaninceleyebilirsiniz.
Şimdi olayımıza başlayalım.
İlk olarak tasarımımızı yapıyoruz, bende sanalkurs izleyenlerine özel basit bir tema yaptım;
Yorumlar