CSS Magic

A Brief Introduction

If you were to use a cake analogy to describe the components of a website, CSS would definitely be the icing on the cake. Better yet, it would be the icing and decorations. CSS transforms a boring web experience into a more engaging, appealing, and rewarding user experience.

What Does CSS Do Exactly?

Well CSS can do a number of things…

1. Broadly speaking, it dresses up a website with colors, layout, and fonts.
2. It gives a website the ability to change it’s layout and appearance or adapt visually to whatever device it is being displayed on. That not only goes for different sized screens but for printing as well. This is called Responsive Web Design. To learn more about Responsive Web Design visit: https://www.w3schools.com/html/html_responsive.asp
3. Nowadays, the latest version of CSS allows for endless possibilities with typography, animation, and interactivity. Basically, what I like to call magic.

CSS Allows For Responsive Web Design. It Gives Websites The Ability To Adapt To Different Screen Sizes.

Some “Magic Tricks” Exposed

As I had mentioned earlier, there are nearly endless possibilities as far as what you can do with CSS. Below I would like to share a few mouse hover tricks you can do with CSS to “add some icing to your website” or to give it that extra flavor.

CSS Hover Effects

Fast CSS Image Rollover Technique

This technique requires an initial setup in an image editor such as Adobe Photoshop. Basically, you stack two different images, but equally-sized, on top of one another and save it as one web-ready image. So for this example we have two images, a 200 by 300 pixel color version, and a 200 by 300 pixel monochromatic version (shown in Fig. 1). We stack it and save it as one 200 by 600 pixel image.

<!-- This is the HTML code -->
<a href="/link-path" class="rollover"></a>
/* This is the CSS code */
.rollover {
background-image:url(images/image.jpg);
width:200px;
height:300px;
background-position:0px 0px;
display:block;
}
rollover:hover {
background-position:0px -300px;
}

With the CSS code above you are essentially creating a viewable area of 200 by 300 pixels and only revealing the top half of the 200 by 600 pixel image. Initially setting the position of the image so that at first the top half is shown. Then when in the hover state the image is moved up 300 pixels to reveal only the bottom half. The repositioning of the image happens so fast it gives the illusion of a nice hover effect where the image goes from color to grayscale. You could also get creative with this technique and have a frowny face change to a smiley face upon hover (shown in Fig. 2).

CSS Hover Effects Without An Image

It is not necessary to use an image when creating a rollover, especially when creating interactive buttons. Check out the link below to see some of the many cool effects you can have with rollover buttons.

https://ianlunn.github.io/Hover

CSS Scaling Button Transition

I will explain one of the techniques used from that site. It is an animated scaling button. The button gradually scales larger when you hover over it. Then gradually scales back to its normal size when you take the mouse cursor away.

<!-- This is the HTML code -->
<div class="button">
  <p>SCALE</p>
</div>
/* This is the CSS code */
.button {
    width: 120px;  /* sets the width for the button */
    height: 40px;  /* sets the height for the button */
    border-radius: 5px;  /* gives the button rounded corners */
    text-align: center;  /* aligns button text horizontally */
    line-height: 40px;  /* centers button text vertically */ 
    background: #e1e1e1;  /* button color */
    -webkit-transition-duration: 0.3s;  /* transition time */
    transition-duration: 0.3s;  /* transition time */
   }
.button:hover {
    background-color: #a1a1a1;  /* button color in hover state */
    cursor: pointer;  /* changes cursor to a pointing hand */
    transform: scale(1.1);  /* scale amount */
    -webkit-transform: scale(1.1);  /* scale amount */
    transition-duration: 0.3s;  /* transition time */
    -webkit-transition-duration: 0.3s;  /* transition time */
   }
.button p {
    color: #333;  /* dark gray font color */
    font-family: Helvetica, Arial, sans-serif;  /* the font type */
    font-size: 0.85em;   /* the size of the font */
    letter-spacing: .075em;  /* spacing between letters */  
   }
.button:hover p {
    color: #fff;  /* text color during hover state */
   }

THE HTML

The HTML code provides a <div> element which is just a container, and a paragraph tag inside which hold the text for the button. The <div> is assigned a class called “button”. Now we have control of the everything in that <div> container using that class.

THE CSS

Above, I have used comments on each line of the CSS code to describe what that particular line is doing. I want to focus on what is giving the button it’s scaling ability. So we are giving the button two states. An initial state (.button) and a hover state (.button:hover).

THE INITIAL STATE

The initial state is just the button before the user interacts with it and performs the rollover. It is here we basically set up the appearance of the button, with the exception of the “transition-duration:” lines. These lines tell the button to gradually transition. Transition from what? We will explore that shortly. First, let’s talk about the hover state.

THE HOVER STATE

The :hover pseudo-class selector will become active when the user rolls over the button with the mouse cursor. So the code block within “.button:hover” will be executed. This is where I change the color of the button, the appearance of the mouse cursor, and I transform the scale of the button.

transform: scale(1.1);
-webkit-transform: scale(1.1);

The line “transform: scale(1.1);” changes the scale of the button by 10%, where 1 is the original scale, and anything larger (1.1 for example) will increase the scale. The next line of code “-webkit-transform: scale(1.1);” does the same thing, but the -webkit- prefix makes the transform property compatible with Chrome, Safari, iOS, and Android browsers.

transition-duration: 0.3s;  
-webkit-transition-duration: 0.3s; 

When you hover over the button it should instantly appear 10% larger, unless you add the line “transition-duration: 0.3s;”. Then, it will gradually scale 10% larger. It will take 0.3 seconds to make that transition. Again, we also have the same line but with the -webkit- prefix, making it compatible with a multitude of different browsers.

I also wanted to change the text color inside of the button when hovering. I created the initial state for the text giving it a color, font, letter spacing, and size. Then for the hover state, I simply change the text color. Voilà!! A button with a scaling transition.