( read )

Cool CSS Tricks: Stylish Design

By Michele Brown
http://cdn2.hubspot.net/hubfs/497826/computer-art.jpg

Cool CSS tricks to paint your screenCSS can be deceptively simple once you know the right tricks. Today I’d like to share some of my favorite bits of css that look cool and are far easier than you might think.

Animation Basics

You may believe you need to learn a new computer language in order to include animation on your website, but the truth is there’s a lot of cool animations that can be done entirely in CSS.

First, the selector that makes this all possible: hover. In order to animate, there needs to be change. You could learn basic JavaScript events for more trigger options, but that’s not necessary to get started.

You may already be familiar with hover from styling links. This selector is not limited to the anchor tag, however. You can apply it to any element, class, or id, and allow it to trigger any styling change, even of a child element:

.animate{

    display:inline-block;

    margin: auto;

    background-color:blue;

    padding:0;

}

.animate img {

    opacity:0;

}

.animate:hover {

    padding:15px;

}

.animate:hover img {

    opacity:1;

}
<div class="animate">

   <img src="" alt=""/>

</div>

Now your elements will react when you hover over them, but it’s still an abrupt switch from one state to another. It’s time to add the next big piece of CSS animations: transitions. This will change that abrupt switch to fading or motion, and can be applied to most styling changes:

.animate{

    display:inline-block;

    margin: auto;

    background-color:blue;

    padding:0;

    transition: all 0.5s ease-in-out 0s;

}

.animate img {

    opacity:0;

    transition: all 1.5s ease-in-out 0s;

}

.animate:hover {

    padding:15px;

}

.animate:hover img {

    opacity:1;

}

<div class="animate">

   <img src="" alt=""/>

</div>

Now when you hover over your animated div, it expands and the image fades in. This is still pretty basic, but you can apply the concepts anywhere. Combine animation with other styling for great effects. Here's one of my favorites:

Tab with slide-out menu

I’m sure you’re familiar with drop-down menus. But have you ever considered one pinned to the side? Maybe you have a really long page, with a submenu that jumps to anchor points throughout the text. Wouldn’t it be nice if this were constantly available, yet not in the way?

Check this out:


.pull-out-menu {

    height:450px;

    position:fixed;

    width:200px;

    right:-200px;

    top:20px;

    transition: all 1s ease-in-out 0s;

    background:#000;

    color:#fff;

}

.tab {

    transform: rotate(-90deg);

    transform-origin: 0;

    position: absolute;

    bottom: 0;

    left: -10px;

    width:440px;

}

.tab h6 {

    float: left;

    border-radius: 10px;

    background-color: #000;

    padding-left: 5px;

    padding-right: 5px;

    padding-bottom: 30px;

    z-index: -1;

}

.pull-out-menu:hover {

    right:0;

}

<div class="pull-out-menu">

    <div class="tab">

      <h6>Menu Title</h6>

    </div>

    <ul>

       <li>Menu Item</li>

       <li>Menu Item</li>

    </ul>

</div>

Be creative! What will you animate?

 

New Call-to-action

 

Tags: Web Design