While lazy loading of the images has been used by many performance conscious websites, the placeholder images are not usually the focus. Having placeholder images that respect the actual proportion of the lazily loaded images will reduce the “jumpiness” once images are loaded. Obviously in order to do this, you will need to know the… Continue reading Lazy image placeholders that respect the actual image aspect ratio
Some of you might know that I’m one of main developers who worked on the bhg.com site relaunch of 2015. I enjoyed applying many responsive techniques to the website. I used freely the relative new FLEXBOX feature in CSS. One of the more challenging aspects of the site design is the homepage. The designer’s dream was… Continue reading Flexbox center cropped responsive images align justified
NO MORE negative margin hack
I was playing with codrops dialog effects and learned the following: New absolute centering using flexbox Add css class for animation effect and remove it on animation end How to align background-image to the right and bottom Simple dialog effects pen
Placeholder text in selection/dropdown cannot be manipulated by CSS right now. Sometimes we’d like the placeholder text to change based on how wide the container is. Goal To allow the same HTML look differently based on the width of its container. So here’s an idea to generate a selection/dropdown via a list and allow the… Continue reading Responsive Selection/dropdown idea
On parents.com, we previously used the jquery plugin tiny carousel to display various lists of links mostly used to track pregnancy month/week: For example: The concept is easy. You have a list of items that you want to scroll horizontally by using nav buttons. In our case, all of the content are lists of links.… Continue reading How I made tiny carousel swipeable
CSS has properties to make any element you wish behave as if it was a table element. You’ll need to structure them essentially as you would a table, and it will be subject to the same source-order-dependency as a table, but you can do it. I’m not crapping on it either, it’s genuinely useful sometimes.… Continue reading Making Semantic Elements Behave Like a Table
Just to play around, I wanted to achieve the following input box look with pure CSS 3. Also to teach myself how box-shadow works. I think I got pretty close. jsFiddle example
To add arrows for any boxes in CSS3 is relatively easy. You may use the border, absolute position along with the :before pseudo selector to add arrows in any directions. To make a triangle with CSS border: More on CSS3 shapes To position the arrow, make sure the box container is positioned relative so the… Continue reading CSS3 – add arrows to boxes
Pure-Essence.Net 