Have you ever seen those card-flipping games where either clicking or hovering over them would display the underside of that card? I’m going to show you how to create that same card-flipping animation in 

This tutorial will introduce you to the clip-path attribute while showing you how to use the transform attribute to flip in 3D.

Below is the final animation we will be creating. I have given crass colours to each side so it is clear which side is being flipped.

Pure CSS card flipping animation

Images can make forms more intuitive for users when they are filling them out. Most forms can’t be adjusted to have images but choosing from a list of options can make the whole process more user-friendly. We are going to use User Profiles as an example.

I’m talking about radio buttons, checkboxes, dropdowns and lists. Items that require the user to choose from a selection of options. Adding animation into all of that can take it that one step further.

 to toggled active states when clicked. But the animation is done in CSS and with SVG’s.

Animated profile tick selector

There is an abundance of loading spinners out there for you to download or use, but how easy are they to implement, or even write yourself? This one is really easy, although you can build on it to make it more flashy.

This one has a two-tone colour, which spins one way, before slowing down and spinning the other, then repeat. See, nice and easy. All created with only 

First, you’ll need to actually create the spinner, which is easily done with the following code.

HTML

Easily create your own CSS loading spinner

Underlining text can be great for highlighting or drawing attention to certain words or phrases, but on a website, wouldn’t it be awesome if we could animate that underline? If you hover over my site menu above, you’ll see that each menu item has an animated underline hover status.

To create this effect is fairly easy. We can create this effect without any 

, but all of my styling will be in SCSS. If you don’t want to use SCSS, then view the demo below in CodePen and you’ll be able to toggle between CSS and SCSS.

Firstly, we are going to create our list of items to animate. We are going to be using an unordered list. You can use whatever you want.

Animated underline hover status using CSS

The default checkbox supplied by most browsers is not that visually appealing. Although you can increase, or decrease the size, there is very little you can do with it in terms of styling.

So, what do you do should you wish to have something a little more stylish? Let me show you how to create a replacement checkbox to add flair to your mundane forms.

The answer is to create your own display. What we’ll do in this example is essentially link up a label to the checkbox, hide the checkbox so that we can use its functionality, and display a replacement using pseudo-elements. This will all be done in pure HTML and CSS.

The first thing we need to do is create our display, which is very basic.

Replacement checkbox with animation

 error that I was getting from my preprocessor tools.

If you happen to create you own script for WordPress, either Plugin, or Theme, you may also use preprocessor tools to build those scripts.

During one recent build, I happened to be running 

 to verify the quality of the Javascript that I was writing.

I recently came across a problem where JShint refused to validate perfectly valid script. The problem seemed to be that it wasn’t aware of a WordPress global JavaScript variable: 

Fixing ‘wp’ not defined using jshint

You may have noticed that on Android when viewing some websites, the address bar changes from the default Gray to a colour matching the theme of the website.

This is actually a very easy change to make on your website. It also can add that extra bit of style and presence to your website, while also making it stand out.

, you need to get the Hex value of the colour you will be using. Then add the following line to the 

Change Chrome Address Bar Colour on Android

Recently I had an issue where the telephone number simply did not appear on a website we had developed. The “Call us” text appeared fine, but the number itself didn’t.

This strange phenomenon was occurring on the strange world of iOS. Windows and Android seemed to resistant to this issue. Even Mac’s desktop version seemed fine. Just iPhones and iPads.

Now the text itself was nothing strange. Just a simple <p> tag with a <span> to add some styling, which included some padding, a background and font size and colour. The rest of the styling appeared, even for the telephone number. The box appeared with padding and appeared the correct size. But the essential part, the text, remained elusive.

Turns out that as part of the iOS operating system, it turns telephone numbers into links so that you can click on them and call them. Because the main part of the style sheet turned links the same colour as my background, it was causing the text to change colour.

So if you are having issues with text not appearing on iOS devices, you need to add styling to your <a> tags and make sure they override any inherited styling you have.

Fix websites missing telephone numbers on iOS

Recently I needed to find out the element index of a List element when clicked.

I managed to come up with the code that enabled me to do that using 

First, you need to set up your HTML code with an id of ‘bourne’. You don’t have to use bourne, use whatever you like.

You can see above that I have created an 

Category: HTML and CSS.