cbotwell + css   74

kss-node
- The Node.js implementation of KSS: a methodology for documenting CSS and generating style guides
javascript  styleguide  css 
5 weeks ago by cbotwell
Creating Non-Rectangular Headers
Over at Medium, Jon Moore recently identified "non-rectangular headers" as a tiny trend. A la: it's not crazy popular yet, but just you wait, kiddo. We're talking about headers (or, more generally, any container element) that have a non-rectangular shape. Such as trapezoids, complex geometric shapes, rounded/elliptical, or even butt-cheek shaped.
svg  design  css 
7 weeks ago by cbotwell
How to create fancy revealing animations with these simple CSS tricks
I hate clickbait articles as much as you do, this ain’t one of those though. So, let me save you a 10 minute read by just spitting out the tricks right here, right now. Easy, huh? This is obviously…
css  animation 
8 weeks ago by cbotwell
UIkit
, a lightweight and modular front-end framework for developing fast and powerful web interfaces.
css  framework  ui  webdesign 
june 2017 by cbotwell
Build a Style Guide Straight from Sass
Last fall, our dev team wanted to get started with style guides. We had added a new member to the team, and as he was getting up to speed, we realized how
css  sass  styleguide 
june 2017 by cbotwell
Full Page Background Video Styles
I bet you’ve seen it. A video background that takes up the entire browser window. There is text on top of it (hence, “background”), which is an interesting...
video  css  design 
june 2017 by cbotwell
Some Extremely Handy `:nth-child` Recipes as Sass Mixins
There is no such thing as one-size-fits-all styling. An image gallery with three images might need to be styled differently than an image gallery with twel
css 
may 2017 by cbotwell
FLEXBOX ZOMBIES
Master Flexbox layout: a story course by geddski
flexbox  css  learning 
may 2017 by cbotwell
What The Flexbox?!
A simple 20 video course that will help you master CSS Flexbox
video  css  flexbox 
may 2017 by cbotwell
Focusing a `background-image` on a Precise Location with Percentages
Let's say you have an element with a background-image, where only part of the image is visible, because the image is bigger than the element itself. The re
css 
april 2017 by cbotwell
The Best Gradients Collection
Come to WebGradients.com for 180 beautiful linear gradients in CSS3, Photoshop and Sketch. This collection is curated by top designers and totally free.
css  design 
february 2017 by cbotwell
shakrmedia/tuesday
tuesday - A quirky CSS Animation Library by Shakr
css  animation 
february 2017 by cbotwell
Hero Patterns
A collection of repeatable SVG background patterns for you to use on your digital projects
svg  css  design 
january 2017 by cbotwell
Ensuring CSS Animations Run and Stop Gracefully | Viget
CSS animations are used as pre-loaders all over the place. But, as you’ll see, there are drawbacks.
css  javascript 
january 2017 by cbotwell
Five Ways to Animate Responsibly
Rachel Nabors clears the snowy drift of delight from web animation to reveal the need for necessity and usefulness when we decide to animate web interactions. The box it comes in is as important as the gift.
css  animation 
january 2017 by cbotwell
Crafting link underlines on Medium
How hard could it be to draw a horizontal line on the screen? It seems wrangling a few pixels together to stand in a file would be something computers should be pretty good at anno domini twenty…
css  typography 
december 2016 by cbotwell
Styling Underlines on the Web
Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what’s the best approach depending on the situation. Thankf
css  typography 
december 2016 by cbotwell
Creative Link Effects
: Subtle and modern effects for links or menu items
css 
december 2016 by cbotwell
Performant Parallaxing
With a little mathematical wriggling, it's possible to have parallax effects that play nicely with browser architectures!
css  javascript  webdesign 
december 2016 by cbotwell
Content Loading Placeholder
This is the first post of my new blog series called Deconstructions. Showcasing cool things people are doing in web development and breaking them down step by step. My first target is a cool content placeholder from the most recent Facebook overhaul. Before your friend’s latest selfie or dog picture loads you may have noticed this nice bit of polish.
css  Web_design  webdesign 
november 2016 by cbotwell
jareware/css-architecture
css-architecture - 8 simple rules for a robust, scalable CSS architecture
css  development 
november 2016 by cbotwell
juice
- Juice inlines CSS stylesheets into your HTML source.
email  css 
august 2016 by cbotwell
Almost complete guide to flexbox (without flexbox)
Unfortunately, not everyone has a browser/device capable of viewing flexbox layouts. This is a cheatsheet-esque guide that offers backwards compatible alternatives to flexbox properties.
css 
may 2016 by cbotwell
Pseudo-classes
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.
css 
may 2016 by cbotwell
OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?
The way we write CSS has changed a lot in last few years, and the abbreviation jungle gets deeper and deeper. Heres a list of links to influential articles and quick summaries of these techniques.
css 
may 2016 by cbotwell
CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks
This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revis
css 
may 2016 by cbotwell
sprity
A image sprite generator
css 
may 2016 by cbotwell
Create better looking underlined links with CSS3 box-shadow and text-shadow
Unstyled links are by default underlined (with the exception of Opera Mini). Browsers simply use a 1 pixel solid line in the same colour as the text. You can change the appearance of the underline. There is a specification, but not with full browser support and somewhat limited possibilities. For a long time using a …
css 
may 2016 by cbotwell
CSS inliner
Writing inline CSS can be a pain, so we built a tool that'll do the hard work for you.
css  email 
april 2016 by cbotwell
Sticky Footer
I have three divs: one as a header, one as a footer, and a center content div. the div in the center needs to expand automatically with content, but i would like a min-height such that the bottom div
css 
april 2016 by cbotwell
colllor
Web color palette the right way. Create consistent color schemes. Generate color shades, tones and tints values.
color  css  design 
december 2015 by cbotwell
Build an HTML Email Template From Scratch
The best way to understand any process is to carry it out yourself, from the ground up. Today, we're going to do just that with email design, by building an HTML email template from scratch. | Tags: Email Design, HTML, CSS, Litmus
css  email 
december 2015 by cbotwell
CSS Support Guide for Email Clients | Campaign Monitor
Download our CSS Support Guide which details CSS support for all major mobile, web and desktop email clients.
css  email 
december 2015 by cbotwell
CSS triangle generator
- A generator for pure CSS triangle
css 
november 2015 by cbotwell
A More Modern Scale for Web Typography
Try this new relative typographic scale to avoid gangly headers, undersized body text, and odd looking spacing as your responsive web designs travel between screens
typography  css  responsive  design 
november 2015 by cbotwell
BEM. Block, Element, Modifier
BEM provides a comprehensive solution for creating the architecture for your project and helps organize development processes.
css 
november 2015 by cbotwell
Animate.css
Just-add-water CSS animations
css 
september 2015 by cbotwell
The Photo Filter SCSS Mixin Library
A CSS button library built with Sass and Compass
sass  CSS  tiy 
july 2015 by cbotwell
Bourbon
is a lightweight Sass tool set that helps you write more effective stylesheets.
css  sass  tiy 
july 2015 by cbotwell
Sass Basics
Syntatically Awesome Style Sheets
css  sass  tiy 
july 2015 by cbotwell
Font Awesome
, the iconic font and CSS framework
icons  typography  css  tiy 
july 2015 by cbotwell
cssarrowplease
CSSArrowPlease allows you to create and export CSS code for a custom box with an arrow extending out from the side.
css  tiy 
july 2015 by cbotwell
CSS Triangles: How do they work?
A pen I put together for show-and-tell at HackerYou...
tiy  css 
july 2015 by cbotwell
The Internet of Shapes with Brenna O'Brien
Geometric shapes have become extremely popular in web design; they can be a challenge to implement, but new additions to HTML & CSS along with creative solut...
css  tiy 
july 2015 by cbotwell
Brackets
A modern, open source text editor that understands web design.
css  Web_design 
december 2014 by cbotwell
Format - Portfolio Websites
Easily create an online portfolio website. Fully customize dozens of gorgeous themes. Stunning touch presentation on iPhone and iPad.
design  Web_design  css 
august 2014 by cbotwell
CSS Tools: Reset CSS
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. In other words, this is a starting point, not a self-contained black box of no-touchiness.
css  Web_design 
february 2012 by cbotwell

Copy this bookmark:



description:


tags: