Animation of How CSS Triangles Work
In talks I've given in the past, I've found myself explaining how CSS triangles work with words and ridiculous hand gestures. It never goes particularly well. …
In talks I've given in the past, I've found myself explaining how CSS triangles work with words and ridiculous hand gestures. It never goes particularly well. …
The following is a guest post by Sara Soueidan. I know Sara through all her excellent work on CodePen. She was working on some custom HTML5 video controls and noticed that the customizations were lost when the video went into full screen mode (example of that happening). Digging into the shadow DOM, Sara finds a solution...…
Philip Walton looks at common CSS layout issues that were a pain in the butt before Flexbox.…
Revisiting the first universally accessible web browser…
More cleverness by Nikita Vasilyev. The blue glow outline that surrounds focusable elements when they are in their :focus state "flies" (you have to see it) to the next focusable element. So when you tab around, it is very clear where the focus has moved to.
I think it's a light enough effect that the cognitive gains are worth the animation. No feedback yet from anyone visually impaired. It would be great to know if this is helpful to them.…
The following is a guest post by Ray Messina. Ray was interested in sharing this technique as a way to pay forward things he's learned from this site in the past, which is awesome. You might be aware of the jQuery .has method, which allows you to select an element if it has any of another selector as a descendant. There is sadly no such selector in CSS yet. But if you know a little something about the HTML …
Fun visual demos by Jackie Balzer. I didn't know about a few, like transparentize. It seems to work the same as rgba, but I like the word transparentize better. I also didn't know Compass adds a few of its own, like shade, which adds black and is different than Sass's darken. …
And the most-used CSS property is... (guess before you click through).
There are some funny ones at the bottom. Hopeful ones like kerning and not-enough-coffee ones like text-underline.…
The <table></table> element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows. In this article we're going to look at how to use them, when to use them, and everything else you need to know.…
Webstock is posting talks from this year (as they have in past years) including mine.…
The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I've had this on my list to write about for way too long, so I was happy to let Zach dig into it and write up this comprehensive tutorial.…
Width based media queries are based on the entire browser window. If the browser window is narrower than 800px, do this. If the browser is window is wider than 400px, do this. But that's not always enough. Imagine a desktop 3-column layout at 1000px. Each column is 333px wide. Then you have a media query break at 800px which drops it to a 2-column layout, and with the third below. Even though the browser is now narrower, each column is …
Making server-side choices based on client-side information is a bit of a modern day holy grail. Client-Hints will hopefully someday make that easier, but we don't have that yet. I'm a fan of the cookie-based approach. This polyfill by Jonathan Neal aims to replicate Client-Hints with the cookie-based approach. …
Clever idea by François Zaninotto. Add to the searchable element a data-index attribute which contains all the text content of its children smooshed together. Then you can find matches using the [data-index*=""] selector, which is fast. Essentially doubles the DOM weight, but that's rarely too big of a deal.…
I recently spent a week at Hilton Head Health, a weight loss spa in South Carolina. Part of the experience was classroom learning about lots of different health related topics. While hearing all about those things, I couldn't help but think about parallels between personal health and the health of websites. Mostly about web performance. Perhaps looking at these similarities is useful, as there is great value in taking care of both and sometimes a good ol' analogy can …
An attempt to make reading on screens easier though applying color gradients to lines of text. For example, one line of text will fade to red and the next line will start with red, making it easier for your eye to jump down to the right place. It looks silly, but I've tried it a few times now and it does seem to make me read faster and more comfortably.
I'm not sure why it has to be all "All …
The following is a guest post by Ryan Burnette. As you'll read below, Ryan was working on a WordPress site that utilized a plugin that used the Instagram API to pull down photos. He was using it in a bit of a non-standard way that lead to lots of requests and a very slow site. In poking around at different solutions, he came across fragment caching. But unfortunately some of the information he found was outdated, so, like a …
I'll be speaking at a few events coming up:
Every once in a while I'll hear people say something along the lines of "well that's for web sites, but it's not really relevant for web apps." That implies there is some kind of line that separates the two. Different needs and rules that change the game and alter the conversation around them. Is it true?…
The results are in! Nearly 5,000 voters weighed in on the last poll to decide if the off-screen "drawer" navigation style that has swept mobile design is appropriate for larger screen ("desktop") designs. You could answer:…
The following is a guest post by Pankaj Parashar. Pankaj wrote to me about some pretty cool styled progress elements he created. I asked if he'd be interested in fleshing out the idea into an article about styling them in general. Thankfully, he obliged with this great article about using them in HTML, styling them with CSS as best as you can cross-browser, and fallbacks.…
Jeff Starr explains a classic CSS layout issue and suggests a fix. It's the overflow that does it by triggering what I believe is called a new block formatting context.…
I have no doubt CSS will allow this one day, but right now, you can't animate the width or height of an element from a fixed value to auto. This is particularly useful when the desire is to animate from hidden to visible like jQuery's slideDown(). Nikita Vasilyev shows how you can do it with a touch of JS, but still using CSS for the actual animation/transition.
The more difficult one is to auto: 1) measure width 2) set auto …
A web app by Julian Garnier for building and manipulating 3D shape creations in CSS. The interface is genius. One panel shows you the creation from an angle so you can see the 3D-ness of it and spin it around. The other three panes show you the creation from different straight on angles so you can drag them around in the relevant directions.
Check out a demo if you aren't impressed yet.
In the Preview Mode there is a button …
The Forums on CSS-Tricks started life as phpBB sometime in 2008. There is even an ancient video of how to apply a basic skin. Sometime in 2010 I moved them to Vanilla Forums in a response to heavy spam and the general unwieldy nature of phpBB. Now in 2013, the forums have been moved yet again, this time to bbPress.…
Back when I did the Kickstarter for this site, one of the rewards I offered was a critique, public or private, of any website. The only taker was Gus Fune, who opted for the public critique of a site he worked on: epicawesome.co. Thank you Gus for allowing this to be a public learning opportunity! …
What is the most important CSS on the page? The styles that affect what you can see immediately. Chances are, that is far less CSS than your entire stylesheet(s). What if you could serve just that CSS right away rather than your entire (blocking) stylesheet? Paul Kinlan shares an idea.…
Bruce Lawson:
Once again, I propose that the definition of <cite> be reverted to include the real-world use for marking up names of those cited, and that the spec note that cite-inside-blockquote is one way (although not the only way) to link a quotation with the work or the person being quoted.
+1
The cowpath was already paved, so we just need to stomp it down again.…
A question came up in a semi-recent ShopTalk episode about the use of jQuery in tutorials.
Lately I've begun to realize how muddled the line between jQuery and JavaScript has become when learning about the language. It's hard to find a solid tutorial that doesn't include jQuery instead of JavaScript. What's your opinion on the overuse of the library?…
If you like, you may skip straight to the fallbacks.
There is a very clever technique by Alexey Ten on providing an image fallback for SVG going around the internet recently. It does just what you want in the classic no-SVG-support browsers IE 8- and Android 2.3. If we dig a little deeper we find a some pretty interesting stuff including a bit of unexpected behavior that is a bit of a bummer.…
There are loads of job titles in our industry. The opinion on their usefulness range from harmful (i.e. leads to “not my job” syndrome) to vital (i.e. people change companies sometimes and need common language). Since they are out there and we use them, there should be some consistency to their definition. Perhaps we can get closer to nailing that down.
Let's light this fire, shall we? This is all debatable, of course.…
Aimee Ault from deviantART discovered that some of their stylesheets would fail to load for some users. Turns out those users were
accessing the site from computers with overly sensitive system-wide profanity filters installed. These users' browsers likely stopped parsing the stylesheet entirely upon reaching the word in the stylesheet, leading to a fairly ugly and/or broken page.
Ideally you have a build system that compresses CSS and removes comments, but if for whatever reason you ship CSS with comments …
This demo by Guillaume Lecollinet feels super futuristic.…
The following post is by Hugo Giraudel, a regular contributor here. In the grand CSS-Tricks tradition, Hugo found a cool effect on the web and dug into how he could re-create it in a smart way.…
The following is a guest post by Chris Scott. Chris was messing around with SVG filters and how they can be applied to text. I thought this was quite interesting because SVG filters are quite a bit different than CSS filters. Arguably more powerful, as there are more of them and you can do things like bevel/emboss or stroke which you can't in CSS filters. Chris goes into detail here on how it's done including a tool to make …
The following is a guest post by Andrey Sitnik, the creator of the Autoprefixer tool, a "postprocessor" for handling vendor prefixes in CSS. Why use this instead of your preprocessor or another tool? Many reasons. Andrey will explain.…
You might have seen a workflow where you can save out of DevTools to file. But have you seen it changes made in DevTools instantly update the code in your editor in real time? And vice versa?…
The following is a guest post by Kushagra Gour (@chinchang457). Kushagra wrote to me to show me a fun interactive demo he made. It touches on many of the concepts of 3D transforms in CSS, a topic we haven't covered a ton here. So here's Kushagra taking the reins to explain these concepts through a demo.…
Ah the humble module! A good many designs these days make use of modules in the content-y and app-y sites alike. A chunk of information, an advertisement, a grouped set of functionality... could be anything. The fact that they likely have visual similarity yet can contain anything leads to an interesting CSS challenge: how do you pad the inside consistently?…
[Pitchfork Holding Web Designer #1]: All designers should learn to code!
[Pitchfork Holding Web Designer #2]: No! Worrying about implementation influences design for the worse!
[Josh Seiden]: wtf.
Most designers are comfortable starting with bad ideas and iterating until they find satisfying solutions. Along the way, we throw out lots of ideas, for lots of reasons. We should be mature enough to throw out ideas that are unduly influenced by the system model.…
I like this sentiment by Robin Rendle:
As front-end developers and designers, we’re constantly refining two interfaces simultaneously: one for visitors who load the website, the other for developers who have to tackle the code in the future
Surprise! Preprocessors give you the organizational tools to do a good job with this.…
A 10-minute, deadly serious talk with Paul Armstrong and myself.…
Simon Madine is leading the charge in the neglected world of CSS testing. This is the scoop so far as I understand it.…
Deployment is moving a website from a local environment to live servers. What seems like a simple thing can actually be quite complex. There are absolutely loads of ways to go about it. They range from user friendly software and services, to more complex command line tools, to full blown systems with lots of moving parts.
I'm not an expert in all this, but I've set up a few different deployment systems in my day as well as worked with …
I got to be a guest on Tim Smith's The East Wing podcast. I talk about some of the stuff that's happened in my life since the last time I was on the show over a year ago, like the Kickstarter and CodePen. We also get into some random topics like freelancing and frameworks.…
Wilson Page wrote a really great article for Smashing Magazine digging into a real world website and all the cool modern tools and techniques he and his team used to build it.
For layout, they initially chose flexbox, but...…
John Lindquist with a free series of 46 ~3 minute videos explaining AngularJS. He takes donations on Egghead.io if you're so inclined.…
Gotta love it when conferences post all the talks online. Perfect for some weekend binge watchin'.…
As a beginner in any specific web tech, your first concern is "what is this and how does it work?" As you level up, those concerns change. You may still learn about about how it works as you dive deeper, but other concerns will emerge the more you know, the more you use it, and the more work of others you are exposed to.…