Menu


Menu Tab

Pages

Showing posts with label CSS3 3D Transforms. Show all posts
Showing posts with label CSS3 3D Transforms. Show all posts

CSS3 3D Transforms

CSS3 3D Transforms
Memasang CSS3 3D Transforms untuk menhiasi blog menggunakan CSS3 dan HTML yang berpenampilan cukup menarik. berikut kode tersebut serta cara penerapannya :
Login ke akun blog klik entri halaman baru HTML copy kode berikut, letakan kedalam halaman baru tersebut dan klik simpan selesai.
.
<style>/*Custom Font*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

/*Basic Reset*/
* {margin: 0; padding: 0;}
body {
    background: #333;
    /*Removing scrollers*/
    overflow: hidden;
    /*A high perspective to give the UL an isometric look*/
perspective: 3000;
}
h1 {
    color: white;
    font: 45px 'Open Sans';
    width: 500px;
    padding: 50px;
}
.grid {
position: absolute; top: 100px; left: 0;
    /*Width = (225 + 20 + 20) * 4 = 1060*/
    width: 1060px;
    /*3D Transform*/
    transform: rotateX(60deg) rotateZ(-50deg);
    /*Preserve 3D style for children*/
    transform-style: preserve-3d;
}
.grid li {
    height: 400px; width: 225px;
    float: left; margin: 20px;
    list-style-type: none;
    /*Hide the lighting gradient from the front face*/
    background-size: 0, cover;
    /*Preserve 3D style for children(pseudo elements)*/
    transform-style: preserve-3d;
}
/*Left and Bottom Sides*/
.grid li:before, .grid li:after {
    content: '';
    position: absolute;
    /*100% height and width*/
    top: 0; left: 0; right: 0; bottom: 0;
    background: inherit;
    background-size: cover;
}
/*Left Side*/
.grid li:before {
    transform-origin: left center;
    transform: rotateY(90deg);
    /*Reducing the width of the left side for a flat feel*/
    width: 5px;
}
/*Bottom Side*/
.grid li:after {
    transform-origin: bottom center;
    transform: rotateX(90deg);
    /*Reducing the height*/
    height: 5px; top: auto; bottom: 0;
    /*Background fix - start the background from the bottom*/
    background-position: bottom center;
}
/*Shadow time - sadly all pseudo elements are used so we will have to add an HTML element in each LI*/
.s {
    position: absolute;
    /*30px smaller from each side*/
    top: 30px; left: 30px; right: 30px; bottom: 30px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 30px 30px rgba(0, 0, 0, 0.5);
    /*Pushing down the shadow to give an elevated feel*/
transform: translateZ(-50px);
}
/*We will add a light gradient to the sides to give some lighting effect*/
.one {
background:
linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)),
        url("http://Link Gambar.png");
}
.two {
    background:
        linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)),
        url("http://Link Gambar.png");
}
.three {
    background:
        linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)),
        url("http://Link Gambar.png");
}
.four {
    background:
        linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)),
        url("http://Link Gambar.png");
}
</style>
<h1>Your Text</h1>
<ul class="grid">
    <li class="one"><span class="s"></span></li>
    <li class="two"><span class="s"></span></li>
    <li class="three"><span class="s"></span></li>
    <li class="four"><span class="s"></span></li>
</ul>
Penjelasan :
Terapkan Link gambar beri judul pada your text yang berwarna merah
Edited by. Myscript2010
Sumber by. Kode Player

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi