CSS ile 3B metin efekti

nasıl yapıldığını görelimİhtiyacımız olacak:

• Temel HTML ve CSS bilgisi
• Bir kod düzenleyici
• tarayıcımız

Aşama 1

İhtiyacımız olacak dosyaları kaydetmek için yerel sitemizde bir klasör oluşturacağız, buna "text_3d" diyeceğim, içinde başka bir çağrı css
BÜYÜT
BÜYÜT

Adım 2

Kod düzenleyiciye gideceğiz ve bir önceki adımda oluşturduğumuz “3d_text” klasörünün kök dizinine kaydedeceğimiz yeni bir index.html dosyası oluşturacağız, buna temel html yapımızı yazacağız ve referansını ekleyeceğiz. daha sonra oluşturacağımız "style. ccs" adında bir css dosyası.
HTML Kodu

Aşama 3

Gövde içine bir etiket yerleştireceğimiz bir çizgi ekleyeceğiz

.css dosyasında oluşturacağımız "3d-text" sınıfını atadığımız sınıfa, test etmek için herhangi bir metni bu etiketin içine yerleştireceğim.

3-B Metin Efekti

Şu anda tarayıcıda görürsek, büyük değişiklikler görmeyeceğiz, sadece normal ve güncel bir metin, 3d bir görünüme sahip olabilmemiz için bazı özellikleri css ile tanımlamamız gerekiyor. Göreyim seni.
BÜYÜT

4. Adım

Kod düzenleyicimizde, style.css adını vereceğim yeni bir .css dosyası oluşturacağız, burada özellikleri yerleştireceğiz, böylece metnimizin elde etmek istediğimiz 3D efekti olmasını sağlayacağız.

Adım 5

İlk önce css'imizi düzenlemeye başlayacağız, vücudumuzun boyutunu tanımlayacağız, bunun için genişlik ve yüksekliği %100 olan mutlak bir pozisyon vereceğiz.

 gövde {konum: mutlak; genişlik: %100; yükseklik: %100} 

6. Adım

3. adımda yorumladığımız "3d-text" sınıfının özelliklerini .ccs'mize yazacağız. Yazı tipini tanımlayarak başlayacağız, özellikle "Helvetica Neue" yazı tipini kullanmayı seviyorum, tabii ki yapabilirsiniz. istediğiniz yazı tipiyle kullanın. Bu durumda yazı tipi boyutunu yaklaşık 80 piksele ayarlayacağım; kalın veya kalın yazı … Ve bu sefer beyaz bırakacağım. Tarayıcımızda görürsek, metnin kaybolduğunu fark edeceğiz, çünkü onu beyaza yerleştirdik ve tarayıcıların arka planı da beyaz …

 gövde {konum: mutlak; genişlik: %100; yükseklik: %100} .3d_text {yazı tipi ailesi: "Helvetica Neue", Helvetica, Arial, sans-serif; yazı tipi boyutu: 80 piksel; yazı tipi ağırlığı: kalın; renk: #fff; } 

Tarayıcıda metnin kaybolduğunu göreceğiz
BÜYÜT

7. Adım

Bir önceki adımda metnin kaybolduğunu gördük, şimdi görünmesine ve 3D efektine ihtiyacımız var. Bunun için sadece aşağıdaki gibi text-shadow özelliğini kullanarak metnimize bir gölge eklememiz gerekiyor.

 gövde {konum: mutlak; genişlik: %100; yükseklik: %100} .3d_text {yazı tipi ailesi: "Helvetica Neue", Helvetica, Arial, sans-serif; yazı tipi boyutu: 80 piksel; yazı tipi ağırlığı: kalın; renk: #fff; metin gölgesi: 0 1px 0 #ccc; } 

BÜYÜT

Hafif bir gölgeleme efekti elde ettiğimizi görüyoruz, ancak 3D görünmesi için yeterli değil, neyse ki css, virgülle ayrılmış text-shadow özelliği içinde birkaç gölgeyi birleştirmemize izin veriyor, bundan faydalanacağız. efekti oluşturmak için metnimizden farklı bir mesafede ve daha koyudan daha açık olana farklı renk tonlarında gölgeler, ancak sonunda bu difüzyon efektini vermek için bu gölgeleri rgba renkleri ve saydamları kullanarak birleştirmemiz gerekir. gölgeleme.
Bu şekilde css kodumuz şöyle görünecektir.

 gövde {konum: mutlak; genişlik: %100; yükseklik: %100} .3d_text {yazı tipi ailesi: "Helvetica Neue", Helvetica, Arial, sans-serif; yazı tipi boyutu: 80 piksel; yazı tipi ağırlığı: kalın; renk: #fff; metin gölgesi: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba (0, 0, 0, .1), 0 0 5px rgba (0, 0, 0, .1), 0 1px 3px rgba (0, 0, 0, .3), 0 3px 5px rgba (0, 0, 0, .2), 0 5px 10px rgba (0 , 0, 0, .25), 0 10px 10px rgba (0, 0, 0, .2), 0 20px 20px rgba (0, 0, 0, .15); } 

Ve etkinin sonucu şu olurdu …
BÜYÜT
Şimdilik bu kadar, burada dosyaların olduğu bir .zip var, her türlü soru ve önerilerinizi yorum yoluyla iletebilirsiniz, selamlar…
text_3d20150917130359.zip 694 bayt 217 İndirilenlerBu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.