spaceninja + css   2263

Compound grid generator
A little tool to generate compound grids. Enter the number of columns for each of your grids, and they’ll be magically merged into a compound grid. Use the output in your grid-template-columns property when using CSS Grid for layout.
fridayfrontend  css  cssbasics  layout  grids  cssgrid  compound  generator 
3 days ago by spaceninja
4 CSS Grid Properties (and One Value) for Most of Your Layout Needs | CSS-Tricks
CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout examples. What we’re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to meet most of your layout needs.
fridayfrontend  css  cssbasics  layout  grids  cssgrid  grid-template-columns  grid-gap  grid-auto-flow  grid-column  grid-row 
3 days ago by spaceninja
Making a responsive Twitch Embed
Twitch makes it easy to embed your stream but the less obvious part is how to make that embed responsive across any browser size. So here’s how to create a responsive Twitch embedded stream.
fridayfrontend  html  css  embeds  twitch  responsive  cssbasics 
3 days ago by spaceninja
Disabled form controls and how to tackle them - Catalin Red
When an HTML form control element is disabled that means it can’t be selected, clicked on, typed into nor does accept focus anymore. Also, by default, browsers display such form controls grayed out. In this article, you’ll find out how to use the HTML disabled boolean attribute, toggle it with JavaScript and style disabled form controls.
fridayfrontend  css  cssbasics  html  forms  disabled 
3 days ago by spaceninja
Styling Scrollbars with CSS: The Modern Way to Style Scrollbars
Since the early days of the web, customizing the browser’s scrollbar has proven to be very difficult to standardize across major browsers. Fortunately, on September 2018 a W3C Working Draft called CSS Scrollbars was released that looks like a viable way to finally accomplish this!
fridayfrontend  css  cssbasics  scrollbars 
3 days ago by spaceninja
Some Typography Links
I just can’t stop bookmarking great links related to typography. I’m afraid I’m going to have to subject you, yet again, to a bunch of them all grouped up. So those of you that care about web type stuff, enjoy.
fridayfrontend  css  cssbasics  typography  webfonts  variablefonts 
3 days ago by spaceninja
Creative text flows using CSS shapes - LogRocket Blog
Thinking back to many years ago and how I started my design career, I remember creating creative text flows in Adobe InDesign. Beginning as a print designer, I worked a lot in that page layout program. When working on layouts, sometimes text would flow around an image or “wrap” around a shape. This is referred to as “text wrap” in the print world. That’s not the term used on the web, but this same kind of idea is available with CSS styling.
fridayfrontend  css  cssbasics  shapes  shape-outside  clip-path 
3 days ago by spaceninja
Auto-growing inputs
I was tinkering with an electron app I wanted to make for screencasting and it needed some input elements that were positioned in a very tight spot. As powerful as HTML and CSS is, one weird thing about the input elements is that they don't (typically) size to their content.
fridayfrontend  html  css  inputs  forms  cssbasics  contenteditable 
3 days ago by spaceninja
Embracing modern image formats · Josh W Comeau
Happily, there's some pretty low-hanging fruit! In this tutorial, we'll see how we can leverage "next-gen" image formats like WebP. These images are often 2-3x smaller than the legacy formats we know and love (jpg, png). It can make a huge difference.
fridayfrontend  css  cssbasics  picture  html  webp  images  responsive 
3 days ago by spaceninja
How to get started with web development | Go Make Things
If you’re new to web development (or you know someone who is), I wanted to share a few resources to help you (or them) get started. This isn’t intended to be a comprehensive list. This is a collection of my “best recommendations” so that you don’t have to scour the web for hours doing your own research.
fridayfrontend  css  cssbasics  html  layout  javascript  accessibility 
3 days ago by spaceninja
Margin considered harmful
We should ban margin from our components. Hear me out.

Margin breaks component encapsulation. A well-built component should not affect anything outside itself.

Margin makes reusability harder. Good components are usable in any context or layout.

Margin conflicts with how designers think. Designers think about space in relation and context. They define how far a component should be from another component in a specific instance.

