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.