Web siteleri için yuvarlatılmış köşeler ve daire görseller

Yuvarlatılmış köşeler fotoğrafları kart düzenine uyarlayabilir; daire portreler ekip sayfasına tutarlı bir biçim verir. Şekil içeriği desteklemelidir: yüzü kesen bir daire veya önemli ürün ayrıntısını gizleyen yuvarlatma iyileştirme sayılmaz.

Dosyayı değiştirebilir veya tarayıcının sayfadaki görünümü yuvarlatmasını sağlayabilirsiniz. Seçim, görseli nerede kullanacağınıza ve şekli sonradan değiştirmeniz gerekip gerekmediğine bağlıdır.

CSS mi kullanmalı, dosyayı mı düzenlemeli?

Kontrol ettiğiniz bir sitede CSS genellikle daha esnektir. Aynı orijinali farklı yerleşimlerde kullanabilir, köşeleri site genelinde ayarlayabilir ve yeni dosya dışa aktarmadan kırpmayı değiştirebilirsiniz. Birçok site düzenleyicisinde bunun için köşe yarıçapı ayarı bulunur.

Site veya uygulama görsel kabul edip köşe ayarı sunmuyorsa ya da görseli başka bir tasarıma yerleştirecekseniz dosyayı düzenleyin. Şeffaf köşeler dosyaya kaydedilir; şekil sitenizin CSS’sine bağlı kalmaz.

İçeriğe uygun şekil ve yarıçap seçin

Görselin amacıyla başlayın. Yüzün odakta olduğu küçük portrede daire işe yarayabilir. Manzara, ekran görüntüsü veya ürün ayrıntısı genellikle daha fazla bilgiyi koruyan dikdörtgen çerçeve gerektirir.

Site kartlarında 12 veya 16 CSS pikseli gibi ölçülü bir yarıçap deneyin; kartlar, düğmeler ve diğer görsellerle birlikte değerlendirin. Bunlar tasarım örnekleridir, zorunlu değerler değildir. Birkaç ortak yarıçap kullanmak, her fotoğrafa farklı değer vermekten daha tutarlı sonuç sağlar.

Gerçek gösterim boyutunda değerlendirin. Büyük kaynakta hafif görünen yuvarlatma küçük önizlemede kaybolabilir. Dosyaya kaydedilmiş köşeler görselle birlikte ölçeklenir. Örneğin 16 piksellik sabit CSS yarıçapı, gösterim genişliği değişse de aynı CSS ölçüsünü korur.

800 × 400 görselde Pixilo’yu %25 ayarladığınızı düşünün. Kayıtlı yarıçap 50 pikseldir. Görsel 400 × 200 gösterilince görünür yarıçap yaklaşık 25 CSS pikseline iner. 200 × 100 gösterimde yaklaşık 12,5 olur. Değeri yalnızca tam boyutlu önizlemeye değil, ziyaretçinin göreceği boyuta göre seçin.

Önemli içeriği köşelerden uzak tutun. Grup fotoğrafında kenardaki kişileri, ekran görüntüsünde etiketleri ve kontrolleri inceleyin. Gerekli ayrıntı kayboluyorsa şekli zorlamak yerine yuvarlatmayı azaltın veya kırpmayı değiştirin.

Pixilo ile görsel köşelerini yuvarlatın

1. Çalışma kopyası hazırlayın. Orijinali ayrı saklayın. Başka şekil gerekiyorsa önce kırpma aracını kullanın. Ölçüler fazlaysa yuvarlatmadan önce kopyayı boyutlandırın.
2. Görseli seçin. Yuvarlatılmış köşeler aracını açıp bir JPG, PNG veya WebP seçin.
3. Köşe yuvarlatma değerini ayarlayın. Düşük değerle başlayın ve önizlemeyi izleyerek artırın. Dört köşe de aynı yarıçapı kullanır.
4. Kaldırılan köşelerin dolgusunu seçin. Farklı sayfa renklerinde kullanım için Şeffaf arka plan seçili kalsın. Renk seçmek için kapatın.
5. İndirip kontrol edin. PNG indir seçeneğine basın, kaydedilen dosyayı açın ve kenarları kullanacağınız zeminde inceleyin.

Araç piksel genişliğini ve yüksekliğini korur. Bu ölçülerin içindeki köşeleri kaldırır veya doldurur; tüm görseli yeniden boyutlandırmaz ve konunun arkasındaki zemini silmez.