By banning margin from all components you have to build more reusable and encapsulated components.
fridayfrontend  css  cssbasics  layout  components  margins 
3 days ago by spaceninja
Centering Things with CSS Flexbox ― Scotch.io
Centering things in CSS before flexbox was always a chore. None of the major methods ever worked 100% consistently. Flexbox makes centering items as simple as 3 lines!
fridayfrontend  css  cssbasics  layout  flexbox  centered 
3 days ago by spaceninja
How They Fit Together: Transform, Translate, Rotate, Scale, and Offset
The transform property and its friends became more powerful through the addition of the new individual transform properties (translate, rotate, scale) and the offset properties (as a part of CSS Motion Path). All effectively provide a transformation for your element, and all have to follow specific rules to know how those transformations apply.
fridayfrontend  css  cssbasics  transforms  translate  rotate  scale  offset  transform-origin  animation 
3 days ago by spaceninja
Getting JavaScript to Talk to CSS and Sass
JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it’s been remarkably tough to share data between them. There have been large attempts, sure. But, I have something simple and intuitive in mind — something not involving a structural change, but rather putting CSS custom properties and even Sass variables to use.
fridayfrontend  css  sass  javascript  customproperties  variables 
3 days ago by spaceninja
LCH colors in CSS: what, why, and how?
This is huge. Currently, every CSS color we can specify, is defined to be in the sRGB color space. This was more than sufficient a few years ago, since all but professional monitors had gamuts smaller than sRGB. However, that’s not true any more. Today, the gamut (range of possible colors displayed) of most monitors is closer to P3, which has a 50% larger volume than sRGB. CSS right now cannot access these colors at all. Let me repeat: We have no access to one third of the colors in most modern monitors. And these are not just any colors, but the most vivid colors the screen can display. Our websites are washed out because monitor hardware evolved faster than CSS specs and browser implementations.
fridayfrontend  css  color  lch  srgb  lab  hsl 
3 days ago by spaceninja
CSS Findings From The New Facebook Design
I am a curious person who is always interested in opening up the browser DevTools to see how things were made on a website. I found some interesting uses of different CSS features (at least for me), and I wanted to share them with you. The new Facebook design started rolling out for users lately, and I got it almost two weeks ago. In this article, I will talk about all the interesting things I saw.
fridayfrontend  css  facebook  performance  svg  shadows 
3 days ago by spaceninja
Responsive Images the Simple Way
The responsive images spec is fantastic and covers a lot of use cases, but most of the time you’ll only need one: resolution switching using the `srcset` and `sizes` attributes.
fridayfrontend  css  html  images  responsive  srcset  sizes 
3 days ago by spaceninja
Building dark mode on Stack Overflow
The work I’m about to talk about was never about dark mode specifically, even though countless users asked for it. By solving everything along the way to dark mode, Stack Overflow would modernize its front-end codebase, enable accessibility-conscious theming, and push for adoption of our design system. We could give our users dark mode and offer future accessibility modes for free?
fridayfrontend  css  darkmode  accessibility  color  variables  customproperties 
3 days ago by spaceninja
Understanding Vue's Deep CSS Selector
Learn how to use the Deep selector in Vue, a powerful tool for resolving certain CSS issues.
vue  javascript  css  selectors 
3 days ago by spaceninja
Indicating Scroll Position on a Page With CSS | CSS-Tricks
Scroll-based features tend to involve some bespoke concoction of CSS and JavaScript. That’s because there simply aren’t that many native features available to do it. But what if we could accomplish something that only uses CSS? 
fridayfrontend  css  cssbasics  scroll 
9 days ago by spaceninja
Everything About Auto in CSS
For this article, I will explain the technical details of how auto works in the first place, and how we can leverage it to the maximum. Of course, there will be some use-cases and examples.
fridayfrontend  css  cssbasics  auto 
9 days ago by spaceninja
Welcome to the arrogantly named library of, Good Email Code | good-email-code
I always enjoy writing and talking about email code so I decided to set up this site to share code and explain the reasons behind everything I’m doing. You are welcome to simply copy and paste code or you can read up and learn the theory behind it.

The code here is what I would call best practice (other may disagree) and my theory behind that is.
fridayfrontend  css  html  email  cssbasics  bestpractices 
9 days ago by spaceninja
How to use the currentColor value in CSS – Js Craft
In CSS we have a special color value named currentColor that maybe be unknown to most people.

What currentColor does is to take the value for the color property and use it for any other property there has a color parameter.
fridayfrontend  css  cssbasics  currentcolor 
9 days ago by spaceninja
Positioning Text Along a Path with CSS
This ability to position stationary elements along a path lends itself well to text. I created some demos last year where I used CSS custom properties to position text around a circle, using transforms. This example uses Splitting.js (my favourite JS library!) to set the custom properties. (More on this later.)
fridayfrontend  css  cssbasics  offset-path  offset-distance  motion-path  svg  animation 
9 days ago by spaceninja
How to use CSS Scroll Snap - LogRocket Blog
The idea of only needing CSS to customize your scroll instead of playing with JavaScript sounds great, doesn’t it?

