css


Css ile Çok Satırlı Yazıları Dikey Ortalama

Css kullanarak eğer tek kelimelik ya da tek satırlık bir yazınız varsa bunu dikey olarak ortalamak çok zor olmayabilir ancak metniniz birden fazla satıra sahipse, her browser'da sorunsuz çalışan, dikey olarak hizalanmış bir görünüm elde etmek zordur.

Yandaki resimde görülen konuşma balonu örneğini ele alalım. Aşağıdaki gibi bir html kodumuzun olduğunu varsayalım :

  1. <div class="area">
  2. <div class="bubble">
  3. <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
  4. </div>
  5. </div>

Şimdi ise css'in table gösterimi ile dikey ortalamamızı yapıyoruz:

Css Sprite Yöntemi ile Oval Köşeler Oluşturmak

Css 'de son zamanlarda sıkça kullanılmaya başlanan bir yöntem olan sprite tekniği ile nasıl ovalleştirilmiş köşelere sahip kutular oluşturabileceğiniz şurada anlatılmış. Peki bu teknik diğer rounded corner tekniklerinden başka bize ne katacak derseniz , eğer sitenizde çok sayıda oval köşeli kutular kullanıyorsanız , biraz hız biraz da bandwith karı diyebiliriz. İncelemekde fayda var.

Psd 'den Xhtml ve Css'e Çevrim Nasıl Yapılır?

Öncelikle eğer bu konuya ilginiz var ise , daha önce web'in bilinen isimleri ile yaptığım web tasarımı ve kodlaması üzerine olan şuradaki araştırma yazısını okumalısınız.

O yazıdan çeşitli püf noktalarını kaptıktan sonra kendinize bir yol haritası belirlemeli ve ona göre çalışmaya başlamalısınız.İlk adım olarak Css ve Xhtml kodlamayı öğrenmelisiniz.Css için yeterince kapsamlı olan , Fatih Hayrioğlu'nun yazdığı şuradaki e-kitap 'ı indirebilir ve yine aynı yerden kitapta anlatılan çalışmaların kaynak kodlarına ulaşabilirsiniz.

Xhtml ve Css ile ilgili basılı bir kitap isterseniz de şuradaki kitap işinize yarayabilir.

Web Tasarımı ve Kodlaması Üzerine Bir Araştırma

Uzun zamandır aklımdaydı ve merak ediyordum , acaba blog yazarları tasarımlarını nasıl yapıyorlar ? , xhtml-css çevrimini kendileri mi yapıyorlar ? Bu işleri yaparken izledikleri yollar neler? vs. Sonunda ufak bir araştırma yaptım ve bazı arkadaşların görüşlerini aldım.3 soru sordum kendilerine.Sorular şunlardı :

1- Web tasarımı yaparken hangi programları kullanıyorsunuz ?
2- Yaptığınız tasarımı xhtml/css kodlamasına siz mi dönüştürüyorsunuz? Eğer dönüştürüyorsanız izlediğiniz yollar nelerdir?
3- Tasarım yaparken özellikle dikkat ettiğiniz noktalar var mı? Varsa bunlar nelerdir?

Bakalım hepimizin blog dünyasından az çok tanıdığı kişiler tasarım aşamasını nasıl hallediyorlar ?

Dmry'den Hakan'ın cevapları :

Drupal Tema Yapısı

Drupal ile ilgilenmeye başlayan kişilerin ilk etapta en çok zorlandığı konu temalardır.Sıfırdan tema yapmayı boşverin , bir temayı modifiye edebilmek dahi bu aşamada drupal'a aşina olmayanlar için çok çok zor gelecektir.Halbuki drupal'ın tema yapısı , rakiplerine nazaran çok daha esnek , basit ve pratiktir.Temaları düzenleyebilmek ve kendinize ait özel temalar ortaya çıkarabilmek için xhtml/css bilmeli ve drupal terminolojisine hakim olmanız gerekmektedir.

Şimdi temel olarak bir drupal temasında olması gereken dosyaları inceleyelim:

Page.tpl.php : Temanızın ana şablonunun belirlendiği dosya'dır.Genel olarak tüm konum değişikliklerini buradan yaparsınız.Tema'nın ana dosyası diyebiliriz.

Bağlantı Turu - 6

+ WebDesignerWall , dekoratif css resim galerileri oluşturmayı anlatmaış : [bağlantı]

+ 25'den fazla , inanılmaz photoshop dersleri , ilgilenenler için seçilmiş :  [bağlantı]

+ Siz başlık ve yazınızı girin o size rastgele bir afiş oluştursun : [bağlantı]

 

El Altında Bulunması Gereken Tasarım ve Kod Araçları

Bu yazı tamamen kişisel :) Bazen , "yahu geçenlerde bir yerde görmüştüm ama neydi acaba?" diyerek yana yana aradığım web tasarım / programlama araçlarını,kütüphanelerini frameworkleri,hazır uygulamaları , kısaca ne kullanıyorsam onları bu yazıda birleştirmeye karar verdim.Her aradığımda elimin altında olmasını istediğim  şeylerin yanında , adresini ezbere bildiklerimi de yazayım ki başkaları da  faydalansın :)

Programlar:

Wamp(win) / Geany / gPhpEditDreamweaver(win) / PhotoShop(win) / Quanta Plus / FileZilla

Kütüphaneler:

 Jquery / Mootools / LightBox / FaceBox / Multibox

drupal-love-right.png