Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Sweating the Small Stuff - Recreating Subtle Design Details Using Sass

JSConf via YouTube

Overview

Explore advanced CSS techniques for recreating subtle design details using Sass in this 20-minute conference talk from CSSConfUS 2013. Dive into topics such as extending placeholders, manipulating color lightness, implementing background color design logic, and creating layer styles. Learn how to craft intricate drop shadows using trigonometry, master Compass box shadows, and apply drop shadows and text shadows to buttons. Discover the art of linear gradients, including angle conversion and scaling techniques. Experiment with psychedelic linear grain effects and plot twists. Understand blend modes, their limitations, and how to implement gradient overlay conversions. Gain insights into refactoring and styling buttons efficiently. This talk provides a comprehensive toolkit for developers looking to elevate their CSS skills and achieve pixel-perfect designs.

Syllabus

Intro
Extend placeholder
Color lightness
Background color
Design logic
Layer styles
Drop shadow
Trigonometry
Compass
BoxShadow
DropShadow
TextShadow
Button
Text Shadow
Linear Gradient
Angle Conversion
Scale
Gradients
Psychedelic
Linear Grain
Plot Twist
Blend Modes
Blend Mode Limitations
Gradient Overlay Conversion
Tool Kit
Refactoring
Styling Buttons
Conclusion

Taught by

JSConf

Reviews

Start your review of Sweating the Small Stuff - Recreating Subtle Design Details Using Sass

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.