recentpopularlog in

abberdab : css   342

« earlier  
3 Ways to Create Angled Edges With SVG
In this tutorial you’ll learn three ways to create easy angled edges using SVG. To begin with we’ll use an inline SVG, then we’ll use an SVG background on a pseudo-element, before finishing off with a Sass mixin. Let’s dive in!
css  svg  masks  sass  tutorial 
august 2018 by abberdab
HTMLBook
Let’s write books in HTML! HTMLBook is an open, XHTML5-based standard for the authoring and production of both print and digital books. HTMLBook is built on the following premises:

Books are timeless. The basic “book” structure has persisted for hundreds of years and will continue to persist for our lifetimes, be it in digital or print form.
HTML is the markup language of the world for the foreseeable future.
Single-source document processing will remain valuable for the foreseeable future.
semantics  ebooks  html5  epub  css  naming-conventions  reference 
august 2018 by abberdab
Headings with Side Lines
Fun with heading elements and pseudo-element side lines in Sass.
css  heading  rules  style 
july 2018 by abberdab
Duotone filtering w/ CSS variables 😎🌈
Was playing with mix-blend-mode to create different duotone filters. Then I thought it might be cool to have a handy selector wheel to try out different filters 🌈

So here it is! A duotone filtering tester using CSS variables. The inner ring is the lightening color whilst the outer is the darkening color 👍

To change the colors, adjust the colors variable in the pug code.

Enjoy!
css  color  colorpalettes  duotone  filters  interface  interactive  images  photography 
july 2018 by abberdab
Cards
Other component articles have already explored the advantages of using lists to enhance assistive technology users' experience. Briefly:
Screen readers provide shortcuts to lists and between list items
Screen readers enumerate the items so users know how many are available
a11y  accessibility  css  design  cards  lists  components  focus  focus-within  layout  flexbox  grid  clip 
june 2018 by abberdab
Easier scrollytelling with position sticky
Why use Sticky?
The short version: when using the sticky graphic pattern, you need a bunch of JavaScript to handle the stuck state, dimensions, etc.. With this approach, that is all done with (minimal) CSS. This means less bugs, less maintenance, and more happiness.
animation  css  javascript  sticky 
june 2018 by abberdab
russellgoldenberg/enter-view: Dependency-free JavaScript library to detect when element enters into view
Dependency-free JavaScript library to detect when element enters into view. Useful for triggering sticky behavior and others.
css  javascript  scrolling 
june 2018 by abberdab
Carbon Design System
What is the Carbon Design System?
Carbon is the design system for IBM Cloud products. It is a series of individual styles, components, and guidelines used for creating unified UI.
styleguide  component-libraries  opensource  css  html  components 
june 2018 by abberdab
Aspect Ratio Cells with CSS Grid Layout by Michelle Barker on CodePen
I found myself recently building a layout in CSS Grid that would have previously needed JavaScript in order to work. It’s a layout based on equal sized square grid cells, where grid items could span one or two cells on the row and/or column axis. In other words, the grid cells needed to maintain an aspect ratio
css  grid  layout  practical  examples  aspect-ratios 
june 2018 by abberdab
The Slow Death of Internet Explorer and the Future of Progressive Enhancement · An A List Apart Article
Chrome, Opera, and Firefox ship new features constantly. Edge and Safari eventually catch up. Internet Explorer, meanwhile, has been all but abandoned by Microsoft, which is attempting to push Windows users toward Edge. IE receives nothing but security updates. It’s a frustrating period for client-side developers. We read about new features but are often unable to use them—due to a single browser with a diminishing market share.
progressive-enhancement  ie  crossbrowser  fallbacks  layout  css  feature-detect  feature-queries 
may 2018 by abberdab
The backdrop-filter CSS property | CSS-Tricks
I had never heard of the backdrop-filter property until yesterday, but after a couple of hours messing around with it I’m positive that it’s nothing more than magic. This is because it adds filters (like changing the hue, contrast or blur) of the background of an element without changing the text or other elements inside.

