 Resources from Jhey Tompkins in 2024

Learn how to make a fully functioning Tic Tac Toe game that doesn't need any client-side JavaScript!

For this course, we'll be using Pug and Stylus which are preprocessors for HTML and CSS respectively.

Learn how to:
- Generate markup with loops and template literals
- Leverage native HTML behavior
- Create SVG
- Use CSS variables and scope
- Implement game logic with HTML forms
- Animate SVG with CSS
- Use CSS Animation to provide motion
- Use Pug Mixins
- Disable motion when users don't want it
- Apply visual effects using CSS filter and backdrop-filter
- Generate random animations using Pug and CSS variables

Cascading Style Sheets bring order and beauty to our applications.

Tic Tac Toe with CSS and SVG

A collection of CSS tricks to tackle various problems.

CSS Tips and Tricks

In this collection, we explore creating CSS art and illustrations by walking through creating the Egghead.io logo with CSS.

We walk through everything from planning and creating a responsive foundation, to creating shading effects with `box-shadow`.

Use CSS to Create Art and Illustrations

Once we have the image we are going to trace and a responsive container in place, it's a good time to plan the markup for our illustration.

In this lesson, we create the markup needed for our illustration taking into consideration how many elements we might need to create certain shapes and how the stacking context could play a part.

Plan the HTML Markup for a CSS Illustration

In this lesson, we explore creating the Egghead Shell with CSS.
We explore how different properties allow us to create different shapes and how we can use our developer tools to adjust and tweak style values.

Create Complex Shapes with CSS Clip Path and Border Radius

In this lesson, we create arms for our Egghead spectacles. To do this, we create a normally sized element and then clip away the excess that we don't need using a polygon clip with CSS clip-path.

Leveraging the stacking context means we only see the parts of the spectacle arms that we desire.

Use a CSS Polygon Clip Path to Create Complex Shapes

In this lesson, we create the first spectacle lens for our CSS Egghead logo.

We use CSS transform and absolute positioning to get the element into place. And then use border-radius to finely tune the shape of our element.

Use CSS Transform and Border Radius to Create Complex Shapes

In this lesson, we create a second lens for our Egghead spectacles. These are a mirror image of each other. Instead of writing out the styles again, we can reuse the styles and make use of the specific class to override the positioning and transform in order to mirror the right lens.

Use CSS Classes to Reuse and Override Styles

In this lesson, we style the bridge of our Egghead spectacles. The trick to creating some shapes is to use oversized elements that we then clip the excess from. Here we create an element much larger than required in order to achieve the shape we want and then clip away the excess.

Use Oversized Elements with CSS Clip Path to Create Complex Curves

In this lesson, we use `box-shadow` to create the shadow cast from the Egghead spectacles onto the Egghead shell. At first glance, we might opt for a `box-shadow` on the lenses themselves. But, we need to duplicate those elements so we can clip away the parts of the shadow we don't need without affecting the lenses.

Add Depth to a CSS Illustration with Box Shadow

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

In this lesson, we explore using Chrome's DevTools to detect unwanted visual instability on a page.

We can do this using the new "Experience" heading under recorded "Performance" metrics.

To truly see the impact of "[Cumulative Layout Shift](https://web.dev/cls/)", we can make use of DevTools' "Network throttling" feature to see any visual instability with the naked eye.



Use Chrome DevTools to Detect Cumulative Layout Shift

We can use the :hover pseudo selector to conditionally style elements. In this example, we show how to do a show/hide for ghosting visual indicators on a tic tac toe board.

Use the Hover Pseudo Selector to Style Child Elements

Chaining CSS filters gives us the opportunity to create appealing visual effects. In this example, we look at creating a "neon" like effect for SVG.

Use Chained CSS Filter to Apply Visual Effects

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

If you're repeating blocks of markup or code in Pug, you can use a mixin to reduce the maintenance overhead. Here, we look at some of the ways you can use Pug mixins.

Use Pug Mixins for Reusable Blocks of Markup

If you're applying delays to animation or using open-ended keyframes, fill mode will help with getting rid of flicker. Using animation-fill-mode, we can retain styling from animation keyframes. We can retain the styling during delay periods or even when the animation has completed.

Use Animation Fill Mode to Retain Keyframe Styling

Using CSS variable scope we can stagger CSS animations to our choosing. For our Tic Tac Toe board, we want to stagger the animation of the grid lines in a way that makes it look hand drawn.

Use Scoped CSS Variables to Stagger CSS Animations

Using stroke-dashoffset and stroke-dasharray, we're able to make SVG strokes look as if they are drawn using CSS animation.

Use CSS Animation to Draw SVG

Use CSS variables to take the responsibility of coloring SVG away from the markup in this example. Instead of an inline stroke, we can use scoped CSS variables to color the stroke for SVG elements.

Use CSS Variable Scope to Color SVG Elements

We can use SVG to create a cross with one path. But, what if want to animate a cross as if it's being hand-drawn? We can do this by defining more than one path for our SVG.

Use SVG to Create an Animatable Cross

Use the circle element in SVG to define a radius and center points for a circle.

Use SVG to Create a Circle

In combination with scoped CSS variables, we can use chained CSS transforms to position elements. In this example, we lay out the lines for a Tic Tac Toe board.

Topics

Instructors

Content Type

Jhey Tompkins