(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.data-privacy-src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-1596564-1', 'auto'); ga('send', 'pageview');
Home » NewsBlog » CSS » Page 2

Toggling Animations On and Off

2019-01-10T03:05:33+00:00January 10th, 2019|Categories: News, Tutorials|Tags: |

A nicely detailed tutorial by Kirupa that gets into how you might provide a UI with persisted options that control whether animations run or not. The trick is custom properties that control the movement: body { --toggle: 0; --playState: "paused"; } Which are used within animations and transitions: .animation { animation: bobble 2s infinite; animation-play-state: [...]

New ES2018 Features Every JavaScript Developer Should Know

2019-01-10T03:05:33+00:00January 10th, 2019|Categories: News, Tutorials|Tags: |

The ninth edition of the ECMAScript standard, officially known as ECMAScript 2018 (or ES2018 for short), was released in June 2018. Starting with ES2016, new versions of ECMAScript specifications are released yearly rather than every several years and add fewer features than major editions used to. The newest edition of the standard continues the yearly [...]

Styling a Web Component

2019-01-09T03:05:06+00:00January 9th, 2019|Categories: News, Tutorials|Tags: |

This confused me for a bit here so I'm writing it out while it's fresh in mind. Just because you're using a web component doesn't mean the styles of it are entirely isolated. You might have content within a web component that is styled normally along with the rest of your website. Like this: See [...]

How To Learn CSS

2019-01-09T03:05:04+00:00January 9th, 2019|Categories: News, Tutorials|Tags: |

Outside of my extreme envy of the SEO they are going to get out of this, Rachel is spot on here. Learning CSS has some pillars, like language syntax, selectors, layout, and flow that, once learned, unlock your CSS merit badge. What I would add is that if you really want to learn CSS, give [...]

Sass Techniques from the Trenches

2019-01-09T03:04:55+00:00January 9th, 2019|Categories: News, Tutorials|Tags: |

Having been in the web development industry for more than 14 years, I’ve seen and written my fair share of good and bad CSS. When I began at Ramsey Solutions five years ago, I was introduced to Sass. It blew my mind how useful it was! I dove right in and wanted to learn everything [...]

The 10,000 Year Clock Design Principals

2019-01-09T03:04:52+00:00January 9th, 2019|Categories: News, Tutorials|Tags: |

In the new year edition of the Clearleft newsletter, Jeremy Keith linked to the design principals Danny Hillis thought about while considering a clock that would work for 10,000 years. Here's part of that page, satisfyingly displayed as a : Longevity: Go slow Avoid sliding friction (gears) Avoid ticking Stay clean Stay dry Expect bad [...]

Reader Mode: The Button to Beat

2019-01-08T03:05:22+00:00January 8th, 2019|Categories: News, Tutorials|Tags: |

As a young nerd, I loved to immerse myself in digital worlds, learning the ins and outs of the rules someone else had created for me (intentionally or not). But the older and crankier I get, the more I find myself losing patience when navigating these "delightful" experiences. This fascination was great for my eventual [...]

The practical value of semantic HTML

2019-01-08T03:05:20+00:00January 8th, 2019|Categories: News, Tutorials|Tags: |

I love how Bruce steps up to the plate here: If the importance of good HTML isn’t well-understood by the newer breed of JavaScript developers, then it’s my job as a DOWF (Dull Old Web Fart) to explain it. Then he points out some very practical situations in which good HTML brings meaningful benefits. Maybe [...]

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok