recentpopularlog in

spaceninja : cssbasics   944

« earlier  
Frank Chimero · Redesign: Gridniking
I’m a big proponent of “just enough grid.” Grids are scaffolding, structures meant to help get the main building done. There is no need to overbuild, especially for this site. I am going to stay organized, but only just so.
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
2 days ago by spaceninja
Same HTML, Different CSS
I stumbled upon a project called “Evolution of Web Design”, which shows a web page about Nasa and space. The interesting thing is that there is a slider mimics how the design looked for each year (1993 - 2015). The idea is so inspiring and it challenged me to do the same, which is to get a component or a web page and try to do multiple designs for it without touching the HTML content.
fridayfrontend  css  cssbasics  csszengarden  headers 
2 days ago by spaceninja
Why JavaScript is Eating HTML | CSS-Tricks
In recent years, JavaScript developers have realized that by defining a page’s structure in JavaScript instead of in HTML (using frameworks such as React), they can simplify the development and maintenance of user interaction code that is otherwise much more complex to build. Of course, when you tell someone that the HTML they wrote needs to be chopped up and mixed in with JavaScript they don’t know anything about, they can (understandably) become frustrated and start asking what the heck we’re getting out of this.
fridayfrontend  javascript  cssbasics  html  html-in-js  react 
2 days ago by spaceninja
TIL: CSS Media Queries
Now we've come across the @media CSS rule but did you know that they are cool things you can do with it asides making your website responsive? The syntax of a media query is composed of an optional media type(such as print or screen) and any number of media feature expressions. In this article, I'll share some media features I previously didn't know about and hope you learn and share them too.
fridayfrontend  css  cssbasics  mediaqueries  prefers-color-scheme  reduced-motion  prefers-contrast  prefers-reduced-transparency  prefers-reduced-data 
2 days ago by spaceninja
Quick developer tools tip: simulating dark/light colour mode | Christian Heilmann
Newer operating systems come with a dark/light mode option and also a “prefers reduced motion” mode. This also affects our products and we should test them in these modes to make sure there is no glaring problem. There is also a high contrast mode in Windows which is an accessibility feature that should be on our radar to test for.

Now, to avoid having to change your whole OS to test for this, browser developer tools have simulators for these modes.
fridayfrontend  css  cssbasics  darkmode  prefers-color-scheme  edge  chrome  devtools 
2 days ago by spaceninja
Sticky Table of Contents with Scrolling Active States | CSS-Tricks
Say you have a two-column layout: a main column with content and a sidebar. Say it has a lot of content, with sections that requires scrolling. The sidebar column that is largely empty, such that you can safely put a position: sticky; table of contents over there for all that content in the main column. A fairly common pattern for documentation.
fridayfrontend  css  cssbasics  sticky  navigation 
2 days ago by spaceninja
Performance for Designers Part 2: Images - Calibre
Images are crucial to establishing a brand, portraying ideas, people and products. It’s hard to imagine the web without them. The importance of visuals cannot be understated, especially in industries such as news reporting, travel or e-commerce. Yet, images continue to be one of the most significant contributors to bad performance and user experience, accounting for 75% page weight. The average page weight is 7MB, 5.2MB of which is images.
fridayfrontend  cssbasics  performance  images 
2 days ago by spaceninja
Why the JAMStack is awesome (and a few reasons why its not) | Go Make Things
Last week, Nicole Sullivan replied to a “what’s your contrarian opinion” tweet with:

JAMStack is 99.9% branding and .1% substance. 😳😆

So… Nicole is awesome! She created OOCSS. She’s an amazing developer.

