CSS İle Metin Gölgesi Oluşturma..

ByESiNTi · 22 Tem 2021

Metin gölgesi

text-shadow metne gölge ekler.

En basit kullanımında, yalnızca yatay gölgeyi (2px) ve dikey gölgeyi (2px) belirtirsiniz:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Ardından, gölgeye bir renk (kırmızı) ekleyin:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Ardından, gölgeye bir bulanıklık efekti (5 piksel) ekleyin:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Tüm CSS Metin Özellikleri

Property	Description
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Sets the color of text
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Specifies the text direction/writing direction
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Increases or decreases the space between characters in a text
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Sets the line height
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Specifies the horizontal alignment of text
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Specifies the decoration added to text
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Specifies the indentation of the first line in a text-block
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Specifies the shadow effect added to text
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Controls the capitalization of text
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Specifies how overflowed content that is not displayed should be signaled to the user
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Sets the vertical alignment of an element
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Specifies how white-space inside an element is handled
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.	Increases or decreases the space between words in a text

CSS Yazı Tipleri

Web siteniz için doğru yazı tipini seçmek önemlidir!

Yazı Tipi Seçimi Önemlidir

Doğru yazı tipini seçmek, okuyucuların bir web sitesini nasıl deneyimledikleri üzerinde büyük bir etkiye sahiptir.

Doğru yazı tipi, markanız için güçlü bir kimlik oluşturabilir.

Okunması kolay bir yazı tipi kullanmak önemlidir. Yazı tipi, metninize değer katar. Yazı tipi için doğru renk ve metin boyutunu seçmek de önemlidir.

Genel Yazı Tipi Aileleri

CSS'de beş genel yazı tipi ailesi vardır:

Serif yazı tiplerinin her harfin kenarlarında küçük bir çizgi vardır. Bir formalite ve zarafet duygusu yaratırlar.
Sans-serif yazı tiplerinde temiz çizgiler vardır (küçük vuruşlar eklenmez). Modern ve minimalist bir görünüm yaratırlar.
Tek aralıklı yazı tipleri - burada tüm harfler aynı sabit genişliğe sahiptir. Mekanik bir görünüm yaratırlar.
Cursive yazı insan el yazısı taklit.
Fantezi yazı tipleri dekoratif/eğlenceli yazı tipleridir.

Tüm farklı yazı tipi adları, genel yazı tipi ailelerinden birine aittir.

Serif ve Sans-serif Yazı Tipleri Arasındaki Fark

Not: Bilgisayar ekranlarında sans-serif yazı tiplerinin okunması, serif yazı tiplerine göre daha kolay kabul edilir.

Bazı Yazı Tipi Örnekleri

Generic Font Family	Examples of Font Names
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

CSS yazı tipi ailesi Özelliği

CSS'de, font-familybir metnin yazı tipini belirtmek için özelliği kullanırız.

font-familyMülkiyet tarayıcılar / işletim sistemleri arasındaki maksimum uyumluluğu sağlamak için, "yedek" sistemi olarak birçok yazı adlarını tutmak gerekir. İstediğiniz yazı tipiyle başlayın ve genel bir aile ile bitirin (başka yazı tipi yoksa tarayıcının genel ailede benzer bir yazı tipi seçmesine izin vermek için). Yazı tipi adları virgülle ayrılmalıdır.

Not : Yazı tipi adı birden fazla kelimeyse, "Times New Roman" gibi tırnak işaretleri içinde olmalıdır.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>