Yuvarlatma yüzdesi ne anlama gelir?

Pixilo yarıçapı kısa kenarın yarısının yüzdesi olarak hesaplar. %0’da köşeler dik kalır; %100’de sığan en büyük dairesel yarıçap kullanılır. 800 × 400 örneğinde kısa kenarın yarısı 200 piksel, bunun %25’i 50 pikseldir.

Kaydırıcı CSS yüzdesiyle aynı değildir. CSS yatay yüzde yarıçaplarını genişlikten, dikey olanları yükseklikten hesaplar. Kare olmayan kutuda border-radius: 50% elips oluşturur. Pixilo’nun %100 ayarı dikdörtgende kapsül, karede daire üretir.

Pixilo ile daire görsel oluşturun

Kare görselle başlayın. Geniş bir görsel en yüksek yuvarlatmada bile geniş kalır; bu yüzden daireyi uygulamadan önce kırpmayı seçin.

1. 1:1 kırpın. Orijinali kırpma aracında açıp kare seçin. Başın veya nesnenin çevresinde alan bırakın: daire karenin köşelerini gizler.
2. Uygun ölçüler seçin. 2× ekranda 160 × 160 CSS pikseli gösterilen portre için 320 × 320 kopya seçeneklerden biridir. Gerekirse boyutlandırma aracını kullanın. Ayrıntıları hedef boyutta karşılaştırın; küçük kaynağı yalnızca bu ölçülere ulaşmak için büyütmeyin.
3. Kareyi yuvarlatın. Hazırlanan kareyi Yuvarlatılmış köşeler aracında seçin, Köşe yuvarlatma değerini %100 yapın ve Şeffaf arka plan seçili kalsın.
4. Kaydedilen daireyi kontrol edin. PNG’yi indirip baş, saç ve önemli ayrıntıların görünür alana rahatça sığdığını doğrulayın.

Daire, köşeleri şeffaf kare bir PNG’nin içinde yer alır. Dosyanın genişliği ve yüksekliği değişmez; yalnızca görünür dış hat daire olur. Kişinin arkasındaki duvar veya oda dairenin içinde görünmeye devam eder.

CSS ile yuvarlatılmış köşeler ekleyin

Düzenleyicinizde köşe yarıçapı ayarı varsa önce onu deneyin. Kendi uygulamanızda CSS görsel öğesini hedeflemelidir:

1. Sınıfı ekleyin. HTML düzenliyorsanız aşağıdaki örneği kullanın veya rounded-image sınıfını mevcut <img> öğenizin class özniteliğine ekleyin. Düzenleyicinin CSS sınıfı alanına adı başında nokta olmadan yazın; sınıfın görsele mi çevreleyen öğeye mi eklendiğini kontrol edin.
2. CSS’yi ekleyin. Örneği sitenin stil dosyasına veya özel CSS alanına yapıştırın. .rounded-image başındaki noktayı koruyun; bu, o sınıfa sahip öğeleri seçer. CSS alanı genellikle HTML <style> etiketleri olmadan yalnızca CSS bekler.
3. Yayımlanan görseli kontrol edin. Aşağıdaki HTML’yi kullanıyorsanız örnek yolu ve bilgileri değiştirin. Önizlemede tema veya düzenleyici stillerinin sonucu geçersiz kılmadığını doğrulayın.

Bu örnek oranları korur ve görselin kapsayıcısına sığacak şekilde küçülmesini sağlar:

<img
  class="rounded-image"
  src="/images/finished-kitchen.webp"
  width="1200"
  height="800"
  alt="Meşe dolaplı ve taş tezgâhlı tamamlanmış mutfak">

.rounded-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

Kendi dosya yolunuzu, ölçülerinizi ve alternatif metninizi kullanın. HTML genişlik ve yüksekliği kaynak ölçülerini belirtip alan ayırmaya yardımcı olur. CSS gösterim boyutunu ve köşeleri belirler. Aşağıdaki daire örneğinde aynı adımları team-avatar sınıfı ve CSS’siyle uygulayın.

Düzenleyici sınıfı çevreleyen kapsayıcıya ekliyorsa .rounded-image seçicisini .rounded-image img olarak değiştirin. Daire örneğinde .team-avatar img seçicisini .team-avatar yerine kullanın. Böylece boyut ve yuvarlatma kuralları içerideki görsele uygulanır.