Today, I’m going to show you how CSS Scroll Snap helps you do just that.
fridayfrontend  css  cssbasics  scroll-snap 
9 days ago by spaceninja
Fit Text with CSS Variables
Fit Text
With CSS Variables
Some longer text that wants to fit, too...
Don't forget this text!
It can work with really long text if you really want, but that's gonna be hard to read...
fridayfrontend  css  cssbasics  fit  font-size  variables  customproperties 
9 days ago by spaceninja
How to Repeat Text as a Background Image in CSS Using element() | CSS-Tricks
There’s a design trend I’ve seen popping up all over the place. Maybe you’ve seen it too. It’s this sort of thing where text is repeated over and over. A good example is the price comparison website, GoCompare, who used it in a major multi-channel advertising campaign.
fridayfrontend  css  cssbasics  element  backgrounds 
9 days ago by spaceninja
CSS Logical Properties - Piccalilli
Create spacing that works regardless of the direction of your content or the environment of your users.
fridayfrontend  css  cssbasics  logical-properties 
9 days ago by spaceninja
Exciting Multi-line Highlights
Ditch the boring underline, Add some exciting highlights!
fridayfrontend  css  cssbasics  underline 
9 days ago by spaceninja
Value Bubbles for Range Inputs | CSS-Tricks
This is the perfect use case for the <output> tag, which is specifically for values calculated by form elements. Here is a super simple implementation of how you might use it:
fridayfrontend  cssbasics  css  html  output  range 
9 days ago by spaceninja
How to Animate Text with SVG and CSS
The other day I was helping my pal Jez work on Dept. of Enthusiasm, the site for his newsletter, and I had a thought. What if we made the word “enthusiasm” in the title animate a little bit? Like, what if each of the letters in the word bopped up and down enthusiastically?
fridayfrontend  css  cssbasics  svg  animation 
9 days ago by spaceninja
How Should Designers Learn To Code? Git, HTML/CSS, Engineering Principles (Part 2)
In Part 1, Paul explained the basics of the terminal, shared a few productivity hacks to get you started, and how to choose a code editor. In this part, he’ll continue with the topics of version control (Git), HTML and CSS, semantic code, and a brief introduction to some key engineering principles.
fridayfrontend  cssbasics  css  html  git  training  learning 
9 days ago by spaceninja
Auto-Growing Inputs & Textareas
By default, <input> and <textarea> elements don't change size based on the content they contain. In fact, there isn't any simple HTML or CSS way to make them do that. Kinda funny, as that seems like a reasonable use-case. But of course, there are ways, my friend. There are always ways.
fridayfrontend  css  html  forms  textarea  inputs 
9 days ago by spaceninja
CSS :nth-of-class selector – Bram.us
One thing that bothers me with CSS :nth-of-type/:nth-child selectors is that you can’t combine them with CSS classes. The selector below for example won’t work as you’d first expect it to work:
fridayfrontend  css  cssbasics  nth-of-class  selectors 
9 days ago by spaceninja
Inspired Design Decisions With Otto Storch: When Idea, Copy, Art And Typography Became Inseparable — Smashing Magazine
In this seventh instalment of Inspired Design Decisions, Andy Clarke will explore how American art director and graphic designer Otto Storch inspires his designs for the web. How do we use CSS Shapes to go beyond basic shapes to add energy to our designs? How do we use rotations on text for extra impact? How can we use mirroring and reflections to add interest to a design? In this article, we’ll explore just that.
fridayfrontend  cssbasics  css  design  layout 
9 days ago by spaceninja
“Designing Intrinsic Layouts” by Jen Simmons
What do CSS features like CSS Grid, Flexbox, Multicolumn, Flow layout and Writing Modes mean for our design medium? How might we better leverage the art of graphic design? How will we create something practical, usable, and realistically doable?
fridayfrontend  video  css  layout  grids  cssgrid  flexbox  multicol 
10 days ago by spaceninja
Flexbox and absolute positioning
But this mini-post is about Flexbox and absolute positioning, and a minor bug (at least I think it is so I filed one) in the Firefox DevTools.
fridayfrontend  css  cssbasics  flexbox  grids  absolute  layout 
16 days ago by spaceninja
Full Page Scroll-Snapping HTML Sections – Bram.us
Just some goofing around with Full Page Sections and Scroll Snapping:
fridayfrontend  css  cssbasics  scroll-snap  viewport 
16 days ago by spaceninja
A Complete Guide to calc() in CSS | CSS-Tricks
In this guide, let's cover just about everything there is to know about this very useful function.
fridayfrontend  css  cssbasics  calc 
16 days ago by spaceninja
How to Make Repeating Border Images | CSS-Tricks
I just saw this cool little site from Max Bittker: broider. You design an image on a 9-slice grid (except the middle part) and it will produce an image for you to use with border-image along with the CSS to copy and paste.
fridayfrontend  cssbasics  css  border-image 
16 days ago by spaceninja
Understanding CSS Grid: Grid Template Areas — Smashing Magazine
In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use grid-template-areas to place items.
fridayfrontend  css  cssbasics  layout  cssgrid  grids  grid-template-areas 
16 days ago by spaceninja
A Few Background Patterns Sites | CSS-Tricks
If I need a quick background pattern to spruce something up, I often think of the CSS3 Patterns Gallery. Some of those are pretty intense but remember they are easily editable because they are just CSS. That means you could take these bold zags and chill them out.
fridayfrontend  css  cssbasics  backgrounds  patterns  svg 
16 days ago by spaceninja
Neumorphism and CSS | CSS-Tricks
Let’s dip our toes into the neumorphism pool, showcasing the various neumorphic effects that can be created using our language of choice, CSS. We’ll take a look at both the arguments for and against the style and weigh how it can be used in a web interface.
fridayfrontend  css  design  neumorphism  cssbasics 
16 days ago by spaceninja
How to Create a “Skip to Content” Link
Skip links are little internal navigation links that help users move around a page. It’s possible you’ve never actually seen one before because they’re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first.
fridayfrontend  css  cssbasics  html  accessibility  skiplinks 
17 days ago by spaceninja
Adding Dark Mode To Your PWA
Dark Mode has been implemented by many popular sites and apps such as Twitter, Instagram, WhatsApp and YouTube. But how to add it to your site?
fridayfrontend  css  cssbasics  javascript  pwa  darkmode 
17 days ago by spaceninja
Why 543 KB keep me up at night
The question how good good enough is and at which point a website is ready to go online is keeping me busy lately. The web is in bad shape and it’s because we’re making it too easy on ourselves. “It’s online and works in most browsers” is not enough - we have to be much more considerate of what we’re putting online.
fridayfrontend  cssbasics  performance  css  javascript 
17 days ago by spaceninja
A Practical Overview Of CSS Houdini
Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell the browser how to apply CSS during a render process. Houdini’s browser support is improving and some APIs are available for use today, so it’s a good time to become familiar with them and experiment. We are going to take a look at each part of Houdini, its current browser support and see how they can be used today using progressive enhancement.
fridayfrontend  css  houdini 
17 days ago by spaceninja
Maintaining Performance
I, Dave Rupert, a person who cares about web performance, a person who reads web performance blogs, a person who spends lots of hours trying to keep up on best practices, a person who co-hosts a weekly podcast about making websites and speak with web performance professionals… somehow goofed and added 33 SECONDS to their page load. I find that Web Performance isn’t particularly difficult once you understand the levers you can pull; reduce kilobytes, reduce requests, unblock rendering, defer scripts. But maintaining performance that’s a different story entirely…
fridayfrontend  css  webfont  performance  maintenance 
17 days ago by spaceninja
Playing With Particles Using the Web Animations API
When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can. In this post, we'll make even more particle magic using the Web Animations API to create a firework effect when clicking on a button.
fridayfrontend  css  javascript  animation  fireworks  particles 
17 days ago by spaceninja
CSS: Flexible Repeating SVG Masks
For the design, I needed a seamless, horizontally repeating pattern. I needed SVG so it was crisp at any size. I wanted a single SVG image that I could color using CSS. Because we could have n-number of colors, creating a new SVG for every color wasn’t a future-facing option. Let’s look at an isolated demo to see how the pieces fit together.
fridayfrontend  css  svg  tiles  tiling  backgrounds  masks 
17 days ago by spaceninja
Zero to Dev: self-study developer guidelines
I'm often asked what self-study, completely online resources exists someone could use to go from zero to a relatively competent web dev. Here's a rough path I threw together from resources that I've vetted.
fridayfrontend  css  cssbasics  cs  learning  tutorials 
23 days ago by spaceninja
Conditions for CSS Variables
CSS variables are very powerful, and they allow to do a lot of interesting things. But there are no native conditionals that we could use in CSS with them. In this article I’ll talk about one of the ways we can fake such conditions with calculations.
fridayfrontend  css  cssbasics  variables  customproperties  conditionals 
23 days ago by spaceninja
CSS Viewport Units
In this article, we will learn about CSS viewport units and how to use them, along with some use-cases and solutions for common issues. Let’s start and dig in!
fridayfrontend  css  cssbasics  units  vw  vh  viewport 
23 days ago by spaceninja
How to instantly make your front end projects look better
In this article, you’ll learn a few easy tips to make your ugly af front end project look better in no time.
fridayfrontend  css  cssbasics  layout  design 
23 days ago by spaceninja
Learn Box Alignment
Are you ready to learn how box alignment works for CSS Grid and Flexbox? This article is for you.
fridayfrontend  css  cssbasics  flexbox  alignment  cssgrid  grids  layout 
23 days ago by spaceninja
Adventures in CSS Semi-Transparency Land | CSS-Tricks
Recently, I was asked to make some tweaks to a landing page and, among the things I found in the code, there were two semitransparent overlays — both with the same RGB values for the background-color — on top of an image. Something like this:
fridayfrontend  css  cssbasics  backgrounds  opacity  masks 
23 days ago by spaceninja
How to create an accordion hover effect with box-shadows
In this tutorial we'll use the box-shadow property to create a layered card component, and animate it on hover.
fridayfrontend  css  cssbasics  tutorials  box-shadow 
23 days ago by spaceninja
Why the World Needs CSS Developers - Elad Shechter - Medium
In the last ten years, give or take a few, CSS has grown extensively with the addition of more and more features, thus gradually becoming quite elaborate and complicated. The CSS of our days is very different from the CSS of the 2001–2010 decade.
fridayfrontend  css  cssbasics 
23 days ago by spaceninja
Inclusive Design Principles
These Inclusive Design Principles are about putting people first. It's about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really.

