Box Attention new Style

Box Attention new Style By PalmaHutabarat

by Palma Hutabarat92

HTML

<style type="text/css">
judul {color: #fff;
margin-bottom: .5em;
font-size: 1.7em;
font-weight: bold;
text-shadow: 0 1px 0 rgba(0,0,0,1);
}
.slides {position: relative;
width: 500px;
height: 250px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,.5);
border-radius: 5px;
background: #333;
border: 1px solid rgba(255,255,255,.1);
margin:0 auto;
}.slide {position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}.content {position: absolute;
width: auto;
transform: translateX(-100%);
top: 0;
opacity: 0;
padding: 20px;
transition: transform .5s ease-out, opacity 1s ease-out;
}.content p {font-size: .85em;
color: #fff !important;
}input[type=radio] {display: none;
}label {display: block;
position: absolute;
bottom: 0;
line-height: 3em;
width: 25%;
text-align: center;
cursor: pointer;
font-size: .8em;
z-index: 50;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
font-weight: bold;
background: rgb(135,224,253);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );}.slide:nth-child(2) label {margin-left: 25%;
}.slide:nth-child(3) label {margin-left: 50%;
}.slide:nth-child(4) label {margin-left: 75%;
}input[type=radio]:checked ~ .content {transform: translateX(0);
opacity: 1;
}input[type=radio]:checked + label {background: #333;color: #ccc;text-shadow: none;}</style>
<div class="slides">
<div class="slide">
<input id="slide1" name="slideshow" type="radio" /><label for="slide1">CSS</label>
<div class="content">
<judul>CSS</judul>
<p>CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website. Kita dapat mengontrol isi (konten) dan tampilan secara terpisah.</p>
</div>
</div>
<div class="slide">
<input id="slide2" name="slideshow" type="radio" /><label for="slide2">HTML</label>
<div class="content">
<judul>HTML</judul>
<p>HTML yang  singkatan dari HyperText Markup Language merupakan sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan...