Cara css4 selector :target picture gallery

dengan adanya :target dan :matches pada css membuat pendesain web semakin mudah dalam produksinya
lihat contoh berikut untuk :target

<style> .kotak:target { width:100%; height:100%; opacity:1; color:white; left:0%; } img {width:400px;height:350px} .kotak { -webkit-transition:all 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; transition: 1s; background-color:blue; color:blue; } #holder { border: 1px solid #ff6666; width: 200px; height: 100px; background-color: yellow; position:relative; } </style>




Dan Untuk htmlnya sebagai berikut


<a href="#satu">satu</a> <a href="#dua">dua</a> <a href="#tiga">tiga</a> <div id="holder"> <div id="satu" class="kotak"> gambar1</div> <div id="dua" class="kotak"> gambar2</div> <div id="tiga" class="kotak"> gambar3</div> ddd </div>



satu dua tiga

judul section1

disini tempat artikel yang pertama

judul section2

disini tempat artikel yang kedua

judul section3

disini tempat artikel yang ketiga

Read More

Cara Membuat Text Terbalik dengan CSS3

Ketika sedang browsing saya melihat huruf terbalik, tapi menggunakan java script, sekarang saya ingin membuat text terbalik dengan css3 
Inilah contoh dari huruf terbalik tersebut

contoh

contoh

dari  contoh diatas berikut ini adalah scryptnya menggunankan  css3 dan html

<style> h1{color:red; } #contoh{color:red; transform:rotateX(180deg);  -webkit-transform:rotateX(180deg);} </style><br /> <h1> contoh</h1> <br /> <h1 id="contoh"> contoh</h1>

 berikutnya adalah membuat manis tampilan dari yang sudah ada.  Yaitu dengan pemberian gradient pada #contoh, sehingga :
background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent;


nah begitu saja yang bisa saya lakukan

Read More