But I think she’s wrong about the JAMStack.
fridayfrontend  cssbasics  jamstack 
2 days ago by spaceninja
While You Weren't Looking, CSS Gradients Got Better | CSS-Tricks
Surprisingly, I recently discovered most people aren't even aware that double position for gradient stops is something that actually exists in the spec, so I decided to write about it.
fridayfrontend  css  cssbasics  gradients 
2 days ago by spaceninja
Understanding CSS Grid: Grid Template Areas
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  cssgrid  grids  layout  grid-template-areas 
2 days ago by spaceninja
Doctype Declaration in HTML
The doctype is the first row in every HTML document, and we use it automatically. This one line tells the browser what to expect and how to process the information.
fridayfrontend  css  cssbasics  html  doctype 
2 days ago by spaceninja
A Complete Guide to Links and Buttons
Let's take a look at the whole world of links and buttons, and all the considerations at the HTML, CSS, JavaScript, design, and accessibility layers that come with them. There are plenty of pitfalls and bad practices to avoid along the way. By covering it, we’ll have a complete good UX implementation of both elements.
fridayfrontend  css  cssbasics  buttons  links  javascript  accessibility 
2 days ago by spaceninja
Designing a ripple effect for UI feedback
In this tutorial, we will learn how to create a simple micro-interaction for the popular ripple effect to provide users with touch feedback. This effect was made popular by Google’s Material Design and can be used on virtually any kind of surface users can interact with.
fridayfrontend  css  cssbasics  javascript  ripple  material 
2 days ago by spaceninja
Styled Components vs. CSS Stylesheets
There’s a hot debate around standard CSS stylesheets vs. “CSS-in-JS” solutions when building in modern front-end frameworks. In this post, I’m going to weigh up the pros and cons of CSS vs. Styled Components and how it affects the way I write React components.
fridayfrontend  css  cssbasics  css-in-js  styled-components  emotion  react  javascript 
2 days ago by spaceninja
Magic Flip Cards: Solving A Common Sizing Problem
In this article, Dan Halliday reviews the standard approach to creating animated flip cards, and introduces an improved method which solves its sizing problem.
fridayfrontend  css  cssbasics  animation  cards 
9 days ago by spaceninja
Quick and Easy Dark Mode with CSS Custom Properties
Adding “dark mode” support to a website or app is becoming increasingly popular among developers, many of whom favour this setting themselves. Giving users a dark theme option can be beneficial for accessibility, as some people experience headaches or visual difficulties from excessively bright screens, or have trouble reading for long periods on a light background.
fridayfrontend  css  cssbasics  darkmode  customproperties  variables  prefers-color-scheme 
9 days ago by spaceninja
Using the CSS line-height Property to Improve Readability
In this article, you will learn about the CSS line-height property and how you can use it to create visually pleasant, readable text.
fridayfrontend  css  cssbasics  line-height  readability 
9 days ago by spaceninja
How I recreated a Polaroid camera with CSS gradients only - Sarah Fossheim
Earlier I remade the design of an old calculator entirely in CSS. I had a lot of fun making it, so I decided to do the same with a Polaroid camera this time.
fridayfrontend  css  cssbasics  polaroid  gradients 
9 days ago by spaceninja
Custom Styling Form Inputs With Modern CSS Features
It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a single line of JavaScript or extra HTML elements! It’s actually gotten easier lately than it has been in the past. Let’s take a look.
fridayfrontend  css  cssbasics  forms  checkboxes  radio  toggles 
9 days ago by spaceninja
HTML attributes to improve your users' two factor authentication experience - Twilio
In this post we will look at the humble <input> element and the HTML attributes that will help speed up our users' two factor authentication experience.
fridayfrontend  cssbasics  html  autocomplete  forms  2fa  security 
9 days ago by spaceninja
5 tips for making your app accessible
Accessible product development is the responsibility of all designers and developers. Building an inclusive experience: Why accessibility matters, introduced the greater customer base, gaining empathy, starting the testing process, and how to learn more about accessibility. In this post, we’ll look at 5 tips developers can use to build accessible apps:
fridayfrontend  cssbasics  accessibility  forms  labels  buttons  focus  landmarks 
9 days ago by spaceninja
Smooth Scrolling Sticky ScrollSpy Navigation –
Yesterday evening I was working on some documentation pages. The page layout is quite classic, as it consists of a content pane on the left and a sidebar navigation on the right. Looking for a way to make the page less dull I decided to add a few small things to it:

