‘Google Chrome’ etiketi için sonuçlar

CSS3 ile yuvarlak kenarlı resim yapmak

Şubat 2nd, 2011 • 2 yorum CSS, HTML5
Etiketler: , , , , ,

Bir resminize kenar çizgisi tanımı yapıp daha sonrada köşelerini ovalleştirmek istediğinizde köşelerdeki kenar çizgilerinde sorun yaşıyoruz. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style>
img{ border:2px solid #999; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}
</style>
</head>
<body>
<img src="gudi.jpg" width="75" height="75" />
</body>
</html>

Örneği görmek için tıklayınız.

Kırmızı ile işaretlediğim yere dikkat ederseniz sorunlu gözüken kısımalar var. Bu sorun tarayıcıların bir sorunu gibi duruyor. Eğer ie’nin sorunları ile bu kadar zaman kaybetmemiş olsa idik şimdi böyle güzel sorunlarla uğraşacaktık ve tarayıcılar bu sorunları düzletmek için uğraşacaktı.

Çözüm1:

Çözüm için dışa bir kapsayıcı div atayıp kenar çizgisi tanımını bu katmana yaparak çözebiliyoruz. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3</title>
<style>
.resimKapsulu{border:2px solid #999; width:75px; height:75px; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px;}
.resimKapsulu img{width:75px; height:75px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
</style>
</head>
<body>
<div class="resimKapsulu"><img src="gudi.jpg" width="75" height="75" /></div>
</body>
</html>

Örneği görmek için tıklayınız.

Kodunu aldığım sitede resim ve kapsayıcı katmana aynı border-radius değeri verilmiş, ancak ben öyle yapınca Chrome’da beyazlıklar ortaya çıktı bu nedenle bende kapsüle 12px verirken resme 10px border-radius verdim.

Örnek Safari ve Chrome’da çalışırken Firefox3.6 ve Opera11’de çalışmıyor.

Firefox4 ve yeni webkit tabanlı tarayıcılarda bu sorun ise kökten çözülmüş, tanımı direk resme verebileceğiz.

Çözüm2:

Firefox3.6 ve Opera için CSS3 Rounded Image With jQuery makalesindeki yöntemden yaralanabiliriz.

HTML kodumuzu şöyle değiştirelim

  • <div class="resimKapsulu" style="background: url(gudi.jpg) no-repeat center center; width: 75px; height: 75px;">
  •    <img src="gudi.jpg" width="75" height="75" style="opacity: 0;" />
  • </div>

Resme saydamlık verilip görünmez yapılıyor ve satır için css kodları tanımlanıyor, amaç buradaki kodları jquery yardımı ile bg olarak tanımlamak .

jQuery kodumuz 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {

	$(".resimKapsulu").load(function() {
		$(this).wrap(function(){
			return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
		});
		$(this).css("opacity","0");
	});

 });
</script>
<style>
.resimKapsulu{border:2px solid #999; width:75px; height:75px; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px;}
.resimKapsulu img{width:75px; height:75px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
</style>
</head>
<body>
<div class="resimKapsulu" style="background: url(gudi.jpg) no-repeat center center; width: 75px; height: 75px;">
	<img src="gudi.jpg" width="75" height="75" style="opacity: 0;" />
</div>
</body>
</html>

Örneği görmek için tıklayınız.

Ben bu çalışmayı iphone ve ipad için kod geliştirirken denk geldiğim için diğer tarayıcıların benim için pek önemi yoktu açıkçası. iphone ve ipad için ilk çözümü uygulayıp geçtim açıkçası, ama lazım olanlar için ikinci yöntem de kullanılabilir.

Kaynaklar

CSS İpucu 27: Chrome ve Safari’de textarea genişletme işlevini kaldırma

Eylül 1st, 2010 • 9 yorum CSS
Etiketler: , , , ,

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

Safari ve Chrome’da metin girdi(textbox) alanlarını kenar çizgileri kaldıralım

Temmuz 24th, 2009 • 7 yorum CSS, XHTML
Etiketler: , , , , ,

Safari ve Google Chrome tarayıcıları her hangi bir metin girdi alanına(text input) odaklandığında bu elemanın etrafını bir şerit ile belirliyor.


Google Chrome Normal Hali

Google Chrome Odaklanmış Hali

Safari Normal Hali

Safari Odaklanmış Hali

Bu normalde güzel bir özellik, ancak biz eğer standart metin girdi alanı yerine kendi tasarladığımız bir metin girdi alanı koydu isek bu odaklanma çizgileri sorun çıkarıyor. Bir örnek yapalım.

En son projelerimden bonus.com.tr’de böyle bir sorun ile karşılaştığımda buna bir çözüm aradım. İlk kodum şöyle idi. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{background-color:#52c520;}

.aramaMetinKutusu{
	background:url(images/arama_zemini.gif) 0 0 no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusuOdak{
	background:url(images/arama_zemini.gif) 0 -31px no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusu input{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
}

.aramaMetinKutusuOdak input:focus{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
	background-color:#F6FFD4
}

</style>
</head>

<body>
<div class="aramaMetinKutusu">
    <input type="text" name="arama" onfocus="this.parentNode.className='aramaMetinKutusuOdak'" onblur="this.parentNode.className='aramaMetinKutusu'" />
</div>
</body>
</html>

Bu kodlarım Firefox ve IE’de sorunsuz çalıştı. Daha sonra sayfayı Google Chrome’da test ettiğimde aşağıdaki gibi bir sorun ile karşılaştım.

chrome_odak

Sorunun çözümünü araştırdığımda dış kenar çizgisini sıfırlamam gerektiğini gördüm.  

input{
outline:0
}

tanımı bizi çözüme ulaştırdı.

Örnek kodu görmnek için tıklayınız.

Peki dış hat çizgisini kaldrımayalım demiştik şimdi ise kaldırdık, ne olacak şimdi? Burada odaklanma durumu için bir sınıf atayıp ona ayrı bir tanım yaptığımız için klavye kullananlar için sorun olmayacaktır.

Kaynaklar

11 Eylül 2008 web’den seçme haberler

Eylül 11th, 2008 • Haberler
Etiketler: , , , , , , , ,

  • jQuery ile yapılmış güzel bir efekt. Bağlantı
  • FireFox, Opera ve Webkit’den sonra Internet Explorer’da kendi özel ön ekini CSS özelliklerine eklemiş. Bağlantı
  • Partilerin İnternet Stratejileri – hasanyalcin.com Bağlantı
  • TechCrunch50′den ilk gün izlenimleri – webrazzi.com Bağlantı
  • CSS ile Konumlandırma ilgili güzel bir ipucu uyugulama. Bağlantı
  • WordPress 2.6.2 sürümü çıkmış yükselttim. Yaklaşık 5 dakikamı aldı. Bir sorun görünmüyor.
  • Form girdi alanlarını maskelemk için jquery ile yapılmış bir script. Bağlantı
  • CSS sıfırlama teknikleri hakkında güzel bir makale. Bağlantı
  • Google Chrome’dan beklenen 10 şey. Bağlantı
  • Web kod yazarları için 20 Firefox eklentisi. Bağlantı
  • Güzel <hr> örnekleri. Bağlantı
  • Neden Webkit yükselirken Mozilla düşüşe geçti. Bağlantı
  • CSS 3.0 çalışmalarını sürdüren grup kenarlık(border) ve ardalan(background) üzerine son çalışmalarını tamamlamış. Bağlantı 
  • Tek tıklama ile dosya göndermek için jquery eklentisi. Bağlantı 
  • jQuery ile menü elemanlarına efekt vermek. Bağlantı 
  • WordPress Temanızdan Silebileceğiniz 13 Etiket – alemsite.com geçen haberlerde bahsettiğim konuyu Selman Kara Türkçeye çevirmiş. Bağlantı

09 Eylül 2008 web’den seçme haberler

Eylül 9th, 2008 • 2 yorum Haberler
Etiketler: , , , , , , , ,

  • Özel form elemanları tasarlamak. Bağlantı
  • Google Chrome ipuçları. Bağlantı
  • Google Chrome javascript hata konsolu kodları. Bağlantı
  • WordPress temasını geliştirmek ve yenilemek Bağlantı
  • WordPress Kurulumu Sonrası Yapılacaklar Listesi – webdeneyimleri.donanimhaber.com Bağlantı
  • WordPress sitenizde silmeniz gerek 13 kod. Bağlantı
  • gameQuery ile oyun kodlamak. jQuery alt yapısını kullana gameQuery bize oyun kodlamak için kolaylıklar sağlıyor Bağlantı
  • Şehriderya WordPress Teması Huzurlarınızda… – sehriderya.net Bağlantı
  • Web tasarımcıları için posterler. Bağlantı
  • jQuery öğrenmeye başlamak için. Bağlantı
  • Internet Explorer 6 bloklamak için. Bağlantı
  • İnternet Tarayıcıları savaşı 2.0 Bağlantı
  • eBurhan Fix Feed v1.1 yayınlandı… – eburhan.com Bağlantı
  • Internet Explorer 8′deki CSS gelişmeleri. Bağlantı
  • Google Chrome’un bilinmeyen yanları. Bağlantı
  • SmashingMagazine’den güzel bir WordPress teması daha Agregado. Bağlantı
  • 12 adet WordPress RSS eklentisi. Bağlantı

05 Eylül 2008 web’den seçme haberler

Eylül 5th, 2008 • Haberler
Etiketler: , , ,

  • Google Chrome’un kızıştırdığı pazarda Firefox yeni javascript motorunun daha hızlı olduğunu idda ediyor. Bağlantı
  • Google Chrome bir çok özelliğinin yanında beni en çok etkileyen javascript yorumlama hızı. test sonuçları ortada. Firefox’un uzun süredir üzerinde çalıştığı yeni javascript yorumlama sistemide bundan daha iyi bir performans veriyorumuş. Firefox 3.1 ile birlikte gelecekmiş. Ne diyelim stadartlara uyduktan sonra bizim için rekabet her zaman iyidir. Bağlantı
  • Freelance iş yapanlara bilgi linkleri. Bağlantı
  • 40 güzel web sitesi. 2 ve 3 kolonlu yapılar ve güzel örnekler. Kodlarını incelemenizi öneririm Bağlantı
  • WordPress Türkiye yenilenmiş. Bağlantı
  • Google’dan 101 ipucu. Bağlantı
  • Web sitesi oluştururken dikkat edeceğimiz konuların listesi. Bağlantı
  • WordPress istatistiklerini takip edebilieceğimiz 10 araç. Bağlantı
  • John Resig Google Chrome ile alevlenen javascript motorları hakkında bir yazı yazmış. Bağlantı
  • Safari’nin metinleri kötü taramasını engellemek. Bağlantı
  • Apple.com’dan alacağımız 5 CSS dersi. Bağlantı
  • Sayfa ardalan resminin ilk yüklenmesini istersek. Bağlantı
  • İnternet Explorer 8 ile birlikte FireBug alternatifi Web Developer Tool’unu geliştirmiş. Bağlantı
  • jQuery ile sayfa içinde animasyonlu kaydırma yapmayı anlatan güzel bir video ders. Bağlantı

« Önceki Yazılar

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.