View RSS Feed

Recent Blogs Posts

  1. CSS Animations - when performance goes bad (and how to fix it)

    Through the power of CSS3, animation of most HTML elements can nowadays be done without using JavaScript or Flash. Gone too (almost) are the days when images would be blinked on and off with an animated GIF. There are still times, however, when a kitschy garnish can be just the thing to add a bit of festive fun to a normally tasteful web page. There's a time and a place for everything and if we can't have fun at Christmas, well, when can we!?

    But let's not go overboard. Everything ...

    Updated 12-17-2016 at 06:57 AM by Beverleyh

    Categories
    CSS related , Web Design issues
  2. Android (≤4.4) stock browser-friendly CSS Animations

    While I've been rolling out my Sweep-in News Scroller with Controls on a school website (cutting out jQuery for performance gains), I was handed an older Android device that didn't display it. In place of the news scroller was... well, nothing at all! zilch! Just empty nothingness with no sign of what *should* be there. I was perplexed and annoyed. What was going on?!

    Identifying the problem
    Day-to-day I use newer Android devices for general testing, which have Chrome installed ...

    Updated 08-25-2016 at 03:51 PM by Beverleyh

    Categories
    CSS related , Web Design issues
  3. Img Src to Background-Image - Dealing with images inserted via a CMS

    This small JavaScript function converts the src attribute of an <img> tag into a CSS background-image, where background-size:cover; kicks in for visual containment and faux-cropping. In other words, it forces image size to be consistent.

    Backstory
    While I've been working with folks who update their own web pages - training them to use a CMS and the likes - one common issue that crops up has to do with the arrangement of images on a web page. Inevitably, at some point, ...

    Updated 06-25-2016 at 08:21 AM by Beverleyh

    Categories
    JavaScript & Ajax , CSS related , Web Design issues
  4. iOS 'Sticky Hover' Fix - Unhovering dropdown CSS menus

    One line of JavaScript to fix the 'sticky hover' problem on iOS; Where hover CSS isn't removed from an active element until another focusable element (button, link) is clicked. With this script, a tap of the surrounding area will remove hover CSS.

    What's the problem?
    In the opening paragraph, I state that a problem with hover activated CSS on iOS is that hover styles aren't removed until another element takes focus. A notable case for this is with CSS-only dropdown menus - ...

    Updated 05-30-2016 at 01:20 PM by Beverleyh

    Categories
    JavaScript & Ajax , CSS related , Web Design issues
  5. The Easy Way to Absolute Center (vertical + horizontal alignment)

    I hit a snag recently when I wanted to absolutely center a responsive image and couldn't use my 'go-to' method of CSS3 transforms, due to other conflicting CSS3 keyframe animations that were cancelling it out;
    Code:
    img { 
    	max-width: 100%; 
    	max-height: 100%; 
    	position: absolute; 
    	top: 50%; 
    	left: 50%; 
    	-webkit-transform: translate(-50%,-50%);
    	-ms-transform: translate(-50%,-50%);
    	transform: translate(-50%,-50%)
    }
    Here's ...

    Updated 05-28-2016 at 08:23 AM by Beverleyh

    Categories
    CSS related , Web Design issues
Page 1 of 7 123 ... LastLast