CSS Basics @cssbasics

Moved: https://t.co/pa5BBRgwwt or https://t.co/mjc1Ujn78R fridayfrontend.com Portland, OR Joined March 2018

Tweets

3K
Followers

2K
Following

2
Likes

13

CSS Basics @cssbasics

11 months ago

👋🏻 This account has moved! You can find us on Mastodon at hachyderm.io/@cssbasics or Bluesky at bsky.app/profile/cssbas…

0 0 1 142 0

#CSS Tricks That Use Only One Gradient: "In this article, we are not going to make complex stuff with CSS gradients. Instead, we’re keeping things simple and I am going to walk through all of the incredible things we can do with just one gradient." css-tricks.com/css-tricks-tha…

0 0 1 138 0

CSS Basics @cssbasics

11 months ago

#HTML for People: "HTML isn't only for people working in the tech field. It's for everyone. Learn how to make a website from scratch in this beginner friendly web book." htmlforpeople.com

0 0 0 111 0

CSS Basics @cssbasics

11 months ago

Default behavior of #CSS position absolute: "Many have a wrong information about the default behavior of position: absolute element. 'if an absolute positioned element has no positioned ancestors, it uses the body element' NO, this is false!" css-tip.com/initial-contai…

0 0 0 109 0

CSS Basics @cssbasics

11 months ago

Understanding the #CSS drop-shadow() Function: "In this article, we will explore the drop-shadow() function, its syntax, use cases, and how it differs from box-shadow." makemychance.com/css-drop-shado…

0 0 1 108 0

CSS Basics @cssbasics

11 months ago

CSS Anchor Positioning Guide: "Learn about #CSS Anchor Positioning, including its syntax, properties, how it is used to position one element next to another, and even how it’s used to resize elements relative to other elements." css-tricks.com/css-anchor-pos…

0 0 1 102 0

CSS Basics @cssbasics

11 months ago

Your Accessibility Questions Answered by a Blind Person: "This post answers questions from the 2023 UsableNet webinar, How a Blind Person uses a website." #a11y blog.usablenet.com/your-accessibi…

0 0 0 99 0

CSS Basics @cssbasics

11 months ago

Limitation Breeds Creativity: A Study in Composition with Custom Properties: "I came up with the idea of creating a simple composition using three #CSS gradients, then remixing them with custom properties to see what different outcomes I could generate." css-irl.info/limitation-bre…

0 0 1 96 2

CSS Basics @cssbasics

11 months ago

CSS Masonry & CSS Grid: "There are two competing proposals for #CSS masonry at the time of writing and many opinions are flying around advocating one or the other." css-tricks.com/css-masonry-cs…

0 0 1 83 0

CSS Basics @cssbasics

11 months ago

Practical Accessibility Tips You Can Apply Today: "Kevin Andrews shares some useful snippets of markup with handy explainers to help you deliver more accessible components." #a11y piccalil.li/blog/practical…

0 0 4 136 2

CSS Basics @cssbasics

11 months ago

What’s the Difference Between #HTML’s Dialog Element and Popovers? "They are pretty similar, but are have some important differences, slightly different APIs, and functionality. The use cases are also a bit different, so let's have a look!" frontendmasters.com/blog/whats-the…

0 0 1 85 1

CSS Basics @cssbasics

11 months ago

The #HTML <b> element: "In HTML5, b does not stand for 'bold' anymore. Astonishingly, it stands for 'Bring Attention To'. This excruciating new moniker was contrived to address concerns around presentational versus semantic HTML." heydonworks.com/article/the-b-…

0 0 1 88 0

CSS Basics @cssbasics

11 months ago

I Need an Accessible Hero: "We’ve gathered our recommendations on common hero features and considerations to help you ensure your hero banners are built with #a11y in mind." accessarmada.com/blog/i-need-an…

0 0 0 98 0

CSS Basics @cssbasics

11 months ago

Animating height with only #CSS: "The tl;dr version: add `interpolate-size: allow-keywords;` to your stylesheet… Then, you can animate the height attribute to auto like we’ve all wanted to for years!" gomakethings.com/animating-heig…

0 0 2 98 0

CSS Basics @cssbasics

11 months ago

How To Make A “Scroll To Select” Form Control: "I found an interesting way to turn a <select> into a dial of sorts — where options are selected by scrolling them into position, not totally unlike a combination lock or iOS date pickers." #CSS css-tricks.com/how-to-make-a-…

0 0 0 71 0

CSS Basics @cssbasics

11 months ago

Feature detecting Scroll-Driven Animations with @supports: you want to check for animation-range too: "The problem is that, at the time of writing, Firefox Nightly only has a partial implementation of scroll-driven animations." #CSS bram.us/2024/09/24/fea…

0 0 2 100 0

CSS Basics @cssbasics

11 months ago

Color Mixing With Animation Composition: "Mixing colors in #CSS is pretty much a solved deal, thanks to the more recent color-mix() function as it gains support. Pass in two color values — any two color values at all — and optionally set the proportions." css-tricks.com/color-mixing-w…

0 0 0 61 0

CSS Basics @cssbasics

11 months ago

Keeping Pixely Images Pixely (and Performant!): "See how everything has that 8-bit-ish pixely look to it? There is a #CSS property that you can apply to images that will affect how they look when they scale." frontendmasters.com/blog/keeping-p…

0 0 0 54 0

CSS Basics @cssbasics

11 months ago

It DOM Matter: "It’s still important to care about DOM structure, putting things where they should be for #a11y reasons, but it’s nice that we don’t have to structure things according to limitations of the styling language so much anymore." blog.codepen.io/2024/09/23/chr…

0 0 0 65 0

CSS Basics @cssbasics

11 months ago

Two #CSS Properties For Trimming Text Box Whitespace: "The text-box-trim and text-box-edge properties in CSS enable developers to trim specifiable amounts of the whitespace that appear above the first and below the last line of text in a text box." css-tricks.com/two-css-proper…