CSS Sliding Boxes

4 posts Page 1 of 1
Post Reply
Contributors
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am
CSS Sliding Boxes
hungryhounduk
Post Options:
Quote
Hey Guys and Gals

I have been getting into CSS and have been searching all manner of places for my quest to learn as much as i can to create a very cool website just using CSS Code.

So here is something i found while searching around and have modified it to suit my needs.

I am using HTML 5 for this Tutorial

So to start off i am resetting the Rules of my Html Page
What this does is making sure everything sits flush to the left hand side of the Html page, you can change this throughout your page by adjusting your code as you go.
Code: Select all
<style>
	
	/* Reset Rules */
	* {
		margin: 0;
		Padding: 0;
		}
Next we are going to define the block
Code: Select all
/* define the block */
	
	.block {
		width: 200px; height: 80px;
		margin: 20px;
		color: #fff;
		border: 4px solid #000;
		padding: 10px;
		}
Then we are going to define the block and its color and Border Radius
Code: Select all
/* creating the first block */
	#block1 {
		background-color: blue;
		border-radius: 15px;
		
		}
Then we create the second block and define it's color/position/border radius/ and the Transition time that will move when the mouse hovers over the first block.
Code: Select all
/* creating the second block */
	#block2 {
		background-color: purple;
		position: relative;
		border-radius: 15px;
		top: -127px;
		z-index: -1;
		left: 0px;
		transition: left 500ms ease-in-out;
		}
Then we are going to add the code to make the second block move
Code: Select all
/* Making the Block hover when mouse over */
	#block1:hover + #block2 {
		left: 240px;
		top: -127px;
		}
Then the last bit, adding the Class for the 2 blocks, which goes between the <body> tags </body>
Code: Select all
/* Blocks */
		<div class="block" id="block1">block 1</div>
		<div class="block" id="block2">block 2</div>

As you can see there is not much to it, but creates a great effect on your page with very little effort needed.

Credits go to = Ralph Phillips on youtube, as he was the one who posted up a Tutorial with this method, altho his was more advanced, I just adapted it to suit my needs.

Have Fun and Experiment

I have included the HTML5 File in the attachment

Chris
You do not have the required permissions to view the files attached to this post.
Image
Top
Filip
Coding Guru
Coding Guru
Posts: 833
Joined: Wed Jan 05, 2011 3:59 pm
Re: CSS Sliding Boxes
Filip
Post Options:
Quote
Nice one hungry, keep us the good work! :)

+rep
CodenStuff wrote:
Nope, it's just your sick and dirty mind. You sick twisted warped little pervo :D
Top
User avatar
Dummy1912
VIP - Donator
VIP - Donator
Posts: 1969
Joined: Sat Aug 21, 2010 2:17 pm
Re: CSS Sliding Boxes
Dummy1912
Post Options:
Quote
sweet :) thanks for sharing
Top
User avatar
noypikami
VIP - Donator
VIP - Donator
Posts: 151
Joined: Sat Dec 22, 2012 1:49 am
Re: CSS Sliding Boxes
noypikami
Post Options:
Quote
It's a nice tut. +rep clapper;

you can add this code above the line of " transition " on the css.
to make it work in different browser.

full code:
Code: Select all
  -webkit-transition: left 500ms ease-in-out;
          -ms-transition: left 500ms ease-in-out;
          -moz-transition: left 500ms ease-in-out;
        -o-transition: left 500ms ease-in-out;
          transition: left 500ms ease-in-out;

where-in:
**** -moz- is for mozilla firefox
**** -webkit - is for safari and chrome
**** -ms- is for internet explorer
**** -o - for opera
Top
Post Reply
4 posts Page 1 of 1
Return to “Tutorials”

Copyright Information

Powered by phpBB® Forum Software © phpBB Limited Privacy | Terms

Copyright © Codenstuff.com 2020 - 2023