Aneka Ragam Macam Jenis CSS3

Ketika ada keinginan menulis untuk posting blog, walau tema post sudah sedikit basi, apa boleh buat 'sob ini juga merupakan salah satu cara dalam menjaga eksistensi kita dalam beraktifitas nge-blog :D Sekarang AA Koben akan berbagi tutorial CSS3 ringan yang tentu saja tidak menghilangkan ciri khas ane yg kental dengan slogan full stylish B-) Untuk mempersingkat lahan editor langsung saja pada bagian pertama yaitu membuat konten gambar dengan hover bergaya efek shine!
Make Shine Effect for Image

.shine_img {
position: relative;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
display: inline-block;
}
.shine_img:after {
content: '';
position: absolute;
top: 0;
left: -200%;
width: 100%;
height: 100%;
transform: skewX (-20deg);
background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
}
.shine_img:hover:after {
animation: shine 1.5s ease;
}
@keyframes shine {
100% {
left: 200%;
}
}

<div class="shine_img">
<img src="LINK-IMAGE" />
</div>DEMO
Make Shine Effect for Text

.shine_text {
border: 0;
color: #fff;
outline: none;
font-size: 12px;
cursor: pointer;
overflow: hidden;
font-weight: 400;
background: #000;
position: relative;
padding: 14px 42px;
border-radius: 3px;
letter-spacing: 0.2em;
display: inline-block;
transition: all 0.3s ease;
}
.shine_text:after {
content: '';
position: absolute;
top: 0;
left: -200%;
width: 100%;
height: 100%;
transform: skewX (-25deg);
background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
}
.shine_text:hover:after {
animation: shine 1.5s ease;
}
.shine_text:active {
transform: translateY(1px);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
@keyframes shine {
100% {
left: 200%;
}
}

<div class="shine_text">
YOUR TEXT
</div>DEMO

Make Image Cloudy
Pada bagian ini sobat harus mempunyai default 2 gambar awan dengan resolusi 1000 x 600 px. Kalau susah carinya silahkan upload dulu di hostingan masing² gambar awannya! awan-1.png & awan-2.png

.abs_bg {
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
}
.abs_bg div {
margin: 0;
}
.fog {
width: 50%;
height: 50%;
margin: 5px auto;
position: relative;
background-color: #333;
}
.fog_cont {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
}
.fog_img {
width: 300vw;
position: absolute;
height: 100vh;
}
.awan_satu {
background: url("awan-1.png") repeat-x;
background-size: contain;
background-position: center;
-webkit-animation: gerak 60s linear infinite;
animation: gerak 60s linear infinite;
}
.awan_dua {
background: url("awan-2.png") repeat-x;
background-size: contain;
background-position: center;
-webkit-animation: gerak 40s linear infinite;
animation: gerak 40s linear infinite;
}
@-webkit-keyframes gerak {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-200vw, 0, 0);
transform: translate3d(-200vw, 0, 0);
}
}
@keyframes gerak {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-200vw, 0, 0);
transform: translate3d(-200vw, 0, 0);
}
}

<div class="fog">
<div class="abs_bg" style="background-image: url('IMAGE-POST');"></div>
<div class="fog_cont">
<div class="fog_img awan_satu"></div><div class="fog_img awan_dua"></div>
</div>
</div>Make Lightning Effect

.container {
width: 242px;
height: 363px;
display: block;
margin: 5px auto;
position: relative;
animation: lightning 10s linear infinite;
}
@keyframes lightning {
0% {
opacity:1;
}
1% {
opacity: 0.9;
}
2%{
opacity:1;
}
3% {
opacity:0.9;
}
4% {
opacity:1;
}
80% {
opacity:1;
}
81% {
opacity:0.9;
}
82% {
opacity:1;
}
}

<img src="LINK IMAGE" class="container" />DEMO
Yang terakhir membuat efek serelek selonjor :D

.expand_able {
max-height: 40px;
overflow: hidden;
position: relative;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
-webkit-box-shadow: inset 0 -17px 20px -20px #ccc;
-o-box-shadow: inset 0 -17px 20px -20px #ccc;
box-shadow: inset 0 -17px 20px -20px #ccc;
-webkit-transition: all 500ms ease-in-out 100ms;
-o-transition: all 500ms ease-in-out 100ms;
transition: all 500ms ease-in-out 100ms;
}
.expand_able:after {
right: 5px;
bottom: 3px;
color: #555;
font-size: 11px;
font-style: italic;
content: "More...";
position: absolute;
}
.expand_able:hover,.expand_able.open {
max-height: 999px;
-webkit-box-shadow: inset 0 0 0 0 #ccc;
-o-box-shadow: inset 0 0 0 0 #ccc;
box-shadow: inset 0 0 0 0 #ccc;
}
.expand_able:hover:after,.expand_able.open:after {
opacity: 0;
}

<div class="expand_able">
<p>Ada apa ya di sini! Coba sorot dong?</p>
<p>YOUR TEXT PARAGRAPH 1 HERE</p>
<p>YOUR TEXT PARAGRAPH 2 HERE</p>
<p>YOUR TEXT PARAGRAPH 3 HERE</p>
</div>DEMO
Resources and other:

Button Shine - Shine Effect - Glossy Button with Shine - Pacific Northwest Fog - Rain - JavaScript - 3D perspective card XY - Feed Concept

Bye :-h