recentpopularlog in

garrettc : css   659

« earlier  
Diagonal Containers in CSS
In this tutorial, we'll take a look at how to create full-width, diagonal sections in CSS using the clip-path property.
css  webdesign  inspiration  webdevelopment 
10 hours ago by garrettc
Art Direction For The Web Using CSS Shapes
"Andy Clarke expands on the topic of 'Art Direction for the Web' with CSS Shapes to create exciting and inspired new design ideas."
webdesign  css  inspiration  webdevelopment  shapes 
10 hours ago by garrettc
Split
Materials and tools; client and server; declarative and imperative; inclusion and privilege.
css  culture  design  html  javascript  worldwideweb  creativity 
6 days ago by garrettc
How To Align Things In CSS
"It can be quite a challenge to align things with CSS. Rachel Andrew takes a look."
css  grid  layout  flexbox  webdesign  webdevelopment 
8 days ago by garrettc
Color accessibility: tools and resources to help you design inclusive products, by Stéphanie Walter - UX designer & Mobile Expert.
All the tools, tips and resources your need to build and check the color accessibility and color constrast of digital products!
webdevelopment  webdesign  css  javascript  userexperience  reference 
9 days ago by garrettc
Digging Into The Display Property: The Two Values Of Display — Smashing Magazine
We talk a lot about Flexbox and CSS Grid Layout, but these layout methods are essentially values of the CSS `display` property, a workhorse of a property that doesn’t get a lot of attention. Rachel Andrew takes a better look in a short series.
webdevelopment  webdesign  display  css  layout 
9 days ago by garrettc
Water.css
"Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer."
css  html  template  responsive  webdesign  webdevelopment 
10 days ago by garrettc
Flexulator
"If you are trying to work out how much space is being distributed by flexbox this tool may help. It also nicely demonstrates the fact that flexbox is about distributing space, rather than making fixed or percentage width layouts."
css  layout  flexbox  tool  webdesign  webdevelopment 
12 days ago by garrettc
Blurred Borders in CSS
"Say we want to target an element and just visually blur the border of it. There is no simple, single built-in web platform feature we can reach for. But we can get it done with a little CSS trickery."
css  webdesign  webdevelopment  border 
22 days ago by garrettc
Sophisticated Partitioning with CSS Grid
Create compelling grid patterns by harnessing specificity.
css  grid  layout  inspiration  webdesign  webdevelopment  music  posters 
27 days ago by garrettc
Stacked "Borders" | CSS-Tricks
"A little while back, I was in the process of adding focus styles to An Event Apart’s web site. Part of that was applying different focus effects in different areas of the design, like white rings in the header and footer and orange rings in the main text. But in one place, I wanted rings that were more obvious—something like stacking two borders on top of each other, in order to create unusual shapes that would catch the eye."
css  webdesign  webdevelopment  borders 
27 days ago by garrettc
CSS Grid: Floor Plan
Impresseive use of Grid to generate a floor plan.
css  grid  inspiration  webdevelopment  webdesign 
27 days ago by garrettc
Iodide - data science entirely in your browser.
Create, share, collaborate, and reproduce powerful reports and visualizations with tools you already know, such as Python, Javascript, Markdown, and CSS.
collaboration  data  tool  notebook  python  javascript  css  markdown  authoring 
5 weeks ago by garrettc
cssdb
A comprehensive list of CSS features and their positions in the process of becoming implemented web standards.
css  worldwideweb  browsers  standards  w3c  reference 
5 weeks ago by garrettc
Mask Compositing: The Crash Course | CSS-Tricks
At the start of 2018, as I was starting to go a bit deeper into CSS gradient masking in order to create interesting visuals one would think are impossible
webdevelopment  webdesign  css  gradient  masks 
6 weeks ago by garrettc
Using CSS Grid the right way
"CSS Grid is fun to use but hard to learn. Here are three tips to help you understand and leverage the Grid spec."
css  grid  webdevelopment  webdesign  layout 
7 weeks ago by garrettc
To Grid or to Flex?
Good pointers on how to decide when to use Grid and when to use Flexbox.
css  grid  flexbox  webdesign  webdevelopment 
9 weeks ago by garrettc
Gradians and Turns: the quiet heroes of CSS angles
"Degrees and radians are the angle units we all know and hate, but two lesser-known units are often much easier: turns and gradians"
css  webdesign  webdevelopment  animation 
9 weeks ago by garrettc
Making Sense of Clip Path
"We can create many different shapes from circles, ellipsis, polygons. Creativity is the only limit."
css  clippath  svg  webdesign  webdevelopment  mathematics 
9 weeks ago by garrettc
Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom
"Recently I had some fun implementing an image carousel for Pinafore. The requirements were pretty simple: users should be able to swipe horizontally through up to 4 images, and also pinch-zoom to get a closer look."
webdevelopment  webdesign  css  javascript  carousels 
9 weeks ago by garrettc
The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
"SVG is a great format for icons. Vector formats look crisp and razor sharp, no matter the size or device — and we get tons of design control when using them inline.

