HTML/CSS Archives - Bmore Creative, Inc.

RGB Values as CSS Variables

I was working on a site that was color-coding project types and there was a need to use one color with varying opacity per project type. For the full opacity colors, I could use the hex value, the rgb syntax, or the rbga syntax with “1” as the opacity. But with so many style declarations […]

Images not Scaling Correctly in Flexbox Containers

I had a situation where images in flexbox containers were not behaving responsively, in that they did not scale proportionately depending on viewport width.

The Petfinder Module – Version 3.3.0

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 […]

<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.