CSS için arşiv
CSS İpucu 27: Chrome ve Safari’de textarea genişletme işlevini kaldırma
Eylül 1st, 2010 • 2 yorum CSS
Etiketler: Google Chrome, safari, textarea, textarea genişletme, WebKit
Webkit tabanlı tarayıcılarda(Google Chrome ve Safari) textarea’ların sağ alt köşesinde textarea’yı genişletmeye yarayan bir işaret bulunur bu işretin üzerine mouse ile basıp genişliği ve yüksekliği arttıra biliriz. Bu işlem kullanıcının uzun içerik girdiği durumlar düşünülerek konulmuştur ve yararlı bir özelliktir. Ancak bazen bu işaret ve işlevini kullanmak istemediğimiz durumlar olur ve bu işareti kaldırmak isteriz. Bu durum için çok kısa bir css kodu işimizi görüyor.
textarea{ resize:none}
Sadece bu kod ile istediğimizi elde edebiliriz.
Tek sakıncası bu kodu sadece webkit tabanlı tarayıcılar desteklediği için sayfamızı w3c CSS kontrolünden geçirdiğimizde hata verecek olmasıdır.
Kaynak
Önden Resimleri(Preloading images) Yükleme Yöntemleri
Ağustos 27th, 2010 • 4 yorum CSS, Javascript, XHTML
Etiketler: önyükleme, performans, resim, web site hızlandırma
Web sitelerimizi hızlandırmak için çeşitli yöntemler ve metotlar deneriz. Amacımız kullanıcıya daha hızlı cevap vermektir. Bunlardan bir tanesi önden resimleri kullanıcı bilgisayarına yükletip sonra açılacak sayfaların hızlı açılmasını sağlamak gibi bir amacımız olduğu durumlardır. Rollover resimleri, araç ipucu(tooltip), background resimleri vb. resimleri önceden yükletmek bize hem sayfa ilk açıldığında kötü görüntüyü engellememizi sağlar hemde kullanıcıya daha sonraki tercihlerinde daha hızlı cevap vermemizi sağlar.
Ben genelde daha önce kullanmadığım metotları kullanmadan önce bir araştırma yaparım ve sonuçta bana göre iyi olan yöntemi uygularım. Web ajanslarında çalışırken bu araştırmayı kısa tutmam gerekirken tek bir proje geliştirirken bu iş için daha uzun zamanımız oluyor.
Bu işi çin CSS, javascript ve ajax ile çözümler mevcut.
Ben bu yöntemlerden javascript yöntemi ile yapmayı tercih ettim. Diğer yöntemler hakkında genel bir bilgi verip geçeceğim.
CSS Yöntemleri
CSS Sprite yöntemide bu kategoriye girer.
CSS yöntemleri genelde sayfa içine konulan resimlerin tarayıcı görüntüsünden kaçırılması ile yapılan yöntemlerdir ki işin bu kısmı benim hoşuma gitmiyor.
CSS ile bu işi yapan bir örnek verelim.
div#preloaded-images {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
HTML kodu
<div id="preloaded-images"> <img src="http://deneme.com/image-01.png" width="1" height="1" alt="Image 01" /> <img src="http://deneme.com/image-02.png" width="1" height="1" alt="Image 02" /> <img src="http://deneme.com/image-03.png" width="1" height="1" alt="Image 03" /> </div>
Yukarıda görüldüğü gibi html içine eklenen resimler CSS yardımı ile kullanıcının göremeyeceği bölgelere itilmiştir. Bu şekilde bir çözüm üretilmiştir.
Javascript Yöntemleri
Javascript ile yapılan yöntemlerin genel yapısı bir sıraya sokulan resimler dinamik olarak doküman içine eklenir.
Javascript ile bu işlemi yapan çeşitli kodlar var. Benim uyguladığım ise aşağıdaki koddur. Bu kodun diğerlerine göre avantajı yükleme yaptığımız sayfanın yüklenmesi bittikten sonra bizim önden yükleme yaptığımız resimleri yüklemesidir.
function preloader() {
if (document.images) {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = "http://domain.tld/path/to/image-001.gif";
img2.src = "http://domain.tld/path/to/image-002.gif";
img3.src = "http://domain.tld/path/to/image-003.gif";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
Yukarıdaki javascript kodu işimizi görecektir.
jQuery ile daha kısa ve basit bir kod ile bu işi yapabiliriz.
// resim onyükleme fonksiyonu
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[i]);
}
};
// yükleme yap
$.preloadImages("images/dexter.jpg", "images/saydam_ardalan1.gif", "images/ornek_sayfa.jpg");
Yukarıdaki kodu yazınca yükleme yaptığımız sayfadaki öğeler yüklenirken yükleme yaptığımız resimlerde yüklenir. Bu benim istediğim bir durum değildir. Bence yükleme yapılacak sayfanın öğeleri yüklendikten sonra yüklenecek resimler yüklenmelidir. Kullanıcı ilk önce mevcut sayfayı tam görmelidir, sonra kullanıcıya göstermeden diğer sayfa resimlerini yüklemeliyiz.
Bunun için kodumuzu aşağıdaki değiştirmeliyiz.
$(document).ready(function() {
$(window).bind('load', function()
{
// resim onyükleme fonksiyonu
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[i]);
}
};
// yükleme yap
$.preloadImages("images/dexter.jpg", "images/saydam_ardalan1.gif", "images/ornek_sayfa.jpg");
});
});
Eklediğimiz sadece $(window).bind(‘load’ function()) kısmıdır. Burada sayfa yüklendikten sonra bu işlemi yap diyoruz.
Örneği görmek için tıklayınız.
Örneklerde dikkatiniz bir yere çekmek istiyorum. Firebug Net sekmesini açtım çünkü sayfa yüklenmesi anını görmenizi istedim. İlk resimde sayfa yüklenirken sonradan görüntüleyeceğimiz resimleride içeren bir durum söz konusu idi. Dikkat ederseniz ilk reismde dikey kırmızı çizgi en sondadır. İkinci resimde ise kırmızı dikey çizgi sayfa öğelerini sonuncusu olan resimden sonra çizilmiştir, daha sonra yükleme yapılan resimler yüklenmiştir.
Sonuç
Ben küçük bir araştırma sonucunda bu kodu kullanmayı uygun buldum. Bulduğum bu kodun kendimce gerekçelerini yukarıda açıklamaya çalıştım, eğer sizlerin daha iyi çözümleri ve önerileri varsa yorum kısmında bizlerle paylaşırsanız sevinirim.
Kalın sağlıacakla
Kaynaklar
- http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
- http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
- http://elouai.com/javascript-preload-images.php
- http://www.javascriptkit.com/script/script2/preloadimage.shtml
- http://stackoverflow.com/questions/761263/what-is-the-best-way-to-preload-multiple-images-in-javascript/761332
- http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
- http://snipplr.com/view.php?codeview&id=9612
Arayüz Geliştiriciler(HTML-ci) Tasarımcıdan Ne İster?
Temmuz 31st, 2010 • 10 yorum CSS, XHTML
Etiketler: :active, :hover, akış şeması, arayüz geliştirici, focus, İkon, kaynak dosyalar, png, psd, tasarımcı
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 edin »
Çift çizgili ayraç kullanımı
Temmuz 30th, 2010 • 6 yorum CSS, XHTML
Etiketler: çift çizgi, grove, menü, rgba
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.
CSS ile buton yapmak
Temmuz 29th, 2010 • 13 yorum CSS, XHTML
Etiketler: border-radius, box-shadow, buton, css3, oval-buton, renk geçişi, sprite, text-shadow
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 edin »
Float:left ve Text-align:right Atanmş Elemana Metin Yerine Resim Uygulama
Temmuz 28th, 2010 • CSS, XHTML
Etiketler: float:left, metin yerine resim koymak, text-align:right, text-indent
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.
