Posts for HTML

css card flip

CSS Card Flip Animation

In this post, I will share how to create a card hover flip animation with only CSS. For an example of this effect, hover the card below. See the Pen Card Flipping Effect by Steven Stromick (@sstromick) on CodePen. Let’s start with the HTML for the card, card…

css card overlay

CSS Card Overlay

In this post, I will show you how to show a card overlay when a card is hovered. Hover the card below to see an example. See the Pen card overlay by Steven Stromick (@sstromick) on CodePen. First let’s start with the HTML. Now for the CSS for…

Create a Home Page Hero Area

How To Create a Home Page Hero Area

In this post I will show you how to use several CSS features to create a nice looking hero image area for your home page. Here are some of the different CSS features we will be using to accomplish this: image covering entire background area color gradient overlay…

5 Tips For Optimizing Your Images For The Web

5 Tips For Optimizing Your Images For The Web

A picture is worth a thousand words…. well not if it causes your site to load slowly. Poorly optimized images are often the cause of a slow loading sight. But images and image optimization also plays an important role on your blog: they make the content more enjoyable…