Slider with Sliding BackgroundsAmong 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 … | May 17, 2013 | 18 comments |
Photo SwivelThe 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! Web designers … | May 15, 2013 | 36 comments |
Media Query Change Detection in JavaScript Through CSS AnimationsThe 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, … | May 14, 2013 | 9 comments |
Naming Media QueriesIt 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 | May 9, 2013 | 43 comments |
Line Clampin’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 … | May 7, 2013 | 24 comments |
→ CSS Zen GardenIt’s back.… | May 7, 2013 | |
→ How to mark up subtitlesNow that | May 6, 2013 | |
→ Making accessible icon buttonsComprehensive research by Nicholas C. Zakas on the correct markup to make a graphic-only button accessible.… | May 6, 2013 | |
3D Inset Parallax EffectThe 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 … | May 4, 2013 | 30 comments |
Make Client Side Data Available Server SideThat 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. … | April 28, 2013 | 52 comments |
→ WebP with FallbackWebP 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 … | April 28, 2013 | |
→ The CSS-Tricks LicenseSometimes 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. … | April 28, 2013 | |
→ CSS3 OverflowNot 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 … | April 23, 2013 | |
Magic Numbers in CSSDespite 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 … | April 22, 2013 | 35 comments |
→ WP Migrate DB ProI 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 … | April 17, 2013 | |
Preventing the Performance Hit from Custom FontsThe 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 … | April 17, 2013 | 29 comments |
Line-On-Sides HeadersForums 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 … | April 16, 2013 | 36 comments |
→ List of Pseudo-Elements to Style Form ControlsLike the little handle on range inputs. You can style that, but it’s different in all the major browsers. It’s either | April 16, 2013 | |
Transitional Interfaces, CodedPasquale 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 … | April 11, 2013 | 24 comments |
→ csscssA 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 … | April 11, 2013 | |
Can You “Over Organize” JavaScript?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 … | April 10, 2013 | 37 comments |
CSS-Tricks Chronicle XIISITEOWNR: Thers new ifnormation inthe site foryou. (puts on sunglasses). STRETEMAN: yesyes Im hapy ! | April 8, 2013 | 14 comments |
Body Border, Rounded InsideReader 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. It does look rather … | April 5, 2013 | 35 comments |
→ BlinkChrome 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, … | April 3, 2013 | |
Pop HoversPOP 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 … | April 3, 2013 | 47 comments |
Repoll! Whose Responsibility is “Mobile” Design?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: What is your opinion as to … | April 2, 2013 | 43 comments |
→ SVG Patterns GalleryUsing 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.… | April 1, 2013 | |
Poll Wrapup: How Much Effort Do People Put Into Alt Text?From over 16,000 people surveyed, more than half (54%) say they “do some” when it comes to | April 1, 2013 | 19 comments |
→ The State of SpinnersIf 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 … | March 31, 2013 | |
Brand New Series in The Lodge: Building a Mobile-First WordPress-Powered Artists Website | March 29, 2013 | 19 comments |
Slide In (as you scroll down) BoxesI 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 … | March 27, 2013 | 54 comments |
→ You Can Transition z-indexZoe Gillenwater reminds us it’s just a number, so why not? So obviously I made this dumb wall-phasing ghost. … | March 27, 2013 | |
Let’s Say FeedBurner Shuts Down…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 … | March 26, 2013 | 49 comments |
→ Printing the WebHans Christian with the state of web printing. All the old classics are still important, like | March 25, 2013 | |
→ Line Number Mapping for Sass in Chrom Dev ToolsI’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 … | March 25, 2013 | |
Hang On PlaceholdersThe way that placeholder text works on inputs and textareas is either that 1) the placeholder text disappears immediately when the empty input is focused or 2) the placeholder text stays until actual text is entered. Perhaps a middle ground could also make sense. | March 25, 2013 | 35 comments |
There’s more to the CSS rem unit than font sizingMany web designers and developers are familiar with the CSS | March 22, 2013 | 10 comments |
Tricky Textarea PulltabIn desktop Safari, Chrome, Firefox, and Opera-under-Presto, (not IE, not mobile anything) | March 21, 2013 | 22 comments |
Automatic Table of ContentsAny 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 … | March 20, 2013 | 75 comments |
→ Finer Grained Control of HyphenationDavid 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 … | March 14, 2013 | |
The Lengths of CSS | March 13, 2013 | 68 comments |
→ Learn CSS LayoutLearn 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.… | March 12, 2013 | |
→ Responding to VoiceJordan Moore experiments with talking to the browser to adjust how things look. For instance, “Make the text larger.” Like in, you know, the future.… | March 10, 2013 | |
CSS-Tricks Chronicle XIA brief summarization of the events that have been and events that are to be. Wherein ‘events’ refers literally to physical events as well as figuratively as in ‘some kind of thing that happened, loosely.’ | March 9, 2013 | 5 comments |
→ Client-HintsWe 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, … | March 7, 2013 | |
→ Flat UIReally 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 … | March 5, 2013 | |
→ Quotes & AccentsReminders 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. … | March 5, 2013 | |
Using SVGSVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know. … Why | March 5, 2013 | 117 comments |
Mixing Responsive Design and Mobile TemplatesYou need a mobile strategy for your site. You have to pick Responsive Design or a dedicated mobile site, right? Maybe not. Maybe you can mix and match a variety of strategies. Me and the team are working hard on … | March 4, 2013 | 35 comments |
→ More CSS SecretsHow could I not link to this CSS trick saturated talk by Lea? Great follow up to the original. … | February 27, 2013 |
