CSS Basics

Moved: or

[CSS Basics @cssbasics]

👋🏻 This account has moved! You can find us on Mastodon at https://t.co/Z4JMlFlXC1 or Bluesky at https://t.co/v8eTulNQpy

[CSS Basics @cssbasics]

#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." https://t.co/zH1i1xuVmn

[CSS Basics @cssbasics]

#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." https://t.co/iVdxd7u9SD

[CSS Basics @cssbasics]

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!" https://t.co/XGmlimTk6X

[CSS Basics @cssbasics]

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." https://t.co/yFy6cX4Tub

[CSS Basics @cssbasics]

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." https://t.co/HNsUBNDXTL

[CSS Basics @cssbasics]

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 https://t.co/Xss8TR4Yij

[CSS Basics @cssbasics]

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." https://t.co/HxFJkJQqgo

[CSS Basics @cssbasics]

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." https://t.co/Oi641RslSS

[CSS Basics @cssbasics]

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 https://t.co/aSmjdGQAR6

[CSS Basics @cssbasics]

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!" https://t.co/iVuEEv2OUb

[CSS Basics @cssbasics]

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." https://t.co/3d31nPDqzE

[CSS Basics @cssbasics]

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." https://t.co/bLiSa3ITib

[CSS Basics @cssbasics]

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!" https://t.co/wRMhWWXM35

[CSS Basics @cssbasics]

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 https://t.co/uLquf9osAi

[CSS Basics @cssbasics]

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 https://t.co/nESeni4vam

[CSS Basics @cssbasics]

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." https://t.co/PO3ZzkOAHE

[CSS Basics @cssbasics]

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." https://t.co/EEbRww2ybF

[CSS Basics @cssbasics]

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." https://t.co/7oW25ZOP38

[CSS Basics @cssbasics]

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." https://t.co/G0kSHkOxf9