Auto-filling forms is nice because it saves time and is less prone to user error. Even better is not even needing to see a form in the first place.…
The following is a guest post by Marcel Shields. Marcel in a difficult place where he needed to change the image on a page but didn't have access to the HTML. Rare, but I'm sure we've all be in weird situations like this. He explains how he managed to replace that image without needing to access the HTML or JavaScript. Also turns out to be a pretty good way to replace anything with an image.…
Among the many super nice design features of the Yahoo! Weather app for iOS is the transition between city screens. The background image doesn't just move away as the screen moves from one screen to the next, the background image itself slides. It appears to be hiding some of the "old" screen and revealing more of the "new" screen those closer you have it to being in full view.
Let's try and pull it off on the web.…
The following is a guest post by Alex Young (@the_alexyoung). Alex has created a simple technique to "rotate" the subject of a photo simply by hiding and showing multiple stacked photographs taken at different angles. Enjoy!…
The following is a guest post by Alessandro Vendruscolo. Media queries are relevant to both CSS and JS. The need and desire to manage those in one place is real. There have been some clever ways to do this, like Jeremy Keith's Conditional CSS. But in that case, the onus is on you to test after window state changes. You can get a true listener with MediaQueryList, but then you're maintaining the media queries in both places again. …
It would be pretty cool if we could do this someday in CSS. The best idea for it that I've come across is to define it in a <meta /> tag in the <head></head>. That way (perhaps) CSS could use it and JS could use it. Like window.matchMedia(nameOfMyMediaQuery) or @media (nameOfMyMediaQuery) { }. But since we can't, Sass has our back. Now the question is, how do we name them?…
You want X lines of text. Anything after that, gracefully cut off. That's "line clamping" and it is a perfectly legit desire. When you can count on text being a certain number of lines, you can create stronger and more reliable grids from the elements that contain that text, as well as achieve some symmetric aesthetic harmony.
There are a couple of ways to get it done, none of them spectacular.…
It's back.…
Now that <hgroup> is gone, use a <span> inside the main header, or group them with <header> and use a <p> for the subtitle.…
Comprehensive research by Nicholas C. Zakas on the correct markup to make a graphic-only button accessible.…
The following is a guest post by Joshua Bader. Joshua noticed that certain 3D effects on the web could benefit from adjusting perspective as the web page is scrolled. I'll let him explain.
People love to make flat things appear as if they're three-dimensional. There are two ways to pull off this effect in a 2D environment, shape and movement.
By give a flat shape the appearance of edges or sides, we can make buttons or other objects appear …
That would be pretty useful, right? Right now it's very common to User Agent "sniff" when you want to make a server-side decision about what to give the client. But UA sniffing has always sucked and sucks more every day. What you really want to know is stuff like "how big is the screen I'm serving to?" or "does the device I'm serving to have touch events?" - that way you can serve resources that are appropriate to those questions. …
WebP images will save a quarter to a third of the file size over PNG or JPG. Not all browsers are going to support it, but Bruce Lawson shares a way we can use it in such a progressive enhancement kind of way.
Also: <img src="image.webp" onerror="this.onerror=null; this.src='image.png'">
Also: with Modernizr…
Sometimes people ask me if they can use the stuff they find here. So I thought I'd create a license I can refer them to. …
Not the most glamorous property is it? But it just might turn out to be. Things like paginated overflow and overflowing into fragments, each of which is selectable and style-able. Could be pretty powerful! Like replacing sliders with browser native controls.
The first Working Draft is out, meaning none of this is set in stone and there are no browser implementations. …
Despite the super fun sounding name, magic numbers are a bad thing. It is an old school programming term for "unnamed numerical constant". As in, just some number plunked into the code that is probably vital to things working correctly but are very difficult for anyone not intimately familiar with the code to understand what it is for. CSS is loaded with unnamed numerical constants, but they are usually paired with properties and in the context of a selector so …
I think the most common tech question we get on ShopTalk show is how to keep a WordPress database in sync between live and local. This (paid) plugin can do it right from one admin screen to another by POSTing secure requests of SQL data bit by bit until they are in sync. …
The issue is 1) custom fonts are awesome and we want to use them 2) custom fonts slow down our pages by being large additional resources. Dealing with this has been in the air recently so I thought I'd round up some of the ideas and add thoughts of my own. …
Forums user McAsh wondered how they might code up a design in which there was a large header and a smaller subheader beneath it which featured double horizontal lines jutting out after the text to both the left and right of the centered text. An easy thing to mock up as image, but a much more difficult thing to pull off in CSS because of the variable nature of text (length, size, etc). …
Like the little handle on range inputs. You can style that, but it's different in all the major browsers. It's either ::-ms-thumb, ::moz-range-thumb, or ::-webkit-slider-thumb. Obviously an area that would benefit from standardization. …
Pasquale D’Silva’s article Transitional Interfaces has really been making the rounds. It's a quick read that drives home a great point. Transitions and animations can be more than eye candy. They can help give your brain a clue about what is happening on a page. …
A CSS redundancy analyzer that analyzes redundancy.
Gives you output like:
{.contact .content .primary} and {article, #comments} share 5 rules
If you have multiple selectors sharing five or more rules (properties with the same value), that's likely a good opportunity for optimization (combine into new class or comma separate selectors elsewhere).
Someone should make a hosted version where you just drag-and-drop a .css file to analyze.…
There's no question that on sites with lots of JavaScript, you need a strict organizational pattern to keep everything making sense and the code approachable. I've mentioned in the past I like grouping things into individual files each containing a functionality-specific object literal. Taking things a wee bit further, we can be strict about this pattern and make sure we group together all sectors in one place, all "init" functions in one place, all event binding in once place, and …
Reader Arun wrote in with a question on how to make a body border that was rounded where the edges met on the inside. Like this. We've covered body borders before, but this was slightly different. …
Chrome is going to use "Blink" as a rendering engine now, a fork of WebKit. I imagine the Chromium team will stop committing back to WebKit, so that project will stagnate a bit. Safari is already rather slow to update, and iOS only allows WebKit on browsers, so that's a bit of a bummer. Overall it's probably a good move and keeps Chrome charging forward. No more vendor prefixes, they say.…
POP has these cool hovers in the boxes that make up their homepage. The boxes have a white background by default, and as you hover over them a dark background slides up behind, the text colors change, and the text "pops" up a little. When you hover off, the dark background slides away, the text colors change back, and the text pops down a little. I thought I'd try and replicate it because, you know, eff yeah hovers.
Demo…In this first time ever in CSS-Tricks history, we're going to re-run the same poll we've ran in the past. Now, more than five years after the original poll, we're going to ask: …
Using SVG for background patterns is great because they 1) are very small 2) are vector, thus crisp at any screen resolution and 3) work in IE 9 (unlike gradients). Gallery by Philip Rogers.…
From over 16,000 people surveyed, more than half (54%) say they "do some" when it comes to alt text for images that are important to content. The example provided did provide insight into the content and relevance of the image.
Thankfully the least number of people (10%) said they "do nothing." This is unfortunate as it is a a real accessibility problem. …
If you need to indicate "please wait, something is happening" on a website, a spinner has long been the go-to choice. Probably an animated GIF, although there are other options like CSS animations, apng, SVG, or canvas. James Padolsey goes through each of the possibly options and explains the good and bad as well as introduces a cool new tool.…
I finished up a brand new series in The Lodge! It's all about building a website from scratch. My friend Jeff, the ceramic artist's website, to be specific.
It is a 40-video series that goes from a blank canvas to done. It covers every decision made, every line of code written, every pixel plotted, and every toggle toggled.…
I was playing with my new Nexus 7 (I really wanted to own a real Android device) and I noticed a neat little effect in the Google+ app that comes with it. As you swipe down, new modules of content slide up into place. Video is best here:…
Zoe Gillenwater reminds us it's just a number, so why not? So obviously I made this dumb wall-phasing ghost. …
A lot of us around here have blogs and a lot of us use FeedBurner to "host" our RSS feeds. I thought it was worth talking about what might happen if we lose FeedBurner, which seems especially likely these days with the impending doom of Google Reader. …
Hans Christian with the state of web printing. All the old classics are still important, like display: none; on irrelevant stuff (like navigation) and using pseudo elements to display the URL's of links. But there are new kids on the block like @page which helps you style individual printed pages and control printing orientation for certain elements, -webkit-print-color-adjust: exact; for printing background colors/images, printing crop marks, and preventing widows. …
I've always wanted to get this going since seeing this Lennart Schoors post, but this Lee Mallabone tutorial finally pushed me to do it. The debug settings are specific to Rails, but if you're a CodeKit users you probably just do this.
In the past I've thought: I don't need no line number mapping! My SCSS is so organized and modular I can always jump right to what I need to edit. But I could smell defensiveness and …
rem length unit. But, you may not know that it has a couple of handy alternate uses. In this post, I’ll describe how to use the CSS rem unit to scale specific page elements while leaving others unaffected. I’ll also discuss how to use it as a replacement for the under-supported vw (viewporth width) unit.In desktop Safari, Chrome, Firefox, and Opera-under-Presto, (not IE, not mobile anything) <textarea></textarea>s have a little resizer nugget in the bottom right corner. Textareas are for writing in, so if users need more space to feel more comfortable writing in there, they can have it. Clicking and dragging that resizer literally changes the box model of that textarea, pushing other things away as needed. We can use that little ability to make a trick!…
Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically on-the-fly with JavaScript. …
David Storey shows off the latest work-in-progress CSS Level 4 stuff for hyphenation. Like properties to make sure multiple subsequent lines don't hyphenate ("ladders"), how many characters need to be left on the old line and new line, and what character to hyphenate with. …
There are quite a few properties in CSS that take a length as a value. The box model properties are the obvious ones: width, height, margin, padding, border. But plenty of others as well: the offset and sizing of a box-shadow or the size and spacing of fonts. What are all the accepted "length" properties in CSS? There are quite a few.…
Learn by seeing examples and code together in an easily digestible page-by-page format. Works on screens large or small, which we all know is darn important these days. By Greg Smith and Isaac Durazo.…
Jordan Moore experiments with talking to the browser to adjust how things look. For instance, "Make the text larger." Like in, you know, the future.…
We all know UA sniffing sucks. But it's really common because there is a real need to know stuff about the browser on the other end when serving up content and resources. What if instead of just a UA string, we got information about the browser in the headers as well? Client-Hints aims to be that. It's in the RFC (Request for Comments) stage now and there is great discussion about what kind of information it should be making available.…
Really nice set of user interface elements from the folks at Design Modo. This style is hitting a real design nerve right now. I like how they went the extra mile and made all the components actually work (e.g. sliders and radio buttons and whathaveyou).
The JavaScript is a bit hodge-podge though, using bits of jQuery UI, Twitter Bootstrap, Video.js, and many more. It's open source, so it would be neat to see people chip in and remove some of …
Reminders about what keys to press to get curly quotes and accented characters by Jessica Hische. I'm a major offender (SEE?!). I should be writing in Markdown which automatically fixes it. …