Efek Teks Multi-outline di CSS

 (yuanchuan.dev)
1 poin oleh GN⁺ 1 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • CSS text-stroke hanya menerima satu nilai, tetapi dengan menumpuk beberapa layer huruf yang sama dan memberi ketebalan outline serta warna yang berbeda pada tiap layer, kita bisa membuat efek teks multi-outline bergaya retro
  • Dengan merujuk pada efek teks dari Graphic Japan : from woodblock and zen to manga and kawaii, hasil yang lebih mendekati bisa diperoleh dengan mengatur text-stroke-width berbeda pada beberapa elemen
  • Dengan menggabungkan text-stroke-width, text-stroke-color, dan z-index per layer, urutan dan warna outline dapat dikendalikan, dan bentuk huruf asli tetap terjaga meskipun ketebalannya bertambah
  • Hasil rendering berbeda antar-browser; Firefox terlihat lebih halus dibanding Chrome dan Safari, dan jika beberapa huruf dimasukkan dalam satu baris, bentuk huruf akan saling menyatu
  • Hasil akhirnya sangat dipengaruhi oleh font yang dipilih, dan pada font-size besar bisa muncul kedipan, sehingga cocok untuk eksperimen atau pembuatan gambar dengan css-doodle, tetapi tidak cocok untuk penggunaan produksi

Cara implementasi

-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));
  • Dengan memberi warna berbeda pada tiap layer dan menumpuknya dalam urutan yang diinginkan, kita bisa mengontrol warna serta urutan outline
-webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55);
-webkit-text-stroke-width: @i(*3px);

Rendering dan keterbatasan

  • Firefox memberikan rendering yang lebih halus dibanding Chrome dan Safari
  • Jika beberapa huruf dimasukkan dalam satu baris, bentuk huruf akan saling menyatu
@content: '秋收冬藏';
  • Untuk bereksperimen cepat dengan berbagai font, fungsi @google-font ditambahkan agar pemuatan font lebih cepat
font-family: @google-font(Matemasie);
@content: 'b';

font-family: @google-font(Tangerine);
@content: 'Love';

font-family: @google-font('Cherry Bomb One');
@content: '+';
  • Performanya tidak sebaik filter CSS, dan terutama saat font-size semakin besar, kedipan bisa terlihat
  • Contoh tambahan dibuat dengan css-doodle, dan CodePen untuk contoh pertama bisa dilihat di https://codepen.io/yuanchuan/pen/ogzarGo

Bacaan terkait

