![](http://2.bp.blogspot.com/-I0MhEfdwSmU/US2g1xTCSxI/AAAAAAAAEs8/qDTgz4bdMIk/s1600/bbb.jpg"#sthash.GLcBcjSi.dpuf)
Showing posts with label CSS3. Show all posts
Apa kabar sobat~ akhirnya ada sedikit kesempatan juga untuk posting blog,karena kebetulan hari ini libur 2 hari~xD
Trik kali ini saya dapatkan dari CSS triks.com dengan tidak sengaja.awalnya cuma iseng' browsing trik CSS,lalu saya menemukan trik yang cukup menarik,yaitu Slide to unlock.trik ini sebenar'a udah lama juga,tapi karena saya lihat masih jarang",saya post deh~
contoh pada css-tricks.com
contoh trik modifikasi saya
apa bedanya dengan trik yang asli?
trik yang saya modif ini,diterapkan untuk blog sebagai welcome screen/splash screen.jadi fungsi slide'a menjadi tombol/menu pembuka/opening blog kita.
Tujuan dari Trik yang berupa CSS3 dan jquery ini , kalau menurut saya yang buat juga hanya iseng" agar mirip dengan sistem Unlock di Iphone.Setelah saya coba demo'a.wah ternyata lucu juga ya,ketika kita drag pointer ke kanan,maka automatis kebuka/ilang slide'a?
setelah saya periksa CSS'a ternyata Css'a menggunaka CSS keyframe yang tidak looping.teori'a sebelum kita geser slide,display masih keadaan "Block",setelah kita drag ke kanan sejauh 720px,posisi display menjadi "none".wah menarik juga nih.
lalu saya cari ide bagaimana cara menerapkan slide to unlock ini untuk fungsi lain.
saya iseng" otak atik,dan akhirnya berguna juga untuk unlock screen yang ada di blog kita *.*
bagaimana cara'a? yahh,karena ini kesempatan yang langka juga untuk saya posting,saya ceritaiin deh~xD
Pertama,begini teori'a: yang kita inginkan slide itu ada dilayar fullscreen,melayang diatas blog kita,dan kalau di unlock,slide'a hilang dan menampilkan blog kita kembali.jadi trik yang saya buat ini mirip" splash Screen atau welcome screen sebelum memasuki blog kita.kalau sudah berfungsi,tinggal tambahkan accesoriss agar tampilan'a tidak agak membosankan.misal yang ada diblog saya,saya tambahkan text messages dan gambar miku ^^
Kedua,bagaimana cara'a? :dari teori diatas,bisa saya simpulkan yaitu:
1. Bagaimana cara'a melayang?
Jawab: tambahkan Css position:fixed;
2. bagaimana cara'a slide itu ada dilayar fullscreen
Jawab: tambahkan warna background dan dibuat panjang dan lebar 100%
CSS : background:#000;(warna bg) dan width:100%;height:100%;
saya juga menambahkan z-index:9999 dan seterusnya,agar posisi objek ada di layer paling atas/tertinggi dari semua element dibelakangnya
3. bagaimana cara'a kalau di unlock,slide'a hilang dan menampilkan blog kita kembali?
Jawab: bagaimana cara'a? saya juga mengira itu efek dari CSS'a,tapi itu efek dari jquery'a;
Jawab: bagaimana cara'a? saya juga mengira itu efek dari CSS'a,tapi itu efek dari jquery'a;
$(function() {
$("h2 img").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 550) {
$("#well").fadeOut();
}
},
stop: function(event, ui) {
if (ui.position.left < 551) { $(this).animate({ left: 0 }) } } }); });
4. bagaimana cara'a menambahkan gambar dan text seperti blog johanes?
jawab :
-nah kalau yang ini,saya kreasikan sendiri~xD
-saya buat HTML sendiri dengan nama class .pesan,.pesan1,.headpesan.
.pesan saya isi dengan text ;blog johanes tidak aktif untuk sementara
.pesanhead saya isi dengan : messages from admin
.pesan1 saya isi dengan blablablablabla.panjang deh.wkwkwk
untuk gambar mikunya,cuma seperti biasa menggunakan img src,tapi luarnya saya tambahkan html dengan class name .gambarmiku. kenapa saya tambahkan? agar gambar'a bisa diatur letak dan posisinya.
5. bagaimana cara mengatur posisinya?
jawab:
menggunakan margin.
6. bagaimana cara menggunakan margin?
tambahkan saja margin-left ,margin right,margin-top dan margin bottom.
tinggal atur posisi'a/nila px.
misal:
mau geser kekanan : margin-left:10px;
mau geser keatas :margin-bottom:10px;
(tinggal atur nilai'a berapa jauh mau kamu geser objeknya.)
7. kenapa margin left bisa kekanan?
jawab:maksud dari margin left itu,memberi jarak dari sebelah kiri,maka objeknya akan kegeser kearah kanan,dan juga sebaliknya.tapi bila nilai'a kamu beri nilai minus,maka objek'a akan bergeser ke arah kiri.
8. kenapa bisa?
jawab: sebelum'a saya tanya dahulu,pernah belajar matematika tidak? xDD
Sebenarnya prinsipnya sama seperti gambar diatas.
begini teori'a,misal ada obkek sebuah bola.saat posisi margin 0,pasti kalau digambar posisinya ditengah bukan?
lalu misal kita tambahkan margin-left:5px;
jadi seperti gambar dibawah ini
maksudnya margin-left itu,posisi vertikal geser dari kiri-kekanan.tetapi kalau horizontal .margin-top dari posisi atas kebawah.(minus dan plus jadi terbalik/jadi kebalikanya).kecuali bila diberi nilai minus,maka hasil'a margin left bergeser ke kiri dan sebaliknya.
ax² + bx + c = 0 ax² + bx + c = 0 a (x + p/a) (x + p/a) = 0
x1 = - p/a dan x2 = - q/a
itulah teori singkat tentang margin.
loh,kq jadi out off topic?=___="
wah,sepertinya saya kebanyakan belajar kalkulus~xDD
9. bagaimana mengedit style pada text " Slide to unlock " ?
kamu cukup perhatikan CSS yang saya tandai dibawah ini.
#well h2 {
background: -moz-linear-gradient(left, #8B836F, 0.4, #8B836F, 0.5, #52CFD2, 0.6, #8B836F, #8B836F);
background: -webkit-gradient(linear,left top,right top,color-stop(0, #8B836F),color-stop(0.4, #8B836F),color-stop(0.5, #52CFD2),color-stop(0.6, #8B836F),color-stop(1, #8B836F));
-moz-background-clip: text;
-webkit-background-clip: text;
border-radius: 15px;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
border: 1px solid #FEA21D;
font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin-top: 130px;
padding: 0;
width: 720px;
-webkit-text-size-adjust: none;
}
warna ██ : warna text:ganti kode warna hexadesimal'a.karena text efek'a menggunakan color gradient
kode #8B836F adalah warna ██ dan kode #52CFD2 adalah warna ██
jadi kalau digambarkan menjadi seperti ini
dan karena menggunakan efek animasi css 3,maka akan bergerak secara halus dari kiri kekanan.
warna ██ : Untuk mengatur nilai rounder/bulat pada objek tersebut.
warna ██ : untuk mengatur tebal,tipe,dan warna border.
warna ██ : untuk mengatur ukuran text.
warna ██ : tipe font.
warna ██ : jarak dari atas objek ke atas sejauh 130px. (bisa dirubah nilai'a,tinggal sesuaikan~
10. dan terakhir,bagaimana agar trik ini hanya berfungsi di home page saja?
jawab: kita tinggal menambahkan html tag conditional atau bisa lihat lebih lengkap'a disini untuk penerapanya.
sipp,kembali ke slidenya~xD
langsung saja cara pasang'a,pertama copy paste CSS yang sudah saya modifikasi dibawah ini(tidak sama dengan blog saya,ini css dasar'a),lalu copas juga HTML dan Jquery'a:
CSS
#well {
padding: 140px 20px 20px 300px;
background:#000;
overflow: hidden;
width:100%;height:100%;
position:fixed;
z-index:9999999999999999;
-webkit-user-select: none;
font-family: 'Open Sans', sans-serif;
}
#well h2 {
background: -moz-linear-gradient(left, #8B836F, 0.4, #8B836F, 0.5, #52CFD2, 0.6, #8B836F, #8B836F);
background: -webkit-gradient(linear,left top,right top,color-stop(0, #8B836F),color-stop(0.4, #8B836F),color-stop(0.5, #52CFD2),color-stop(0.6, #8B836F),color-stop(1, #8B836F));
-moz-background-clip: text;
-webkit-background-clip: text;
border-radius: 15px;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 5s infinite;
border: 1px solid #FEA21D;
font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin-top: 130px;
padding: 0;
width: 720px;
-webkit-text-size-adjust: none;
}
#slider {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0H00eGEyquB8eDjViJB_7JMbS3EXl_gYzWJWFLRQVRKT3YNxQg9LPLL82UhTIsb0f78iXEXnt6ilcayp6jPCCiz6B1F5XyqSAfww9_Byr7BQqjfBMLlvKwRMOiuVbw-qWvkHd8AyoHwI/s1600/arrow.png) no-repeat;
width: 146px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
opacity:0.8;
}
#slider:hover {opacity:1;}
@-webkit-keyframes slidetounlock {
0% {
background-position: -720px 0;
}
100%{
background-position: 720px 0;
}
}
.bgslide {background:#000;width: 722px;
border-radius: 15px;}
HTML
<div id='well'>
<div class='bgslide'><h2><strong id='slider'/> <span>slide to unlock</span></h2></div></div>
Jquery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'/>
<script src='http://css-tricks.com/examples/SlideToUnlock/js/slidetounlock.js'/>saya agak malas reupload js'a~xD
bila merasa hosting'a terasa agak lelet,tinggal download dan re-upload js'a di sites.google.com
#note
-letakan CSS di atas kode ]]></b:skin>
-letakan HTML didalam/dibawah kode <body>
-letakan jquery diatas kode </head>
selesai deh,jelas sekali bukan?nanti tampilan'a menjadi seperti ini
contoh diatas,agak berbeda dengan yang aslinya di
http://css-tricks.com/examples/SlideToUnlock/
http://sword-art-online-blogger-template.blogspot.com/
kenapa?trik yang asli tidak melayang dan tidak fullscreen.
sedangkan yang sudah saya modifikasi melayang,dan fullscreen.
kenapa agak beda dengan blog saya? jangan samalah,kalian bisa memodif'a sendiri dengan kreasi kalian sendiri... ^^
selamat mencoba dan belajar~xDD
semoga trik ini cukup bermanfaat,dan tolong jangan cuma asal copas postingan saya dan mengaku".Dosa tau :p
SUMBER:. iPhone Style, slide to unlock dengan jquery dan CSS3 http://djogzs.blogspot.com/#ixzz2FmATuCTa
Under Creative Commons License: Attribution
CSS3Ps adalah web/ sebuah cloud berbasis plugin photoshop yang dapat memproses sebuah layer dari photoshop menjadi CSS3. kita dapat memilih beberapa layer dan group layer dan mengkonversi objek pada layer tersebut. Apa saja yang dapat di convert?
-Color overlay
-Stroke/border
-Inner Shadow
-Inner Glow
-Drop Shadow
-Outer Glow
-Gradient Overlay
-Border-radius
-Box-size
-Multi layer
(sejauh yang saya coba hanya itu yang berfungsi)
menggunakan gambar,text dan efek menggunakan pattern/pola tidak akan berfungsi saat kita konversi.
hanya sebatas itukah? ya karena sayapun baru mencoba,yang pasti berhasil adalah vektor yang menggunakan pen tool dan costum shape,jika kita coba menggunakan brush, pencil,text atau objek gambar yang ukuran'a tidak pasti(tidak beraturan),maka akan gagal dan yang css keluar hanya tinggi dan lebar(height and width).fail =__=v
Untuk costum shape,masih ada syaratnya,yaitu bentuk beraturan dan masih masuk akal oleh css3.
Misalkan saya buat sebuah objek bintang dan segilima,setelah saya konversi menjadi css3 hasilnya malah menjadi percegi panjang.jadi intinya hanya objek yang ukuranya beraturan dan dapat dihitung oleh script yang dibuat oleh CSS3ps.
Untuk hasilnya support pada semua browser yang mendukung CSS3 serta mendukung pada Windows atau Mac OS X dan Photoshop CS3,CS4,CS5 dan CS6.
Dan perlu saya beritahu,menggunakan plugin ini GRATIS dan memerlukan Koneksi Internet untuk mengconvertnya pada photoshop CS3 dan CS4,sedangkan untuk versi CS5 dan CS6 saya kurang tahu dia sifat'a online,atau langsung di photoshop'a.
Penasaran bagaimana cara menggunakan Plugin ini?
kamu bisa langsung lihat tutorial'a disini
Atau mengikuti petunjuk dari saya dibawah ini.
Karena saya sendiri masih menggunakan CS4,jadi saya buat tutorial untuk versi CS3 dan CS4 saja.
Pertama,sobat Download plugin'a sesuai dengan versi photoshop yang kamu punya.
Download untuk Adobe Photoshop CS5 and CS6
Download untuk Adobe Photoshop CS3 and CS4
Kalau sudah,segera buka photoshop,buat sebuah layer dengan ukuran apa saja,lalu buatlah sebuah objek menggunakan costum shape (bebas,mau 1,2,3 atau lebih)
Setelah itu tambahkan Style pada objek tersebut(drop shadow,border,gradient,dll)
kalau sudah, klik menu "
File -> Scripts -> Browse...
Setelah itu Pilih File yang tadi kita download,lalu klik Load
Setelah itu akan otomatis membuka default browser kamu,dan menunggu prosesnya selama 20 detik
Dan untuk hasilnya bisa kamu lihat seperti gambar dibawah ini.sudah ada preview kode CSS3 lengkap serta bentuk objeknya.
Pada hasil contoh dibawah pada objek yang bewarna hijau,semula saya buat bentuk segilima,tapi hasilnya menjadi persegi panjang TTATT.#fail
Selesai deh,mudah bukan?
Kalau menurut saya plugin ini hanya media alternatif /mirip CSS3 generator untuk membantu kita dalam membuat style,bukan membuat bentuk" aneh/sulit sesuka kita,tapi bedanya disini kita menggunakan Photoshop,jadi yang memang sudah terbisasa menggunakan photoshop,pastinya lebih mudah untuk membuat style CSS3 yang kita inginkan.
Sekian trik dari saya,semoga bermanfaat,terima kasih :)
sertakan Sumbernya bila anda mau mengcopy paste artikel ini. CSS3Ps - Convert Objek di Photoshop menjadi CSS3 http://djogzs.blogspot.com/#ixzz2FbLsa7gm
Under Creative Commons License: Attribution
Tag :// CSS3