Take this example where I’ve replicated the iOS notification style: see how the background of each of these boxes are blurred but the text isn’t?
background-images  filters  css  blur 
may 2018 by abberdab
Introduction · Front-End Developer Handbook 2018
This guide for front-end folks covers HTML, CSS, and JavaScript and lists learning resources and development tools.
css  html  javascript  front-end  front-end-design  best-practices 
april 2018 by abberdab
Simple Swipe With Vanilla JavaScript | CSS-Tricks
I used to think implementing swipe gestures had to be very difficult, but I have recently found myself in a situation where I had to do it and discovered the reality is nowhere near as gloomy as I had imagined.

This article is going to take you, step by step, through the implementation with the least amount of code I could come up with. So, let's jump right into it!
javascript  css  gallery  slider  sliders  slideshow  touchscreen  mobile 
april 2018 by abberdab
Archetype, Digital Typography Design Tool by Our Own Thing, using Google web fonts
Create type pairs, set a modular scale, tweak spacing between a basic type ramp of H1-H6 and paragraphs.

A nice alternative to Typecast when all you want to do is choose some fonts (Google or local fonts only) and test your typographic pairing and grid — no layout to confuse things.
css  design  fonts  tools  typography  google 
january 2018 by abberdab
Advanced image alignments with CSS Grid: Full Bleed and beyond
"An experiment to mix regular floated images and full-bleed / full-bleed variant images within the same layout using a combination of old layout methods and CSS Grid." from Morten Rand-Hendriksen
image  css  alignment  floats  grid  layout  blog  article  design 
january 2018 by abberdab
Eric's Archived Thoughts: Generating Wireframe Boxes with CSS and HTML5
I thought about taking screenshots and Photoshopping wireframe boxes over the various layout pieces, but then I wondered: could I overlay boxes on the live page with CSS? Or perhaps even create and overlay them with nothing but some declarations and a wanton disregard for the sensibilities of god or man?
css  design  wireframes  experiments  examples  ia 
november 2017 by abberdab
Using CSS Grid: Supporting Browsers Without Grid – Smashing Magazine
When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.
In this article, I explore approaches to dealing with browser support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?
css  grid  fallbacks  browser-support  polyfills  strategy  browsers  testing  crossbrowser 
november 2017 by abberdab
A Responsive Accessible Table | Adrian Roselli
After writing (again) that it is ok to use tables, and after providing quick examples of responsive tables, I received questions about why I used some of the code I did. I am going to attempt to break it down to give you enough information to make your own responsive, accessible table because my example will likely not fit your case precisely (or closely?).
a11y  css  html  responsive  tables  accessibility 
november 2017 by abberdab
The Best Way to Implement a "Wrapper" in CSS | CSS-Tricks
Sometimes the first bit of HTML we write in a new document is an element that wraps everything else on the page. The term wrapper is common for that. We give it a class, and that class is responsible for encapsulating all visual elements on the page.

I've always struggled to with the best way to implement it. I found a related thread on StackOverflow that has more than 250,000 views, so obviously I'm not the only one wondering! I'll sum up my latest thoughts in this article.
css  wrapper  container  best-practices 
october 2017 by abberdab
Create A Basic Portfolio Filtering System by Brian Haferkamp on CodePen
One of the things I'm often looking for but can't find is a basic filtering system for portfolio items. It seems like the ones I find online are too complicated or bloated. They're trying to do way too much. So I created a basic framework for a portfolio filtering system that works great as-is. You can also fork it and add any bells and whistles you want.
codepen  portfolio  filtering  jQuery  gallery  images  css  design  grid 
october 2017 by abberdab
Web truths: CSS is not real programming | Christian Heilmann
There is truth to the fact that working with CSS is not traditional programming. There is also truth that CSS has its language faults and that some things are much harder than they should be. That is the case with any standardised language, though. CSS is a way to describe what an interface should be like. It is not the implementation of said interface in a programmatic fashion, like, for example, the Canvas API. That CSS is not like a traditional programming language is by design.
css  programming  article  education  progressive-enhancement 
september 2017 by abberdab
Breaking the Grid - daverupert.com
As a Front-End developer nothing bothers me more than seeing an unexpected horizontal scrollbar on a website. While building out a checkout layout with CSS Grid I was surprised to find something mysterious was breaking the container. I thought Grid sort of auto-solved sizing.

