CSS/XMLTimeline

CSS/XML Timeline is a simple, yet powerful HTML5 tool for generating interactive timelines from CSS and dynamic XML data. Create XML events then pass them to this tool to generate a timeline. The XML source can be prepared manually, or generated dynamically using any scripting language (PHP, ASP, CFML, Perl, etc.)

CSS - buttons

 

The timeline's standard buttons are used for navigation. They are highlighted in red in this timeline:

 

To set the appearance of the timeline's buttons, edit the stylesheet's CSS under the following selectors:

 

 

Examples
/* user interface buttons =================================== */

#button_prev {
	display: block;
	position: absolute;
	left: -.5cm;
	top: 60%;
	width: 2.5cm;
	height: 2.5cm;
	border-top-right-radius: 50%;
	border-bottom-right-radius: 50%;
	opacity: .5;

	background: rgba(255, 255, 255, 1);
	background-image: url('../images/button_prev.png');
	background-size: 40%;
	background-repeat: no-repeat;
	background-position: center;
}

#button_next {
	display: block;
	position: absolute;
	right: -.5cm;
	top: 60%;
	width: 2.5cm;
	height: 2.5cm;
	border-top-left-radius: 50%;
	border-bottom-left-radius: 50%;
	opacity: .5;

	background: rgba(255, 255, 255, 1);
	background-image: url('../images/button_next.png');
	background-size: 40%;
	background-repeat: no-repeat;
	background-position: center;
}

#button_zoom_out {
	display: block;
	position: absolute;
	right: .5cm;
	top: .4cm;
	width: 1.5cm;
	height: 1.5cm;
	border-radius: 50%;
	opacity: .5;

	background: rgba(255, 255, 255, 1);
	background-image: url('../images/button_zoom_out.png');
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
}

#button_zoom_in {
	display: block;
	position: absolute;
	right: 2.4cm;
	top: .4cm;
	width: 1.5cm;
	height: 1.5cm;
	border-radius: 50%;
	opacity: .5;
	
	background: rgba(255, 255, 255, 1);
	background-image: url('../images/button_zoom_in.png');
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
}

#button_goto_year {
	display: block;
	position: absolute;
	left: .5cm;
	top: .4cm;
	width: 1.5cm;
	height: 1.5cm;
	border-radius: 50%;
	opacity: .5;

	background: rgba(255, 255, 255, 1);
	background-image: url('../images/button_year.png');
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}



.button {
	cursor: pointer;
	z-index: 100;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	outline: 0;
}

.button:hover {
	-moz-box-shadow: 0 0 .13cm .13cm rgba(0, 255, 255, .25);
	-webkit-box-shadow: 0 0 .13cm .13cm rgba(0, 255, 255, .25);
	box-shadow: 0 0 .13cm .13cm rgba(0, 255, 255, .25);

	-ms-transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);

	-webkit-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-kthtml-transition: all .1s ease-out;
	transition: all .1s ease-out;
}

.button:active {
	-ms-transform: scale(1.3, 1.3);
	-webkit-transform: scale(1.3, 1.3);
	transform: scale(1.3, 1.3);

	-webkit-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-kthtml-transition: all .1s ease-out;
	transition: all .1s ease-out;
}



 

See the Gallery section for additional examples. Click Show Source below each gallery example to view its code.

 

blank

blank

Copyright © 2015-2017, Maani.us.

blank