Danny Giebe - Webdesigner and Frontend-Developer

Gekko Global Markets

Danny — Sat, 26 Nov 2011 20:10:52 +0000

CSS3 transition slideshow tutorial

Danny — Sun, 10 Jul 2011 13:53:19 +0000

With the rollout of some new CSS3 techniques, many effects can be displayed without Javascript or graphics. Among other things, CSS3 brought the transition efffects, which are very useful to solve simple animations without Javascript.

In this tutorial we’ll create a simple vertical CSS3 slideshow with a transition effect.
We’ll also use Modernizr for older browsers.

HTML

To begin, we need a simple HTML structure.




  
  CSS3 transition slider

Now we build our slider structure in the div#container. Therefore we need a container for the images and a navigation to switch between our pictures.

CSS

For now that’s all for our HTML structure. Now we will add some CSS styles to our elements. First of all we will center our container and add some extra styles, such as padding, width etc. You can also use your own styles for it.

#container {
  width: 950px;
  margin: 0 auto; /* centers the container */
  padding-top: 150px;
}

So let’s start with the important code for our slider. We will add some styles to our #slider and our #slide-items.

#slider {
  width: 950px; /* width of our pics */
  height: 300px; /* height of our pics */
  position: relative; /* type of position */
  overflow: hidden; /* shows only the first pic */
}
#slide-items {
  width: 950px; /* width of our pics */
  height: 300px; /* height of our pics */
  position: absolute; /* position in #slider */
  left: 0; /* on top left edge */
  top: 0;
  /* now the transition effects */
  -webkit-transition: all 3s ease-in-out;
  -moz-transition: all 3s ease-in-out;
  -o-transition: all 3s ease-in-out;
  -ms-transition: all 3s ease-in-out;
  -transition: all 3s ease-in-out;
}
/* removing margin & padding */
#slide-items img {
  margin: 0;
  padding: 0;
}

As you can see we added some transition effects to our image container. But what does it mean?

CSS3 transitions defining smoothing value changes in your stylesheets. We used the shorthand version with 3 values.

all – defines our transition property. The transition property defines which css element is used for the transition. So you could also use one property e.g. color, background or font-size to change them smoothly.
3s – defines our transition-duration. The transition duration says how long the transition should last.
ease-in-out – defines our transtion-timing-function. The transition timing function describes how the intermediate values used during a transition will be calculated. Therefore you can choose between different functions: ease, ease-in, ease-out, ease-in-out, linear and cubic-bezier. You are free to play around with the settings.

Now we will add the styles for our slider navigation. We will use little bullets as navigation.

nav {
  float: right;
  margin: 15px;
}
nav ul {
  list-style: none;
}
nav ul li {
  cursor: pointer;
  margin-right: 10px;
  float: left;
}
nav ul li span {
  text-indent: -9999em;
  display: block;
  width: 15px;
  height: 15px;
  background: #ccc;
  border-radius: 10px;
}
ul li span.active {
  background: #999;
  box-shadow: inset 1px 1px 4px #666;
}

jQuery

Now we’re done with our styling and the HTML structure. We’ll add some Javascript and jQuery to animate the whole construction. Therefore we will also get help of Modernizr for older browsers. We need to add jQuery and modernizr in our html head.




  
  CSS3 transition slider
  
  


  
    
      
        
        
        
        
      
    
    
      
        1
        2
        3
        4

For the animation effect we will add some jQuery code:

(function($){
  // toggle active class for nav element
  $('ul li span').click(function(){
    $('span').removeClass('active');
    $(this).addClass('active');
  });

  // We use modernizr to ask, if our browser supports css transitions. If true, we just change the position with css. The smooth animation effect will be done with the css3 transitions.
  if (Modernizr.csstransitions){
    $('#item-1').click(function(){
      $('#slide-items').css('top', '0');
    });
    $('#item-2').click(function(){
      $('#slide-items').css('top', '-304px');
    });
    $('#item-3').click(function(){
      $('#slide-items').css('top', '-608px');
    });
    $('#item-4').click(function(){
      $('#slide-items').css('top', '-912px');
    });

   // If our browser does not support csstransitions we have to animate the position, which has nearly the same effect as css3 transitions.
   } else {
    $('#item-1').click(function(){
      $('#slide-items').animate({
        top: '0',
      }, 3000);
    });
    $('#item-2').click(function(){
      $('#slide-items').animate({
        top: '-304px',
      }, 3000);
    });
    $('#item-3').click(function(){
      $('#slide-items').animate({
        top: '-608px',
      }, 3000);
    });
    $('#item-4').click(function(){
      $('#slide-items').animate({
        top: '-912px',
      }, 3000);
    });
  }
})(jQuery);

