đź’»

CSS Tips for Front-End Developers

Jul 11, 2024

Useful CSS Tips for Front-End Developers

Clip-Path

  • Allows creation of custom shapes by clipping the visible area of an HTML element
  • Example:
    • Create a container and style it with width and height
    • Use clip-path to give it a shape (circle, polygon)
    • Circle radius:
      • 50% = half the size (e.g., radius will be 250px for a 500px container)
      • 100% = full size
  • Can add animations easily:
    • Define start position on x and y axes
    • Use hover effect to change size and add transitions
  • Polygon values for custom shapes
    • Use CSS clip-path generator tools online
    • Shapes can be animated similar to SVG paths

Perspective

  • Provides 3D effects to HTML elements
  • Example:
    • Create a frame div and shape div inside it
    • Rotate shape using the transform property
    • Perspective needed to see 3D effect (add to parent div)
    • Adjust distance between div and viewer for better effect
  • Important for designing creative 3D websites
  • Tutorial available in GitHub repository linked in description

Aspect Ratio

  • Defines proportional relationship between width and height
  • Useful for responsive design
  • Example:
    • Custom video player: set width to 100%, adjust height
    • Use aspect-ratio property (e.g., 16:9)
    • Automatically calculates height based on width

CSS Filters

  • Quick effects for items
    • Blur: sensitive content, hover/active effects
    • Grayscale: convert items to black-and-white
    • Brightness, contrast adjustments
  • Applies to images, text, and other elements
  • Example:
    • Apply blur to image and remove on hover
    • Use for adding filter effects on text (e.g., spoilers)

Inputs Styling

  • Customizing input elements
    • Removing default outline: focus { outline: none; }
    • Change outline color on focus
    • Change placeholder text color: ::placeholder { color: <color>; }
    • Change text cursor color: caret-color: <color>;

Pseudo-Classes: is, where, not, has

  • Useful for efficient styling
  • Example:
    • Use is or where to style multiple selectors
    • Use not to exclude specific elements from styling
    • Use has for conditional styling based on the presence of child elements

Styling Video Captions

  • Adding captions to videos and styling them
  • Example:
    • Add track element inside video element for captions
    • Use ::cue pseudo-element for styling (background color, font size)

Conclusion

  • Practice tips by following examples in GitHub repository
  • Engage in community by commenting and following on social media
  • Support the creator through channel memberships and other means