16px değeri dört köşeyi yuvarlatır. CSS farklı yarıçaplara da izin verir: border-radius: 16px 16px 0 0 yalnızca üst köşeleri yuvarlatır. Sıra sol üst, sağ üst, sağ alt ve sol alttır. Pixilo şu anda hepsini eşit yuvarlatır. Söz dizimi ve yüzdeler için MDN’nin border-radius belgesine bakın.

CSS sayfadaki görünümü değiştirir, indirilen kaynağı değil. Orijinali ayrı açmak veya kaydetmek CSS şeklini içermez. CSS’nin gizlediği bölümler de kaynakta kalır.

CSS ile daire görsel oluşturun

CSS dairesi eşit gösterim genişliği ve yüksekliği gerektirir. Kaynak dikdörtgen olabilir: object-fit: cover kişiyi esnetmeden kareyi doldurur; yarıçap kareyi daire şeklinde keser.

<img
  class="team-avatar"
  src="/images/team-portrait.webp"
  width="800"
  height="1200"
  alt="Maya, fizyoterapist">

.team-avatar {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 50%;
}

Örnekte kaynak 800 × 1200 piksel olup 160 × 160 karede gösterilir. Değerleri kendi görselinize ve yerleşiminize uyarlayın. Mobil kırılma noktasında gösterim boyutunu değiştiriyorsanız genişlikle yüksekliği eşit tutun.

object-fit: cover oranları koruyup sığmayan alanı kırpar. object-position: 50% 40% yatayda ortalar ve bu dikey kaynakta varsayılan dikey ortalamadan biraz daha yukarıdaki bölümü gösterir. Yüzü yakınlaştırmaz veya uzaklaştırmaz. Konumu her portre için ayarlayın.

MDN, object-fit ve object-position özelliklerini ayrıntılı açıklar. Dikdörtgen fotoğrafı uygun sığdırma kuralları olmadan kareye zorlamayın; konu esneyebilir.

Örnek: ekip portrelerini tutarlı hâle getirin

Bir kliniğin dört fotoğrafı olduğunu düşünün: iki baş ve omuz portresi, tedavi odasında çekilmiş geniş bir kare ve çok yakın kırpılmış bir yüz. Ekip sayfasında hepsi 160 × 160 dairelerde görünecek. Aynı dış biçim yalnızca ilk adımdır.

1. Referans kırpma seçin. Bir portreden baş ve omuzların ne kadar görüneceğine karar verin. Saç üzerinde boşluk bırakın, gözleri benzer yüksekliğe getirin. Bunu herkes için katı ölçü değil görsel referans olarak kullanın.
2. Yüz boyutlarını eşitleyin. Geniş oda fotoğrafını daha yakın kırpın ki kişi diğerlerinden çok küçük görünmesin. Yakın portre zaten saç veya çeneyi kesiyorsa varsa daha geniş orijinali kullanın. Daireyi büyütmek eksik içeriği geri getirmez.
3. Dairenin uygulanışını seçin. CSS için kırpmaları hazırlayıp aynı 160 × 160 çerçeveyi kullanın ve konumları ayarlayın. Kayıtlı daire görseller için uygun olduğunda 320 × 320 gibi eş kare kopyalar hazırlayıp hepsinde Pixilo’nun %100 ayarını kullanın.
4. Tümünü birlikte inceleyin. Portreleri adların yanına gerçek boyutta koyun. Hiçbir yüz yalnızca daha yakın kırpıldığı için baskın görünmemeli. Ardından portrelerin alt alta gelebileceği mobili kontrol edin.

Tutarlılık daire kadar benzer kadraj ve yüz boyutundan gelir. Yararlı bağlamı koruyun, ancak ad ve görevleri portreye gömmek yerine sayfa metnine ekleyin.

Arka planı ve dosya biçimini seçin

Görsel farklı sayfa renklerinde veya koyu modda kullanılacaksa şeffaf kaydedin. Beyaz köşe beyaz sayfaya karışırken koyu kartta kare leke gibi görünebilir. Bazı görüntüleyiciler şeffaflığı beyaz veya dama deseniyle gösterir. Beyaz piksel bulunduğuna karar vermeden farklı zeminde deneyin.

