Sketch may be the new go-to for web design, but there’s still a lot of dino-designers out there using Photoshop. This post is for those devs who need to convert letter tracking values to Photoshop letter spacing in CSS.
Using Photoshop for your web designs? You’re probably familiar with the term Letter Tracking. Letter Tracking in Photoshop is the term used for adjusting the space between letters in text. On the web, this is called letter-spacing. The problem is Photoshop’s letter tracking doesn’t convert 1:1 to letter spacing in CSS. In this post we’ll go over how to convert Photoshop letter spacing to CSS.
Bandwidth is precious on mobile networks, so it helps to serve users on smaller screens a smaller image. Learn how to serve up specific images depending on device with these techniques.
Like with most things in the development arena, there’s more than one way to skin a cat. In the case of CSS responsive images, the story is no different. In this post we’ll go over the top techniques for making responsive images. Continue reading “Responsive Images — 6 Simple Ways”
Google ‘styling file inputs’ and you’ll find dozens of techniques on how to theme file inputs. The better, most optimized, semantic and accessible way to style <input type=”file”> is just with a little CSS and <label>.
I’ve spent countless hours styling file inputs using a number of different techniques out there. End result is always the same — frustration. A common (IMO worst) technique to style file inputs is faking buttons with extra, non-semantic HTML, CSS and JS. Dirty, dirty, dirty, not to mention the drawbacks for usability and touch. Don’t fret! There is a better way.
Styling clean, semantic and accessible upload buttons requires two things: CSS & <label>. I’ll go over the technique and show how a little extra JS (optional) can enhance the UX. The input file CSS possibilities are limitless once you understand how this technique works!
An often overlooked part of development are CSS print stylesheets. Printing pages directly from the browser can lead to frustration. Done right — you can have an optimized page that uses a minimum amount of ink and paper and ensures that everything is easy to read.
CSS print stylesheets are often overlooked, if ever even thought about. Most frontenders are more obsessed with pixels than printers. Often, what get’s printed and what’s shown on the screen are completely different. From images wrapping in odd places to cut off pages, printing webpages can sometimes be a big headache. In this post, I’ll go over some helpful tips and tricks when creating these stylesheets that’ll save you hours of frustration — and make your site print in style!Continue reading “CSS Print Stylesheets — Print in style!”