CSS Tricks and Tips

Jul 17, 2024

CSS Tricks and Tips Lecture Notes

1. Resizable Elements

  • Property: resize
    • Allows users to change height, width, or both of an HTML element.
    • Works for elements with overflow not set to visible.

2. Neumorphism

  • Effect: Levitating effect with smooth design.
  • Steps:
    1. Add a box-shadow with a light gray background (not pure white).
    2. Add another box-shadow with negative X and Y values to cast a shadow on the top-left.
    3. Use inset to make the element look carved.

3. CSS-only Interactive Elements

  • Method: Using checkboxes and labels with the for attribute.
  • Steps:
    1. Connect checkbox with label using for.
    2. Use :checked pseudo-class on checkbox to control visibility of elements.
    3. Hide the checkbox using display: none.

4. Responsive Containers

  • Functions: min, max, clamp
    • min: Returns the smaller value between two options.
    • max: Returns the larger value between two options.
    • clamp: Combines width, min-width, and max-width in one line.

5. Glassmorphism

  • Effect: Glass-like elements on a website.
  • Steps:
    1. Use a semi-transparent background color.
    2. Apply backdrop-filter with blur (e.g., 10px).
    3. Only effective if elements are in front of other elements.

6. Advanced CSS Selectors

  • Not Selector: :not(selector)
    • Example: button:not(:first-child) affects all buttons except the first.
  • Has Selector: :has(selector)
    • Example: button:has(svg) affects buttons containing SVGs.

7. Text Gradients

  • Method: Applying gradients on text.
  • Steps:
    1. Apply gradient to background.
    2. Use background-clip: text to limit gradient to text area.
    3. Set color: transparent.

8. Complex Drop-down Menus

  • Pseudo-class: :focus-within
    • Maintains focus on parent elements even when clicking child elements.

9. Numbered Headings

  • Method: CSS counters.
  • Steps:
    1. Create a counter using counter-reset.
    2. Increment counter with counter-increment.
    3. Use ::before to display the counter before headings.

10. Smooth Swipers

  • Property: scroll-snap-type
    • Provides smooth, non-linear scrolling experience.
  • Steps:
    1. Set overflow-x: scroll on wrapper.
    2. Use scroll-snap-type with x mandatory.
    3. Apply scroll-snap-align: center on cards.