Issuu on Google+

Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / CSS3 ′ ü n Hyp h en s Ö zel l i ğ i i l e M ü kem m el Pa ra g ra fl a r Ha zı rl a yı n

CSS3′ün Hyphens Özelliği ile Mükemmel Paragraflar Hazırlayın Vatanay Özbeyli tarafından 05 Haziran 2013 tarihinde yazıldı. ~ Yorum Yok + Değiştir

Merhaba arkadaşlar. CSS3′ün bize getirdiklerini konuşmaya devam ediyoruz. Sırada çok ama çok büyük bir ilerleme olarak gördüğüm CSS Hyphens kodu bulunmakta. Hyphens, Türkçe karşılığı ile satırları ve satır sonlarını düzeltmekte. Satıra sığmayan metinlerin yanına bir çizgip koyup aşağı satıra kaydırabilen bu kod parçası justify ile birlikte inanılmaz etkili çalışabiliyor. Hyphens sitenizdeki yazıların okunulabilirliğini büyük ölçüde arttıracaktır. Özellikle bizler gibi uzun metinlerin bol olduğu bir web sayfasına sahipseniz CSS Hyphens tam sizlik! Google Chrome temelinde satır sonu hatalarının önüne geçmiş olsa da Safari ve Firefox hala tam anlamıyla bu sorunu çözemedi. Internet Explorer’dan bahsetmiyorum bile. Dolayısıyla hyphens an itibariyle kaçınılmaz.

Oluşturduğu fark nedir? Daha öncede bahsettiğim gibi yazıların okunulabilirliğini arttırır.


Nasıl kullanılır? 1 hyphens: none; En basit haliyle kod yukarıdaki şekilde kullanılır. None alanına auto ve manuel değerleri de girilebiliyor. 1. None : Hyphens değerleri kapalı. 2. Auto : Satır atlama çizgileri otomatik olarak oluşturuluyor. 3. Manuel : Satır atlama çizgileri yazara bırakılıyor.

Örneklendirmeler En temel anlamıyla hyphensi örneklendirelim. 1 -webkit-hyphens: auto; 2 3 -moz-hyphens: auto; 4 5 hyphens: auto; Moz ve webkit kod satırlarını da ekleyerek tüm browserlarda düzgün çalışmasını sağlayabilirsiniz. Makalemi paylaşacağım 3 adet genel örnekle bitireceğim. Bunları elinizin altındaki tüm browserlarda test edin ve farkı görün. Bir sonraki dersimizde görüşmek üzere, hoşça kalın.

Hyphens ve Justify olmadan


HTML CSS Result Edit on CodePen 1. <div><a href="http://www.adobewordpress.com" target="_blank" 1. img {float:left;} 2. 3. div{margin:20px auto; width:670px; font: 14px Georgia,

Merhaba arkadaşlar. CSS3'ün bize getirdiklerini konuşmaya devam ediyoruz. Sırada çok ama çok büyük bir ilerleme olarak gördüğüm

Sadece Justify ile HTML CSS Result Edit on CodePen 1. <div><a href="http://www.adobewordpress.com" target="_blank" 1. img {float:left;} 2. 3. div{margin:20px auto; width:670px; font: 14px Georgia,

Merhaba arkadaşlar. CSS3'ün bize getirdiklerini konuşma ediyoruz. Sırada çok ama çok büyük bir ilerleme olarak görd

Hem Hyphens hem de Justify ile HTML CSS Result Edit on CodePen 1. <div><a href="http://www.adobewordpress.com" target="_blank" 1. 2. 3. 4. 5. 6. 7.

img {float:left;} div{margin:20px auto; width:670px; font: 14px Georgia, text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto;

Benzer Konular: CSS3 Filter : Sadece CSS ile Görsellerinizi Yönetin HTML5 Müzik Oynatıcı


CSS ile Yazı Arka Planı : text-fill-color CSS ile Etiketlenmiş (Ribbon) Kutu CSS’in Z-Index Değerini Tanıyalım

Yazı Kategorisi : CSS3 , Tasarım Unsurları Anahtar Kelimeler : aralık , aşağıya , atlama , boşluk , çizgi , css , CSS3 , hyphens , justify , satır , tire


Css3'ün hyphens özelliği ile mükemmel paragraflar hazırlayın