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.
Kod:
.tht{color:yellow}
.tht1{color:#ff0000}
.tht2{color:rgb(255,0,0)}
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.
Kod:
.tht{text-indent: 50px}
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.
Kod:
.tht{letter-spacing: 3px}
.tht1{letter-spacing: -3px}
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.
Kod:
.tht{line-height: 10.8}
.tht1{line-height: -1.8}
TEXT DİRECTİON:Text direction özelliği bir metinin yönünü değiştirmekte kullanılır.
Kod:
.tht{direction:rtl}
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.
Kod:
.tht{word-spacing: 10px}
.tht1{word-spacing: -10px}
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.
Kod:
.tht{text-shadow:3px 2px red}Umarım konumu beğenmişsinizdir arkadaşlar, beğendiyseniz teşekkür butonuna basmayı unutmayınız.
Son düzenleme:
