Frontend Dogma

“effects” Archive

  1. Spicing Up Text With “text-emphasis” in CSS · · ,
  2. Exploring the Creative Power of CSS Filters and Blending · · ,
  3. Animating Font Palette · · , ,
  4. CSS Blurry Shimmer Effect · ·
  5. Highlight Text When a User Scrolls Down to That Piece of Text · · ,
  6. Fading Content Using Transparent Gradient in CSS · · ,
  7. Using Heaps of Cutting Edge CSS Features to Build a Progress Indicator · · ,
  8. Cool Wiggly Hover Animation With CSS · · ,
  9. Sharing a State Between Windows Without a Server · · , ,
  10. Christmas Tree Animations Made With CSS and JS · · , , ,
  11. Creating a Marquee Effect With CSS Animations · · ,
  12. CSS 3D Text Effects · ·
  13. Re-Creating the Pop-Out Hover Effect With Modern CSS · ·
  14. Gradients, Blend Modes, and a Really Cool Hover Effect · · ,
  15. CSS Loaders · · , ,
  16. A Few Interesting Ways to Use CSS Shadows for More Than Depth · · ,
  17. 10 Simple CSS and JavaScript Micro-Interactions for Buttons · · , ,
  18. Down-and-Across Highlighting · · , ,
  19. Shines, Perspective, and Rotations: Fancy CSS 3D Effects for Images · · ,
  20. Blur Vignette Effect in CSS · ·
  21. I Created 100+ Unique CSS Patterns · · ,
  22. Creating a Shine Effect on a Card With Tailwind CSS · ·
  23. Crafting a Modern Spotlight Effect With React and CSS · · ,
  24. Can You Create Beautiful Stroked Text in CSS? · ·
  25. A Color Wheel With Gradient · · , , ,
  26. No SVG, No Image, CSS-Only Fluid Slider With “input[type=range]” · · , ,
  27. A CSS Challenge: Skewed Highlight · ·
  28. Invisible Ink Effect With SVG Filters and CSS · · , ,
  29. CSS Infinite 3D Sliders · · ,
  30. Get That Marquee AeStHeTiC · · ,
  31. CSS Infinite Slider Flipping Through Polaroid Images · · ,
  32. Animated Border Gradient · · , , ,
  33. CSS Halftone Patterns · ·
  34. How to Create Wavy Shapes and Patterns in CSS · · ,
  35. Dreamy Blur · · ,
  36. Zooming Images in a Grid Layout · ·
  37. Recreating MDN’s Truncated Text Effect · ·
  38. CSS Minimal Dark Mode Toggle Button · · ,
  39. 37 Easy Ways to Spice Up Your UI Designs · ·
  40. Holograms, Light-Leaks, and How to Build CSS-Only Shaders · · , ,
  41. Fun CSS-Only Scrolling Effects for Matterday · ·
  42. CSS Card Shadow Effects · ·
  43. Single Element Loaders: The Spinner · ·
  44. Cool Hover Effects That Use CSS Text Shadow · ·
  45. How to Use Videos With Alpha Transparency on the Web · · ,
  46. Creating Realistic Reflections With CSS · ·
  47. Creating a Firework Effect With CSS · ·
  48. Cool Hover Effects That Use Background Properties · · ,
  49. How to Make a “Raise the Curtains” Effect in CSS · · ,
  50. Exploring the CSS Paint API: Image Fragmentation Effect · · , ,
  51. Thinking About the Cut-Out Effect: CSS or SVG? · · , ,
  52. Adding Shadows to SVG Icons With CSS and SVG Filters · · , ,
  53. 90’s Cursor Effects · · ,
  54. JPEG Distorter · , , ,
  55. Dither Effect Generator · , , ,
  56. CSS Shadow Generator (Josh W. Comeau) · , , , ,
  57. CSS Clothoid Corner Generator · , , ,
  58. CSS Shadow Generator (Philipp Brumm) · , , , ,
  59. Image Resizer and Editor (resizemyimg.com) · , ,
  60. Image Resizer and Editor (PicResize) · , ,
  61. Wave-Style SVG Generator · , , , ,
  62. Tilt-Shift Photo Generator · , ,
  63. Line Drawing Generator · , ,
  64. Image Rasterizer · , ,
  65. CSS Divider Generator · , , ,
  66. CSS Neumorphism Generator · , , ,
  67. CSS Glassmorphism Generator · , , ,