Smooth Scrolling when clicking internal links
A Sticky Navigation, so that the sidebar navigation always stays in view
A “ScrollSpy” to update the active state of the navigation
These three additions make the page more delightful, and best of all is: they’re really easy to implement! In this post I’ll lay out the details.
fridayfrontend  css  cssbasics  scroll  sticky  position  scroll-behavior 
9 days ago by spaceninja
300 CSS properties with examples
There are more than 500 CSS properties but the browsers only support around 300+ properties. That's why we have prepared the list of 300 CSS properties with values which the current browsers support. This is not just a list. You can explore and practice each property.
fridayfrontend  css  cssbasics 
9 days ago by spaceninja
Getting Fancy with position: sticky; | CSS-Tricks
Mike Solomon worked on a fancy scrollytelling post for Esquire and blogged about it. It has GIFs of each step along the way of figuring out not just position: sticky; but also using negative margins, wrapper divs, backgrounds, and even a smidge of JavaScript measuring to get it all right.
fridayfrontend  css  cssbasics  position  sticky  javascript 
9 days ago by spaceninja
Animating CSS Width and Height Without the Squish Effect
Being able to animate the CSS width and height properties would be super useful. Unfortunately at the moment it’s a sure-fire way to get your browser to scream in agony. In this 5 minute tutorial we’ll explore using the transform property to simulate animating the width of an element.
fridayfrontend  css  cssbasics  animation  transform  width  height 
9 days ago by spaceninja
Corner ribbon with trigonometry
I was never the best at trigonometry, so I was very proud finally cracking how to perfectly position a corner ribbon within a box with CSS.
fridayfrontend  css  cssbasics  trigonometry  math  ribbons  corner  badges 
9 days ago by spaceninja
CSS Positioning
Are you ready to start learning about how positioning works in CSS? This interactive article is for you.
fridayfrontend  css  cssbasics  position 
9 days ago by spaceninja
Breaking out with CSS Grid explained
This really nice technique for creating a full width image inside a constrained column was being shared around recently. However, what it didn’t do was explain why this technique works. As part of my attempt to remove all the “it just works magic” from these techniques I thought I would explain.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
9 days ago by spaceninja
Select an Element with a Non-Empty Attribute | CSS-Tricks
In a perfect world, we'd just remove the data-attribute from the HTML template when there is no value. But a lot of templating languages, on purpose, don't allow logic in them that would help us put-or-not-put that attribute entirely.
fridayfrontend  css  cssbasics  selectors  empty  not  attributes 
9 days ago by spaceninja
Apples and Oranges: All Screen Readers are not Created Equal
Its time to talk about screen reader software. For the uninitiated, a low- or no-vision web user leverages screen reader software to read the contents of a website out loud. The listener then chooses how to interact with the content, press links, and input information into forms. There are three major screen readers on the market right now, and the experience that they offer are very different. As the title suggests, to understand just one screen reader does not mean you understand all screen readers.
fridayfrontend  accessibility  cssbasics  screenreaders 
9 days ago by spaceninja
Light and dark themed SVG favicon using the CSS prefers-color-scheme media feature
In this article you’ll learn how to use an SVG as a favicon for your website, considering the light and dark theme detection in the browser using the CSS prefers-color-scheme media feature.
fridayfrontend  css  cssbasics  svg  prefers-color-scheme  darkmode  favicons 
9 days ago by spaceninja
Get Moving (or not) with CSS Motion Path
CSS Motion Path is now in Firefox, new Edge, Chrome, and Opera (and other Blink-based browsers). That means each of these browsers supports a common baseline of offset-path: path(), offset-distance, and offset-rotate. To celebrate, let’s review the basics of what is supported, explain some of the specifics when a path is applied, and also highlight the possibilities of offset-anchor.
fridayfrontend  css  cssbasics  animation  motion-path  offset-path  offset-distance  offset-rotate  offset-anchor 
9 days ago by spaceninja
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more straightforward to make one than you might think and only requires the trifecta of HTML, CSS and JavaScript. Let’s make one together!
fridayfrontend  css  cssbasics  html  javascript  countdown  timer  svg 
9 days ago by spaceninja
Tiny Web Stacks
A lot of my day to day work involves design systems. These can get pretty complex, with a lot of moving parts. Perhaps as a reaction to that, I’ve grown to love small, simple tech stacks for those occasional side projects, micro-sites and one-off experiments that don’t demand as many features or justify such diligent maintenance.
fridayfrontend  parcel  eleventy  javascript  build  cssbasics 
9 days ago by spaceninja
Intrinsic Sizing In CSS
In CSS, we have two ways of sizing, intrinsic and extrinsic. The latter is the most common one which means using fixed values for the width or height of an element. The first one means that the sizing of an element depends on its content size.