They are intended to give anyone involved in the design and development of websites and applications - designers, user experience professionals, developers, product owners, idea makers, innovators, artists and thinkers - a broad approach to inclusive design.
fridayfrontend  css  cssbasics  inclusive  design  guidelines  accessibility 
23 days ago by spaceninja
How to Make a Line Chart With CSS | CSS-Tricks
If all you need is a simple line chart, there's no need to load in a huge JavaScript library or even reach for SVG. You can make everything you need with just CSS and a couple of custom properties in your HTML. Word of warning, though. It does involve a bit of trigonometry. If that didn't scare you off, then roll up your shirt sleeves, and let's get started!
fridayfrontend  css  cssbasics  charts  graphs 
23 days ago by spaceninja
Accessible SVGs: Inclusiveness Beyond Patterns — Smashing Magazine
We are fortunate to have robust patterns to choose from when optimizing accessibility in SVGs — but most people stop there, focusing on code compliance and not actual users and their needs. If true inclusiveness lies beyond patterns — what other factors should we consider when designing and developing accessible SVGs?
fridayfrontend  css  cssbasics  svg  accessibility 
23 days ago by spaceninja
Sass !default and themeable design systems | Brad Frost
I’m working on a couple themeable design systems right now, and we’re architecting components to offer a white list of themeable CSS properties, so each brand can define their design language using design tokens and then pipe those through into the design system’s components.
fridayfrontend  css  cssbasics  sass  defaults 
23 days ago by spaceninja
Fluid Width Video
IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self-hosting the video and presenting it via the HTML5 <video> tag. You might be using YouTube, Vimeo, or some other video provider that provides <iframe> code to display videos. Let's cover how to make them all fluid width while maintaining an appropriate height based on their aspect ratio.
fridayfrontend  css  cssbasics  fluid  aspectratio  video  embeds 
23 days ago by spaceninja
Baseline Rules for Scrollbar Usability | Adrian Roselli
Now that one of the most popular CSS resource sites on the innertubes has implemented styled scrollbars in the browser I think the time is right (or too late?) for me to try to capture a starting point for ensuring they are usable.
fridayfrontend  css  cssbasics  scrollbars  design  accessibility 
23 days ago by spaceninja
Use a:visited in your CSS stylesheet
Unfortunately, when setting a new color the ‘purple visited link’ feature also gets disabled. I think this is a shame, as there’s so many instances where you’re going through a list of links and want to see what you’ve seen before.
fridayfrontend  css  cssbasics  links  accessibility  visited 
23 days ago by spaceninja
Block Links Are a Pain (and Maybe Just a Bad Idea) | CSS-Tricks
All in all, I'd say block links are just a bad idea. But I'd love to be proven wrong and see a really good implementation that solves all these issues.
fridayfrontend  css  cssbasics  links  blocks 
23 days ago by spaceninja
Twitter thread as blog post: Thoughts on how we write CSS
The problem is…unless you are “a CSS person” this understanding of specificity and its impact on the future of the code-base is somewhat specialized knowledge. Should everyone who writes CSS be expected to understand these details? Maybe, but the more experienced I become in all kinds of development, I’m starting to think that’s an unrealistic expectation given how much other stuff we have to know as developers.
fridayfrontend  css  cssbasics  howto  learning  teaching 
23 days ago by spaceninja
A Variable Fonts Primer
Welcome to the most radical change in type since Gutenberg. Variable fonts let you add nuance and artistry to your web typography without bogging down your site. Now you can accomplish what used to require several files with a single file and some CSS!

