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

jQuery thumbnail scroller

This jQuery plugin works by cursor movement or next/previous buttons. It’s really simple to use and first one that I’ve found that starts the slider on hover and it’s cool.

How to use it

1. Include the external files

<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>
<script src="jquery.thumbnailScroller.js"></script>

2. The Markup

<div id="tS2">
    <div>
        <div>
            <a href="#"><img src="thumbs/img1.jpg" /></a>
            <a href="#"><img src="thumbs/img2.jpg" /></a>
            <a href="#"><img src="thumbs/img3.jpg" /></a>
            <a href="#"><img src="thumbs/img4.jpg" /></a>
            <a href="#"><img src="thumbs/img5.jpg" /></a>
        </div>
    </div>
    <a href="#"></a>
    <a href="#"></a>
</div>

3. Fire the plugin

jQuery.noConflict();
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);

Documentation

Demo

Creating a stitched border

Use this snippet  to get a stitched-like border on your elements.

<div>Today it's a beautiful day for styling.</div>

 

.stitched {
  padding: 15px 10px;
  margin: 10px;
  background: #3AB551;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3em;
  border: 2px dashed #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -moz-box-shadow: 0 0 0 4px #38A64C;
  -webkit-box-shadow: 0 0 0 4px #38A64C;
  box-shadow: 0 0 0 4px #38A64C;
  text-shadow: -1px -1px #2D853D;
  font-weight: normal;
}

WunderSlider – responsive proportional slider

WunderSlider is a plugin that has something extra that the most of the responsive plugins out there. You can set it to resize your images by proportions: adapts proportionally to the screen size.

The plugin has a lot of properties: 41 effects, 8 themes, 12 overlays, flexible captions, links on image and many more.

How to use:

1. Adding the external sources

<link rel="stylesheet" type="text/css" href="css/default/wunderslidermin.css" />
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="css/default/wunderslider-iemin.css" /><![endif]-->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/wunderslider-min.js"></script>

2. The markup

<div id="wunderslider"></div>
#wunderslider {
  width: 80%;
  height: 500px;
  margin: 0 auto;
}

3. Fire the plugin

(function($) {
    $(window).load(function(){
      var parent = document.getElementById('wunderslider');
      var wunderSlider = new itthinx.WunderSlider(
      parent,
      [{
        url:'images-demo/image-0.jpg',
        title:'Title for the first image',
        description:'A nice image...',
        linkUrl:'http://www.wunderslider.com/'
      },
      {
        url:'images-demo/image-1.jpg',
        title:'Second image',
        description:'Another image.'
      },
      {
        url:'images-demo/image-2.jpg',
        title:'Here is another image',
        description:'One more image.'
      } ],
      { mode: 'proportional', mouseOverPause: true }
    );
  });
})(jQuery);

Demo & Documentation

Convert px to em

When you work with responsive designs, and not only then, you need to convert various pixel sizes to em. A very useful tool is PXtoEM.com that converts px to em, or em to px, based on a base pixel size.

The website has three sections:

1. Convert

Has tables with conversion based on 16px body size and your custom body size, and a calculator for custom conversions.

2. Grab CSS

Generates normalize.css customazied for you body size that you selected on previous section.

3. Learn

This section tells you what px, em, pt and % is, regarding typography.

Adding body class for IE

If you have style to add just for some IE versions, you can add a class to the body element (ie6, ie7, ie8). This can be done without any JS, only with conditional statements for IE in the markup.

<!--[if lt IE 7]>      <body>    <![endif]-->
<!--[if IE 7]>         <body>    <![endif]-->
<!--[if IE 8]>         <body class-"ie8 oldie">    <![endif]-->
<!--[if (gte IE 9) | !(IE)]><!-->      <body>  <!--<![endif]-->

Adding swipe to jCarousel

After using jCarousel in a project, and then testing it on mobile platforms, I’ve realized that you can’t swipe through the items and this should be the expected behavior for touch devices.

The solution is to add another nice plugin that allows you to use touch events, called jQuery Touchwipe. The code should look something like this:

$('#carousel').jcarousel({
  scroll: 1;
});

$('#carousel').touchwipe({
  wipeLeft: function() {
    $('#carousel').jcarousel('next');
  },
  wipeRight: function() {
    $('#carousel').jcarousel('prev');
  },
  min_move_x: 20,
  min_move_y: 20,
  preventDefaultEvents: false
});

The preventDefaultEvents option is set “true” on the plugin page example, but it prevents you to swipe up/down for usual scroll, so if you have to scroll down or up the page where the carousel is, you can set the option to “false”.