Eventually I found two ways to break CSS Grid. As it would happen, I was doing both in the same layout — overflow-x and form elements.
forms  css  grid  layout  troubleshooting  hacks  overflow 
september 2017 by abberdab
Performant Web Animations and Interactions: Achieving 60 FPS - Milliseconds Matter
Silky smooth interactions are critical for providing a natural-feeling application. The devil is in the details, and ill-performant web animations feel awkward, “janky”, and, above all, slow. Developers often invest quite a bit of time to reduce first page loads by even a few milliseconds, but forget to consider the impact of the interactions that follow.
css  animation  performance  optimization 
august 2017 by abberdab
From Darkness to Light: Color Versatility Using Tints, Tones, and Shades | Viget
In my last article, I wrote about how using more specific names can be useful when referencing colors. Several people shared how this is doubly useful when mapping to SASS variables—and I agree. This time around I want to share how to use more specific color names when applying lighter and darker values through tints, tones, and shades and how this can be further helpful for color reference.
color  design  sass  css  naming  naming-conventions  tints  tones  shades  colorpalettes 
august 2017 by abberdab
scroll-behavior - CSS | MDN
With this property — The scrolling box can scroll in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.
scrollbars  scrolling  behavior  animation  ux  css  web  development 
august 2017 by abberdab
WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users
There are occasional instances where content should be made available to screen reader users, but hidden from sighted users. In most cases, if content (particularly content that provides functionality or interactivity) is important enough to provide to screen reader users, it should probably be made available to all users.
accessibility  css  usability  skip-links  a11y 
august 2017 by abberdab
CSS Architecture for Design Systems | Brad Frost
Nice example of collaboration guidelines for working on css to scale.
architecture  bem  css  design 
july 2017 by abberdab
A Comprehensive Guide to Font Loading Strategies—zachleat.com
`font-display` is available on now-stable Chrome 60!

CSS-only FOUT is here!!
css  fout  webfonts  crossbrowser  font-stacks  font-loading 
july 2017 by abberdab
CSS Grid Layout Slideshow | Demo 1 | Codrops
Demo of a fantastic idea for a portfolio layout or moodboard. Sweet.
css  grid  slideshow  moodboard  portfolio  ideas  inspiration 
july 2017 by abberdab
CSS Grid Layout Slideshow | Codrops
Fantastic idea for a portfolio layout using grid. Or for presenting moodboards! Sweet.
css  layout  grid  portfolio  ideas  inspiration  moodboard 
july 2017 by abberdab
Connect: behind the front-end experience
We recently released a new and improved version of Connect, our suite of tools designed for platforms and marketplaces. Stripe’s design team works hard to create unique landing pages that tell a story for our major products. For this release, we designed Connect’s landing page to reflect its intricate, cutting-edge capabilities while keeping things light and simple on the surface.
grid  fallbacks  feature-detect  feature-queries  illustration  animation  css  design 
june 2017 by abberdab
Common UI Patterns — Grab & Go Patterns
A collection of built patterns to use as starting points, complete with fallbacks. Remember that you do not need to use these for full page layout, they could as easily be a small component in a design.
css  grid  fallbacks  browser-support  crossbrowser 
june 2017 by abberdab
Aspect Ratio Boxes | CSS-Tricks
I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn't particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz's Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave's Ol' Padded Box.