The goal of this site is to show you how variable fonts tick. Discover how they can benefit user interface (UI) design, accessibility, and long-form reading, and how they push the boundaries of skillful typographic expression on the web.
fridayfrontend  cssbasics  css  webfonts  typography  variablefonts 
23 days ago by spaceninja
Unfortunately, clip-path: path() is Still a No-Go
I was extremely excited when I first heard that clip-path: path() was coming to Firefox. Just imagine being able to easily code a breathing box like the one below with just one HTML element and very little CSS without needing SVG or a huge list of points inside the polygon function!

As it is right now, however, clip-path: path() is pretty much useless.
fridayfrontend  css  responsive  clip-path 
23 days ago by spaceninja
The performance benefits of Variable Fonts
When we think about web fonts and their impact on the performance on our websites we often focus on three main areas: The number of font requests; Font file size; Time to first render. I wanted to see how variable fonts faired in these situations and did a review comparing with standard fonts. Here are my results.
fridayfrontend  css  typography  webfonts  variablefonts  performance 
23 days ago by spaceninja
Programming Sass to Create Accessible Color Combinations
High color contrast is something that benefits everyone. It not only reduces eye strain in general, but is crucial for folks who deal with reduced vision. So let’s not only use better color combinations in our designs but find a way to make it easier for us to implement high contrasts. There’s one specific strategy that lets a Sass function do all the heavy lifting for us. I’ll walk you through how we put that together.
fridayfrontend  css  sass  color  contrast  accessibility 
23 days ago by spaceninja
Pure CSS Landscape - An Evening in Southwold
No images, just CSS.

