Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://front-end.social/users/css/statuses/109460536075171500">CSS by T. Afif :verified: (css@front-end.social)'s status on Monday, 05-Dec-2022 19:40:49 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></section><article><p>? CSS Pattern!</p><p>Demo: <a href="https://codepen.io/t_afif/full/NWzEVgW" rel="nofollow noreferrer">https://codepen.io/t_afif/full/NWzEVgW</a> via :codepen:  <a href="https://front-end.social/tags/codepen" rel="tag">#codepen</a> <br> <br> <br>More CSS-only Patterns ? <a href="https://css-pattern.com" rel="nofollow noreferrer">https://css-pattern.com</a></p><p>Related article to understand some math behind the wavy lines ? <a href="https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/" rel="nofollow noreferrer">https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/</a></p><p><a href="https://front-end.social/tags/CSS" rel="tag">#CSS</a></p></article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/773543#notice-1260064">In conversation</a><time datetime="2022-12-05T19:40:49+09:00" title="Monday, 05-Dec-2022 19:40:49 JST">Monday, 05-Dec-2022 19:40:49 JST</time> <span>from <span><a href="https://front-end.social/@css/109460536075171500" rel="external" title="Sent from front-end.social via ActivityPub">front-end.social</a></span></span><a href="https://front-end.social/@css/109460536075171500">permalink</a><h4>Attachments</h4><ol><li><label><a rel="external" href="https://gnusocial.jp/attachment/442468">Overview of the CSS code from the demo in the Toot</a></label><br><a href="https://cdn.masto.host/frontendsocial/media_attachments/files/109/460/517/192/530/560/original/14a94f52062bd31d.png" rel="external">https://cdn.masto.host/frontendsocial/media_attachments/files/109/460/517/192/530/560/original/14a94f52062bd31d.png</a></li><li><label><a rel="external" href="https://gnusocial.jp/attachment/442469">A background pattern made with shapes that looks like lemons</a></label><br><a href="https://cdn.masto.host/frontendsocial/media_attachments/files/109/460/517/575/785/327/original/d80c879e902473f6.png" rel="external">https://cdn.masto.host/frontendsocial/media_attachments/files/109/460/517/575/785/327/original/d80c879e902473f6.png</a></li><li><label><a rel="external" href="https://gnusocial.jp/attachment/442470">Untitled attachment</a></label><br></li><li><label><a rel="external" href="https://gnusocial.jp/attachment/442471">Untitled attachment</a></label><br></li><li><article><header><div>Domain not in remote thumbnail source whitelist: css-tricks.com</div><h5><a href="https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/#CSS">How to Create Wavy Shapes &amp; Patterns in CSS</a></h5><div> from <span>Temani Afif</span></div></header><div>The wave is probably one of the most difficult shapes to make in CSS. We always try to approximate it with properties like border-radius and lots of magic</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 Monday, 05-Dec-2022 19:40:49 JST CSS by T. Afif :verified:
? CSS Pattern!
Demo: https://codepen.io/t_afif/full/NWzEVgW via :codepen: #codepen

More CSS-only Patterns ? https://css-pattern.com
Related article to understand some math behind the wavy lines ? https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/
#CSS
In conversationMonday, 05-Dec-2022 19:40:49 JST from front-end.socialpermalink
Attachments
1. Overview of the CSS code from the demo in the Toot
  https://cdn.masto.host/frontendsocial/media_attachments/files/109/460/517/192/530/560/original/14a94f52062bd31d.png
2. A background pattern made with shapes that looks like lemons
  https://cdn.masto.host/frontendsocial/media_attachments/files/109/460/517/575/785/327/original/d80c879e902473f6.png
3. Untitled attachment
4. Untitled attachment
5. Domain not in remote thumbnail source whitelist: css-tricks.com
  How to Create Wavy Shapes & Patterns in CSS
  from Temani Afif
  The wave is probably one of the most difficult shapes to make in CSS. We always try to approximate it with properties like border-radius and lots of magic

Public

Embed Notice

HTML Code

Corresponding Notice