Awesome CSS3 animation menus

I’ve found some creative animation menus done only with CSS3 on codrops. The icons are a Web Symbols typeface included with @font-face so the animation on the icon is very intuitive and simple to understand.

On the demo page you can see 10 examples of animations that you can download.

The Markup

<ul class="ca-menu">
  <li>
    <a href="#">
      <span class="ca-icon">A</span>
      <div class="ca-content">
        <h2 class="ca-main">Exceptional Service</h2>
        <h3 class="ca-sub">Personalized to your needs</h3>
      </div>
    </a>
  </li>
  ...
</ul>

The CSS

I’ll write down the CSS only for the example shown in the screenshot above and only for the hover part.

.ca-menu li:hover{
  background-color: #000;
}
.ca-menu li:hover .ca-icon{
  color: #f900b0;
  font-size: 120px;
  opacity: 0.2;
  left: -20px;
  transform: rotate(20deg);
}
.ca-menu li:hover .ca-main{
  color: #f900b0;
  opacity: 0.8;
}
.ca-menu li:hover .ca-sub{
  color: #fff;
  opacity: 0.8;
}

Download & Documentation

Demo

Targeting retina display with media query

Working at a mobile project (that includes jQuery mobile), I’ve encountered the following problem: I wanted to rewrite the default image for the checkboxes, that jQuery mobile provides. Just adding the new background like bellow wasn’t enough.

.ui-icon-checkbox-off,
.ui-icon-checkbox-on {
  background: url(/images/mobile/checkbox-off.png) no-repeat;
  -webkit-background-size: 56px 58px;
  -moz-background-size: 56px 58px;
  background-size: 56px 58px;
  width: 56px;
  height: 58px;
}
.ui-icon-checkbox-on {
  background: url(/images/mobile/checkbox-on.png) no-repeat;
}

The code above works only on normal devices, but on retina displays the css from jQuery mobile wasn’t rewritten. For that, I’ve created an image twice as big as the previous one, and used the following code:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
         .ui-icon-checkbox-off {
           background: url(/images/mobile/checkbox-off2x.png) no-repeat;
         }
         .ui-icon-checkbox-on {
           background: url(/images/mobile/checkbox-on2x.png) no-repeat;
         }
}

CSS3 PIE

PIE.htc  makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

Let’s say you want to make a fancy contact form with rouded-corner inputs and textarea, and a background color for the entire form, like the one below.

You use the following:

form { background: #f8f8f4; }
input, textarea {
border: 1px solid #d8d6ba;

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;

behavior: url(/PIE.htc);
}

But in IE8 and IE7 the background of the form ruins everything and the inputs aren’t visible, like in the photo below:

In order to repair the inputs and the textarea, and to keep the form’s background, use the following trick: position your elements:

input, textarea { position: relative; }

Using this trick, IE7 and IE8 will work just fine.

Using @font-face for icons

A new technology used for increasing speed and to improve HTTP response time is embedding icons in a font and use them with the CSS3 @font-face declaration.

After you’ve downloaded an icon-font or you’ve created by yourself a font using the icons you need in your site, you can use this font like a regular one  (you can use the icons with the ability to change size and color, add backgrounds, shadows and rotation, and just about anything else CSS will allow for text).

The CSS will look like:

@font-face{
  font-family: 'WebSymbolsRegular';
  src: url('fonts/websymbols-regular-webfont.eot');
  src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('fonts/websymbols-regular-webfont.woff') format('woff'),
  url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
  url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}
.icon {
  font-family: 'WebSymbolsRegular';
  color: red;
}

To reference an icon you will need a style that includes the font-family of “WebSymbolsRegular” (in our example, the class icon). After that you can add any style that applies to a text.

The HTML will look like:

<p>This is an attachement <span class="icon">A</span></p>
<p>Tweet about it <span class="icon">t</span></p>
<p>Share it on <span class="icon">f</span></p>
<p>Watch it on <span class="icon">y</span></p>

The result ih the browser:

The link to the downloadable font is:websymbols

Cross browser opacity

This is a code snippet that you can use for a cross browser opacity.

Works in Chrome, FF, Safari, IE6+, Opera, Netscape.

.opacity {
  opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=75); /* IE lt 8 */
  -ms-filter: "alpha(opacity=75)"; /* IE 8 */
  -khtml-opacity: .75; /* Safari 1.x */
  -moz-opacity: .75; /* FF lt 1.5, Netscape */
}

4 Useful CSS3 Tutorials

1. 3D thumbnail hover effects

A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery. In the example there are used thumbnails that will reveal some more information on hover.

Demo Download Source

2. How to create animated tooltips with CSS3

This is a tutorial that helps you create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after.

Demo Download Source

3. Enhance required form fields with CSS3

Enhance required fields in a form with this little effect. The idea is to allow better visibility for obligatory fields while de-emphasizing optional ones. The idea is to allow the user to enhance only the required fields so that he has a notion about what fields are actually required. That’s normally done a little * or similar but in this tutorial you will learn to create a little interactive effect for a better visualisation of required fields.

Demo Download Source

4. Direction-aware hover effect using CSS3 and jQuery

How to create a direction-aware hover effect using CSS3 and jQuery.  The idea of this tutorial is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. When we “leave” the element, the overlay will slide out to that direction, following our mouse. This will create an interesting-looking effect.

Demo Download Source

Shapes with CSS

The following shapes use only a single HTML element and some CSS. Some of the shapes can be use with content, but some of them like the triangles, trapezoid or the last special shapes can’t be used with content.

Demo

The CSS for the shapes is:

1. Square

#square {
  width: 100px;
  height: 100px;
  background: green;
}

2. Rectangle

#rectangle {
  width: 200px;
  height: 100px;
  background: green;
}

3. Circle

#circle {
  width: 100px;
  height: 100px;
  background: green;

  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

4. Oval

#oval {
  width: 200px;
  height: 100px;
  background: green;

  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
}

5. Triangle

#triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
}

6. Triangle Top Left

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid green;
  border-right: 100px solid transparent;
}

7. Trapeziod

#trapezoid {
  border-bottom: 100px solid green;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 100px;
}

8. Pacman

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid green;
  border-left: 60px solid green;
  border-bottom: 60px solid green;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

9. Talk Bubble

#talk-bubble {
  width: 120px;
  height: 80px;
  background: green;
  position: relative;

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#talk-bubble:after {
  content:"";
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid green;
  border-bottom: 13px solid transparent;
}

10. Yin Yang

#yin-yang {
  width: 96px;
  height: 48px;
  background: #fff;
  border-color: black;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  position: relative;

  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

#yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: black;
  border: 18px solid #fff;
  width: 12px;
  height: 12px;

  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

#yin-yang:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #fff;
  border: 18px solid black;
  width: 12px;
  height: 12px;

  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

For more shapes made only with CSS visit css-tricks.com