Frontend Dogma

“effects” Archive

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