Petfinder 3.3.0 introduced the Polaroid Effect option thanks to a recommendation from my good friend at GrimeyMedia. You can check it out on the demo page. Once the Polaroid Effect is enabled, a site administrator has the ability to set the maximum degree of rotation for each pet card. The range is between 1 and …
Category Archives: HTML/CSS
<wbr> tag not supported in Mac Firefox
The <wbr> tag is a nifty piece of markup introduced in HTML5, that specifies where in a text it would be okay to add a line-break. Unfortunately, Firefox on Macs do not support the <wbr> tag.
Edge object-fit Fallback without a Polyfill or Modernizr
For the A-Z Directory module, I wanted a sensible and aesthetically pleasing approach to displaying contact images. Without knowing the width and height dimensions of the images people would be using for their contact images, I looked to the object-fit CSS property to avoid squashing and stretching the images. Object-fit has great support in modern browsers except for Edge.
Continue readingEdge object-fit Fallback without a Polyfill or Modernizr
Animated Gradients
I wanted to add a little spice to the hover states of my navigation and found a nice technique to animate a gradient, giving the impression that a background color will fill from left to right.
Smoother iOS Vertical Scrolling
Working on an off-canvas navigation technique wherein the navigation would cover the entire viewport, I set overflow-y: scroll on the containing div. While this provided the ability to scroll down long navigation lists on touch devices, it was not a fluid interaction. This can be made fluid by adding the -webkit-overflow-scrolling: touch style declaration to …