Convert Photoshop Letter Spacing to CSS

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.

Convert Photoshop Letter Spacing to CSSUsing 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.

Never fear — there is a formula for it! I also built a Photoshop to Letter Spacing CSS Converter for the lazy below. Translating Photoshop’s letter tracking (a.k.a. letter spacing) is a cinch with these simple math equations. Continue reading “Convert Photoshop Letter Spacing to CSS”

Responsive Images — 6 Simple Ways

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”

Styling File Inputs — The Best Way

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.

See the Pen Beautiful CSS-Only File Inputs by Ben Marshall (@bmarshall511) on CodePen.

View Demo View Code

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!

Continue reading “Styling File Inputs — The Best Way”

Responsive Iframes — The Right Way (CSS Only)!

Building responsive iframes can be frustrating. Don’t let an iframe break your beautifully laid out responsive site. Learn how to build responsive iframes the right way with just a few lines of CSS.

“Responsive Iframes — The Right Way (CSS Only)!” was originally published on the 19th of March 2014, last updated July 24, 2018 to reflect emerging trends.

Responsive iframes are a cinch! Jump start using the responsive iframe CSS (using intrinsic ratios) shown below to make your iframe responsive. You’ll never ask ‘how to make iframe responsive’ again!

View Demo View Code

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
The responsive iframe CSS above demonstrates how to transform a normally fluid iframe into a responsive iframe. Just be sure to update the padding-top property to reflect the aspect ratio to make iframe responsive.

Continue reading “Responsive Iframes — The Right Way (CSS Only)!”

CSS Print Stylesheet Tips & Tricks

CSS print stylesheets often get put on the back burner, if they ever get made at all. Most front-end developers and designers out there are more obsessed with pixels than printers. This can cause a gap in your site’s consistency when users attempt to print pages on your site. Often times, what get’s printed and what they see on the screen are two completely different things. From images wrapping in odd places to pages getting cut off on the sides, printing webpages can sometimes be a big headache for users.

CSS print stylesheets often get put on the back burner, if they ever get made at all. Most front-end developers and designers out there are more obsessed with pixels than printers. This can cause a gap in your site’s consistency when users attempt to print pages on your site. Often times, what get’s printed and what they see on the screen are two completely different things. From images wrapping in odd places to pages getting cut off on the sides, printing webpages can sometimes be a big headache for users.

Coding CSS print stylesheets doesn’t have to be a monumental task. Let’s go through some simple tips and tricks that can save you both time and headaches.

Place styles in a print media query.

Remember, you don’t need to recreate your entire CSS. Most all styles are inherited by the print query, only the differences should be defined.

Make color changes explicit.

Most browsers will automatically reverse colors to save toner ink. This can sometimes cause problems with the quality of the printed page. For best results, make color changes explicit.

Remove unneeded page elements.

Generally, the goal for printed pages isn’t to provide an exact screenshot of what’s seen on the screen. Instead, to provide a well-designed print version of it. Elements like navigation bars and search forms aren’t needed on printed versions, so remove those to save both room and ink.

Set page width & margins.

Make sure your content is getting printed edge to edge by setting the body width to 100% and defining the page margin. I’ve seen some sites that go a little further and provide users some extra space for handwritten notes on the page.

Avoid odd page breaks.

Make sure your content doesn’t get spilt up across multiple pages at odd points. This can sometimes be the biggest headache when creating print stylesheets.

Force background images & colors.

Some pages require background images and colors to appear correctly. You can force these colors to show when printed in color with WebKit browsers (Chrome or Safari) using a separate media query. Unfortunately, at the time of writing this article, there’s no equivalent for Firefox, Opera or Internet Explorer (no big surprise there).

Display link URLs.

Remember, this is a printed version of the page so users have no way to access links without knowing the URL of those links. Providing a reference to the linked URLs tell’s users where those links go to. Take a look at the HTML code below:

Here’s the printed result of the code above:

With the holidays coming around the corner, many people are looking for unique gift ideas < http://www.knowgifts.com > to surprise their loved ones.

One problem with the code above is that both anchor links and linked images will also get expanded. We can fix that with a countermand CSS rule:

Selecting links around images can be more difficult since CSS doesn’t currently allow for selections of elements based on its children. This get’s remedied with the CSS4 parent selector:

CSS4 also makes expanding external links easier:

Provide QR codes for easy URL references.

Using Google’s Chart API, you can provide users a QR code on printed pages. There’s a downside to this approach, because you have to define the URL in the style. If you’re running PHP or another dynamic scripting language, this can be fixed by providing the URL automatically:


Worth-while CSS Print Articles & Tutorials

Check out these other great articles and tutorials regarding CSS printing: