home.social

#boxshadow — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #boxshadow, aggregated by home.social.

  1. Ana Tudor 🐯 @[email protected] ·

    Can you help me out, mastodon? 🦣

    I recall someone once writing in an article how shadows are supposed to be darker, so white shadows don't make sense even when we have a dark theme.

    Does anyone else recall it? Can anyone help me find it again?

    Boosts appreciated. Thanks!

    #CSS #boxShadow #code #coding #web #webDev #frontend #webDevelopment #dev

    #css #boxshadow #code #coding #web #webdev
  2. Habr @[email protected] ·

    [Перевод] Эффект матового стекла для веба

    В процессе разработки UI для игр Forza Horizon 3 и Forza Motorsport 7 я имел возможность поработать с потрясающими акриловыми матовыми элементами дизайна. Вдохновлённый этим дизайном, я захотел создать похожий эффект при помощи HTML. В этом посте я расскажу о своих попытках создания красивого эффекта стекла, а также представлю пример кода и ассетов для тех, кто захочет попробовать реализовать эту методику самостоятельно.

    habr.com/ru/articles/861290/

    #стекло #boxshadow #cssфильтры

    #стекло #boxshadow #cssфильтры
  3. Habr @[email protected] ·

    [Перевод] Думаете, вы всё знаете о box shadows?

    Я люблю box-тени. Четыре года назад я выяснил, что мой процессор M1 может рендерить безумное количество таких теней, поэтому решил извлечь из них максимум, и мне это удалось. Если вам интересно, как пользоваться box-тенями, чтобы создать современный стиль UX, то вы не по адресу. Но если вам нравятся творчество и эксперименты, то продолжайте чтение. Я хочу поделиться худшими примерами того, что можно сделать при помощи box-теней в одном div. Примерами, которые не должны работать, однако почему-то работают. Но прежде чем приступить, нужно ответить на вопрос: что же такое box-тень?

    habr.com/ru/articles/830902/

    #boxshadow #div #raytracing #трассировка_лучей #свойства_css #рендеринг

    #рендеринг #свойства_css #трассировка_лучей #raytracing #div #boxshadow
  4. Ana Tudor 🐯 @[email protected] ·

    Came across reddit.com/r/css/comments/1e9w AI-generated tailwind... don't know whether to laugh or cry...

    Here's a 0% AI, 0% tailwind, 100% human brain + hand-coded version I made in just a few min on @codepen codepen.io/thebabydino/pen/dyB

    Oh, and it's not in px, it's responsive.

    #CSS #boxShadow #code #coding #frontend #webDev #web #dev #webDevelopment

    #css #boxshadow #code #coding #frontend #webdev
  5. Ana Tudor 🐯 @[email protected] ·

    Almost all solutions I've seen involve wrapping the image in a wrapper, then either moving it behind its parent or placing an absolutely positioned pseudo on top, such that another element/ pseudo on top gets the shadow.

    This means an extra element and often losing right click menu, save for the rare cases when the element on top of the img in z order gets `pointer-events: none`.

    #css #shadow #boxShadow #inset #code #coding #frontend #web #dev #webDev #webDevelopment #shadows

    #css #shadow #boxshadow #inset #code #coding
  6. Ana Tudor 🐯 @[email protected] ·

    Almost all solutions I've seen involve wrapping the image in a wrapper, then either moving it behind its parent or placing an absolutely positioned pseudo on top, such that another element/ pseudo on top gets the shadow.

    This means an extra element and often losing right click menu, save for the rare cases when the element on top of the img in z order gets `pointer-events: none`.

    #css #shadow #boxShadow #inset #code #coding #frontend #web #dev #webDev #webDevelopment #shadows

    #css #shadow #boxshadow #inset #code #coding
  7. Ana Tudor 🐯 @[email protected] ·

    Almost all solutions I've seen involve wrapping the image in a wrapper, then either moving it behind its parent or placing an absolutely positioned pseudo on top, such that another element/ pseudo on top gets the shadow.

    This means an extra element and often losing right click menu, save for the rare cases when the element on top of the img in z order gets `pointer-events: none`.

    #css #shadow #boxShadow #inset #code #coding #frontend #web #dev #webDev #webDevelopment #shadows

    #css #shadow #boxshadow #inset #code #coding
  8. Ana Tudor 🐯 @[email protected] ·

    Almost all solutions I've seen involve wrapping the image in a wrapper, then either moving it behind its parent or placing an absolutely positioned pseudo on top, such that another element/ pseudo on top gets the shadow.

    This means an extra element and often losing right click menu, save for the rare cases when the element on top of the img in z order gets `pointer-events: none`.

    #css #shadow #boxShadow #inset #code #coding #frontend #web #dev #webDev #webDevelopment #shadows

    #shadows #webdevelopment #webdev #dev #web #frontend
  9. Ana Tudor 🐯 @[email protected] ·

    Almost all solutions I've seen involve wrapping the image in a wrapper, then either moving it behind its parent or placing an absolutely positioned pseudo on top, such that another element/ pseudo on top gets the shadow.

    This means an extra element and often losing right click menu, save for the rare cases when the element on top of the img in z order gets `pointer-events: none`.

    #css #shadow #boxShadow #inset #code #coding #frontend #web #dev #webDev #webDevelopment #shadows

    #css #shadow #boxshadow #inset #code #coding
  10. Ana Tudor 🐯 @[email protected] ·

    Per spec, #boxShadow is painted under the actual image when applied on an img elem w3.org/TR/css-backgrounds-3/#s

    But we often want #inset #shadows on img elements. This has caused headaches, has been the topic of countless articles & SO questions since box-shadow has been a thing!

    🔗 trentwalton.com/2010/11/22/css
    🔗 schmengler-se.de/en/2014/12/cs
    🔗 designshack.net/articles/css/i

    🔗 stackoverflow.com/search?q=ins

    #css #code #coding #svg #filter #svgFilter #blur #blending #compositing #frontend #web #webDev #dev #webDevelopment

    #boxshadow #inset #shadows #css #code #coding
  11. Ana Tudor 🐯 @[email protected] ·

    Per spec, #boxShadow is painted under the actual image when applied on an img elem w3.org/TR/css-backgrounds-3/#s

    But we often want #inset #shadows on img elements. This has caused headaches, has been the topic of countless articles & SO questions since box-shadow has been a thing!

    🔗 trentwalton.com/2010/11/22/css
    🔗 schmengler-se.de/en/2014/12/cs
    🔗 designshack.net/articles/css/i

    🔗 stackoverflow.com/search?q=ins

    #css #code #coding #svg #filter #svgFilter #blur #blending #compositing #frontend #web #webDev #dev #webDevelopment

    #boxshadow #inset #shadows #css #code #coding
  12. Ana Tudor 🐯 @[email protected] ·

    Per spec, #boxShadow is painted under the actual image when applied on an img elem w3.org/TR/css-backgrounds-3/#s

    But we often want #inset #shadows on img elements. This has caused headaches, has been the topic of countless articles & SO questions since box-shadow has been a thing!

    🔗 trentwalton.com/2010/11/22/css
    🔗 schmengler-se.de/en/2014/12/cs
    🔗 designshack.net/articles/css/i

    🔗 stackoverflow.com/search?q=ins

    #css #code #coding #svg #filter #svgFilter #blur #blending #compositing #frontend #web #webDev #dev #webDevelopment

    #boxshadow #inset #shadows #css #code #coding
  13. Ana Tudor 🐯 @[email protected] ·

    Per spec, #boxShadow is painted under the actual image when applied on an img elem w3.org/TR/css-backgrounds-3/#s

    But we often want #inset #shadows on img elements. This has caused headaches, has been the topic of countless articles & SO questions since box-shadow has been a thing!

    🔗 trentwalton.com/2010/11/22/css
    🔗 schmengler-se.de/en/2014/12/cs
    🔗 designshack.net/articles/css/i

    🔗 stackoverflow.com/search?q=ins

    #css #code #coding #svg #filter #svgFilter #blur #blending #compositing #frontend #web #webDev #dev #webDevelopment

    #webdevelopment #dev #webdev #web #frontend #compositing
  14. Ana Tudor 🐯 @[email protected] ·

    Per spec, #boxShadow is painted under the actual image when applied on an img elem w3.org/TR/css-backgrounds-3/#s

    But we often want #inset #shadows on img elements. This has caused headaches, has been the topic of countless articles & SO questions since box-shadow has been a thing!

    🔗 trentwalton.com/2010/11/22/css
    🔗 schmengler-se.de/en/2014/12/cs
    🔗 designshack.net/articles/css/i

    🔗 stackoverflow.com/search?q=ins

    #css #code #coding #svg #filter #svgFilter #blur #blending #compositing #frontend #web #webDev #dev #webDevelopment

    #boxshadow #inset #shadows #css #code #coding
  15. robrich @[email protected] ·

    dev.to/huijing/css-card-shadow - learning about #CSS #boxShadow. Thanks for learning in public @huijing.

    #css #boxshadow
  16. Dick Smiths Fair Go Supporters @[email protected] ·

    CSS CHALLENGE:- How to create an inset #boxShadow around (and over the the top of all elements of the website) using only inline #CSS.

    Is it even possible?

    You cannot produce before and after element inline, can you?

    #boxshadow #css