Slideout Styles

[[code type="css"]]
*{
/* Universal CSS reset */
margin:0;
padding:0;
}

body{
/* Setting default text color, background and a font stack */
color:#fff;
background: #424242;
font-family:Arial, Helvetica, sans-serif;
}

.slideOutTip{
/* The main wrapping div of the slideout tips */
position:absolute;
padding:3px;
top:0;
left:0;
background-color:#424242;
font-size:13px;
color:white;
overflow:hidden;
height:22px;
}

.slideOutTip:hover{
/* Applying a CSS3 outer glow on hover */
-moz-box-shadow:0 0 3px #000;
-webkit-box-shadow: 0 0 3px #000;
box-shadow:0 0 3px #999;
}

/* The holder for the title and the icon: */
.tipVisible{ cursor:pointer; height:20px; }

.tipTitle{
float:left;
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
white-space:nowrap;
line-height:22px;
padding-right:5px;
}

.tipIcon{
width:20px;
height:20px;
float:left;
background-color:#61b035;
border:1px solid #70c244;
margin-right:8px;

/* CSS3 Rounded corners */

-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}

/* Three color themes */
.green .tipIcon{ background-color:#61b035; border:1px solid #70c244; }
.blue .tipIcon{ background-color:#1078C7; border:1px solid #1e82cd; }
.red .tipIcon{ background-color:#CD3A12; border:1px solid #da421a; }

.plusIcon{
/* The plus icon */
width:13px;
height:13px;
background:url(http://bmcenterprises.wdfiles.com/local--files/css3:slideout/plus.gif) no-repeat center center;
margin:4px;

/* Defining a CSS3 animation. Currently only works in Chrome and Safari */
-webkit-transition: -webkit-transform 0.2s linear;
-moz-transition: -moz-transform 0.2s linear;
transition: transform 0.2s linear;
}

.slideOutTip.isOpened{ z-index:10000; width: 400px;}

.slideOutTip.isOpened .plusIcon{
/* Applying a CSS3 rotation to the opened slideouts*/
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Special rules for the left and top - opening versions */

.openLeft .tipIcon{
/* Floating the title and the icon to the right */
margin:0 0 0 8px;
float:right;
}
.openLeft .tipTitle{ float:right; padding:0 0 0 5px; }
.openLeft .slideOutContent{ margin-top:22px; }
.openLeft.openTop .slideOutContent{ margin-top:0; }

.slideOutContent{
/* Hiding the div with the slide out content: */
display:none;
padding:10px;
font-size:1em;
width: 500px;
}

/* Hiding the original paragraphs if they have not been replaced (JS disabled): */

.main > p{ display:none; }

.main{
height:200px;
margin:10px auto;
position:relative;
width: 500px;
}

Discussion

Add a new comment

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License