CSS Tricks and Tips

Jul 16, 2024

CSS Tricks and Tips

Resize Property

  • Allows users to control height and width of elements using resize property.
  • Can resize elements vertically, horizontally, or both.
  • Works for elements with overflow other than visible (e.g., overflow: hidden).

Neumorphism Effect

  • Achieved with a hover effect and box-shadow in CSS.
  • Important: Background should be a light gray.
  • Add two shadows: one regular, one with negative values for X and Y, creating a light source effect.
  • For carved effect, use inset for shadows.
  • Can be customized with different color palettes.

Interactive Elements without JavaScript

  • Simple buttons or dropdown menus can be created using CSS and checkboxes.
  • Use for attribute to link labels and checkboxes.
  • Use checked pseudo-class to apply styles based on checkbox state.
  • Hide checkboxes with display: none.
  • Example: CSS-only navigation bar for sidebar.

Responsive Containers

  • Typically use width and max-width properties.
  • Using min() function combines two rules into one.
  • For min-width, use max() function.
  • clamp() function combines width, min-width, and max-width into one line.

Glassmorphism

  • Create glass-like elements using transparent background and backdrop-filter.
  • Apply blur function to create glass effect.
  • Needs background elements for effect to be visible.
  • Customize with borders and shadows.

NOT & HAS Selectors

  • :not() selector to exclude elements from selection.
  • Example: style all buttons except the first one.
  • :has() selector to style elements based on children.
  • Example: style buttons with an SVG child differently.
  • Use case: dark mode option using CSS only.

Text Gradients

  • Apply gradients to text using background property.
  • Use background-clip: text to limit gradient to text area.
  • Make text color transparent to show background gradient.

Dropdown Menus using CSS

  • Start with :focus pseudo-class for interaction.
  • Issue: clicking inside dropdown loses focus.
  • Solution: :focus-within pseudo-class to keep focus on parent.

Numbering Headings with Counters

  • Create a counter with counter-reset in the root element.
  • Increment counter with counter-increment.
  • Use ::before pseudo-element to display counter value.
  • Apply styles to ::before element for numbered headings.

Smooth Swiper Effect

  • Use scroll-snap-type property on parent container for smooth scrolling effect.
  • Apply scroll-snap-align on child elements (cards) to align them.
  • Options: start, center, end; mandatory, proximity for snap type.