In this case we added a vertical slide effect. You can also change the position to right or left and change the value, depending on your image width.
So we’re done. I hope you liked the short tutorial and it’s useful for you. Maybe you’re starting to use transition effects for future projects.

View Demo Download source

Working with sprites, using webtools

Danny — Thu, 07 Jul 2011 20:02:04 +0000

As you know, many websites are using lots of images for their layout. Many of them still don’t use sprite images and so they have more server requests, which increases the loading time of a website. To optimize your website speed you should definitly use sprites if possible. Sometimes in some cases it makes no sense, but you should use the sprite technique as much as possible.

Today I found some very useful online tools to build sprites very easily for your website.

The first one, called SpriteMe is a bookmarklet for your browser. You just need to go to their website and follow the install guide. It’s pretty easy with drag and drop. After your drag and drop action you can open your website and click on your new SpriteMe bookmarklet. A little window will open, which shows you all used images on your page. Now you can just drag&drop the images, which shall be in a sprite and click “make sprite”. You will get an image in a new window, which can be downloaded. There is just one bad thing: All images are among each other. If you have a programm e.g. Photoshop or GIMP you can optimize the saved sprite a little bit. Sometimes it’s not really necessary.

Now we can use the second tool, called Sprite Cow to get the css code of each image in your sprite. Go to Sprite Cow and click “Open Image” and choose your saved sprite image. Your sprite will be loaded and you can easily select a part of your sprite to get the background-position in the sprite. Just copy each position to your css code and it’s perfectly done.

It’s a pretty easy and awesome way to get a sprite image and to decrease your server requests. Furthermore you save a lot of time while development, because you don’t need to find out the positions by yourself with a graphic programm.

If you have any questions, don’t hesitate to use the comment form.

Welcome to my new website

Danny — Tue, 05 Jul 2011 19:19:37 +0000

Hello and welcome to my new website. After some development time I have now managed to finish it. The website has a new design and is based on HTML5 now. Another new feature is the mobile version. The website has been completely adapted for mobile use and thus offers the possibility to go to read the latest blog posts and comments.

In the future I will write about the main topics coding and web design, including new web technologies (HTML5, CSS3), jQuery, and also on news from the web scene. I hope there will be lively discussions in the comments in the future and enough exchanges of opinions take place among all visitors.

Now the baptizing of the new blog is completed and new posts will be published at regular intervals.

ETFlab

Danny — Sat, 02 Jul 2011 20:31:34 +0000

RBS – marketindex

Danny — Sat, 02 Jul 2011 20:18:53 +0000

Beckmann Massmann

Danny — Wed, 22 Jun 2011 20:41:50 +0000

EVR

Danny — Wed, 22 Jun 2011 20:39:56 +0000

Klinik Denzel

Danny — Wed, 22 Jun 2011 20:35:17 +0000

cssruby

Danny — Wed, 22 Jun 2011 20:33:01 +0000

Wiener Cafehaus

Danny — Wed, 22 Jun 2011 20:27:57 +0000

Jungschartag Horkheim

Danny — Wed, 22 Jun 2011 19:22:08 +0000

Müther Bestattungen

Danny — Wed, 22 Jun 2011 19:15:03 +0000

Das verrückte Brillenhaus

Danny — Wed, 22 Jun 2011 19:09:37 +0000

Lutzke Heuhotel

Danny — Wed, 22 Jun 2011 19:06:33 +0000

Rasthof Lehrtersee

Danny — Wed, 22 Jun 2011 18:55:07 +0000

Bialy Finanz

Danny — Wed, 22 Jun 2011 18:42:24 +0000

Rechtsanwalt Boele

Danny — Wed, 22 Jun 2011 18:39:45 +0000

specht bave

Danny — Wed, 22 Jun 2011 18:36:20 +0000

Yo-Shop

Danny — Wed, 22 Jun 2011 18:32:44 +0000