1 komentar

 
GN⁺ 1 jam lalu
Komentar Hacker News

  • Tulisan ini dibuat oleh pembuat css-doodle menggunakan css-doodle. Web component ini memungkinkan sintaks varian CSS yang dipakai di blog ditulis langsung di dalam HTML
    Contohnya seperti ini:
    @grid: 15 / 90%;
    border-radius: 50%;
    background: hsl(@t(/20), 70%, 60%);
    scale: sin(@atan2(@dx, @dy) + @ts);
    Selain memuat definisi komponennya, tidak perlu JavaScript, dan ini berjalan di HTML biasa, Markdown, framework, dan sebagainya
    https://css-doodle.com/

    • Terima kasih atas penjelasannya. Sejak meninggalkan pekerjaan frontend pada 2018, saya hampir tidak tahu lagi CSS sekarang bisa melakukan apa saja
      Sebagian besar CSS di halaman ini terlihat seperti sandi bagi saya. Di era dengan begitu banyak gaya yang sudah terstandarisasi, salut untuk penulis yang mengunggah sesuatu yang baru dan keren

  • Saya penasaran kenapa mesin rendering CSS Firefox lebih memilih hasil yang halus. Implementasinya terlihat sangat berbeda, tetapi mungkin memang tampak begitu karena ini kasus tepi dalam rendering

    • Ekspansi stroke adalah topik yang rumit, dan tidak ada hanya satu hasil yang masuk akal; ada preferensi subjektif, banyak kasus tepi, dan juga jawaban yang salah
      Firefox memutuskan untuk memperluas berdasarkan jarak di semua titik, yang merupakan salah satu jawaban yang masuk akal dan mungkin juga pendekatan yang paling umum. Karena itu cusp yang runcing meluas menjadi kurva
      Browser lain memilih mempertahankan cusp, yang juga bisa dianggap masuk akal dan saya kira biaya komputasinya jauh lebih rendah. Namun, ketika diperluas melebihi ukuran fitur, yaitu jarak antarnode, banyak kasus degeneratif muncul, sehingga sekitar cincin merah keempat hasilnya terlihat jelas salah
      box-shadow juga merupakan kasus lain di mana ekspansi terjadi. Itulah spread distance, nilai panjang keempatnya. Jika sudutnya cusp, sudut bayangannya juga menjadi cusp; jika membulat, sudut bayangannya juga membulat. Ada ilustrasi yang berguna di https://drafts.csswg.org/css-backgrounds/#shadow-shape
      Dengan sedikit trik, jika diberi 0.1px border-radius, kotaknya tetap terlihat persegi, tetapi bayangan yang diperluas menjadi kurva. Kadang berguna. Kembali ke isi tulisan aslinya, jika memakai font dengan kurva yang sangat halus alih-alih node cusp, Chromium/Safari juga akan menjadi lebih mirip Firefox
    • Saya tidak sepenuhnya suka efek pembulatannya Firefox, tetapi interpretasi Chrome terasa salah karena menciptakan tonjolan runcing palsu
      Secara intuitif saya berharap outline berbentuk bintang akan mendekati heksagon biasa, tetapi tidak ada browser yang benar-benar melakukannya
    • miter join ada di Safari, round join ada di Chrome
    • Firefox terlihat seperti SDF. Rasanya seperti rendering berbasis jarak terpendek ke objek, sedangkan yang di Chrome saya kurang tahu apa itu
    • Sisi Firefox terlihat persis seperti yang diharapkan dari hasil SDF karakter tersebut yang dipotong bertahap
      Sudut-sudut bulat pada layer pertama akan semuanya berjarak sama dari sudut terdekat karakter aslinya

  • Desain blog ini sangat bagus. Sederhana, jelas, dan mengutamakan konten

    • Betul. Banyak tulisannya menampilkan CSS/SVG/canvas dengan sangat jelas
      Seri Daily Sketch maupun CSS Animation with offset-path juga sama menariknya

  • Setelah membaca tulisan ini saya baru pertama kali tahu https://css-doodle.com
    Beberapa bulan lalu saya melakukan hal serupa dengan HTML Canvas API, tetapi saya tidak tahu CSS juga bisa dipakai untuk eksperimen kecil yang menyenangkan seperti ini. Saya sangat suka

  • Saya mencoba mengubah fiddle-nya menjadi logo dan warna Apple, dan cincin pertama malah memakan sebagian apel. Bagian atas apelnya terpotong, jadi saya penasaran apakah ada yang tahu kenapa
    --c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;
    @content: '';

  • Saya penasaran apa cara terbaik membuat teks outline ganda sambil tetap mempertahankan tampilan yang direkomendasikan font, tanpa memakai karakter Unicode yang mewah
    Saat ini saya memakai karakter keren di my blog, tetapi itu merugikan hasil pencarian. Saya sedang memindahkan blog dari HTML manual ke 11ty, jadi sekalian ingin memperbaiki blognya juga
    Selain itu, saya juga ingin mendapat masukan tentang desain blog saat ini

  • Keren. Hanya saja sayang sekali perbedaan rendering antar-browser terlalu besar
    Saya penasaran apakah ada yang mencoba hal yang sama dengan bayangan. Rasanya bayangan juga bisa ditumpuk

    • Untuk membuat outline, bayangannya harus disebarkan secara melingkar, jadi bentuk keseluruhannya pada akhirnya kira-kira akan mendekati lingkaran dan hampir tidak lagi mengikuti bentuk huruf

  • Hal pertama yang terpikir oleh saya adalah memasukkan emoji ke content. Tetapi yang muncul cuma kotak karakter tak dikenal. Saya kira saya mengharapkan semacam sihir

    • Di sisi saya emoji-nya memang dirender, tetapi efek outlinenya sama sekali tidak ada, hanya emoji polos yang terlihat
    • Kalau memakai font Noto Emoji, ini berfungsi