Arayüz Geliştiriciler(HTML-ci) Tasarımcıdan Ne İster?
31 Tem
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
Web Sitesi Hakkında Bilgi ve İçerik Toplama Süreci – Tasarım Süreci – HTML/CSS/JS Süreci – Programlama Süreci – Test ve Yayına Alma Süreci
Genel bir web sitesinin oluşum aşamaları genel hatları ile yukarıdaki gibidir.
Bir web sitesinin evrelerinden birisi; Tasarımı bitmiş web sitesinin Arayüz geliştiriyiciye (HTML-ci) teslim etmesidir. İyi bir web sitesi çıkarmak için çok iyi bir ekibe sahip olmak gerektiğini çeşitli platformlarda değinmiştim. Bu ekipte en çok iletişimde olması gereken iki kişi veya iki bölüm tasarım ve arayüz geliştiricileri arasında olmalıdır. Tasarımcı ve arayüz geliştirici arasındaki iletişimin sağlam olması projenin sağlığı açısından önemlidir. Hadi programcılarıda kızdırmayalım onlarda olmazsa olmaz.
Bir arayüz geliştirici olarak tasarımcıdan beklentilerimiz var tabiki. Aynı şekilde Tasarımcının ve programcının da çeşitli beklentileri olabilir. Ancak ben burada kendi açımdan bakarak bir tasarımcıdan beklentilerimin ne olduğunu yazacağım. Okumaya devam et »
Çift çizgili ayraç kullanımı
30 Tem
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
Genelde menülerde kullanılan bir durumdur bu. Menü öğelerini ayırmak için araya çizilen çizgilerin iki farklı renkte olması durumunda nasıl bir çözüm üretmek gerektiğine dair bir ipucu. Bazen resim olarak kullanıyorum, ama bazende soldaki öğenin sağ kenar çizgisine bir renk, sağdaki öğenin sol kenar çizgisine farklı bir renk atayarak çözüm üretmeyi deniyorum.
/* clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
ul{ margin:0 auto; padding:10px; background-color:#008bc6; width:450px;}
ul li{ list-style:none; float:left; border-right:1px solid #046e9b; border-left:1px solid #05a3e6;}
ul li a{ display:block; text-decoration:none; color:#fff; font:bold 12px Arial, Helvetica, sans-serif; margin-right:10px; padding:0 10px}
HTML
<ul class="clearfix">
<li><a href="">Bak postacı</a></li>
<li><a href="">geliyor</a></li>
<li><a href="">selam veriyor</a></li>
<li><a href="">her kes ona bakıyor</a></li>
</ul>
Örneği görmek için tıklayınız.
İlk öğenin solundaki kenar çizgisi ile son öğenin sağ kenar çizgisini kaldırmak için bu öğelere sınıf atamalıyız ve bu kenar çizgilerini sıfırlamalıyız.
ul li.ilkOge{ border-left:0;}
ul li.sonOge{ border-right:0;}
Örneği görmek için tıklayınız.
Bu uygulamayı dikey menü olarakta yapabiliriz.
ul{ margin:0 auto; padding:10px; background-color:#008bc6; width:200px;}
ul li{ list-style:none; border-top:1px solid #046e9b; border-bottom:1px solid #05a3e6;}
ul li.ilkOge{ border-top:0;}
ul li.sonOge{ border-bottom:0;}
ul li a{ display:block; text-decoration:none; color:#fff; font:bold 12px Arial, Helvetica, sans-serif; margin-right:10px; padding:10px 0}
Örneği görmek için tıklayınız.
Bu yazıyı yazmaya karar verdiğimde “css ile buton yapmak” adlı yazının hazırlıkları da devam ediyordu, oradada butonları araştırırken Firefox’un sitesinde uyguladığı bir metot bu konuyu ilgilendiren bir metot olduğunu gördüm. Onuda buraya yazayım. Ancak bu metot İnternet Explorer’da çalışmayacaktır.
HTML kodu
<a href="">+ <span>Çizgili buton</span></a>
CSS kodu
a{
background-color:#ed145b;
padding:5px 10px;
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:16px;
}
a span{
border-left:2px groove rgba(144, 71, 95, 0.55);
display:inline-block;
padding-left:6px
}
Koda biraz açıklama getirelim. border’a verilen groove özelliği bizim istediğimiz etkiyi yapan bir özelliktir. Bu özellik ile eklenen çizgiler gri renklidir. Biz bu çizgiye biraz saydamlık kazandırıp zemin rengine uyum sağlamasına yarar.
Örneği görmek için tıklayınız.
Butonlar web sitelerinin oluşturan önemli öğelerden biridir. Butonlar; formlardaki eylemin son noktasıdır veya bir eylemi çağırmak için kullanılan bir öğedir. Butonlar bir bağlantı çeşidi gibi düşünülsede aslında bağlantılardan farklı yapılardır. Bağlantılar site içinde dolaşmayı sağlayan yapılardır(örneğin menü gibi), butonlar ise bir eylemi gerçekleştirmek için kullanılan bir öğedir.(örnek: formun gönder butonu)
Butonların önemine binaen her yönü ile düşünülüp karar verilmesi gereken öğelerdir. Boyutu, konumu, halleri, görünüm gibi bir çok faktör düşünülerek tasarlanır ve uygulamaya geçirilir. Ben burada tasarımsal kısmına değinmeden kodlama kısmını ilgilendiren bölümlerine değinmeye çalışacağım. Okumaya devam et »
Float:left ve Text-align:right Atanmş Elemana Metin Yerine Resim Uygulama
28 Tem
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
Daha önce Metin Yerine Resim ekleme yöntemini anlatmıştım ve bir çok yerde örnekler ile göstermiştim. Bu yöntemin uygulandığı eleman içindeki metni ekran dışına çıkarmak için text-indent:-9999px değeri atarız.
h1 {
text-indent: -9999px;
background:url(selam.gif) no-repeat;
width: 62px;
height:19px;
}
Burada şöyle bir sorunumuz oluyor eğer bu elemana text-align:right tanımıda atamış isek. Maalesef metin ekran dışına çıkmıyor.
h1 {
text-indent: -9999px;
background:url(selam.gif) no-repeat;
width: 62px;
height:19px;
text-align:right
}
Bu sorunu gidermek için sola dayalı sistemlerde negatif text-indent değeri veriyoruz, sağa dayalı sistemlerde de pozitif değer vererek bu durumu çözebiliyoruz. Bu çözüm yeni nesil tarayıcılarda sorun çıkarmazken İnternet Explore’da scroll çıkarmak kaydı ile sorun oluşturuyor.
h1 {
text-indent: 9999px;
background:url(selam.gif) no-repeat;
width: 62px;
height:19px;
}
Tüm tarayıcılarda çözüm için ise yapmamız çok kolay bir şey aslında. text-align:left tanımı atamak. Metin yerine resim koyma metodu uygulanan metinlerin hizalaması sola olmalıdır.
h1 {
text-indent: -999px;
background:url(selam.gif) no-repeat;
width: 62px;
height:19px;
text-align:left
}
Bu sorun ile genelde metin yerine resim metodu uygulanmış elemanını kapsayan bir elemana text-align:right uygulandığında rastlarız. Kalıtsallık ile bu özellik tüm alt elemanlarınıda etkilediği için biz bu elemana text-align:right değerini atamasak dahi elemanımız bu değeri üst elemanından kalıtsal olarak alır ve böyle bir soruna neden olur.
Kaynak:
Yuvarlak kenarlı kutular(border-radius) oluşturmak
20 Tem
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
Web tasarımcılarını tercih ettiği tekniklerden biridir yuvarlak köşeli alanlar oluşturmak. IE hariç css ile bu yapıyı kurmak çok basittir. Burada beraber yuvarlak kenarlı yapıları oluşturmayı göreceğiz. Ayrıca IE için javascript çözümlerini ele alacağız.
border-radius özelliği CSS3 ile birlikte geldi ve HTML elemanlarına yuvarlak kenar özelliği verme işine yarıyor. Web 2.0 ve yeni stiller ile birlikte bir çok sitede yerini alan yuvarlak kenarlı yapılar kullanılıyor, buda bu özelliği önemli kılıyor.
Köşeli yapılardan kaçan bir çok tasarımcı artık yuvarlak köşeli tasarımları tercih ediyor. Bu arada şunuda söylemeden geçemeyeceğim bazı sitelerde hiç hoş durmuyor yuvarlak kenar, her şeyi yerinde ve göz zevkine uygun kullanmak en iyisi. Okumaya devam et »
display:inline elemanlar arasındaki doğal boşluklar
14 Tem
Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.
Daha önce gözüme çarpmamış olmaması ilginç geldi. Belki çarpmıştırda ben es geçmişimdir. Durumu şöyle açıklayayım. Basit bir menü oluşturmak istedim.
<ul> <li>deneme</li> <li>olarak</li> <li>bir örnek </li> </ul>
Yatay bir menü olacağı için
ul li{display:inline;}
eklemesini yaptım, daha sonra da padding değerleri ekleyince fark ortaya çıktı.
ul li{ padding:0 12px; background-color:#999}
İşin aslı İnternet Explorer 6 ve 7’de istediğim gibi olurken yeni nesil tarayıcılarda arada fazladan boşluklar atanmış gördüm. margin:0 değeri atadım ama olmadı biraz araştırınca gördüm ki display:inline elemanlar(display:inline-block’ta da oluyor) arasında kod kısmında boşluk varsa bu boşluklar yorumlanan sayfada da görünüyor.
Aradaki boşlukları kaldırmak için bir kaç yöntem var. Yatay menü oluşturmak için diğer bir yöntem olan float yöntemini denemek bunlardan biri
ul li{ float:left}
Diğer bir çözüm yolu ise aradaki boşlukları kaldırmak.
<ul> <li>deneme</li><li>olarak</li><li>bir örnek </li> </ul>
