CSS Kabartma Metin Oluşturucu

Kabartma ve oyma metin efektleri, yalnızca iyi ayarlanmış bir text-shadow kullanarak başlıklara ve düğmelere ince, dokunsal bir görünüm kazandırır. Bu araç, metninizi yazmanıza, Kabartma (yükseltilmiş) veya Oyma (oyulmuş) seçmenize, yoğunluğu ayarlamanıza olanak tanır ve anında canlı önizlemeli CSS kodunu oluşturur.

Bu Araç Nedir?

Bu araç, yükseltilmiş (kabartma) veya oyulmuş (oyma) metin illüzyonu yaratmak için zıt yönlere kaydırılmış açık renkli ve koyu renkli bir text-shadow'u birleştirir.

Kabartma ve Oyma stilleri arasında geçiş yapın ve 3D efektin ne kadar güçlü görüneceğini kontrol etmek için yoğunluk kaydırıcısını ayarlayın.

Siz yazdıkça veya herhangi bir ayarı değiştirdikçe canlı önizleme anında güncellenir, böylece CSS'i kopyalamadan önce efekti ince ayar yapabilirsiniz.

Neden Kullanmalısınız?

Retro bir Windows 95 veya skeuomorfik arayüz teması oluşturuyorsunuz ve geliştirici araçlarında gölge kaymalarını elle ayarlamadan o klasik "gri plastiğe bastırılmış" etiket görünümüne ihtiyacınız var.
Bir rozet veya başarı simgesi tasarlıyorsunuz ve metnin üstte düz durmak yerine metal benzeri bir arka plana damgalanmış veya oyulmuş gibi görünmesini istiyorsunuz.
Bir tasarımcı size CSS'siz kabartmalı bir başlık mockup'ı verdi — gölge değerlerini deneme yanılmayla tahmin etmek yerine efekti burada yeniden oluşturun.
Bir görsel düzenleyiciye veya SVG filtresine başvurmadan bir logo veya kahraman başlığı için eski usul "taşa oyulmuş" veya matbaa baskısı görünümü istiyorsunuz.
Son tasarıma karar vermeden önce 3D efektin ne kadar hafif mi yoksa çarpıcı mı olması gerektiğini görmek için birkaç yoğunluk seviyesini yan yana prototipliyorsunuz.
%100 yerel: CSS tamamen tarayıcınızda oluşturulur, sunucuya hiçbir şey gönderilmez.

Nasıl Kullanılır

Biçimlendirmek istediğiniz metni yazın.
Stil seçiciden Kabartma (yükseltilmiş) veya Oyma (oyulmuş) seçin.
Yoğunluk kaydırıcısını ayarlayın ve tasarımınıza uygun bir arka plan ve metin rengi seçin.
Oluşturulan CSS kodunu kopyalamak için "Kopyala"ya tıklayın ve stil sayfanıza yapıştırın.

Örnek

Giriş

Metin: "Embossed", Stil: Kabartma, Yoğunluk: 2

Çıkış

color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);

Oluşturulan CSS; metin rengini, arka plan rengini ve kabartma veya oyma efektini yaratan iki katmanlı bir text-shadow'u ayarlar.

Efekt nasıl çalışır

Kabartma ve oyma efektleri, zıt açık ve koyu renklere sahip iki kaydırılmış text-shadow katmanından oluşturulur.

Özellik	Amaç
Açık gölge (rgba(255,255,255,0.7))	Metnin bir kenarına vuran bir ışık kaynağını simüle eder
Koyu gölge (rgba(0,0,0,0.5))	Karşı kenara düşen bir gölgeyi simüle eder
Kaydırma yönü	3D illüzyonu ters çevirmek için Kabartma ile Oyma arasında tersine döner
Yoğunluk	Açık ve koyu gölgelerin metinden ne kadar uzağa kaydırıldığını kontrol eder
Eşleşen renkler	Düz kontrastı gizlemek için metin ve arka plan rengi birbirine yakın ayarlanır

İlgili araçlar

Daha fazla CSS oluşturucu için bunları deneyin.

→ CSS Glassmorphism Oluşturucu · Box Shadow Oluşturucu · Border Radius Oluşturucu

Kabartma ve oyma metin nerede en iyi çalışır

