novakHouse.us

Every once in a while I'm motivated to attempt to draw some shapes with <path>, the all-powerful drawing syntax of SVG. I only understand a fragment of what it all can do, but I know enough to be dangerous. All the straight-line syntax commands (like L) are pretty straightforward and I find the curved Q command fairly intuitive. Box yourself into a viewBox="0 0 100 100" and drawing simple stuff doesn't seem so bad.

Here's a classic example … Read article

The post Animate SVG Path Changes in CSS appeared first on CSS-Tricks.

The advantages of using SVGs in web development are well known. SVGs are small in size, can be made quite accessible, are scalable while maintaining their quality, and can be animated. Still, there is a learning curve. Things, like the syntax of SVG, can be a little tricky and having to hand-alter SVG code sometimes isn’t out of the question.

Most SVG assets allow styling to be applied in predictable ways. For instance, this circle has a hover state … Read article

The post Add Background Colors to SVGs Using the “rect” Element appeared first on CSS-Tricks.

(This is a sponsored post.)

Are you looking for a tech job where you clock in, or for a career where you’ll be seen?

Seen by Indeed is a matching service for software engineers, product managers and other tech pros that sorts through thousands of companies -- like Twilio, Overstock, VRBO, and PayPal -- and matches tech talent like you to the role that’ll take you further. Not only does Seen by Indeed match on things like skills, … Read article

The post Seen by Indeed appeared first on CSS-Tricks.

There are special superset number characters that are sometimes perfect for footnotes. Here they are:

� � � ⁴ ⁵ ⁶ ⁷ ⁸ ⁹

I generally prefer to superscript the number myself, like:

<pThis next word<sup1</suphas a footnote.</p

That way I can select it in CSS or JavaScript in case I want to do something special with it.

You'd probably add an anchor link around that as well to link to an ID elsewhere on the page … Read article

The post Footnote Characters appeared first on CSS-Tricks.

In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there’s a lot of jank when an image is first loaded because an img will naturally have a height of 0 before the image asset has been successfully downloaded by the browser. Then it needs to repaint the page after that which pushes all the content around. I’ve definitely seen this problem a lot on big news … Read article

The post Do This to Improve Image Loading on Your Website appeared first on CSS-Tricks.

Monica Dinculescu:

I don’t want every possible padding and margin and colour and flexbox configuration in the world. I just want the ones that I know I end up using in every project. So here is�monica.css: my very own CSS framework, which I copy paste at the beginning of every CSS file and take it from there.

I love it when people make their own CSS starter. I like Sanitize, but even that feels like a … Read article

The post monica.css appeared first on CSS-Tricks.

What should you do when you get a complaint about the color contrast in your web design? It might seem perfectly fine to you because you’re able to read content throughout the site, but to someone else, it might be a totally different experience. How can put yourself in that person’s shoes to improve their experience?

There are some relatively easy ways to test contrast. For example, you can check the site on your phone or tablet in bright sunlight, … Read article

The post Understanding Web Accessibility Color Contrast Guidelines and Ratios appeared first on CSS-Tricks.

Ahmad Shadeed covers the idea of a card component that has a fixed set of semantic HTML with some BEMy classes on it. There is a title, author, image, and tags. Then he redesigns the card into five totally different designs without touching any of the HTML just the CSS.

If this is an ah-ha moment for you, awesome! It might be worth knowing that this exact concept essentially excited an entire generation of front-end developers, in no small part … Read article

The post Same HTML, Different CSS appeared first on CSS-Tricks.

Andrew Welch had a little CSS challenge the other day to make an ordinary div:

• centered vertically + horizontally
• scales to fit the viewport w/ a margin around it
• maintains an arbitrary aspect ratio
• No JS

There's a video in that tweet if it helps you visualize the challenge. I saw Paul Bakaus blogging about this the other day, too, so it's a thing that comes up!

Mark Huot got fancy applying aspect ratios directly with … Read article

The post Centering a div That Maintains Aspect-Ratio When There’s Body Margin appeared first on CSS-Tricks.

Mezo Istvan does a good job of covering the problem and a solution to it in a blog post on Medium.

If you tap on something that has a :hover state but you don't leave the page then, on a mobile device, there is a chance that :hover state "sticks." You'll see this with stuff like jump-links used as tabs or buttons that trigger on-page functionality.

The post Solving Sticky Hover States with @media (hover: hover) appeared first on CSS-Tricks.