Note: Edit the CSS at the top and choose your own sunset colour!
fridayfrontend  css  sunset  landscapes  painting 
23 days ago by spaceninja
Negative margins in CSS
I’m writing the Box Model chapter of the new book and came to the point where I had to treat negative margins. To my surprise, I found that there is no systematic treatment of negative margins anywhere. So I had to figure it out for myself. Below is my initial draft of the negative margin section.
fridayfrontend  css  cssbasics  margins  negative 
4 weeks ago by spaceninja
10 Ways to Hide Elements in CSS
There are multiple ways to hide an element in CSS, but they differ in the way they affect accessibility, layout, animation, performance, and event handling.
fridayfrontend  cssbasics  hidden  css 
4 weeks ago by spaceninja
Animated Matryoshka Dolls in CSS
Here’s a fun one. How might we create a set of those cool Matryoshka dolls where they nest inside one another... but in CSS? I toyed with this idea in my head for a little while. Then, I saw a tweet from CSS-Tricks and the article image had the dolls. I took that as a sign! It was time to put fingers to the keyboard.
fridayfrontend  css  cssbasics  checkboxes  dolls 
4 weeks ago by spaceninja
Revealing Hero Effect in CSS and JavaScript
In this tutorial, we will show how to create a section that reveals its content when the previous element scrolls away.
fridayfrontend  css  cssbasics  scroll  sticky 
4 weeks ago by spaceninja
The Slideout Footer
The footer is clever as well, in how it appears to slide out from underneath the content as you scroll to the bottom of the page. Let's make it!
fridayfrontend  footer  css  cssbasics  sticky 
4 weeks ago by spaceninja
New media queries you need to know
The Media Query Level 5 spec is being drafted as we speak, and it includes some really nice ones. Some of them are still being figured out, but several of them are available in some browsers. This article will take you through some of the most interesting new media queries in this new specification, and show you how to use them.
fridayfrontend  css  cssbasics  mediaqueries  light-level  inverted-colors  prefers-color-scheme  prefers-contrast  prefers-reduced-motion  reduced-motion  prefers-reduced-transparency  prefers-reduced-data 
4 weeks ago by spaceninja
How to animate scrolling to anchor links with one line of CSS | Go Make Things
Today, we’re going to learn how to animate scrolling to anchor links with one line of CSS.
fridayfrontend  css  cssbasics  scroll-behavior 
4 weeks ago by spaceninja
« earlier      
per page:    204080120160

related tags

3d  60fps  100vw  abbr  abem  absolute  abstraction  accessibility  accordions  achievements  acronyms  acrylic  active  adaptive  adaptiveloading  adblockers  admin  advent  advice  after  airbnb  ajax  alexa  algorithms  aliasing  align-items  alignment  all  alpha  alt  amcss  analytics  android  angled  angles  angular  animation  animations  answers  antialiasing  antipatterns  any-link  api  apple  applewatch  apply  apps  architecture  aria  aria-label  arial  arrows  art  artdirection  ascii  aspectratio  astronomy  async  at-rules  atom  atomic  attr  attributes  audio  audit  audits  auto  auto-fill  auto-fit  auto-placement  auto-play  autocomplete  autofill  autoprefixer  avengers  awesome  backdrop-filter  backface-visibility  background  background-blend-mode  background-clip  background-position  background-size  backgrounds  badges  baroque  bars  base  baseline  batman  bauhaus  beautifiers  beep  before  bem  bestpractices  beyonce  bezel  bio  blending  blendmodes  block  block-end  block-start  blocking  blocks  blueprint  blur  boilerplate  bookmarklets  books  boolean  bootcamps  bootstrap  border-box  border-image  border-radius  borders  boring  box-alignment  box-decoration-break  box-shadow  box-sizing  boxmodel  brackets  breadcrumbs  break  break-after  break-before  break-inside  break-word  breakout  breakpoints  breathe  broken  browser  browsers  bugs  bulletproof  bullets  bulma  bundlers  buttons  caching  calc  calculator  calculators  calendars  camelcase  cameras  campaignmonitor  caniuse  canvas  caption  caption-side  carbon  cards  carousel  cartoons  cascade  casper  cats  centered  ch  chaining  challenge  challenges  characterentities  charts  cheatsheet  checkboxes  checked  checklist  children  chrome  ci  circle  clamp  class  cleaning  clearfix  clever  click  clienthints  clip  clip-path  clone  cloudinary  code  codegolf  codeofconduct  codepen  codereviews  codesmells  codezen  collapse  color  color-mod  color-scheme  colorblind  columns  comics  commas  comments  communication  compass  compatibility  complexity  components  compositing  compound  compression  concatenation  condensed  conditionals  conferences  conic-gradient  connect4  consistency  console  contain  containerqueries  content  contentblockers  contenteditable  contents  context  contrast  controls  conventions  cookies  corner  corners  cortana  countdown  counter-increment  counter-style  counters  creditcards  critical  cropped  cs  css  css-in-js  css3  css4  cssbasics  cssgrid  cssmodules  cssom  csspaint  csswg  csszengarden  culture  currentcolor  cursor  cursors  customelements  customizable  customproperties  dancederholm  dark  darkmode  dashboard  data  date  datepicker  dead  debug  debugging  decisions  declarations  declarative  default  defaults  defer  del  delay  demos  dense  dependencies  depthoffield  design  designsystem  designtokens  details  detection  developers  development  devtools  diagonal  diagrams  dialog  diamonds  diffs  dinosaurs  dir  direction  directions  disabled  disney  display  displaycontents  diversity  dl  doctype  documentation  dolls  dom  draft  drama  drop-shadow  dropcaps  dropdown  drupal  dumb  duotone  duotones  durability  ease-in  ease-out  easing  edge  editorconfig  editors  edwardtufte  effects  efficiency  element  elements  ellipse  ellipsis  em  email  embeds  emmet  emoji  emoticons  emotion  empathy  empty  ems  emulator  engineering  enhancement  entities  env  environment  environmental  environmentvariables  eot  ericmeyer  error  errors  es6  es2015  es2018  ethanmarcotte  ethics  events  evergreen  ex  example  excerpts  exclusions  experiments  explicit  extends  extensible  extension  facebook  fallback  falsehoods  fantasai  faq  faqs  favicons  featurequeries  features  feedback  feminism  file  fill  filter  filtering  filters  finally  firebug  firefox  fireworks  first-child  first-letter  first-line  fit  fittext  fitty  fix  fixed  fixtext  fizzbuzz  flat  flemish  flex-basis  flex-grow  flex-shrink  flexbox  flexible  flip  floats  flow-root  flowtype  fluid  focus  focus-ring  focus-visible  focus-within  foft  foit  foldable  foldables  font-display  font-face  font-feature-settings  font-size  font-smoothing  font-variant  font-variant-numeric  font-weight  fontdeck  fonts  footer  footnotes  forced-colors  format  formatting  forms  forward  fouc  foundation  fout  fr  fragmentation  frame  frameworks  free  fridayfrontend  frontend  fugu  full  fullbleed  fullscreen  fullstack  fullwidth  fun  functional  functions  funny  gadgets  gallant  galleries  games  gap  gatekeeping  gender  generated  generator  generic  geocities  ghost  gifs  git  github  glamerous  glitch  glyphs  gmail  goofus  google  googlefonts  gpu  gracefuldegredation  gradients  graphql  graphs  gray  greatdivide  greensock  grid-area  grid-auto-flow  grid-column  grid-gap  grid-row  grid-template-areas  grid-template-columns  grids  grouping  groupon  grunt  gsap  guidelines  guides  gulp  gutenberg  gutters  gzip  hack  hacks  hamburger  haml  handbook  hanging-punctuation  hardwareacceleration  harrypotter  harryroberts  has  hdtv  headers  headings  headlines  height  helvetica  hex  hidden  highcontrast  highcontrastmode  highlight  hints  hiring  history  holy  holygrail  horizontal  houdini  hover  hoverintent  howto  hr  hsl  hsla  html  html5  html6  http2  httponly  husky  hyphenate-limit-chars  hyphens  icons  idiomatic  ie  ie6  ie10  ie11  iframes  imagemaps  images  imgix  imperative  implicit  import  important  in-range  inception  inclusive  indeterminate  infographics  inherit  inheritance  initial  initial-letter  initial-scale  inline  inline-end  inline-flex  inline-start  inner  input  inputmode  inputs  ins  inset  inspiration  internationalization  interpolation  intersectionobserver  interviews  intrinsic  intuit  invalid  inverted  inverted-colors  ios  ipad  iphone  is  isolation  italics  itcss  jamstack  java  javascript  jenkins  jokes  jquery  justify  kbd  kerning  keyboard  keyframes  keyloggers  khoivinh  knockout  kss  lab  label  labels  landscapes  lang  language  last-child  layers  layout  lazyload  lch  leadership  leading  learning  legacy  length  less  letter-spacing  lettering  level4  library  ligatures  light-level  lightbox  lighthouse  limits  line-break  line-clamp  line-height  linear-gradient  linelength  lines  link  linkedin  links  lint  lint-staged  linters  lists  liveregions  loader  loaders  loading  local  local-link  localization  localstorage  locks  log  logic  logical  logical-properties  lolcats  lonelyplanet  luminosity  mac  magazine  mailchimp  maintainability  maintenance  management  maps  margins  mario  mariobros  mariokart  marker  markers  marquee  mask  mask-image  masks  masonry  matches  matchmedia  material  math  max  max-content  max-height  max-length  max-lines  max-width  mcss  media  mediaqueries  mediaquerylist  medium  meltdown  memes  memory  menu  menus  meritbadges  meta  metrics  microsoft  min  min-content  min-height  min-width  minification  minmax  mistakes  mittromney  mix-blend-mode  mix-width  mixin  mixins  mixmax  mma  mnemonics  mobile  mod  modal  modals  modernizr  modifiers  modular  modules  modulo  motion-path  mouse  movies  mozilla  multicol  multicolumns  multiple  multiplechoice  multiply  music  mythbusters  myths  names  namespacing  native  navigation  negative  nested  nesting  nestingdolls  netflix  neumorphism  newsletters  newspaper  newton  night  nike  node  normalize  not  notch  notifications  nowrap  npm  nth-child  nth-col  nth-last-child  nth-last-col  nth-of-class  nth-of-type  null  numbers  numeric  object-fit  object-position  offcanvas  offscreen  offset  offset-anchor  offset-distance  offset-path  offset-rotate  ol  onclick  only  oocss  opacity  opensource  opentype  opinionated  optimization  optimizelegibility  optional  options  order  organization  orphans  otf  out-of-range  outer  outline  outline-offset  output  overflow  overflow-anchor  overflow-wrap  overlapping  overlay  overscroll-behavior  pac-man  padding  page-break  page-break-after  page-break-before  page-break-inside  pagespeed  paint  painting  panic  paper  parallax  parent  particles  path  patternlibrary  patterns  percentages  percy  performance  perspective  phantom  photos  php  picture  pinch-zoom  pixels  placeholder  placeholder-shown  placeholders  planets  plugins  png  podcasts  pointer  pointer-events  polaroid  polyfills  polygon  port  position  postcss  powerpoint  pragmatism  pranks  pre  predictions  prefers-color-scheme  prefers-contrast  prefers-reduced-data  prefers-reduced-motion  prefers-reduced-transparency  prefixes  preload  preprocessors  presentation  prettier  pride  primer  print  priority  prism  privacy  process  professional  programming  progress  progressive  project  projectmanagement  promises  properties  proportional  pseudo-classes  pseudo-elements  punctuation  purgecss  push  pwa  px  qa  quality  quantity  query  questions  quickreference  quiz  quotes  racism  radial  radial-gradient  radio  rainbow  random  range  ratings  ratios  react  read-only  read-write  readability  readermode  reboot  recap  recipes  reduced-motion  redux  refactoring  reference  reflow  refresh  regex  regions  regression  relative  reload  rem  repaint  required  research  reset  resilient  resized  resizeobserver  resolution  resolutions  responsive  rest  resumes  retina  retro  revert  reviews  rgb  rgba  rhythm  ribbons  ripple  roadmaps  roadtrips  rolemodels  roles  root  rotate  rotating  rotation  round  rtl  ruby  rules  rulesets  russiannestingdolls  rwd  safari  safe  safe-area-inset  samesite  sass  satire  scalable  scale  scaled  scaling  schedules  school  scifi  scope  screenreaders  screenshots  script  scroll  scroll-behavior  scroll-margin  scroll-margin-top  scroll-padding  scroll-snap  scroll-snap-points  scroll-snap-type  scrollbars  scrollTo  search  security  select  selection  selectors  self  sem  semantics  seo  separators  sequential  serverless  serviceworkers  setproperty  settimeout  sexism  shadowdom  shadows  shape-image-threshold  shape-inside  shape-margin  shape-outside  shapes  shit  shortcuts  shorthand  sidebar  sidebars  simplebits  siri  sizes  skew  skills  skiplinks  slack  slanted  sliders  slides  slopy  smacss  small-caps  smileys  smooth  snap  snippets  snook  snow  software  solarsystem  sourcemaps  space  spacing  speaking  specification  specificity  specs  spectre  speculative  speed  spinners  splitting  spread  sprites  srcset  srgb  stacking  standards  stars  starterkit  starwars  states  statistics  status  sticky  stripe  stripes  study  style  styled-components  styleguide  stylelint  sub-pixel  subgrid  sublime  subpixel  subsetting  suffixes  suit  summary  sunset  support  supports  surveys  sustainability  susy  svg  switch  symbols  syntax  system  tabindex  table-layout  tables  tablular-nums  tabs  tabular-nums  tachyons  tailwind  target  taskforce  teaching  teams  teamwork  tech  technology  television  templates  terminal  testing  tests  tetris  text  text-align  text-decoration  text-decoration-skip-ink  text-decoration-thickness  text-fill-color  text-overflow  text-rendering  text-shadow  text-stroke  text-underline  text-underline-offset  text-wrap  textarea  textfill  textfit  themes  theming  this  tictactoe  tiles  tiling  time  timeline  timer  timetravel  timezones  tinting  tips  title  titles  tmbg  toggle  toggles  tokens  tools  tooltip  tooltips  toto  touch  tracking  training  transform  transform-origin  transforms  transition-delay  transitionEnd  transitions  translate  translation  transparency  transparent  trapezoids  travis  tricks  triggers  trigonometry  trim  troubleshooting  truncate  ttf  tumblr  tuning  tutorial  tutorials  twitch  twitter  type  typekit  typescript  typesetter  typography  ufocss  ui  ul  underline  underlines  underscores  units  universal  unix  unset  unused  urbanairship  usability  use  user-error  user-select  utf8  utilities  utility  utilties  utopia  ux  vader  valid  validation  values  vanilla  variablefonts  variables  vector  velocity  vendors  venn  versioning  vertical  vertical-align  vh  video  viewport  viewport-fit  virtualassistants  visibility  visited  visualization  visualtesting  vm  vmax  vmin  voiceover  vscode  vue  vw  w3c  warn  watchOS  wbr  wcag  webapps  webassembly  webcomponents  webfont  webfonts  webink  webkit  webp  webpack  westworld  where  white-space  white-space-collapse  whitespace  widows  width  will-change  windows  woff  word-break  word-wrap  wordpress  workflow  wraith  wrap-flow  wrap-through  wrapping  writing  writing-mode  writingmodes  wrong  x11  yarn  yepnope  youdontneed  youmightnotneed  z-index  zeldman  zen  zipcodes  zombies  zoom 

Copy this bookmark:



description:


tags: