YoVDO

CSS Tips and Tricks

Offered By: egghead.io

Tags

HTML & CSS Courses Computer Science Courses Web Design Courses Responsive Design Courses Chrome DevTools Courses CSS Animation Courses CSS Transitions Courses

Course Description

Overview

A collection of CSS tricks to tackle various problems.

Syllabus

  • Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius
  • Explore a Site's CSS with Chrome DevTools CSS Overview
  • Create an Animated Underline Effect using CSS Transition and CSS Background Position
  • Use the HSL Color Space and Scoped CSS Variables to Prototype UI Variants
  • Use content-visibility: auto to Improve Initial Page Load Time
  • Use CSS @keyframes to Create a Basic Loading Animation
  • Use CSS filter to Create a Drop Shadow
  • Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect
  • Use CSS Variables to Maintain the Aspect Ratio for an Element
  • Use Multiple Background Images to Create Single Element CSS Art
  • Use CSS Variables Almost like Boolean Values with Calc
  • Use CSS Transforms to Create Configurable 3D Cuboids
  • Use CSS Variables with Calc and HSL to Implement Dark Mode
  • Use CSS Scroll Behavior for Animated Anchor Scrolls
  • Use CSS Scroll Margin to Give Content Breathing Room
  • Use CSS @property to Animate and Transition Custom Properties
  • Use CSS Resize to Create Resizable Elements
  • Use CSS aspect-ratio to prescribe an aspect ratio for an element

Taught by

Jhey Tompkins

Related Courses

Mobile Web Development
Google via Udacity
iDESWEB, Introducción al desarrollo web
Miríadax
Information Design
University of California, San Diego via Coursera
Advanced Styling with Responsive Design
University of Michigan via Coursera
Front-End Web UI Frameworks and Tools
The Hong Kong University of Science and Technology via Coursera