CSS3 Archives : vedmant.com : coding blog

CSS vertical centering techniques

vedmant — Mon, 29 Jun 2015 18:57:36 +0000

So what is the best way to center blocks vertically using CSS?

There are bunch of techniques, lets try each of them!

1. “line-height” property

HTML code:


   
      Some text
      Some more text

CSS code:

.outer-block { 
   height: 200px; 
   line-height: 200px; 
   text-align: center; 
}
.inner-block { 
   display: inline-block; 
   line-height: 1.5;
   text-align: left; 
   vertical-align: middle; 
}

Here is the result:

Some text

Some more text

So it works just good, quite simple, but it doesn’t support variable height.

2. “position: absolute” and negative margins

HTML code:


   
      
         Some text
         Some more text

CSS code:

.outer-block {
   position: relative;
   height: 200px; 
   text-align: center; 
}
.inner-block { 
   position: absolute;
   top: 50%;
   left: 0;
   margin-top: -30px;
   width: 100%;
   height: 60px;
   text-align: center; 
}

Here is the result:

Some text

Some more text

Another good approach, not so simple as line-height though. However it needs inner block to by fixed height so negative margin-top can be set. And it needs additional block to center text block horizontally.

3. Table cell method

HTML code:



   
      
         
            Some text
            Some more text

CSS code:

.some-container {
   height: 200px;
}
.outer-block { 
   width: 100%; 
   height: 100%;
   display: table;
}
.inner-block { 
   width: 100%; 
   height: 100%;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

Here is the result:

Some text

Some more text

This is a great approach if you have container with variable height, this method will certainly work in this case! Downside of this method is that it will not work in older versions of IE. Also it needs additional block to center text block horizontally. Another pros is that it will expand if inner-block content height will became bigger than outer block.

If you need it to work in older IE versions you can use explicit table tags instead of div blocks:

HTML code:


   
      
         
            
               Some text
               Some more text

CSS code:

.some-container {
   height: 200px;
}
.outer-block { 
   width: 100%; 
   height: 100%; 
}
.inner-block {
   vertical-align: middle;
   text-align: center;
}

Here is the result:

Some text

Some more text

Summary

To summary this methods, I would say the best way for responsive designs is table cell method. Despite it doesn’t support old versions of IE this is virtually the only method to fully center block vertically for responsive design without JavaScript snippets. Two other ways always require outer or inner block to have fixes height value.

The post CSS vertical centering techniques appeared first on vedmant.com :: coding blog.

Image slider on pure CSS3

vedmant — Thu, 05 Mar 2015 19:02:16 +0000

Recently I’ve read one article about slider without any JS code and I decided to extend this idea and here is what i’ve got.

First, we will need basic HTML layout for slider:

Quite simple and straightforward.

Next step, lets style our sliders container, and add some other styles:

.css-slider{
   position: relative; /* All slides will have absolute position */
   width: 100%; /* Make it responsive */
   padding: 0; margin: 0; 
   padding-bottom: 75%; /* Height will be 75% from width */
   list-style-type: none; 
   overflow: hidden; /* In case images will have wrong aspect ratio */
}

.css-slider li img{width: 100%;} /* And make images responsive as well */

The whole idea of this slider is to use keyframe animation for changing slides.

To make this work we will create keyframes that have to do following: show slide, keep it some time, hide slide, wait while all other slides will show.

This is how it looks:

@-webkit-keyframes css-slider {
  10%{opacity: 1;} /* This is where slide becomes visible, duration 10 % of 20 sec */
  20%{opacity: 1;} /* Still visible, little more then middle point (100 % / 5 slides) */
  40%{opacity: 0;} /* Now its hidden, when next slide is fully visible */
}

Some explanations about percents and durations.

Our slide has 5 slides, delay between slides is 4s, this means that whole animation have to take 5 slides * 4s = 20s.

Then we can calculate how long will take 1%, 20s / 100% = 0.2s, or 10% will take 2s and this is our transition duration from opacity: 0 to opacity: 1.

Next step to get middle point: 4s / 0.2s = 20 % or just 100% / 5 slides = 20%, this is when next slide will start it’s transition, and current slide have to stay visible until that.

At last we have to hide our slide when next slide is fully shown, it’s the middle of next slide, 20% + 20% = 40%.

Then we add styles and keyframes to slides:

.css-slider li{
   position: absolute; top:0; right: 0; bottom: 0; left: 0; /* Make it fill whole slider container */
   opacity: 0; /* Hide it */
   -webkit-animation: css-slider 20s infinite; /* Use keyframe animation from above */
}

And at last we set different delays for each slide to make it work. Each slide must have slides delay durations multiplied by slide position – 1, or just each next slide’s delay equals previous plus delay duration.

.css-slider li:nth-child(1){-webkit-animation-delay: 0s;}
.css-slider li:nth-child(2){-webkit-animation-delay: 4s;}
.css-slider li:nth-child(3){-webkit-animation-delay: 8s;}
.css-slider li:nth-child(4){-webkit-animation-delay: 12s;}
.css-slider li:nth-child(5){-webkit-animation-delay: 16s;}

And here is result:

Ok it looks good, but it has a big con, if you want to change slides count, delays or transitions duration you have to recalculate keyframes positions change duration and add or remove delays for each slide. That’s why it’s not very usable in real production projects.

Until some generator will be used, I will add SASS generator here next time.

And here is promised SASS mixin, I’ve improved it a little by adding z-indexes:


@mixin css-slider($count, $duration, $delay) {

	$delay: $duration + $delay;
	$total_duration: $delay * $count;
	$start_visible: $duration / $total_duration * 100;
	$mid_visible: 100 / $count;
	$end_visible: $mid_visible * 2;

	@-webkit-keyframes css-slider {
		#{$start_visible + '%'}{opacity: 1; z-index: 100;}
		#{$mid_visible + '%'}{opacity: 1; z-index: 2}
		#{$end_visible + '%'}{opacity: 0; z-index: 1;}
	}

	@keyframes css-slider {
		#{$start_visible + '%'}{opacity: 1; z-index: 100;}
		#{$mid_visible + '%'}{opacity: 1; z-index: 2}
		#{$end_visible + '%'}{opacity: 0; z-index: 1;}
	}


	position: relative;
	width: 100%; padding: 0 0 75% 0; margin: 0;
	list-style-type: none; overflow: hidden;

	li{
		position: absolute; top:0; right: 0; bottom: 0; left: 0; z-index: 1;
		opacity: 0;
		-webkit-animation: css-slider #{$delay * $count}s infinite;
		animation: css-slider #{$delay * $count}s infinite;
	}

	li img{width: 100%;}

	@for $i from 0 through $count - 1 {
		li:nth-child(#{$i+1}){-webkit-animation-delay: #{$i * $delay}s; animation-delay: #{$i * $delay}s;}
	}

}

/* Apply our minix for .css-slider */
.css-slider{
	@include css-slider(5, 2, 2);
}

The post Image slider on pure CSS3 appeared first on vedmant.com :: coding blog.