Through this article, I will explore each of the intrinsic values and see how we can get the benefit of them. Also, I will explain how to use those intrinsic values in combination with CSS grid, and other CSS properties.
fridayfrontend  css  cssbasics  sizes  grids  cssgrid  layout 
16 days ago by spaceninja
Roles and relationships
Sometimes after dabbling in gateway ARIA semantics like aria-current, landmark roles, and link-button hybrids, a budding accessibility practitioner might find themselves experimenting with more serious roles like menu, listbox, or even treegrid. These are tantalizing, powerful patterns that allow you to create experiences that are not supported by only vanilla HTML. Unfortunately, they are also brittle; even small mistakes in using these roles can take a user on a very bad trip.
fridayfrontend  cssbasics  accessibility  aria  roles 
16 days ago by spaceninja
How Do You Do max-font-size in CSS? | CSS-Tricks
CSS doesn't have max-font-size, so if we need something that does something along those lines, we have to get tricky.
fridayfrontend  css  cssbasics  font-size  max 
16 days ago by spaceninja
CSS resize none on textarea is bad for UX - Catalin Red
You must really hate your users if textarea {resize: none} is in your stylesheets. CSS resize none is bad for UX and you already know it:
fridayfrontend  css  cssbasics  textarea  accessibility 
16 days ago by spaceninja
Operating System and Browser Accessibility Display Modes - The A11Y Project
Most computers, laptops, tablets, smartphones, and web browsers have specialized tools to help people read and take action on the content they display. Some of these tools are display modes, which are pre-defined visual configurations you can tell your device to use.

Five such modes are Dark Mode, Increased Contrast Mode, Inverted Colors Mode, Reduced Motion Mode, and High Contrast Mode. Following is an explanation of each of these mode, who can benefit from it, how to enable it on your device or browser (if supported), and how to work with it in code.
fridayfrontend  accessibility  cssbasics  darkmode  contrast  inverted  reduced-motion 
16 days ago by spaceninja
What does "revert" do in CSS?
The revert value in CSS "resets" a property back to it's inherited value, only going as far back as the UA stylesheet. That's critical, as it won't reset a <p> to inline, for example, because a <p> is a block-level element as set in the UA stylesheet.
fridayfrontend  css  cssbasics  revert 
16 days ago by spaceninja
You don’t need a media query for that — #2 Responsive Columns
Using CSS grid we can create a list of cards that automatically fit and resize to the available space with just three lines of CSS. That’s it! A small amount of CSS with CSS Grid, and you can create fully responsive, flexible layouts with an unknown infinite number of cards without the need for media queries.
fridayfrontend  css  cssbasics  layout  grids  cssgrid  responsive 
16 days ago by spaceninja
Set Type on a Circle... with offset-path
Here's some legit CSS trickery from yuanchuan. There is this CSS property offset-path. Once upon a time, it was called motion-path and then it was renamed. I sort of rolled my eyes at the time, because the property is so obviously for animating things along a path. But you don't have to use it for animation, hence the rename, and this example proves it!
fridayfrontend  css  cssbasics  offset-path  typography 
16 days ago by spaceninja
Optimising SVGs for the Web
Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. But plenty of times I’ve opened up a web project and found that SVG assets could be made significantly smaller with some straightforward optimisations. In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.
fridayfrontend  cssbasics  svg  optimization 
16 days ago by spaceninja
TIL The @FirefoxDevTools tells you which elements have scroll overflows!
I've spent countless hours debugging why I'm seeing two scrollbars in the past, this is a life saver!
fridayfrontend  css  cssbasics  scroll  firefox  devtools 
23 days ago by spaceninja
CSS Grid Template Areas In Action
Since CSS Grid became supported in the major browsers back in March 2017 (Almost three years ago), I started using it in my personal and client projects, of course, with a proper fallback for non-supporting browsers. I also made a tool called grid-to-flex which generates a flexbox fallback for a grid.

