Şablon:Anasayfa/sınıflar.css
Fen Ansiklopedisi sitesinden
form {
position: relative;
top: 100px;
left: 100px;
padding: 10px;
display: inline-block;
box-shadow: 0 1px 1px rgba(0,0,0,.65);
border-radius: 3px;
border: solid 1px #ddd;
width: 460px;
height: 200px;
overflow: hidden;
}
input { display: none; }
input:checked + label, label:hover {
background: #4D90FE;
border: solid 1px rgba(0,0,0,.15);
color: white;
box-shadow: 0 1px 1px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.1) inset;
text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}
label {
font-family: helvetica;
cursor: pointer;
display: block;
border: solid 1px transparent;
text-align: center;
line-height: 40px;
border-radius: 3px;
float: left;
width: 40px;
height: 200px;
line-height: 200px;
}
label:last-child { margin-right: 0; }
label {
background: rgba(77, 144, 254, .5);
border: solid 1px rgba(0,0,0,.15);
}
article {
width: 0;
height: 145px;
overflow: hidden;
transition: width .25s linear, opacity .3s linear;
position: relative;
top: 5px;
margin-bottom: 0;
padding: 0;
margin-right: 10px;
opacity: 0;
float: left;
}
div:last-child article { margin-right: 0; }
article p {
color: #333;
font-family: helvetica;
font-size: 12px;
line-height: 18px;
width: 245px;
padding: 5px 10px;
}
div > input:checked ~ article { width: 255px; opacity: 1; }