cssbasics

cssbasics, 2 days ago to accessibility

A Brief Note on Highlighted Text: "You must give it sufficient contrast — 3:1 for the highlight block against its background and (probably) 4.5:1 for the text within that highlighted block against that background." #a11y https://adrianroselli.com/2024/05/a-brief-note-on-highlighted-text.html

cssbasics, 9 days ago to random

More ways to instantiate #WebComponents: "Last week, we looked at different ways to setup the HTML in a Web Component. One of the challenges with running your code in the constructor() is that sometimes the custom element is created, but none of the nested HTML inside it is ready yet. We looked at a few different ways to fix that, but today, I wanted to share two more. Let’s dig in!" https://gomakethings.com/more-ways-to-instantiate-web-components/

cssbasics, 10 days ago to CSS

Handling The Indentation of a Treeview Component: "In a nutshell, the problem is to build a UI that contains nested components with an increasing indentation for each one. The problem is common on the web, but I will highlight the ones from Github, Figma, Adobe and more." #CSS https://ishadeed.com/article/tree-view-css-indent/

cssbasics, 13 days ago to CSS

The Ultimate #CSS Shapes Collection: "Pure CSS shapes made with a single-element, modern CSS and an optimized code. All the shapes are here, look no further!" https://css-shape.com/

cssbasics, 27 days ago to CSS

Sliding 3D Image Frames In #CSS: "Temani Afif applies 3D effects and sliding transitions to a single <img> using clever CSS techniques that demonstrate advanced, modern styling practices." https://www.smashingmagazine.com/2024/04/sliding-3d-image-frames-css/

cssbasics, 28 days ago to CSS

#CSS Breakpoints in Responsive Design: "Breakpoints determine when a webpage may adjust to different layouts. They help designers (and developers) maintain layout consistency across multiple screen sizes, orientations, and devices." https://www.nngroup.com/articles/breakpoints-in-responsive-design/

cssbasics, 1 month ago to CSS

Managing User Focus with #CSS :focus-visible: "The browser can detect whether the user is interacting with the experience from a keyboard, mouse, or trackpad and based on that input type, it adds or removes the focus ring." #a11y https://css-tricks.com/managing-user-focus-with-focus-visible/

cssbasics, 1 month ago to CSS

Text Effects: "A collection of fun experiments, effects, examples and tips on how to create text effects using #CSS, #HTML, and #JavaScript." https://texteffects.dev/

cssbasics, 1 month ago to CSS

The Chaotic Neutral Nature of font-size: "The first step to properly aligning web typography is understanding #CSS font⁠-⁠size." https://phloe.co/dev/font-size/

cssbasics, 1 month ago to random

DevTools Tips & Tricks: "Front-end devs spend a significant amount of time working in the browser’s DevTools. Likely as much as they spend writing code in the code editor. However, most devs barely scratch the surface of what DevTools can accomplish." https://frontendmasters.com/blog/devtools-tips-tricks/

cssbasics, 1 month ago to CSS

Should Designers Code? "Telling web designers they don't need to worry about code is like telling architects they don't need to worry about steel, wood or physics." #CSS #JavaScript https://bradfrost.com/blog/post/should-designers-code/

cssbasics, 1 month ago to CSS

Chris is back with a collection of fun #CSS tricks, including how to start scrolling from the bottom, how to make a lenticular card, and how to simulate randomness in CSS. https://blog.codepen.io/2024/04/08/chris-corner-tricks-with-css/

cssbasics, 1 month ago to CSS

Using #CSS Relative Colors: "This article explains relative color syntax, shows what the different options are, and looks at some illustrative examples." https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors

cssbasics, 1 month ago to CSS

#CSS :has roundup - "I still haven’t used :has outside of little demos and screwing around in Codepen but there’s been a growing chorus over the last few months about all the tiny yet amazing things that :has can do for us." https://robinrendle.com/notes/has-roundup/

cssbasics, 1 month ago to CSS

Setting And Persisting Color Scheme Preferences With #CSS And A “Touch” Of #JavaScript: "With recent developments in CSS, core functionality that has always required JavaScript can now be done without it." https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/

cssbasics, 1 month ago to CSS

The Power of :has() in #CSS: "It’s like saying, 'If there’s something specific inside this box, then style the box this way AND only this way.'" https://css-tricks.com/the-power-of-has-in-css/

cssbasics, 1 month ago to CSS

How to Animate Borders in #CSS: "Animating borders in CSS can be surprisingly difficult. In this article, you'll see five examples of animations done without real CSS borders, instead using "fake" borders, outlines and even SVG." https://www.letsbuildui.dev/articles/how-to-animate-borders-in-css/

cssbasics, 1 month ago to CSS

Why UI designers should understand Flexbox and #CSS Grid: "If we design with an understanding of the capabilities and limitations of CSS, then we can have a much better and more understanding collaboration with development." https://uxdesign.cc/why-ui-designers-should-understand-flexbox-and-css-grid-e236a9dec37a

cssbasics, 1 month ago to CSS

A formula for responsive font-size: "This #CSS is now part of most websites I make: :root { font-size: calc(1rem + 0.25vw); } " https://jameshfisher.com/2024/03/12/a-formula-for-responsive-font-size/

cssbasics, 1 month ago to CSS

Accessible Forms with Pseudo Classes: "The #CSS :focus-within pseudo-class allows for great control over focus and letting your user know this is exactly where they are in the experience." #a11y https://css-tricks.com/accessible-forms-with-pseudo-classes/

cssbasics, 1 month ago to CSS

No Outer Margin: "One of the most common #CSS antipatterns I see is having margin (and in some cases padding) on the outermost element of a component. This is an easy mistake to make, but luckily, it’s easily avoided once we know what we’re looking for." https://kyleshevlin.com/no-outer-margin/

cssbasics, 2 months ago to CSS

#CSS for printing to paper: "At work, one of the things I do pretty often is write print generators in HTML to recreate and replace forms that the company has traditionally done handwritten on paper or in Excel." https://voussoir.net/writing/css_for_printing

cssbasics, 2 months ago to CSS

Some little ways I’m using #CSS :has() in the real world: "I’ve created some low fidelity demos of :has() snippets that I’ve been using in real-world client projects." https://piccalil.li/blog/some-little-ways-im-using-css-has-in-the-real-world/

cssbasics, 2 months ago to CSS

The Fifty-Fifty Split and Overflow: "A classic layout pattern where two elements occupy the same amount of inline space inside a row and stack once it becomes too narrow to display them side by side. Both flexbox & #CSS grid can accommodate this pattern." https://ryanmulligan.dev/blog/50-50-overflow/

cssbasics, 2 months ago to CSS

Going beyond pixels and (r)ems in #CSS - Container query length units: "We’ll look at length units based on the container. Yes, you heard that right, we can finally get some measurements based on a containing element and that spells awesome in my book." https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/container-query-length-units