Onyx Hexagon Avatar
A clip-path hexagon frame wraps a smaller hexagon holding the initials.
A circular clip inside a square plate widens on hover until it fills the corners.
Canlı önizleme herkese açıktır. Kod sekmeleri, kopyalama, kaynak API'si ve izole önizleme belgesi üyelik gerektirir.
HTML, CSS, React çıktısı, kopyalama ve tarayıcı editörü giriş yaptıktan sonra açılır.
Bu efektte bir sorun mu var, yoksa daha iyisini mi yazdın? Düzeltme gönder — onaylanırsa puan kazanırsın.
Sorun bildir veya düzeltBu efektte kullanılan CSS teknikleri — her biri canlı örnekli bir rehbere ya da özelliğin referans sayfasına bağlanır.
<style> etiketine ekle.Avatarlar kategorisindeki tüm efektler gibi bu efekt de tamamen ücretsizdir; ticari projelerde de kullanabilirsin. Kütüphanenin tamamı için Avatarlar koleksiyonuna göz at.
A clip-path hexagon frame wraps a smaller hexagon holding the initials.
One disc is cut into two clipped halves so a shared project reads as a single mark.
A wide member panel with a clipped folded corner, a divider and a shift counter.
The monogram swaps for a drawn plus glyph so the tile doubles as an add action.
Two concentric rings hold the initials and the outer halo widens on hover.
A comment line led by a small avatar whose reply tools unfold only on hover.
An oversized ghost letter sits behind the monogram and slides away on hover.
Two hard offset shadow layers stack behind the tile and collapse under the pointer.