home.social

#csschallenge2024 — Public Fediverse posts

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

  1. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 How would you code this text effect with:

    ❌no text duplication
    ❌no splitting text in multiple elements
    ❌no JS, no images at all
    ⚠️under 15 CSS declarations, including prettifying & layout + a simple SVG filter

    Palette: 0c7fc1, f7961f, 0a161f, 323232.

    If you're a $5+ patron on Patreon, you know where to find the answer.

    #pureCSS #CSS #textEffect #filter #SVG #svgFilter #code #coding #frontend #webDev #webDevelopment

    #csschallenge2024 #purecss #css #texteffect #filter #svg
  2. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 How would you code this text effect with:

    ❌no text duplication
    ❌no splitting text in multiple elements
    ❌no JS, no images at all
    ⚠️under 15 CSS declarations, including prettifying & layout + a simple SVG filter

    Palette: 0c7fc1, f7961f, 0a161f, 323232.

    If you're a $5+ patron on Patreon, you know where to find the answer.

    #pureCSS #CSS #textEffect #filter #SVG #svgFilter #code #coding #frontend #webDev #webDevelopment

    #csschallenge2024 #purecss #css #texteffect #filter #svg
  3. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 How would you code this text effect with:

    ❌no text duplication
    ❌no splitting text in multiple elements
    ❌no JS, no images at all
    ⚠️under 15 CSS declarations, including prettifying & layout + a simple SVG filter

    Palette: 0c7fc1, f7961f, 0a161f, 323232.

    If you're a $5+ patron on Patreon, you know where to find the answer.

    #pureCSS #CSS #textEffect #filter #SVG #svgFilter #code #coding #frontend #webDev #webDevelopment

    #csschallenge2024 #purecss #css #texteffect #filter #svg
  4. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 How would you code this text effect with:

    ❌no text duplication
    ❌no splitting text in multiple elements
    ❌no JS, no images at all
    ⚠️under 15 CSS declarations, including prettifying & layout + a simple SVG filter

    Palette: 0c7fc1, f7961f, 0a161f, 323232.

    If you're a $5+ patron on Patreon, you know where to find the answer.

    #pureCSS #CSS #textEffect #filter #SVG #svgFilter #code #coding #frontend #webDev #webDevelopment

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

    #cssChallenge2024 How would you code this text effect with:

    ❌no text duplication
    ❌no splitting text in multiple elements
    ❌no JS, no images at all
    ⚠️under 15 CSS declarations, including prettifying & layout + a simple SVG filter

    Palette: 0c7fc1, f7961f, 0a161f, 323232.

    If you're a $5+ patron on Patreon, you know where to find the answer.

    #pureCSS #CSS #textEffect #filter #SVG #svgFilter #code #coding #frontend #webDev #webDevelopment

    #csschallenge2024 #purecss #css #texteffect #filter #svg
  6. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 How would you code such layered text effects with no text duplication? Not in the markup. not in pseudo content.

    No JS. No images other than at most 2 #CSS gradients. No SVG shapes/text allowed. May use simple #SVG filters.

    Bonus: make offset font-size-relative.

    #svgFilter #code #typography #coding #frontend #webDev #webDevelopment

    #csschallenge2024 #css #svg #svgfilter #code #typography
  7. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 How would you code such layered text effects with no text duplication? Not in the markup. not in pseudo content.

    No JS. No images other than at most 2 #CSS gradients. No SVG shapes/text allowed. May use simple #SVG filters.

    Bonus: make offset font-size-relative.

    #svgFilter #code #typography #coding #frontend #webDev #webDevelopment

    #csschallenge2024 #css #svg #svgfilter #code #typography
  8. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 How would you code such layered text effects with no text duplication? Not in the markup. not in pseudo content.

    No JS. No images other than at most 2 #CSS gradients. No SVG shapes/text allowed. May use simple #SVG filters.

    Bonus: make offset font-size-relative.

    #svgFilter #code #typography #coding #frontend #webDev #webDevelopment

    #csschallenge2024 #css #svg #svgfilter #code #typography
  9. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 How would you code such layered text effects with no text duplication? Not in the markup. not in pseudo content.

    No JS. No images other than at most 2 #CSS gradients. No SVG shapes/text allowed. May use simple #SVG filters.

    Bonus: make offset font-size-relative.

    #svgFilter #code #typography #coding #frontend #webDev #webDevelopment

    #webdevelopment #webdev #frontend #coding #typography #code
  10. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 How would you code such layered text effects with no text duplication? Not in the markup. not in pseudo content.

    No JS. No images other than at most 2 #CSS gradients. No SVG shapes/text allowed. May use simple #SVG filters.

    Bonus: make offset font-size-relative.

    #svgFilter #code #typography #coding #frontend #webDev #webDevelopment

    #csschallenge2024 #css #svg #svgfilter #code #typography
  11. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 Code these two backgrounds!

    ✨1 div per background
    ✨no JS
    ✨no SVG, no images in general save for at most 3 CSS gradients
    ✨under 20 CSS declarations, including layout & prettifying

    (if you're a $5+ patron on Patreon, you know where to find the live demo 🤫)

    #CSS #code #coding #singleDiv #oneDiv #cssGradient #frontend #webDev #webDevelopment

    #csschallenge2024 #css #code #coding #singlediv #onediv
  12. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 Code these two backgrounds!

    ✨1 div per background
    ✨no JS
    ✨no SVG, no images in general save for at most 3 CSS gradients
    ✨under 20 CSS declarations, including layout & prettifying

    (if you're a $5+ patron on Patreon, you know where to find the live demo 🤫)

    #CSS #code #coding #singleDiv #oneDiv #cssGradient #frontend #webDev #webDevelopment

    #csschallenge2024 #css #code #coding #singlediv #onediv
  13. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 Code these two backgrounds!

    ✨1 div per background
    ✨no JS
    ✨no SVG, no images in general save for at most 3 CSS gradients
    ✨under 20 CSS declarations, including layout & prettifying

    (if you're a $5+ patron on Patreon, you know where to find the live demo 🤫)

    #CSS #code #coding #singleDiv #oneDiv #cssGradient #frontend #webDev #webDevelopment

    #csschallenge2024 #css #code #coding #singlediv #onediv
  14. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 Code these two backgrounds!

    ✨1 div per background
    ✨no JS
    ✨no SVG, no images in general save for at most 3 CSS gradients
    ✨under 20 CSS declarations, including layout & prettifying

    (if you're a $5+ patron on Patreon, you know where to find the live demo 🤫)

    #CSS #code #coding #singleDiv #oneDiv #cssGradient #frontend #webDev #webDevelopment

    #webdevelopment #webdev #frontend #cssgradient #onediv #singlediv
  15. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 Code these two backgrounds!

    ✨1 div per background
    ✨no JS
    ✨no SVG, no images in general save for at most 3 CSS gradients
    ✨under 20 CSS declarations, including layout & prettifying

    (if you're a $5+ patron on Patreon, you know where to find the live demo 🤫)

    #CSS #code #coding #singleDiv #oneDiv #cssGradient #frontend #webDev #webDevelopment

    #csschallenge2024 #css #code #coding #singlediv #onediv
  16. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 Code this!

    ❌no text duplication (markup or pseudo-content)
    ⚠️contenteditable
    ❌no JS
    ❌no SVG save for filters
    ⚠️no images save for under 10 CSS gradients in total including backgrounds
    ⚠️under 50 CSS declarations
    ⚠️1 div for text, no children

    Note that there are different effects for odd and even rows.

    #css #svg #cssGradient #svgFilter #textEffect #code #coding #frontend #webDev #webDevelopment

    #coding #frontend #webdev #csschallenge2024 #css #svg
  17. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 Code this!

    ❌no text duplication (markup or pseudo-content)
    ⚠️contenteditable
    ❌no JS
    ❌no SVG save for filters
    ⚠️no images save for under 10 CSS gradients in total including backgrounds
    ⚠️under 50 CSS declarations
    ⚠️1 div for text, no children

    Note that there are different effects for odd and even rows.

    #css #svg #cssGradient #svgFilter #textEffect #code #coding #frontend #webDev #webDevelopment

    #coding #frontend #webdev #csschallenge2024 #css #svg
  18. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 Code this!

    ❌no text duplication (markup or pseudo-content)
    ⚠️contenteditable
    ❌no JS
    ❌no SVG save for filters
    ⚠️no images save for under 10 CSS gradients in total including backgrounds
    ⚠️under 50 CSS declarations
    ⚠️1 div for text, no children

    Note that there are different effects for odd and even rows.

    #css #svg #cssGradient #svgFilter #textEffect #code #coding #frontend #webDev #webDevelopment

    #coding #frontend #webdev #csschallenge2024 #css #svg
  19. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 Code this!

    ❌no text duplication (markup or pseudo-content)
    ⚠️contenteditable
    ❌no JS
    ❌no SVG save for filters
    ⚠️no images save for under 10 CSS gradients in total including backgrounds
    ⚠️under 50 CSS declarations
    ⚠️1 div for text, no children

    Note that there are different effects for odd and even rows.

    #css #svg #cssGradient #svgFilter #textEffect #code #coding #frontend #webDev #webDevelopment

    #webdevelopment #code #texteffect #svgfilter #cssgradient #svg
  20. Ana Tudor 🐯 @[email protected] ·

    #cssChallenge2024 Code this!

    ❌no text duplication (markup or pseudo-content)
    ⚠️contenteditable
    ❌no JS
    ❌no SVG save for filters
    ⚠️no images save for under 10 CSS gradients in total including backgrounds
    ⚠️under 50 CSS declarations
    ⚠️1 div for text, no children

    Note that there are different effects for odd and even rows.

    #css #svg #cssGradient #svgFilter #textEffect #code #coding #frontend #webDev #webDevelopment

    #coding #frontend #webdev #csschallenge2024 #css #svg