Bookmarks tagged with #css.
Show all
Show all
10 Reasons to Love (and Use) Gradients in 2018 | Webdesigner Depot
After years of flat, material and completely minimal styles, the gradient has made a comeback. Everywhere you look, designers are using color fades to add
Saved
on: 2018-04-27
Radial Gradient Recipes | CSS-Tricks
Radial gradients are pretty dang cool. It's amazing we can paint the background of an element with them so easily. Easily is a relative term though. It's
Tags:
#css
Saved
on: 2018-04-27
DasSur.ma – Layers and how to force them
The answer is will-change: transform. Or is it?
Tags:
#css
Saved
on: 2018-04-20
5 Takeaways From Using Tailwind CSS In Real Projects | Nick Basile
A roundup of the lessons learned using Tailwind CSS in real projects.
Saved
on: 2018-03-16
A Book Apart, Get to Know Rachel Andrew
Up next our Meet the Authors series, Rachel Andrew with some advice on getting started in design and development. Read on for more.
Saved
on: 2018-01-19
An Event Apart News: CSS Grid Layout by Rachel Andrew—An Event Apart video
Saved
on: 2017-12-28
An Introduction to Scrollama.js
The what, why, and how to use scrollama.js for your next scrollytelling story.
Saved
on: 2017-11-29
Eric's Archived Thoughts: Generating Wireframe Boxes with CSS and HTML5
A method to create labeled wireframe-style boxes on top of existing page elements using a potpourri of CSS and tiny bits of HTML5.
Tags:
#css
Saved
on: 2017-11-28
Flexbox and Grids, your layout’s best friends
We decided to debunk the myths around Flexbox & Grids in order to show you the power of these two technologies working together.
Saved
on: 2017-11-07
Web Typography: Designing Tables to be Read, Not Looked At · An A List Apar
You may not think about it often, but tables are meant to be read. In this excerpt from Chapter 2 of his book, Web Typography, Richard Rutter explains how typography can improve the UX of our rows …
Saved
on: 2017-11-02
From Bootstrap to CSS Grid – Times Open
Despite many clever hacks and creative workarounds, there hasn’t been a simple answer for creating layout on the web. From misusing tables, to over-engineering simple floats that push around content…
Saved
on: 2017-10-26
Don't Overthink It (Flexbox) Grids | CSS-Tricks
Four years ago I posted "Don't Overthink it Grids" and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid.
Tags:
#css
Saved
on: 2017-10-17
Rebuilding slack.com – Several People Are Coding
In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a variety of teams, departments, and agencies. We implemented a redesign while overhauling all the under-the-hood code. Our aim was to address a few…
Saved
on: 2017-10-13
Comparing CSS Resets
This pen is a demo by scotch.io to demonstrate different CSS resets and how they are used....
Saved
on: 2017-10-12
10 SASS (SCSS) mixins you should be using in your projects | Engage
Save yourself time and stop repeating so much code, with help from a set of 10 SCSS 'mixins' taken from the Engage Front End Baseplate.
Tags:
#css
Saved
on: 2017-09-21
Penthouse 1.0 — Official Release!?? – Jonas Ohlsson Aden – Medium
Penthouse is the first and best free critical css generator out there, helping you improve your speed index — time to first render. Inspired by Facebook’s awesome open source contribution with React…
Tags:
#css
Saved
on: 2017-09-18
Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Ge
The latest news about Opera web browsers, tech trends, internet tips.
Saved
on: 2017-04-21
2016 Favorites | CSS-Tricks
As the year closes, it's good to reflect on all of the things we as a community have built, contemplated, and contributed to. Here are some of the things we
Saved
on: 2017-03-27
Case Study: My First Practical CSS Grid Layout - Cloud Four
A challenge cropped up in one of our projects that served as a simple, self-contained example of how grid layout can make things easier.
Saved
on: 2017-03-27
Animista - On-Demand CSS Animations Library
Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
Tags:
#css
Saved
on: 2017-03-17
The Complete Guide to CSS Grid | Codrops CSS Reference
CSS Grid is a two-dimensional layout system created specifically to tackle grid-based user interfaces on the web. Grids
Saved
on: 2017-03-02
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.
Saved
on: 2017-02-06
CSS Grid – Table layout is back. Be there and be square. | Web | Google
CSS Grid is a new layout system for the web.
Saved
on: 2017-02-01
Print styles – A List Apart Sidebar – Medium
I really wanted to make sure that the print styles for Resilient Web Design were pretty good — or at least as good as they could be given the everlasting lack of support for many print properties in…
Saved
on: 2016-12-28
CSS Writing Modes ◆ 24 ways
Jen Simmons points us in the direction of a useful but less well known CSS feature that becomes increasingly important when designing page layouts for a global audience. Like the wise men following the Star of Bethlehem, sometimes the best direction is given to us, not chosen.
Tags:
#css
Saved
on: 2016-12-23
Flexbox Froggy - A game for learning CSS flexbox
A game for learning CSS flexbox
Saved
on: 2016-12-22
GitHub's CSS Performance // Speaker Deck
A talk on some problems solved related to CSS Performance at GitHub. The talk was given at CSS Dev Conference in Honolulu, HI 2012. I recorded the prese…
Saved
on: 2015-11-12
Angled Edges with CSS Masks and Transforms | Viget
Easily add angled edges to elements with CSS Masks and Transforms.
Tags:
#css
Saved
on: 2015-10-28
oak.is / Animated SVGs: Custom easing and timing
The chart above is an animated SVG featured on Sprout. This chart, and one other animation on Sprout, were initially GIFs. By using animated SVGs instead of GIFs we were able to reduce our page size from 1.6 mb to 389 kb, and reduce our page load time from 8.75 s to 412 ms. That’s a huge difference. Below, I’ll break down the animation of one of the circles seen in the chart. The technique applies to all of the elements in the graphic. With this you can create your own lightweight animated graphic.
Saved
on: 2015-06-29
CSSconf EU 2014 - YouTube
CSSconf EU, Berlin, September 12, 2014 CSSconf EU is a conference dedicated to the designers, developers and engineers who build the world’s most engaging us...
Tags:
#css
Saved
on: 2015-04-27
Documentation - Materialize
Materialize is a modern responsive CSS framework based on Material Design by Google.
Saved
on: 2015-04-24
Trello CSS Guide
Trello CSS Guide. GitHub Gist: instantly share code, notes, and snippets.
Tags:
#css
Saved
on: 2015-02-12
How to Scale SVG | CSS-Tricks
The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of SVG Essentials and author of the
Saved
on: 2015-01-11
uncss: Find Unused CSS
The uncss utility allows developers to find unused CSS in webpages.
Saved
on: 2014-05-20
Jeet Grid System | Smart CSS preprocessor grids
CSS preprocessor grid built with fractions and ratios to make columns flexible and your workflow fast.
Saved
on: 2014-05-06