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”

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)!”

HTML5 Geolocation API Guide — it’s easy!

The HTML5 Geolocation API is a powerful tool that allows developers to retrieve a user’s location information with a high degree of accuracy. Get and keep track of your users — with their consent of course.

“HTML5 Geolocation API Guide — it’s easy!” was originally published on the 23rd of January 2014, last updated August 29, 2018 to reflect emerging trends.

Everyone of us occupies a position on Earth — duh! This position is specified by a geographic coordinate system of latitude, longitude and altitude. The HTML5 Geolocation API provides a way to gain access to your user’s information — with their consent of course! In this post, I’ll go over how to use this API so you can build some truly powerful and creative apps. Continue reading “HTML5 Geolocation API Guide — it’s easy!”