Neler yeni

Web Tasarım Metin Biçimlendirilmeleri

Ad
Soyad
Katılım
30 Mayıs 2019
Konum
web master
Konular
327
Mesajlar
493
Ticaret - 100%
1   0   0
  
iletişim
Meslek
Seo Danışmanı
Detay  
Meslek
Seo Danışmanı
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)
:cool:Text Direction(Metin Yönü)
9-)Word Spacing(Kelime Aralığı
10-)Text Shadow(Metin Gölgesi)

1-)TEXT ALİGN:

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.



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:eek:verline}
.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}

:cool:TEXT DİRECTİON:

Text direction özelliği bir metinin yönünü değiştirmekte kullanılır.


Kod:
.tht{direction:rtl}

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.


Kod:
.tht{word-spacing: 10px}
.tht1{word-spacing: -10px}

10-)TEXT SHADOW:



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}
 

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.