20 CSS Tricks You Probably Haven't Used Before

Unlock advanced web design techniques with this comprehensive CSS course! Discover hidden CSS tricks and properties to elevate your skills and create stunning visuals.

This course breaks down complex concepts into small, digestible lessons, each followed by practical examples and exercises. Whether you're a beginner or have some CSS experience, you'll learn valuable techniques to enhance your web development workflow.

Here's a glimpse of what you'll master:

• Text Effects:
  • Line-clamp: Effectively truncate long text with a stylish ellipsis.
  • Gradient Text: Add captivating color gradients to your text.
  • Text-stroke: Create visually striking text with outlines.
  • Truncate Text: Control how text is truncated when it overflows its container.
• Layout & Visuals:
  • Multiple Backgrounds: Layer multiple backgrounds for depth and visual interest.
  • Conic-gradient: Create beautiful, radial color gradients.
  • Object-fit: Control how images fit within their containers.
  • Drop-shadow: Add depth and dimension with shadows.
  • Column Count: Create responsive layouts with multiple columns.
  • Viewport Height and Width Units (vh & vw): Master responsive design using viewport units.
• Styling Lists & Numbers:
  • CSS Counter: Style ordered lists with custom numbering.
  • Custom Bullet Points: Create unique and visually appealing bullet points.
  • Font Shorthand: Write more concise and readable CSS.
• Combinators:
  • Adjacent Sibling Combinator: Style elements based on their immediate sibling relationship.
  • General Sibling Combinator: Style elements based on their general sibling relationship.
• Other Useful Properties:
  • Filter Blur: Apply blur effects to images and elements.
  • Cross-Browser Text Selection: Ensure consistent text selection across different browsers.
  • First Letter: Style the first letter of a text string.
  • Number List: Style numbered lists.
  • Color Character Units: Use color values with character units.
  • WBR (Word Break) Element: Control word breaks within elements.

Who is this course for?

This course is perfect for anyone who has ever written a line of CSS code and wants to take their web design skills to the next level. If you're new to CSS, consider exploring my previous classes for a solid foundation.

Resources:

• Atom.io
• MDN Web Docs - Adjacent Sibling Combinator
• MDN Web Docs - General Sibling Combinator
• MDN Web Docs - WBR Element