- CSS
text-stroke yalnızca tek bir değer alır; ancak aynı harfi birden fazla katman halinde üst üste koyup her katmanın dış çizgi kalınlığını ve rengini farklı ayarlayarak retro tarzda çoklu dış çizgili bir metin efekti oluşturmak mümkündür
- Graphic Japan : from woodblock and zen to manga and kawaii içindeki metin efektini referans alarak birden fazla öğenin
text-stroke-width değerini farklı belirlediğimizde daha yakın bir sonuç elde edilir
- Katman bazında
text-stroke-width, text-stroke-color, z-index kombinasyonuyla dış çizginin sırası ve rengi kontrol edilir; kalınlık artsa da harfin özgün biçimi korunur
- Tarayıcıya göre render sonucu değişir; Firefox, Chrome ve Safari'ye göre daha yumuşak görünür ve bir satıra birden fazla harf konduğunda karakter biçimleri birbirine kaynaşır
- Sonuç seçilen yazı tipine büyük ölçüde bağlıdır ve büyük
font-size değerlerinde titreme görülebilir; bu yüzden deneyler veya css-doodle ile görsel üretimi için uygun olsa da prodüksiyon kullanımına elverişli değildir
Uygulama yöntemi
-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));
- Her katmana farklı bir renk verip istenen sırayla üst üste bindirerek dış çizginin rengi ve sırası kontrol edilebilir
-webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55);
-webkit-text-stroke-width: @i(*3px);
Render ve sınırlamalar
- Firefox, Chrome ve Safari'ye göre daha yumuşak bir render sunar
- Bir satıra birden fazla harf konduğunda karakter biçimleri birbirine kaynaşır
@content: '秋收冬藏';
- Farklı yazı tiplerini hızlıca denemek için
@google-font fonksiyonu eklenerek font yükleme hızlandırılmıştır
font-family: @google-font(Matemasie);
@content: 'b';
font-family: @google-font(Tangerine);
@content: 'Love';
font-family: @google-font('Cherry Bomb One');
@content: '+';
- Performans CSS filtreleri kadar iyi değildir; özellikle
font-size büyüdükçe titreme görülebilir
- Ek örnekler css-doodle ile üretilmiştir; ilk örneğin CodePen'ine https://codepen.io/yuanchuan/pen/ogzarGo adresinden bakılabilir
1 yorum
Hacker News yorumları
Bu yazı, css-doodle'ın yazarı tarafından css-doodle ile yapılmış. Bu web bileşeni, blogda kullanılan CSS varyasyon sözdizimini doğrudan HTML içine yazmayı sağlıyor
Örnekler şöyle:
@grid: 15 / 90%;border-radius: 50%;background: hsl(@t(/20), 70%, 60%);scale: sin(@atan2(@dx, @dy) + @ts);Bileşen tanımını yüklemek dışında JavaScript gerekmiyor ve düz HTML, Markdown, framework'ler vb. içinde çalışıyor
https://css-doodle.com/
Bu sayfadaki CSS'in büyük kısmı bana şifre gibi görünüyor. Standartlaşmış stillerin bu kadar yaygın olduğu bir dönemde yeni ve havalı bir şey paylaşan yazarı alkışlıyorum
Firefox'un CSS render motorunun neden daha yumuşak işleme tarafını tercih ettiğini merak ediyorum. Uygulama dramatik biçimde farklı görünüyor ama bu, render etmenin bir sınır durumu olduğu için de böyle görünüyor olabilir
Firefox, her noktada mesafeye göre genişletmeye karar vermiş; bu, makul cevaplardan biri ve muhtemelen en genel yöntem. Bu yüzden sivri cusp'lar eğri olarak genişliyor
Diğer tarayıcılar cusp'ı korumaya karar vermiş; bu da makul olabilir ve hesaplama maliyeti de çok daha düşüktür. Ama özellik boyutundan, yani düğümler arasındaki mesafeden daha fazla genişletince dejeneratif durumlar çoğalıyor ve dördüncü kırmızı halka civarında bariz şekilde yanlış görünmeye başlıyor
box-shadow da genişletmenin gerçekleştiği başka bir durum. Dördüncü uzunluk değeri olan spread distance bunu belirliyor. Köşeler cusp ise gölgenin köşeleri de cusp olur, yuvarlaksa gölgenin köşeleri de yuvarlak olur. Faydalı bir görsel https://drafts.csswg.org/css-backgrounds/#shadow-shape adresinde var
Küçük bir hileyle
0.1px border-radiusverirseniz kutu hâlâ kare gibi görünür ama genişletilmiş gölge eğri olur. Bazen işe yarar. Orijinal yazının konusuna dönersek, cusp düğümleri yerine çok hafif eğriler içeren bir yazı tipi kullanmak Chromium/Safari'yi de Firefox'a daha çok yaklaştırırSezgisel olarak yıldız biçimli konturun sıradan bir altıgene yaklaşmasını beklersiniz ama hiçbir tarayıcı bunu başaramıyor
İlk katmandaki yuvarlak köşelerin hepsi, orijinal karakterin en yakın köşelerine eşit uzaklıkta olurdu
Bu blog tasarımını gerçekten çok beğendim. Basit, net ve içerik odaklı
Daily Sketch serisi ya da
CSS Animation with offset-pathda aynı derecede keyifliBu yazı sayesinde https://css-doodle.com sitesini ilk kez öğrendim
Birkaç ay önce benzer şeyleri HTML Canvas API ile yapıyordum ama CSS ile de böyle eğlenceli küçük işler yapılabildiğini bilmiyordum. Çok hoşuma gitti
fiddle'ı Apple logosu ve renkleriyle değiştirmeyi denedim, ama ilk halka elmanın bir kısmını yiyor. Elmanın üst kısmı kesiliyor; neden olduğunu bilen var mı diye merak ediyorum
--c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;@content: '';Gösterişli Unicode karakterler kullanmadan ama yazı tipinin önerdiği görünümü de koruyarak çift konturlu metin oluşturmanın en iyi yolunu merak ediyorum
Şu anda my blog üzerinde gösterişli karakterler kullanıyorum ama bu arama sonuçlarına zarar veriyor. Blogumu el yazısı HTML'den 11ty'ye taşıyorum; hazır başlamışken blogu da iyileştirmek istiyorum
Ayrıca mevcut blog tasarımı hakkında görüş de almak isterim
Güzel. Ama tarayıcılar arasındaki render farklarının bu kadar büyük olması biraz hayal kırıklığı yaratıyor
Aynı şeyi gölgelerle de deneyip denemediklerini merak ediyorum. Gölge de katmanlanabiliyor gibi görünüyor
İlk aklıma gelen şey, content içine emoji koymaktı. Ama sadece tanınmayan karakter kutuları çıktı. Galiba biraz sihir bekliyordum