Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://front-end.social/users/css/statuses/113662169898854328">CSS by T. Afif :verified: (css@front-end.social)'s status on Tuesday, 24-Dec-2024 20:07:10 JST</a><a href="https://front-end.social/@css" title="css@front-end.social"><img src="https://gnusocial.jp/avatar/52348-48-20221205104049.webp" width="48" height="48" alt="CSS by T. Afif :verified:" style="position: absolute; left: 0; top: 0;">CSS by T. Afif :verified:</a><div><a href="https://front-end.social/@css/113662150634156277" rel="in-reply-to">in reply to</a><ul><li></ul></div></section><article><p>🔟 A huge collection of Tooltip/Speech bubble shapes! </p><p>100 different shapes made with a single element and modern CSS.</p><p><a href="https://css-generators.com/tooltip-speech-bubble/" rel="nofollow noreferrer">https://css-generators.com/tooltip-speech-bubble/</a></p><p>I also wrote 2 detailed articles (via <a href="https://mastodon.social/@smashingmag">@smashingmag</a> ) explaining the techniques used to create most of them.</p><p> <a href="https://smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/" rel="nofollow noreferrer">https://smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/</a><br> <br><a href="https://front-end.social/tags/CSS" rel="tag">#CSS</a></p></article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/4247175#notice-8300687">In conversation</a><time datetime="2024-12-24T20:07:10+09:00" title="Tuesday, 24-Dec-2024 20:07:10 JST">about 2 months ago</time> <span>from <span><a href="https://front-end.social/@css/113662169898854328" rel="external" title="Sent from front-end.social via ActivityPub">front-end.social</a></span></span><a href="https://front-end.social/@css/113662169898854328">permalink</a><h4>Attachments</h4><ol><li><label><a rel="external" href="https://gnusocial.jp/attachment/3766626">Untitled attachment</a></label><br><video poster="" controls="controls"><source src="https://cdn.masto.host/frontendsocial/media_attachments/files/113/662/168/069/118/167/original/c6c45621e5570fbb.mp4" type="video/mp4"></source></video></li><li><article><header><div>Domain not in remote thumbnail source whitelist: files.smashing.media</div><h5><a href="https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/">Modern CSS Tooltips And Speech Bubbles (Part 1) — Smashing Magazine</a></h5><div> from <span>https://www.smashingmagazine.com/author/temani-afif/</span></div></header><div>Tooltips are a very common pattern used in CSS for years. There are a lot of ways to approach tooltips in CSS, though some evoke headaches with all the magic numbers they require. In this article, Temani Afif presents modern techniques to create tooltips with the smallest amount of markup and the greatest amount of flexibility.</div><footer></footer></article></li></ol></footer></blockquote>

Corresponding Notice

Embed this notice
CSS by T. Afif :verified: (css@front-end.social)'s status on Tuesday, 24-Dec-2024 20:07:10 JSTCSS by T. Afif :verified:
in reply to
- Smashing Magazine
🔟 A huge collection of Tooltip/Speech bubble shapes!
100 different shapes made with a single element and modern CSS.
https://css-generators.com/tooltip-speech-bubble/
I also wrote 2 detailed articles (via @smashingmag ) explaining the techniques used to create most of them.
https://smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/

#CSS
In conversationabout 2 months ago from front-end.socialpermalink
Attachments
1. Untitled attachment
2. Domain not in remote thumbnail source whitelist: files.smashing.media
  Modern CSS Tooltips And Speech Bubbles (Part 1) — Smashing Magazine
  from https://www.smashingmagazine.com/author/temani-afif/
  Tooltips are a very common pattern used in CSS for years. There are a lot of ways to approach tooltips in CSS, though some evoke headaches with all the magic numbers they require. In this article, Temani Afif presents modern techniques to create tooltips with the smallest amount of markup and the greatest amount of flexibility.

Public

Embed Notice

HTML Code

Corresponding Notice