Web Tasarım / Metin Biçimlendirilmeleri Geniş Anlatım. / Depdip
1-)Text Align(Metin Hizalama)
2-)Text Color(Metin Rengi)
3-)Text Decoration(Metin Dekorasyonu
4-)Text Transformation(Metin Dönüşümü)
5-)Text Indentation(Metin Girinti)
6-)Letter Spacing(Mektup Aralığı)
7-)Line Height(Hat Yüksekliği)
Text Direction(Metin Yönü)
9-)Word Spacing(Kelime Aralığı
10-)Text Shadow(Metin Gölgesi)
Merhaba arkadaşlar, web tasarım konularımda bugün sizlere "Metin Biçimlendirilmeleri" başlığı adı altında geniş çaplı bir konu anlatacağım. Konunun başlıklarını sırasıyla aşağıda belirttiğim şekilde;
1-)Text Align(Metin Hizalama)
2-)Text Color(Metin Rengi)
3-)Text Decoration(Metin Dekorasyonu
4-)Text Transformation(Metin Dönüşümü)
5-)Text Indentation(Metin Girinti)
6-)Letter Spacing(Mektup Aralığı)
7-)Line Height(Hat Yüksekliği)
Text Direction(Metin Yönü)
9-)Word Spacing(Kelime Aralığı
10-)Text Shadow(Metin Gölgesi)
1-)TEXT ALİGN:
2-)TEXT COLOR:
3-)TEXT DECORATİON:
İleri seviye web tasarımcı arkadaşlarımızın sık bir şekilde bilebileceği yöntemlerden biride budur. Metin süslemeleri kaldırmak, ayarlamak için kullanılır. Çoğunlukla ise "text-decoration:none" özelliği ile bilindiği alt çizgileri yok etmek için kullanılır. Not: Alt çekmeli sekmelerde kullanıldığı için pek bilinmeyen ama işe yarayan bir koddur gözle görülür bir değişim olmaz.
4-)TEXT TRANSFORMATİON:
5-)TEXT İNDENTATİON:
6-)LETTER SPACİNG:
7-)LİNE HEİGHT:
TEXT DİRECTİON:
9-)WORD SPACİNG:
Word spacing sayesinde bir metindeki kelimeler arasındaki alanı belirtmek için kullanabiliriz. Kelimeler arasındaki alanı azaltmak ve çoğaltmak için aşağıda kod dizini verdim.10-)TEXT SHADOW:
Text Align sayesinde seçtiğimiz metni (sağ, sol, ortalama) olmak üzere metnimizi üç yöne kaydırabiliriz. Web tasarımında en çok kullanılan yöntem olan bu yöntemi, kodlarla göstermek gerekirse.
Kod:
.tht{text-align:center}
.tht1{text-align:left}
.tht2{text-align:right}
2-)TEXT COLOR:
Text Color özelliği sayesinde belirttiğimiz yazıları renklendirebiliriz. Bunun için başlıca 3 yöntem bulunmaktadır.
Bir ingilizce renk isme belirlemek: tıpkı ("Yellow")
Bir "HEX" değeri belirlemek: tıpkı ("#ff000")
Bir "RGB" değeri belirleyerekde sonuca ulaşabiliriz: tıpkı ("rgb(255,0,0)")
Bu konunun geniş anlatımı içinde lütfen tıklayınız.
Bir ingilizce renk isme belirlemek: tıpkı ("Yellow")
Bir "HEX" değeri belirlemek: tıpkı ("#ff000")
Bir "RGB" değeri belirleyerekde sonuca ulaşabiliriz: tıpkı ("rgb(255,0,0)")
Bu konunun geniş anlatımı içinde lütfen tıklayınız.
3-)TEXT DECORATİON:
İleri seviye web tasarımcı arkadaşlarımızın sık bir şekilde bilebileceği yöntemlerden biride budur. Metin süslemeleri kaldırmak, ayarlamak için kullanılır. Çoğunlukla ise "text-decoration:none" özelliği ile bilindiği alt çizgileri yok etmek için kullanılır. Not: Alt çekmeli sekmelerde kullanıldığı için pek bilinmeyen ama işe yarayan bir koddur gözle görülür bir değişim olmaz.
Kod:
.tht{text-decoration:line-through}
.tht{text-decoration:overline}
.tht{text-decoration:underline}
.tht{text-decoration:none}
4-)TEXT TRANSFORMATİON:
Text trasnformatin herşeyi büyük veya küçük harflere dönüştürmek veya her kelimenin ilk harfinden yararlanmak için kullanılır. Kısaca text transform büyük ve küçük metin belirtmek için kullanılır.
Kod:
.tht{text-transform:uppercase}
.tht1{text-transform:lowercase}
.tht2{text-transform:capitalize}
5-)TEXT İNDENTATİON:
Text indentation daha çok uzun yazılı biyografi gibi yazıların başlarında belirttiğiniz büyüklüğe göre, başta boşluk bırakır. Çok kullanılmayan yöntemin kodu aşağıdaki gibidir.
6-)LETTER SPACİNG:
Letter spacing özelliği bir metnin yanındaki metinle arasındaki boşluğu belirler. Kod dizini aşağıda belirttiğin gibidir.
7-)LİNE HEİGHT:
Metinlerin satır yüksekliğini belirtir. Satırların arasında alanı belirtmek için kullanılır. Çok fazla kullanılmaz.
TEXT DİRECTİON:
Text direction özelliği bir metinin yönünü değiştirmekte kullanılır.
9-)WORD SPACİNG:
Word spacing sayesinde bir metindeki kelimeler arasındaki alanı belirtmek için kullanabiliriz. Kelimeler arasındaki alanı azaltmak ve çoğaltmak için aşağıda kod dizini verdim.
Text shadow ise yazıya gölge verir. Baştan sona olmak üzere 1.3px(dikey gölge), 2.2px(dikey gölgenin konumu) 3. (red) gölgenin rengini belirtir.
Umarım konumu beğenmişsinizdir arkadaşlar, beğendiyseniz teşekkür butonuna basmayı unutmayınız.
Son düzenleme: