Gelişmiş Özellikler — Etkileşimli API Hata Ayıklayıcı

60 çok dilli yazı tipi, 5000+ ikon, 9 görsel formatı, gradyan dokular, metin vurgulama — her parametre gerçek zamanlı olarak önizlenebilir

MockImg yer tutucu canlı önizleme
Temel Ayarlar
×
Oran
Dolgu yok—
Çok sıkı1/20
Sıkı1/10
Orta1/8
Geniş1/6
Varsayılan1/5
Çok geniş1/4
Maksimum1/3
Üst-Alt + Sol-Sağ
Kısa metin1/10,1/20
Banner1/4,1/20
Üst / Sağ / Alt / Sol
Başlık alanı40,10,5,10
Sol navigasyon20,10,20,60
Metin Stili
Otomatik
Arka Plan ve Kenarlık
100%
Kapalı
85
Ikon Ayarları
Otomatik
Metin Vurgulama [Kılavuzu Görüntüle]

Ikon Sistemi

Outline ve Filled stilleriyle 5000+ Tabler İkonu, özelleştirilebilir boyut

Ikon Boyutu 48
Tabler Icons önizleme

Belgelendirme ve Referans

Tam API parametre referansı, metin vurgulama kılavuzu, yalnızca simge görüntüleme modu

Temel Sözdizimi

text parametresinde vurgulamak istediğiniz bölümleri sarmak için {{...}} kullanın. Tüm vurgulanan bölümler aynı stili paylaşır. İpucu: {{...}} ifadesini yukarıdaki Metin İçeriği alanına da doğrudan yazabilirsiniz — sistem bunları otomatik olarak algılar ve uygular.

Sözdizimi biçimi
?text=Normal metin{{vurgulanmış metin}devam eden normal metin
&hlcolor=FF5733

Parametre Ayrıntıları

hlcolor Vurgu Rengi

Vurgu rengini ayarlar. HEX biçimini (örn. FF5733) veya renk adlarını (örn. red) destekler.

Örnek： ?text=Mock{{Img}}.Dev&hlcolor=FF5733
hlcolor2 Vurgu Gradyan Rengi 2

Gradyan vurgu için ikinci rengi ayarlar. Bu değer ayarlandığında gradyan efekti otomatik olarak etkinleşir, hlcolor başlangıç rengi olarak kullanılır.

Örnek： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6
hlgradient Vurgu Gradyan Yönü

Gradyan yönünü ayarlar. Ayarlanmadığında varsayılan olarak horizontal kullanılır.

horizontal Yatay (soldan sağa) vertical Dikey (yukarıdan aşağıya) diagonal Çapraz (sol-üstten sağ-alta)
Örnek： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6&hlgradient=vertical
hlfont Vurgu Yazı Tipi

Vurgulanan metin için bağımsız bir yazı tipi belirtir. Değer, yazı tipi dosya adıdır (.ttf uzantısı olmadan).

Örnek： ?text={{Brand}}&hlfont=Poppins-Bold
hlbold Vurgu Kalın

Vurgulanan metni kalın yapar. Değer: true veya 1.

Örnek： ?text={{Important}}&hlbold=true

Tam Örnekler

Örnek 1：Düz Renk Vurgulama
https://mockimg.dev/600x400.png?text=Mock{{Img}}.Dev&hlcolor=FF5733

Efekt:"MockImg.Dev" — Img kırmızı olarak gösteriliyor

Örnek 2：Gradyan Vurgulama
https://mockimg.dev/600x400.png?text={{Gradient}}&hlcolor=EC4899&hlcolor2=8B5CF6

Efekt: "Gradient" pembe-mor yatay gradyan olarak gösteriliyor

Örnek 3：Özel Yazı Tipi Vurgulama
https://mockimg.dev/600x400.png?text={{MockImg}}&hlfont=Poppins-Bold&hlcolor=3B82F6

Efekt: "MockImg" Poppins-Bold yazı tipiyle mavi olarak gösteriliyor

Örnek 4：Kalın Vurgulama
https://mockimg.dev/600x400.png?text={{Important}}&hlbold=true&hlcolor=EF4444

Efekt: "Important" kırmızı ve kalın olarak gösteriliyor

Örnek 5：Birleşik (Gradyan + Yazı Tipi + Kalın)
https://mockimg.dev/600x400.png?text={{Premium}}&hlcolor=FFD700&hlcolor2=FF6B6B&hlgradient=diagonal&hlfont=Montserrat-Bold

Efekt: "Premium" çapraz gradyanla (altından kırmızıya) Montserrat-Bold yazı tipiyle gösteriliyor

Örnek 6：Çok Bölgeli Vurgulama
https://mockimg.dev/600x400.png?text={{MockImg}}+和+{{占位图}}&hlcolor=3B82F6

Efekt: "MockImg" ve yer tutucu metin her ikisi de mavi olarak gösteriliyor (paylaşılan vurgu stili)

Örnek 7：CJK Metninde Vurgulama
https://mockimg.dev/600x400.png?text={{MockImg}}+占位图服务&hlcolor=10B981

Efekt: "MockImg" yeşil olarak gösteriliyor, kalan metin varsayılan rengi kullanıyor

Örnek 8：Karanlık Tema + Vurgulama
https://mockimg.dev/600x400.png?theme=dark&text=Dark+{{Mode}}&hlcolor=FBBF24

Efekt: Koyu temada, "Mode" altın vurguyla gösteriliyor

Notlar

  • {{...}} işaretçileri metin genişliği hesaplamalarında sayılmaz ve düzeni etkilemez
  • İç içe {{...}} işaretçileri desteklenmez — iç işaretçiler düz metin olarak kabul edilir
  • Tüm vurgulanan bölümler aynı hl* stil ayarlarını paylaşır
  • Vurgulama tüm çıktı formatlarında çalışır (SVG, PNG, JPEG, WebP, AVIF vb.)
  • Vurgu işaretçileri çok satırlı metinde de çalışır (satır sonları için \n kullanın)

Tetikleme Koşulları

  • icon parametresi sağlanmış
  • text parametresi yok, veya text boş

İkon Boyutu Kuralları

Otomatik: ikon boyutu = görselin küçük kenarının %80'i (en az 24px, en çok %90)

Özel: otomatik hesaplamayı geçersiz kılmak için iconsize parametresini kullanın

Örnekler

Düz Renk İkon
https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FF5733

Efekt: Kalp ikonu kırmızı renkte otomatik büyütülür ve ortalanır

Gradyan İkon
https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&iconcolor2=FF6B6B&icongradient=diagonal

Efekt: Yıldız ikonu altından kırmızıya çapraz gradyan ile

Saydam + İkon
https://mockimg.dev/200x200.png?icon=outline/user&iconcolor=3B82F6&bg=transparent

Efekt: Kullanıcı ikonu saydam arka planda — avatarlar için mükemmel

Gradyan Arka Plan + Yuvarlatılmış
https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FFFFFF&gradient=horizontal&bgcolor2=EC4899&radius=20

Efekt: Beyaz kalp ikonu pembe gradyan üzerinde yuvarlatılmış köşelerle

Karanlık Tema + İkon
https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&theme=dark

Efekt: Altın yıldız ikonu koyu arka planda

Dairesel Kenarlık (Avatar)
https://mockimg.dev/400x400.png?icon=outline/user&iconcolor=3B82F6&radius=200&border=4&bordercolor=3B82F6

Efekt: Kullanıcı ikonu kenarlıklı daire içinde — avatar yer tutucuları için ideal

İkon+Metin vs Yalnızca İkon

Mod URL Efekt
Yalnızca İkon (metinsiz) ?icon=outline/heart İkon otomatik büyütülür ve ortalanır, metin yok
İkon + Boş Metin ?icon=outline/heart&text= Yalnızca ikon ile aynı
İkon + Metin ?icon=outline/heart&text=Love İkon ve metin yan yana (orijinal davranış)
İkon Yok Metin Yok 600x400.png Boyut metni (varsayılan davranış)

Notlar

  • Tüm çıktı formatlarıyla (SVG, PNG, JPEG, WebP, AVIF vb.) çalışır
  • Tüm ikon parametreleri (iconcolor, iconcolor2, icongradient, iconsize) beklendiği gibi çalışır
  • Tüm arka plan efektleri (saydam, gradyan, desen, gürültü, kenarlık, yarıçap) yalnızca ikon modu ile birleştirilebilir
  • Küçük boyutlarla da çalışır — faviconlar için mükemmel: 32x32.ico?icon=filled/star&iconcolor=FFD700

Genel Bakış

padding parametresi, metin ve simgelerin etrafındaki boşluğu kontrol eder. 4 format desteklenir: tek piksel, tek oran, iki değer (dikey + yatay), dört değer (CSS saat yönü).

# Desteklenen formatlar
?padding=20
?padding=1/6
?padding=10,20
?padding=10,20,30,40

Varsayılan Davranış

padding parametresi verilmediğinde, yerleşik varsayılanlar kullanılır (önceki sürümlerle aynı):

Sol ve sağ: genişliğin %5'i Üst ve alt: yüksekliğin %20'si

Format Detayları

20 Tek Piksel Değeri

Dört kenar da aynı piksel değerini kullanır.

padding=20
1/6 Tek Oran Değeri

Dört kenar da oran kullanır. Üst/alt yüksekliğe, sol/sağ genişliğe dayanır. Sonuçlar otomatik yuvarlanır.

padding=1/6  →  600×400 → üst/alt 67px, sol/sağ 100px
10,20 İki Değer (Dikey + Yatay)

Dikey ve yatay dolguyu ayrı ayrı kontrol eder. Piksel ve oran karıştırılabilir.

padding=10,20  →  üst/alt 10px, sol/sağ 20px
padding=1/8,15  →  üst/alt = yükseklik/8, sol/sağ 15px
padding=30,1/10  →  üst/alt 30px, sol/sağ = genişlik/10
10,20,30,40 Dört Değer (CSS Saat Yönü)

CSS tarzı bağımsız kontrol: üst, sağ, alt, sol. Üst/alt yüksekliğe, sol/sağ genişliğe dayanır. Piksel ve oran karıştırılabilir.

padding=10,20,30,40  →  üst 10, sağ 20, alt 30, sol 40 (hepsi px)
padding=1/8,1/6,15,1/10  →  üst h/8, sağ w/6, alt 15px, sol w/10 (karışık)

Örnekler

Kısa metin — Dolguyu azalt
https://mockimg.dev/480x200.svg?text=IP&bold=true&padding=1/10

"IP" gibi kısa metin için padding=1/10 ile daha kompakt düzen.

Sıfır dolgu
https://mockimg.dev/600x400.svg?text=Full&padding=0

padding=0 ayarlayarak içeriğin tüm görüntüyü doldurmasını sağlayın.

Simge + metin — Kompakt düzen
https://mockimg.dev/600x400.svg?icon=outline/heart&text=Love&padding=1/8

Simge ve metin yan yana, orta düzey dolgu.

Başlık alanı — Üst dolgu büyük
https://mockimg.dev/600x300.svg?text=Title&padding=40,10,5,10

Büyük üst dolgu ile başlık hissi, alt kompakt.

Sol navigasyon — Sol dolgu büyük
https://mockimg.dev/800x400.svg?text=Content&padding=20,10,20,60

Büyük sol dolgu ile navigasyon çubuğuna uyum.

Notlar

  • Oran değerlerinde pay ve payda pozitif olmalıdır
  • Piksel değerleri negatif olamaz — negatif değerler otomatik 0 olarak düzeltilir
  • Oran sonuçları otomatik olarak tam piksele yuvarlanır
  • Dolgu görüntü boyutlarının yarısını aşarsa, içerik alanı çok küçük olabilir ve yazı tipi boyutu otomatik olarak minimum 12px olur