Skip to main content
tdro

Another wandering soul screaming into the void. If you are looking for my blog you are in the wrong place. The profile and header pictures are brought to you by @cdd20.

tdro micro.thedroneely.com view markdown plaintext permalink dec 13 2022 23 sec 69/50 words

It’s kinda neat how CSS animation rules are sort of simple in their construction. , rules could be made even simpler if the animation-delay property also allowed delays between iterations/intervals instead of at the start only. Interval delays could allow for writing drastically less key frame rules.

css
text-animation[hang] {
  animation: tilt-rightward 1.3s infinite, tilt-leftward 1.8s infinite;
}
Combining two key frame animations to create a hanging effect.
#css
tdro

Another wandering soul screaming into the void. If you are looking for my blog you are in the wrong place. The profile and header pictures are brought to you by @cdd20.

tdro micro.thedroneely.com view markdown plaintext permalink jun 10 2022 17 sec 51/50 words

One way to remove multi–page transition jank is to force a permanent scrollbar. Are there any kindred spirits? Yes — there’s a kindred spirit. Overflows may disable descending position: sticky behavior. Avoid that problem with other jank removal techniques.

css
html {
  overflow-y: scroll;
}

body {
  overflow-y: scroll;
}
#css #gists
tdro

Another wandering soul screaming into the void. If you are looking for my blog you are in the wrong place. The profile and header pictures are brought to you by @cdd20.

tdro micro.thedroneely.com view markdown plaintext permalink may 30 2022 34 sec 103/50 words

Browsers are on a slow march towards fully adopting user options for standardized/algorithmic color stylesheets. Great debates over what color to paint the bike shed (website) will eventually end. Paint it (mostly) whatever color you want.

In addition to the invert filter, another way of quickly bootstrapping a dark mode stylesheet is to use Chromium’s auto dark mode emulation as an initial reference.

#clips #css
tdro

Another wandering soul screaming into the void. If you are looking for my blog you are in the wrong place. The profile and header pictures are brought to you by @cdd20.

tdro micro.thedroneely.com view markdown plaintext permalink may 13 2022 22 sec 67/50 words

Firefox’s developer tools excel at finding and fixing accessibility problems quickly. For example, to find all contrast issues on a page fire up the accessibility inspector and scan the tree. My favorite developer tools? You guessed it — Firefox.

Firefox’s Accessibility Inspector
Index: Cache · Source
#clips #css
tdro

Another wandering soul screaming into the void. If you are looking for my blog you are in the wrong place. The profile and header pictures are brought to you by @cdd20.

tdro micro.thedroneely.com view markdown plaintext permalink may 11 2022 26 sec 79/50 words

The flexible box layout (flexbox) is a great spec. The flex-direction property allows rearranging the position of children inside a flex container. This works in pretty much every browser — even defunct ones like Internet Explorer. Don’t work hard and write JavaScript, be lazy and write CSS.

Safari’s and Internet Explorer’s flex-direction
Index: Cache · Source
#clips #css
tdro

Another wandering soul screaming into the void. If you are looking for my blog you are in the wrong place. The profile and header pictures are brought to you by @cdd20.

tdro micro.thedroneely.com view markdown plaintext permalink may 7 2022 17 sec 51/50 words

Whenever I’m handcrafting , content selection rules are usually the first declarations on my sheet. Might as well ensure user selected text is readable. Easiest win for accessibility.

css
::selection {
  color: #fff;
  background-color: #000;
}

::-webkit-selection {
  color: #fff;
  background-color: #000;
}

::-moz-selection {
  color: #fff;
  background-color: #000;
}
#css #gists

Authors

Web Ring