As I was using Photoshop to resize my eleven billionth image, it occurred to me I should probably simplify this process. AppleScript, perhaps? Photoshop scripts? Some already existing little app? A little pontification on Twitter resulted in a number of suggestions to try OS X's Automator. Turns out it's a pretty easy thing to do, at least in a limited way.…
A bonafide CSS trick by Rémi Parmentier. It's used in the context of emails here, but it's a clever trick in it's own right.
This is the trick:
/* When parent is 500px wide... */
.block {
min-width: 50%; /* 250px WINNER */
max-width: 100%; /* 500px */
width: calc(480px - 100%) * 480); /* -9600px */
}
/* When parent is 400px wide... */
.block {
min-width: 50%; /* 200px */
max-width: 100%; /* 400px WINNER */
width: calc(480px …I like to think of CSS as a love language. If written well, it can be as lovely as poetry. There are rules, semantics and, like love itself, it can be communicated in many ways. Consider the variety of options we have to write black in CSS:
#000000#000rgb(0, 0, 0)hsla(360, 100%, 0%, 1)blackIn the spirit of Valentine's Day, I thought it would be fun to push this concept a little further with the many ways …
I got an email from Andy Fitzsimon the other day about some projects he's working on. One of which was logomono, something I thought looked pretty interesting and shared the other day. I thought, rather than trying to figure things out and re-explain them myself, I'd just ask Andy himself to answer my questions. Interview style.…
The team working on the upcoming design tool Figma demonstrate how vector path making will work. Think of the Pen Tool in Adobe software, rethought. This new approach certainly looks more intuitive, especially with how easily curves can be manipulated.…
The following is a guest post by Damon Bauer. There has been a growing sentiment (for instance) that using node packages directly, with the command line interfaces they provide, is a good route to take. As opposed to abstracting the functionality away behind a task runner. Partly: you use npm anyway, npm provides scripting functionality, why not just use that? But there is more to it than that. Damon will walk us through the thinking, but also …
The following is a guest post by Mike Neumegen from CloudCannon. This final post is about adding some functionality to a Jekyll site that isn't possible: comments. That's because Jekyll has no backend component in which to save comments. But, we don't even need that if we do it entirely front-end with Firebase!…
The following is a sponsored guest post by Mike Neumegen from CloudCannon. This series is all about not only building a Jekyll site but then adding simple editability through CloudCannon.…
The following is a guest post by Mike Neumegen from CloudCannon. Mike and I talked about doing a little series on building Jekyll sites, which of course I was into because Jekyll is great and more education around static site generators is a good thing. Full disclosure, Mike's company CloudCannon is a CMS on top of Jekyll. As part of this series he's going to show you how to use that, so I requested it be a sponsored post.…
This article is not intended for seasoned React pros, but rather, those of us who make websites for a living and are curious how React can help us reason about updating user interfaces. I’ve been intrigued by React for some time, and now that it has gained some standing in the community as well as good reviews, the time to learn it seemed justified. There are so many new technologies constantly emerging in front end development that it’s sometimes hard …
background-clip is one of those properties I've known about for years, but rarely used. Maybe just a couple of times as part of a solution to a Stack Overflow question. Until last year, when I started creating my huge collection of sliders. Some of the designs I chose to reproduce were a bit more complex and I only had one element available per slider, which happened to be an input element, meaning that I couldn't even use pseudo-elements on …
This year, the O'Reilly Fluent Conference (March 7-10 in San Francisco) brings you new 2-day, in-depth training courses in topics like React, CSS Layouts, Website Planning and Design. You'll also find case studies, introductions to new tools and technologies, best practices, inspiring keynotes, the ever-lively expo hall, and nonstop networking opportunities. Take a look at the schedule and see how it measures up against the problems you need to solve or the things you promised yourself you'd learn. Fluent could …
The following is a guest post by Daniel O'Connor. Daniel shares more about OUI, the UI library by Optimizely Tom Genoni introduced in Part 1.…
I like other CMS's. I promise. But WordPress is super perfect for all the things I need and want to do around here on CSS-Tricks.…
The following is a guest post by Tom Genoni. Tom is going to introduce us to the thinking and process behind Optimizely's new UI library / Sass framework. Part 2, by Daniel O'Connor, looks at some of the technical and integration bits.
When I first started working on web projects, stylesheets were seen as a necessary evil. It was neither a real language to be taken seriously by a computer-science minded engineer nor simple enough for a …
Jina Bolton is throwing this brand spankin' new conference in San Francisco at the end of March, and I'll be MCing!
10% off with coupon code "CodePen"…
One of my favorite self-declared holidays.
Interesting tidbit. It was considered a mistake by the CSS Working Group:
Box-sizing should be border-box by default.…
The following is a guest post by Ray Villalobos. Ray is going to explore many of the different varietals of Markdown. All of them offer features beyond what the original Markdown can do, but they offer different features amongst themselves. If you're choosing a version to use (or a version you're offering to users on your web product), it pays to know what you are getting into, as it's difficult to switch once you've chosen and there is content …
Zach Leatherman outlines a new method for loading webfonts whereby the process can be broken up into two stages:
...instead of a full Roman webfont in the first stage, it loads a small subset of the Roman webfont, in this case with only the uppercase and lowercase alphabetic characters.
Then, in the second stage, we can load all the extra parts of that font, such as numbers or special characters. Ultimately, this greatly decreases the time in which readers will …
The following is a guest post by Przemek Matylla, who created a tool I suspect will be mighty useful for some of you out there. There is a lot of mystery out there in webdev. What value is this variable at this moment in execution? Why is this property being overridden? What's causing this scrollbar? There is also mystery with HTTP requests. What data came along for the ride? What metadata? Is everything there (and not there) as I …
I think Ashley Nolan has the right idea here:
Many posts on PostCSS compare it’s features to Sass equivalents, but PostCSS doesn’t have to be used as an alternative to Sass. It can instead be used to add additional features to your workflow that Sass doesn’t provide. ... These extra tasks can run either before or after your Sass compilation, as PostCSS can parse both SCSS and CSS.
PostCSS has proven to be much easier for developers to write add-ons …
Una Kravets walks us through blend modes, gradients and CSS filters in this excellent talk from dotCSS. It’s especially interesting to see how some of these cool tricks might let us circumnavigate design tools completely so that we can let the browser do all the work for us.
She also has a six-part blog post series on CSS image effects (vintage washout, 3D Glasses, Vignettes, Bokeh, Lomography, and Infared).…
FullStory is a customer experience platform that gives product, marketing, and support teams unprecedented insight into the interactions of visitors and customers. By adding a simple script to any website, FullStory captures every event and interaction during a visit, making it easy to replay, search, and analyze each user’s experience.
FullStory Searchies intelligently determine which questions you’ll want to ask of a search or segment and present the answers in the most visually intuitive way: with a funnel, line graph, …
Rebecca Murphey's talk from dotJS 2015 explores all the various gotchas surrounding HTTP/2. For instance, how will servers support it? How does our front-end process change to benefit the most from this new protocol? How will developers know that everything is working correctly?…
The following is a guest post by Charlie Walter. Charlie has written for us before, when he's not making me extremely envious. Now he's back to share something completely different. We're going to learn about methods he's learned for streamlining WordPress theming using templating engines.
Templating engines are fantastic! They make complex programming languages much easier to write and include features that streamline the development process.
WordPress is a natural environment for us to see how templating …
Brad Frost has made a very interesting visualization tool that helps teams think about performance budgets. It shows all the assets (HTML, CSS, JS, images, fonts, etc) as part of one proportional bar chart. It's a great way to look at it, because it reinforces the idea of "increase one, others need to shrink".…
Nadav Soferman has written a great post about the common mistakes that can be made when developers attempt to make images responsive:
Whichever responsive design solution or framework you choose, you still need to generate and deliver multiple versions of each image. The challenge of finding the best fitting resolutions, which are the responsive breakpoints for each specific image, is common for all approaches and frameworks.
What’s especially surprising to me is we need to serve a different number …
I suspect this is what many of us do (based on my own behavior and what I observe of others), but I'm not sure we outright say it or embrace it. Mood Driven Development: Work on what you feel like working on.…
Alex Russell on the current problem with testing experimental web features:
Prefixes “look” ugly and the thought was that ugliness — combined with an aversion to proprietary gunk by web developers — would cause sites to cease using them once standards are in place and browsers implement. But that’s not what happens.
Tools like Autoprefixer compound the problem that we developers use prefixed-anything as soon as we can get our hands on it.
He talks about some strategies for solving …
There is no shortage of apps to help you arrange windows. I find them tremendously useful. Most Windows (the operating system) users I know quite like the built-in abilities it has to position windows, but there isn't as much of that built into OS X. OS X El Capitan (10.11) brought some split screen stuff, but it has quite a few limitations and certainly isn't fulfilling all the needs of the discerning nerd.
So let's look at the options! Fair …
The “floating label” is a common design pattern where the label of a form is displayed on top of an input until someone taps it. It’ll then transition out of the way to reveal the placeholder text beneath, but the label will still be visible above or below.
Emil Björklund walks us through an interesting demo that replicates this pattern but without the need for any JavaScript and with the :placeholder-shown pseudo selector.
Note there are other CSS-only methods for …
I'm always running across wonderful SVG stuff. Demos, tutorials, tools, art... some of the best timeless resources end up in our SVG compendium. Some I think are best suited to posts like this!
Some of these are pretty new. Some of them are not, but I found them useful recently or are new-to-me.…
I'm pretty excited to welcome Media Temple as a the brand-spankin' new primary site sponsor around here. I pitched the idea to them, actually. While sponsors are vital for the site, I'm selective about the companies we work with. I personally approve and endorse every one. I'm particularly selective about the primary sponsor. I want it to be a company that I not only use and endorse, but that I select as a good fit. Media Temple was at the …
There is a good amount of information on this site about specificity. The seminal one is Specifics on CSS Specificity, which has been updated a few times over the years. When it was originally published in 2008, it presented the information in a bit of a misleading way. It has long since been fixed, but the mistake is still interesting.…
The following is a guest post by Brad Westfall. I ran into Brad at a conference not long ago and we talked about potential guest post ideas. Brad recently ran a conference of his own, CSSDay.io, and as you would expect he is full of thoughts on that experience. The perfect time to write!…
Anselm Hannemann recently made a post about some of the misconceptions that front-end developers might have about web security. Since I had lots of questions about these things, I thought I'd interview Anselm to get his take on the surprising complexity of getting set up with HTTPS. We talk about things like generating certificates and how we might best make sense of the conflicting opinions many developers, including myself, have about third-party services such as Cloudflare.…
A project by the U.S. General Services Administration that outlines how Federal agencies should implement basic web security, going into great detail as to why government websites should always use HTTPS over HTTP:
HTTP has become central to today’s way of life. HTTP is currently the primary protocol for applications used on computers, tablets, smartphones, and many other devices. As our dependency on the internet has grown, the risk to users' privacy and safety has grown along with it. Every …
JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. Yadda yadda yadda.
But what do you call a small amount of it?…
The following is a guest post by Levin Mejia, a Designer Advocate at Shopify. Shopify uses flexbox in a new theme they developed and they wanted to share some of the techniques they used to do it here. To that I say: yes please.…
Jen Simmons has a compelling talk (video) where she calls out web design as being far too dominated by the HEADER CONTENT SIDEBAR FOOTER pattern we're all too familiar with. Print design, despite so often being dubbed "dead" or in massive decline by those of us in web design, still excels in quality and variety of layout.
Certainly we can learn from print design on the web, yeah?…
The following is a guest post by Rich Finelli. Rich told me he used to have some trouble with the special ampersand character in Sass, but then had a bit of an epiphany and wanted to share that understanding (it's powers and limitations) with others. My favorite!
The & is an extremely useful feature in Sass (and Less). It's used when nesting. It can be a nice time-saver when you know how to use it, or a bit …
motion-path is specced and already has some support. But there is another way to replicate curved motion paths, as Tobias Ahlin points out:
... if we add a container around the object we want to animate, we can apply one timing function for the X-axis, and another one for the Y-axis. Below, we're using ease-in for the X-axis, and ease-out for the Y-axis.…
An in-depth series of posts by Andreas Larsen that walks us through the process of how to (hand) optimize SVGs. He suggests optimizations that it's unlikely software could do for you. Things like changing the viewBox size to accommodate simple, rounded integers.
Adding this one to our compendium of SVG info.…
There are lots of exciting new features rolling out in Safari 9.1 such as support for the picture element, enhancements to the web inspector, CSS variables and gesture events for iOS. Although, what I’m most excited for is the OpenType support with properties such as font-feature-settings and its variants like font-variant-ligatures and font-variant-caps, all of which give us more fine-tuned control over typesetting.
You can play around with these new features in the OSX 10.11.4 and iOS 9.3 betas …
The following is a guest adventure by Francisco Dias from HubSpot. I saw Francisco and Cris Necochea give this as a quick, fun presentation at the Show & Tell at CSS Dev Conf this year. He graciously agreed to prepare it for a blog post!…
The #1 place I hear people use this unusual term is standards people talking about standards stuff. It's not an intuitive term, but what it means is quite a useful and short way to describe a certain situation.…
LightCMS is the only true white-label Content Management System on the market. If you've ever considered branding your web design business as your own while using someone else's system, you need to check out their Developer Program. You'll have all of their enhanced reseller tools at your fingertips, as well full access to the HTML and CSS of your sites. They even give you a free website for your business.
If you're thinking about switching CMS providers, or even …
Swiss in CSS is a delightful project by Jon Yablonski that recreates posters made in the International Typographic Style, a visual design movement that began in the 1940s.
Open the examples in CodePen to take a look at how each of them work under the hood.…
There is a documentary that I love love love called Home Movie. It follows five super weird homes and the (super weird) people that live in them. They are all interesting, but I especially enjoyed Bill Tregle, this southern "alligator rancher" living on a houseboat in Louisiana.…
GOSH! Don't the years roll by fast? It's that time of year to say "Thank you!" I am grateful for the CSS-Tricks community: you read, help me, and help each other be better at our craft. It is each of you that has made this site what it is today. We get mushy on you every year, if you're keeping track.…