However, I have never used grid-template-areas in my projects even though I wrote about it briefly. To learn about well, I decided to write about it and explain to you what I’ve learned. Let’s dive in!
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
23 days ago by spaceninja
What's the Difference Between Width/Height in CSS and Width/Height HTML attributes?
To reiterate, presentational attributes on elements that accept them (e.g. <img>, <iframe>, <canvas>, <svg>, <video>) are a good idea. They are fallback sizing and sizing information as the page is loading. They are particularly useful on <svg>, which may size themselves enormously in an awkward way if they have a viewBox and lack width and height attributes. Browsers even do special magic with images, where the width and height are used to reserve the correct aspect-ratio derived space in a situation with fluid images, which is great for a smooth page loading experience.
fridayfrontend  css  cssbasics  html  width  height 
23 days ago by spaceninja
Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords
For a long time, the only thing I knew about these keywords was that they’re used for resetting styles in CSS. But if all of those keywords are a kind of reset, then why are there so many? What exactly are the differences between them? I decided to explore these three keywords deeply, to fully understand, once and for all, the differences between these three common keywords values.
fridayfrontend  css  cssbasics  initial  inherit  unset  reset 
23 days ago by spaceninja
Bad accessibility equals bad quality
When I talk about web accessibility at meet-ups and conferences, it’s safe to assume that at least one person will ask me something like “Yeah, accessibility sounds nice, but how many people are actually disabled? How many of my users are blind? And why would a blind person visit my website?”
fridayfrontend  cssbasics  accessibility 
23 days ago by spaceninja
The Best Color Functions in CSS?
The good news is that there are color features already specced as a CSS Level 4 module that help with this: Lab and LCH. Check out the example from Adam where the colors in Lab have values that reflect their actual lightness much more accurately to how we perceive it.
fridayfrontend  css  color  hsl  lab  lch  gray  cssbasics 
23 days ago by spaceninja
Timeless Web Dev Articles | CSS-Tricks
Pavithra Kodmad asked people for recommendations on what they thought were some of the most timeless articles about web development that have changed their perspective in some way. Fun! I'm gonna scour the thread and link up my favorites (that are actually articles, although not all of them are super directly related to web dev).
fridayfrontend  cssbasics  css  html  oocss  responsive 
29 days ago by spaceninja
Fixed Table Headers | Adrian Roselli
Standard HTML tables are not that complex. But when developers are unfamiliar with HTML or let third-party libraries generate them, they are usually an inaccessible over-engineered mess. One of the more common reasons I hear developers reach for them is because they want fixed headers. For simple tables, that is mostly unnecessary.
fridayfrontend  cssbasics  tables  fixed  sticky 
29 days ago by spaceninja
Centering checkboxes with multi-line labels
This solution always centers the checkbox with the first line of text, no matter the text size or checkbox size.
fridayfrontend  css  cssbasics  checkboxes  forms  alignment 
29 days ago by spaceninja
The Deal with the Section Element | CSS-Tricks
Point is: don't just use <section> and assume you're doing something good for accessibility. Its purpose is pretty limited and only useful for establishing landmarks. Even then, you aren't helping that much.
fridayfrontend  cssbasics  html  section  article  div  accessibility 
29 days ago by spaceninja
Should you self-host Google Fonts? | Tune The Web
To answer the question in the title of this post: yes it's better to self-host as the performance gains are substantial. Of course your mileage may vary as it will depend on your exact site so test, test, test, but I would imagine it would be the better option, from a performance perspective, for most sites.
fridayfrontend  cssbasics  css  typography  fonts  google  googlefonts  performance 
29 days ago by spaceninja
Overcomplicatin’ | Brad Frost
It’s funny how we find ways to overcomplicate things. It’s also funny how seemingly simple things can end up being crazy complicated. If there’s a moral to this story it’s: can you find a simpler way to accomplish whatever you’re doing?
fridayfrontend  cssbasics  css  pointer-events  counter-increment  counters 
29 days ago by spaceninja
A Trick That Makes Drawing SVG Lines Way Easier | CSS-Tricks
Figuring out the length of the path is the trick, which fortunately you can do in JavaScript by selecting the path and doing pathEl.getTotalLength(). It'll probably be some weird decimal. A smidge unfortunate we can't get that in CSS, but c'est la vie.

Here's the trick!

You don't have to measure the length of the path, because you can set it.
fridayfrontend  css  cssbasics  svg 
29 days ago by spaceninja
Material design style click effects with pointer events and CSS Custom Properties – Ben Frain
These days I’m getting a kick remaking things with more modern approaches that used to be problematic. Here’s a little example: a material design style click/selection. What I mean is where you have a button and where you click it creates an effect that starts from the point you clicked/touched.
fridayfrontend  css  cssbasics  material  click  javascript  animation 
29 days ago by spaceninja
Animate Text on Scroll
We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo.
fridayfrontend  cssbasics  css  animation 
29 days ago by spaceninja
How to Animate on the Web With Greensock | CSS-Tricks
There are truly thousands of ways to animate on the web. We’ve covered a comparison of different animation technologies here before. Today, we’re going to dive into a step-by-step guide of one of my favorite ways to get it done: using GreenSock.
fridayfrontend  cssbasics  css  animation  greensock  javascript  gsap 
29 days ago by spaceninja
Staggered Animations with CSS Custom Properties - Cloud Four
Movement in nature doesn’t happen all at once. Imagine a flock of birds taking off, raindrops splashing on the ground, or trees bending in the wind. The magic of these moments comes from many small movements overlapping and converging. I wanted to bring this natural movement into my web animations.
fridayfrontend  cssbasics  css  customproperties  variables  animation 
29 days ago by spaceninja
What it means to be a front-end developer in 2020 (and beyond) | Layout
​​While that haystack of jobs tends to grow over the years, the guiding light we have as front-end developers hasn’t changed all that much. Our core responsibility is still taking care of users who use web browsers on devices. So we have to fetch some data. That’s cool, we’re doing it in service to building a fast, semantic, accessible page to serve our user’s needs. So we need to build a design system. That’s cool, we’re doing it to build an understandable interface for our users capable of evolving without creating an inconsistent mess. So we have to learn some new unfamiliar technology. Well, it’s our job to keep a watchful eye and make sure that new thing is ultimately there to better our site for users. 
fridayfrontend  cssbasics  frontend  titles 
29 days ago by spaceninja
Adding separators to layouts with CSS-in-JS
The TL;DR is to combine :not & :nth-child with a pseudo-element and props which define the number of columns you need.
fridayfrontend  css  cssbasics  css-in-js  not  nth-child  flexbox  layout  grids  cssgrid 
5 weeks ago by spaceninja
Things you can do with a browser in 2020
It's almost 2020, and browsers can do amazing stuff. This repo contains a non-exhaustive list of less-known features implemented in browsers today. This list isn't intended for a technical audience; instead it wants to be a "I don't know we could that in a browser" list. In many cases, listed features aren't yet part of the standard, and may only be available on certain browsers or configurations.
fridayfrontend  browsers  cssbasics  api  prefers-color-scheme  reduced-motion  payment-request  webshare  sharing  push  serviceworkers  pwa  pictureinpicture 
5 weeks ago by spaceninja
Fun with CSS Motion Path
With the new CSS Motion Path module, we can create fancy path animations using only CSS! I’ve created a couple of fun little animations that play around with these properties – we’ll walk through some of the techniques involved in this article.
fridayfrontend  css  cssbasics  animation  motion-path 
5 weeks ago by spaceninja
CSS-Only Carousel
It's kind of amazing how far HTML and CSS will take you when building a carousel/slideshow.
fridayfrontend  css  cssbasics  carousel 
5 weeks ago by spaceninja
Responsive design glossary
The responsive design glossary explains the meaning of the many terms used in responsive design and development. It's a practical reference for anyone getting started with responsive design and development.
fridayfrontend  css  cssbasics  layout  responsive 
5 weeks ago by spaceninja
Using easing for more than just CSS transitions | Kilian Valkhof
For animations and transitions these easing curves are built into CSS. But there are other parts of our UI that also benefit from using easing curves: gradients and box shadows. Luckily there are ways to approximate these for both.
fridayfrontend  css  cssbasics  easing  gradients  box-shadow 
5 weeks ago by spaceninja
Multi-Thumb Sliders: General Case
The first part of this two-part series detailed how we can get a two-thumb slider. Now we'll look at a general multi-thumb case, but with a different and better technique for creating the fills in between the thumbs. And finally, we'll dive into the how behind the styling a realistic 3D-looking slider and a flat one.
fridayfrontend  cssbasics  css  forms  sliders  gradients 
5 weeks ago by spaceninja
Re-creating the ‘His Dark Materials’ Logo in CSS
I love the new BBC adaptation of Philip Pullman’s His Dark Materials trilogy of novels. There’s also some pretty nice graphic design to appreciate. I’m a sucker for a beautiful title sequence (I need to watch the opening credits of Game of Thrones in full, every single time), and this one certainly fits the bill, as well as the striking logo. After watching a recent episode, I thought I’d have a go at re-creating this logo with CSS!
fridayfrontend  css  cssbasics  layout  typography  clip-path 
5 weeks ago by spaceninja
How to Stack Elements in CSS | CSS-Tricks
If you want to create fantastic and unique visual experiences on the web, you will eventually need two elements to overlap or exist in the same place. You may even just need them to be positioned near or next to each other. Let's go over two different ways to accomplish this, one with the position property and one with CSS Grid.
fridayfrontend  css  cssbasics  layout  stacking  position  cssgrid  grids 
5 weeks ago by spaceninja
Min and Max Width/Height in CSS
In this article, we will go through the maximum and minimum CSS properties for width and height, and to explain each one in a detailed way with possible use cases and tips.
fridayfrontend  css  cssbasics  width  height  max  min  min-width  min-height  max-width  max-height 
5 weeks ago by spaceninja
A short history of body copy sizes on the Web
It’s hard to pick a font size that is just right, especially as you try to adapt to different screens and scenarios. Looking at the recent history of how we got here can give us some perspective.
fridayfrontend  css  cssbasics  typography 
5 weeks ago by spaceninja
How Auto Margins Work in Flexbox
Now I want to push that "Menu" item to the far right. That's where auto margins come in. If I put a margin-left: auto; on it, it'll push as far away as it possibly can on that row.
fridayfrontend  css  cssbasics  cssgrid  flexbox  grids  layout  auto  margins 
5 weeks ago by spaceninja
5 things in web development I learned this year
This year has been weird but good, after suddenly becoming the most experienced frontend developer at the company I work at, Matise, I really had to step it up. In this article I've listed 5 things I learned this year concerning web development.
fridayfrontend  css  cssbasics  mix-blend-mode  blendmodes  filters  clamp  line-clamp  variables  customproperties  text-stroke  clip-path 
5 weeks ago by spaceninja
The Difference Between <section> and <div> Element
The <div> is one of the most generic elements in HTML, but is it okay to use it always? Well, it depends on our needs because nowadays we have more items with meaning.
fridayfrontend  cssbasics  html  section  div  semantics 
5 weeks ago by spaceninja
The Auto-Flowing Powers of Grid's Dense Keyword
What's actually happening is that Grid takes the explicit placement of the featured article and places it where there is enough available space for it to take up the second and third columns after the articles preceding it in the source. That just so happens to be the second row and there just so happens to be an empty space in front of it because there are no other articles preceding it in the HTML. Grid places the featured article as its told and flows the rest of the items accordingly.
fridayfrontend  css  cssbasics  cssgrid  grids  layout  dense 
5 weeks ago by spaceninja
Does CSS affect screen readers?
The short and rather vague answer is that screen readers are affected by certain CSS properties. Different screen readers behave differently, and a screen reader might even have several methods of presentation that the user can choose from that alter the effects of CSS. Here’s a handful of examples:
fridayfrontend  css  cssbasics  accessibility  screenreaders 
5 weeks ago by spaceninja
About the HTML <hr> Element
The <hr> or Horizontal Rule element defines a thematic break in content. If you have paragraph elements and you want to separate them semantically (e.g., you change the topic between them), you can use this element.
fridayfrontend  cssbasics  html  hr 
5 weeks ago by spaceninja
What Is JavaScript Made Of?
During my first few years of using JavaScript, I felt like a fraud. Even though I could build websites with frameworks, something was missing. I dreaded JavaScript job interviews because I didn’t have a solid grasp on fundamentals.

Over the years, I’ve formed a mental model of JavaScript that gave me confidence. Here, I’m sharing a very compressed version of it. It’s structured like a glossary, with each topic getting a few sentences.
fridayfrontend  javascript  cssbasics 
6 weeks ago by spaceninja
« earlier      
per page:    204080120160

Copy this bookmark:

to read