Let's go on a little journey through this concept, as there is plenty to talk about.
css  ratio  aspect  aspect-ratios 
june 2017 by abberdab
CSS Shapes, clipping and masking – and how to use them ★ Mozilla Hacks – the Web developer blog
The release of Firefox 54 is just around the corner and it will introduce new features into an already cool CSS property: clip-path.

clip-path is a property that allows us to clip (i.e., cut away) parts of an element. Up until now, in Firefox you could only use an SVG to clip an element:

But with Firefox 54, you will be able to use CSS shapes as well: insets, circles, ellipses and polygons!
clip-path  css  masks  firefox 
june 2017 by abberdab
Hiswe/vh-check: ios-vh buggyfill
Safari iOS has a bug about computing the CSS 100vh value.

This script will measure the difference and put it in a CSS var.
iOS  bugfix  viewport-units  css  crossbrowser 
june 2017 by abberdab
Fun with Viewport Units | CSS-Tricks
Best use cases and ideas for using viewport units, including typography ideas and more!
css  layout  responsive  typography  hero-images  footer  aspect-ratios  scrollbars  scrolling 
june 2017 by abberdab
Easing Linear Gradients | CSS-Tricks
Linear gradients are easy to create in CSS and are extremely useful. As we'll go through in this article, we can make them visually much smoother by creating them with non-linear gradients. Well, non-linear in the easing sense, anyway!
css  design  gradients 
june 2017 by abberdab
HTML 5.2: 4.13. Common idioms without dedicated elements
HTML does not have a dedicated mechanism for marking up subheadings, alternative titles or taglines. Here are the suggested alternatives. h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection
css  headings  subheadings  typography  semantics 
june 2017 by abberdab
FlexBox cheatsheet
A really nice example of its type — clicking on the properties demonstrated copies them to the clipboard!
cheatsheet  flexbox  css  reference 
june 2017 by abberdab
text-decoration-skip - CSS | MDN
The text-decoration-skip CSS property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.
css  typography  text-decoration 
june 2017 by abberdab
Style Guide Guide | Style Guide Guide
Mr. @brad_frost just released Style Guide Guide, a boilerplate for creating a reference site for your design system.
css  design  styleguide  boilerplate  system  patterns 
may 2017 by abberdab
Advanced vertical margins – Hacker Noon
How the adjacent sibling selector can solve complex design requirements while maintaining readable CSS.
css  typography  vertical-rhythm  margins 
may 2017 by abberdab
Fun places to learn CSS Layout -  Part 1: Flexbox - Stéphanie Walter, Visual and UX Designer, Mobile enthusiast
Come nice people built quite a few and even fun tools to help you learn and master [flexbox] so that you will be ready when they will be supported everywhere.
css  flexbox  resources  tutorials  cheatsheet 
may 2017 by abberdab
Design Better Data Tables – uxdesign.cc
Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design structures, interaction patterns, and techniques to help you design better data tables.
css  data  design  tables  ux 
may 2017 by abberdab
Stephanie Liu
When I was TA-ing a Responsive Web Design class for Girl Develop It several weeks ago, a great question was raised as to how to keep video embeds from losing their aspect ratio responsively. So I thought I’d do a quick post on how to maintain embed aspect ratios in a responsive site. And maybe I could even brush some dust off the accepted solution to this problem, especially now that we have CSS Grid ✨.
css  layout  video  responsive  design  development  methods  article  aspect  ratio  grid 
may 2017 by abberdab
Typography Inspector - Chrome Web Store
Typography Inspector analyses the typography on your site and helps you improve it.

Use Typography Inspector to show how close your line width and line height are to the recommended setting for an average paragraph. It can also show you the typographic color of your text elements.
css  typography  chrome  extension  tools  utilities 
april 2017 by abberdab
« earlier      
per page:    204080120160

Copy this bookmark:





to read