İnce 3D efektin ana içerikle rekabet etmeden doku kattığı, düz renkli bir kart veya panel üzerindeki bölüm başlıkları ve etiketler.
Damgalanmış veya oyulmuş görünümün resmi veya kazanılmış bir şey hissini güçlendirdiği rozetler, mühürler ve başarı simgeleri.
Efektin tek seferlik bir vurgu yerine tasarım dilinin parçası olduğu retro veya skeuomorfik arayüz temaları (eski işletim sistemi görünümü, kabartmalı düğmeler).
Küçük gövde metni veya uzun paragraflarda kullanmaktan kaçının — efekt, metin/arka plan renklerinin birbirine yakın olmasına dayanır, bu da küçük boyutlarda düz okunabilirliğe zarar verir.

Sıkça Sorulan Sorular

Kabartma ile Oyma arasındaki fark nedir?

Kabartma, metnin arka plandan yükseltilmiş görünmesini sağlar; açık renkli gölge sol üstte, koyu renkli gölge sağ alttadır. Oyma bunu tersine çevirerek metnin arka plana oyulmuş gibi görünmesini sağlar.

Efekt neden birbirine yakın metin ve arka plan rengiyle en iyi görünür?

Kabartma/oyma illüzyonu tamamen gölge parlaklıklarına ve gölgelere dayanır, metin-arka plan kontrastına değil — bu yüzden metin rengini arka plan rengine yakın (veya aynı) ayarlamak genellikle en temiz sonucu verir.

Bu efekti sadece metinde değil, herhangi bir öğede kullanabilir miyim?

Bu aracın oluşturduğu text-shadow özelliği yalnızca metne uygulanır. Şekiller veya düğmeler üzerinde benzer bir efekt için buna denk bir box-shadow yapılandırması gerekir.

Bu araç yazdıklarımı kaydediyor veya takip ediyor mu?

Hayır. CSS tamamen tarayıcınızda oluşturulur — hiçbir şey bir sunucuya gönderilmez veya orada saklanmaz.

Bu tüm tarayıcılarda çalışır mı?

Evet — text-shadow, Chrome, Firefox, Safari ve Edge dahil tüm modern tarayıcılarda mükemmel destek sunar.

Kabartma efekti koyu bir arka planda neden kayboluyor veya yanlış görünüyor?

Açık gölge katmanı daha açık bir yüzeyde öne çıkmaya dayanır — çok koyu bir arka planda beyaz vurgu solabilir veya beklediğinizden ters görünebilir. Karanlık temalarda 3D illüzyonu okunabilir tutmak için metin ve arka planı orta ton griye çevirmeyi veya açık gölgenin opaklığını artırmayı deneyin.

Kabartma efektini üzerine gelindiğinde canlandırabilir veya geçiş yapabilir miyim?

Evet — text-shadow bir CSS geçişiyle canlandırılabilir, bu yüzden :hover veya :focus'ta düz bir durumdan kabartmalıya (veya Kabartma ile Oyma yoğunlukları arasında) sorunsuzca geçiş yapabilirsiniz. Oluşturulan gölge değerini "hover" durumunuz olarak kopyalayın ve temel öğede transition: text-shadow 0.2s ease; kuralıyla eşleştirin.

Yoğunluk kaydırıcısı büyük miktarda metinde performansı etkiler mi?

Hayır — text-shadow, yoğunluktan bağımsız olarak hafif bir CSS özelliğidir, çünkü kayma 1px veya 6px olsa da aynı şekilde hesaplanan sadece iki gölge katmanıdır. Başlıklarda, düğmelerde veya gövde metninde render performansı endişesi olmadan güvenle kullanılabilir.

Varsayılan yerine özel bir yazı tipiyle efektin iyi görünmesini nasıl sağlarım?

Kabartma/oyma illüzyonu, gölge kaymasının ışık ve gölgeyi yakalayacağı daha fazla yüzey alanı olduğundan, kalın, kalın vuruşlu yazı tiplerinde en net şekilde okunur. İnce veya hafif ağırlıklı yazı tipleri efekti soluk veya gürültülü gösterebilir — özel yazı tipiniz net görünmüyorsa, daha ağır bir font-weight deneyin veya telafi etmek için yoğunluğu biraz artırın.

Açık ve koyu gölgeler için beyaz/siyah yerine iki farklı renk kullanabilir miyim?

Oluşturulan CSS, düzenlemekte özgür olduğunuz bir başlangıç noktasıdır — kodu kopyaladıktan sonra rgba(255,255,255,...) ve rgba(0,0,0,...) değerlerini istediğiniz herhangi bir renk çiftiyle değiştirin, örneğin varsayılan gri metal efekti yerine bronz plaka görünümü için sıcak bir altın vurgu ve koyu kahverengi bir gölge.