It's Not Magic, It's CSS Magic

Bakalan menarik artikel episode sekarang bro. Siapkan cemilan ekstra untuk menyimaknya! Gue akan mencoba mengkuak dua jenis properti yaitu calc and element. Prooperty tersebut pada mozilla browser tertulis begini -moz-calc & -moz-element Khusus dengan calc, konon dipakai juga dalam tweak coded terhadap responsive issue. Koben takkan bahas mengenai itu :P
Ada baiknya sobat melihat terlebih dahulu posted brkt perishablepress.com/firefox-css-magic 7 properti css firefox magic! Kembali kepada topik pembicaraan bro... Dengan menggunakan -moz-calc dan -moz-element kita bisa membuat live screenshot (preview) Believe it or not this is not a magic, this is real CSS magic ;))

Untuk lebih merangsang hasrat kalian, apakah kalian sudah melupakan satu css magic -moz-transform: scale Harus benar-benar belajar jika ingin menjadi seorang master :))

#areaPreview {
margin: 0;
margin-right: -moz-calc(22%);
background-image: -moz-linear-gradient(#eee, white);
background-image: -webkit-linear-gradient(#eee, white);
background-image: linear-gradient(#eee, white);
background-repeat: no-repeat;
background-attachment: fixed;
}
.preview {
position: fixed;
top: 0;
right: 10px;
width: 0;
height: 95%;
opacity: 0.3;
width: -moz-calc(27% - 40px);
background-image: -moz-element(#areaPreview);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
-webkit-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.preview:hover {
opacity: 1;
cursor: help;
}

Planning HTML

<div id="areaPreview">

BLAH-BLEH-BLOH WTF PRET...

BLAH-BLEH-BLOH WTF PRET

...BLAH-BLEH-BLOH WTF PRET

</div>

<div class="preview"></div>

Enggak akan paham kalau tidak melihat demonya KAN!!! :-"

Lorem ipsum dolor sit amet

post-img Aenean eu dui mattis ante luctus blandit in sed dui. Pellentesque vulputate suscipit hendrerit. Aliquam dui sapien, rhoncus vel consectetur a, aliquet at nunc. Nam pharetra ultrices elementum. Fusce ultrices porta erat ac luctus. Sed tempus, ipsum et consequat laoreet, libero nisl gravida turpis, a scelerisque nisl nibh eu dolor. Praesent et nibh a neque venenatis mollis. Nam vel diam at mauris varius cursus eget id elit. Vestibulum in porta sem. Nam et augue risus. Ut nec justo nec dolor ultricies auctor eu eu ante. Sed eu tellus nisl.

Tengok samping kanan monitor anda, sorot di sana ada live screenshot? Itulah keajaiban bahasa CSS3. Mau lagi keajaibannya???

Jika sobat pikir saya menampilkan semua image sama itu dengan syntax img biasa, pikiran sobat salah besar dan pastinya capek berooo :)) Itu adalah magic dengan bumbu magic CSS frame + -moz-element(#) Untuk melakukan hal ini semua, berikut links resources pelajaran yang mseti kalian pelajari dengan tekun :">
Library Link

developer.mozilla.org/en-US/docs/Web/CSS/calc
developer.mozilla.org/en-US/docs/Web/CSS/element
www.w3.org/TR/css3-values/#calc
bugzilla.mozilla.org/show_bug.cgi?id=363249
caniuse.com/calc
www.browsersupport.net/CSS/-moz-calc()
www.browsersupport.net/CSS/background-image:-moz-element

For Fun

www.cssplay.co.uk/menu/css3-reflections.html
test.monoclejs.com/test/experimental/moz-element-flipper
dynamis.jp/demo/moz-element/iframe.html

Kalau sobat mau memasuki lebih dalam ke link for fun yg gue kasih, di jamin bakalan menemukan sesuatu yang AWESOME. Semua ada di otakmu >:)
Happy blogging \m/