SVG also gives us another powerful feature: the ability to manipulate their properties with CSS. As a result, we can make quick and simple interactions where it used to take crafty CSS tricks or swapping out entire image files.

Those interactions include changing color on hover states. It sounds like such a straightforward thing here in 2019, but there are actually a few totally valid ways to go about it — which only demonstrates the awesome powers of SVG more."
animation  css  svg  webdevelopment  webdesign 
11 weeks ago by garrettc
Table Design Patterns On The Web
"Tables are a design pattern for displaying large amounts of data in rows and columns, and have not yet seemed to fall out of favor, so let’s take a look at how we can create tables on the web in 2019."
css  data  table  layout  webdesign  webdevelopment  markup  html  javascript 
11 weeks ago by garrettc
The Flexbox Holy Albatross
How to use flexbox to simulate container query functionality.
css  layout  webdesign  webdevelopment  flexbox  containerqueries 
11 weeks ago by garrettc
Putting the Flexbox Albatross to Real Use
"If you hadn't seen it, Heydon posted a rather clever flexbox layout pattern that, in a sense, mimics what you could do with a container query by forcing an element to stack at a certain container width."
css  webdesign  webdevelopment  layout  containerqueries  flexbox 
11 weeks ago by garrettc
Building Better Forms™ by not taking away affordances
A good example of verything you get for free by using native elements.
accessibility  css  webdevelopment  forms  userexperience 
11 weeks ago by garrettc
CSS doesn’t suck - Andy Bell
Another week comes along and with it, another assault on CSS. It’s turning into a bit of a trend—particularly in the JavaScript community—to crap on CSS wherever possible.
IFTTT  Pocket  css  webdevelopment 
12 weeks ago by garrettc
Piecing Together Approaches for a CSS Masonry Layout | CSS-Tricks
Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would guess the term was coined (or at
css  flexbox  grid  masonry  webdevelopment  webdesign 
12 weeks ago by garrettc
Kickstart Cheatsheets
A selection of printable, one-page development cheatsheets.
html  css  python  javascript  programming  webdevelopment  cheatsheet  learning  reference  es6 
january 2019 by garrettc
How To Learn CSS
"You don’t need to commit in memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use. This article aims to guide you along your path of learning CSS."
css  webdesign  webdevelopment  learning 
january 2019 by garrettc
The Cicada Principle and Why It Matters to Web Designers
What does the life cycle of periodical cicadas, Euclidean number theory and web design have on common?
css  patterns  random  webdesign  webdevelopment  background  tiling 
january 2019 by garrettc
Gradient Borders in CSS | CSS-Tricks
Let's say you need a gradient border around an element. My mind goes like this: There is no simple obvious CSS API for this. I'll just make a wrapper
css  webdesign  gradient  borders 
january 2019 by garrettc
Clip Paths Know No Bounds
"Dan Wilson throws some Christmas shapes and gives us a run down of different ways to use CSS polygon clip paths to create interesting a flexible shapes with less code that you might have thought."
css  css3  clippath  webdesign  webdevelopment 
december 2018 by garrettc
Managing Flow and Rhythm with CSS Custom Properties
"Andy Bell rings out a call for a more flexible method of achieving consistent vertical rhythm across components within a page. Using a technique of CSS custom properties to establish spacing inherited through the cascade, you can make sure your choir are all singing from the same song sheet."
css  webdesign  verticalrhythm 
december 2018 by garrettc
Masking vs. Clipping: When to Use Each
"I was recently doing some client work where I used both <clipPath>s and <mask>s in SVG to hide and show content for animation. When I started this project, I thought I knew all of the reasons to use one over the other. But, as tends to happen, working closely with something reveals idiosyncrasies. In this post, we'll go over some of these details so that you can get productive as soon as possible."
css  svg  webdevelopment  webdesign 
december 2018 by garrettc
Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
"CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering everything you need to know to get started."
webdesign  webdevelopment  svg  design  css  userinterface 
december 2018 by garrettc
CSS Animation 101
"Animation using CSS can be overwhelming to learn all at once.

This book gives you a solid introduction to the topic, combining theory with practical lessons. You’ll learn how, and why to use animation on your web pages and hopefully be inspired to try it on your own projects!"
animation  css  ebook  programming  webdesign  webdevelopment 
november 2018 by garrettc
NES.css
A NES-style CSS Framework.
8bit  css  framework  nes  nintendo 
november 2018 by garrettc
slick carousel
"Slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!"
css  jquery  javascript  clider  carousels 
november 2018 by garrettc
Concise Media Queries with CSS Grid
Write less CSS and organize responsive layouts with ease.
css  flexbox  grid  webdesign  webdevelopment  responsivedesign 
november 2018 by garrettc
Braces to Pixels
In this installment of our “From URL to Interactive” series, Greg Whitworth explains how cascading actually works, and then some.
html  http  javascript  webdevelopment  network  browser  dom  css  parser 
november 2018 by garrettc
Tags to DOM
"Continuing our “From URL to Interactive” series, the second part dives into how HTML is parsed."
html  http  javascript  webdevelopment  network  browser  dom  css  parser 
november 2018 by garrettc
Dark Mode and CSS • The Breakroom
The new Dark Mode in macOS Mojave provides users with a new way to customize their desktop environment. It also presents a lot of new situations where developers need to adapt content in their apps and websites.
IFTTT  Pocket  css  webdesign  accessibility  webdevelopment 
october 2018 by garrettc
Use Cases For Flexbox
"In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at?"
css  flexbox  grid  layout  webdesign  webdevelopment 
october 2018 by garrettc
The Shapes of CSS
"CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.

We also get the ::before and ::after psuedo elements in CSS, which give us the potential of two more shapes we can add to the original element. By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element."
css  webdesign  shapes  tricks 
october 2018 by garrettc
Negative Grid Lines
Uses for negative grid lines.
css  webdesign  grid  layout 
october 2018 by garrettc
Valid CSS Content
"There is a content property in CSS that's made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element."
css  content  webdevelopment  tips 
october 2018 by garrettc
CSS Layout cookbook
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
css  examples  layout  webdevelopment  webdesign  flexbox  grid 
september 2018 by garrettc
Flexbox: How Big Is That Flexible Box?
"In the last two articles, we have looked at what happens when we create a flex container, and also taken a look at alignment. This time we explore the often confusing issue of sizing in Flexbox. How does Flexbox decide how big things should be?"
css  flexbox  webdesign 
september 2018 by garrettc
Create your design system, part 1: Typography
Typography is arguably the essential part of a website. When we think about the content of a web page, we think about words. In this article, we’ll take a look at how to set a typography system in…
css  webdesign  designsystems  webdevelopment  typography  grid  colour  space  icons  buttons 
september 2018 by garrettc
Creating sliding effects using sticky positioning
"Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way!"
css  webdesign  userinterface  sticky  scrolling 
september 2018 by garrettc
Unlocking the Power of CSS Grid Layout
Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.
css  grid  webdevelopment  webdesign 
september 2018 by garrettc
Super-Powered Grid Components with CSS Custom Properties | CSS-Tricks
A little while ago, I wrote a well-received article about combining CSS variables with CSS grid to help build more maintainable layouts. But CSS grid
css  grid  layout  webdevelopment  webdesign 
september 2018 by garrettc
Take A New Look At CSS Shapes
In this article, we take a look at CSS Shapes and how to create non-rectangular shapes using images, gradients, and basic shapes. We also discover how the new tools in Firefox make editing shapes easier.
css  webdevelopment  webdesign 
september 2018 by garrettc
The Font Loading Checklist—zachleat.com
"Our goal as web developers is to maximize the experience and raise user expectations to the level of what the web is capable of delivering, but also to manage our performance budgets to ensure that we are fulfilling the promise of the web—it’s ubiquity. This checklist should help you deliver on those two often competing ideals."
css  fonts  performance  bestpractice  webfonts 
september 2018 by garrettc
Using CSS Clip Path to Create Interactive Effects
"Do you remember being a kid, cutting out pictures from magazines? Did you glue them onto paper to create your own collages? This post is about cutting out images on the web using the CSS property clip-path."
css  svg  webdesign  inspiration 
august 2018 by garrettc
Advanced effects with CSS background blend modes
"Learn about background-blend-mode and how you can use it to create eye-catching backgrounds and photo effects that once were only possible in Photoshop."
background  css  webdesign  inspiration 
august 2018 by garrettc
Component Based Design System With Styled-System
Component-based design system is the practice of splitting the UI into small, isolated and more manageable parts; backed by a set of design constraints. It builds upon ideas such as Atomic Design, Style Guides and Component-Based Architecture.
IFTTT  Pocket  css  javascript  react  components 
august 2018 by garrettc
Sticky, Smooth, Active Nav
"Just like the title says! Here's a sidebar navigation bar that... Uses sticky positioning. It stays on the screen when it can"
css  navigation  webdevelopment  webdesign 
august 2018 by garrettc
GRID: A simple visual cheatsheet for CSS Grid Layout
Learn all about the properties available in CSS Grid Layout through simple visual examples.
cheatsheet  css  grid  webdesign  reference  webdevelopment 
august 2018 by garrettc
FLEX: A simple visual cheatsheet for flexbox
Learn all about the properties available in flexbox through simple visual examples.
cheatsheet  css  flexbox  webdesign  reference  webdevelopment 
august 2018 by garrettc
Weft. — Ethan Marcotte
"I wrote about trying to understand what you’re designing or building before you design or build it"
css  designpatterns  designthinking  designsystems  webdesign  webdevelopment 
august 2018 by garrettc
CSS Generator Tool
A CSS Generator Tool to demonstrate and quickly generate many different handy CSS declarations.
code  css  generator  webdesign  webdevelopment 
august 2018 by garrettc
Solved with CSS! Logical Styling Based on the Number of Given Elements | CSS-Tricks
Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical styling? Well you can! You don’t have to set all of your logic-based styling rules in JavaScript, or even have to use JavaScript to set classes you are styling against. In many cases, CSS can handle that itself. I’m still discovering new CSS tricks everyday, and it just makes me love it even more.
css  webdesign  webdevelopment  logic 
august 2018 by garrettc
Solved with CSS! Dropdown Menus | CSS-Tricks
A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.
css  webdesign  navigation  userinterface  webdevelopment 
august 2018 by garrettc
Solved with CSS! Colorizing SVG Backgrounds | CSS-Tricks
This post is the first in a series about the power of CSS. Article Series: Colorizing SVG Backgrounds (this post) Dropdown Menus Logical Styling Based On
svg  css  webdesign  webdevelopment 
august 2018 by garrettc
Improving Your CSS with Parker
How to use Katie Fenn's excellent CSS tool Parker.
css  webdevelopment  performance  analysis  tool  nodejs  javascript 
july 2018 by garrettc
BackstopJS - Visual regression testing
"BackstopJS automates visual regression testing of your responsive web UI by comparing DOM screenshots over time."
css  javascript  html  webdevelopment  testing  chrome  headless  automation  regression  tool 
july 2018 by garrettc
Parker - Stylesheet analysis tool
Parker is a stylesheet analysis tool. It runs metrics on your stylesheets and will report on their complexity.
css  webdesign  webdevelopment  performance  tool  javascript  nodejs 
july 2018 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark:





to read