Şeffaf arka plan kapalıyken seçilen renk kaldırılan köşeleri ve mevcut şeffaf alanları doldurur. Fotoğrafın içindeki opak arka planı değiştirmez. Beyaz doldurduktan sonra şeffaflık gerekiyorsa orijinale dönüp seçenek açıkken yeniden kaydedin.

PNG şeffaflığı korur ve yeni kayıplı sıkıştırma eklemez, ancak fotoğrafın dosya boyutunu artırabilir. Web için şeffaflığı koruyabilen bir WebP kopyasıyla karşılaştırın. Pixilo dönüşümü kayıplıdır; kenarları ve ayrıntıları inceleyin. JPG şeffaf köşeleri koruyamaz. Şeffaf arka plan rehberimiz bu seçimleri açıklar.

Şekil CSS ile yapılıyorsa fotoğraf şeffaf olmak zorunda değildir. Uygun JPG veya WebP’yi koruyun, görünümü tarayıcı yuvarlatsın. CSS kaynak dosyayı sıkıştırmaz. Yerleşime uygun ölçü seçin ve sunulan dosyanın boyutunu ve netliğini karşılaştırın.

Gerçek yerleşimde sonucu kontrol edin

• Konuyu inceleyin. Yüzlere, saça, ürün kenarlarına ve kırpma yakınındaki yazıya bakın. Şekil okuyucunun ihtiyaç duyduğu bilgiyi korumalıdır.
• Küçük ekranları kontrol edin. CSS dairesinde gösterim genişliği ve yüksekliği eşit kalmalıdır. Son boyutta köşe yarıçapını da değerlendirin.
• Sayfa arka planlarını deneyin. Açık ve koyu yüzeylerde istenmeyen opak köşeler veya açık renkli kenar izi arayın.
• Son sürümü inceleyin. Site veya uygulama dosyayı boyutlandırabilir, kırpabilir ya da dönüştürebilir. Biçim değişimi sonrasında da kayıtlı veya yayımlanmış kopyayı kontrol edin.
• Yararlı alternatif metin kullanın. Yalnızca şekli değil işlevi açıklayın. Ekip portresi kişiyi bağlamında tanıtmalı; dekoratif görseller genellikle boş alternatif metin gerektirir. Alternatif metin ve dosya adı rehberimize bakın.

Sık sorulan sorular

Görsel neden oval veya kapsül oldu?

Önce oranları kontrol edin. CSS dairesi için eşit gösterim ölçüleri kullanın; Pixilo’da %100 ayarından önce kare kırpın. Yukarıdaki karşılaştırma dikdörtgenin neden başka dış hat oluşturduğunu gösterir.

Köşeler neden hâlâ beyaz?

Önce yukarıdaki gibi farklı zeminde deneyin. Köşeler beyaz piksel içeriyorsa sabit renk seçimini veya JPG dönüşümünü kontrol edin. Site ya da uygulama da şeffaflığı beyazla değiştirmiş olabilir. Orijinalden şeffaf yeni kopya kaydedip yayımlama sonrası biçimi kontrol edin.

Yuvarlatılmış karttaki görselin köşeleri neden dik?

Kartı yuvarlatmak içindeki görseli otomatik kesmez. Yarıçapı doğrudan görsele uygulayın veya içeriği birlikte kesmek için yuvarlatılmış kapsayıcıda overflow: hidden kullanın. İçinde etkileşimli kontroller varsa klavye odak göstergelerinin gizlenmediğini doğrulayın.

Fotoğrafın hiçbir yerini kesmeden daire yapabilir miyim?

Daire, alan kaybetmeden veya kompozisyonu değiştirmeden dikdörtgen fotoğrafın tüm çerçevesini dolduramaz. Her şey korunacaksa fotoğrafı çevresinde yeterli boşluk olan büyük kare tasarıma yerleştirip daire sınırını kontrol edin. Ayrıntılı içerikte dikdörtgen çoğunlukla daha uygundur.

Yuvarlatılmış görseller daha hızlı mı yüklenir?

Şekil tek başına daha küçük indirmeyi garanti etmez. Yukarıdaki ölçü ve biçim kontrollerini uygulayın, yayımlanmış sayfanın gerçekten sunduğu dosyayı ölçün.

Yapay zekâyla özetleChatGPT (yeni sekmede açılır)Grok (yeni sekmede açılır)Google (yeni sekmede açılır)Perplexity (yeni sekmede açılır)Claude (yeni sekmede açılır)