Cover image for 20 more CSS tricks!
Tyler Chipman
Tyler Chipman

Posted on

20 more CSS tricks!

Continuation of the original 20 CSS tricks article.

  1. Creating a Sticky Header: Set the header's position to sticky and specify the top position to make it stick to the top of the viewport while scrolling.

  2. Creating Custom Cursors: Use the cursor property to change the default cursor to a custom image or shape.

  3. Creating a Typewriter Effect: Use CSS animations and @keyframes to simulate a typewriter effect on text.

  4. Creating a Vertical Timeline: Utilize display: flex; or display: grid; to create a vertical timeline layout.

  5. Creating a Loading Spinner: Use CSS animations or an SVG animation to create a loading spinner.

  6. Creating a Blur Background Effect: Apply the backdrop-filter: blur(); property to create a blur effect on the background of an element.

  7. Creating a Print-Friendly Layout: Use @media print to define CSS styles specifically for printing.

  8. Creating a Gradient Border: Use the border-image property with a gradient to create a gradient border around an element.

  9. Creating a CSS Grid Layout: Utilize the CSS grid property to create complex grid-based layouts.

  10. Creating a Multi-column Layout: Use the column-count property to create multiple columns of content.

  11. Creating a Zoom Effect on Images: Apply the transform: scale(); property to create a zoom effect on images.

  12. Creating a Notification/Alert Box: Use CSS and HTML to create a custom notification or alert box.

  13. Creating a Text Shadow Effect: Apply the text-shadow property to add a shadow effect to text.

  14. Creating a Fixed Background Image: Use background-attachment: fixed; to create a fixed background image that remains in place while scrolling.

  15. Creating a Text Gradient Effect: Use the -webkit-background-clip: text; and -webkit-text-fill-color: transparent; properties to apply a gradient effect to text.

  16. Creating a Transparent Background: Utilize background-color: transparent; or rgba() to create a transparent background on an element.

  17. Creating a Flip Animation: Use the transform and transition properties to create a flip animation on an element.

  18. Creating a Bouncing Animation: Utilize CSS keyframes and the animation property to create a bouncing animation effect.

  19. Creating a Hamburger Menu: Use CSS to create a responsive hamburger menu icon that expands into a full navigation menu.

  20. Creating a Circular Progress Bar: Use the border-radius property and CSS animations to create a circular progress bar.

Top comments (0)