Cara sederhana membuat kustom preloading screen website dengan JavaScript


Linkdesain.com . Apa itu preloading screen pada website? preloading screen yang dimaksud disini adalah suatu area yang akan menutupi halaman web sebelum website tsb benar-benar keload / terbuka seluruhnya, jadi selama website dalam keadaan loading area preloading ini akan menutup halaman web dan pengunjung situs tidak dapat mengakses konten apapun sampai halaman benar-benar selesai loading. Membuat preloading ini sangatlah mudah kita dapat membuat dengan animasi css atau gambar animasi yang kita taruh di preloading screen dan dengan bantuan javascript tentunya.

tambahkan js ini dihalaman webmu
<script >
jQuery(document).ready(function($) {
    $(window).load(function() { $(".preloading").fadeOut("slow"); })
});
</script>
maksud js tersebut adalah ketika halaman masih loading maka area dengan class .preloading akan dimunculkan dan setelah loading halaman benar-benar selesai, area preloading tsb akan hilang secara fadeout dan pengunjung web dapat mengakses halaman web.


tambahkan tag html berikut setelah tag <body>
<div class="preloading">
<div class="textpreload">LOADING</div>
</div>
maksud tag html tsb adalah preloading berserta konten dalam class .preloading dalam hal ini adala text loading dengan nama class .textpreload yang akan dimunculkan saat halaman web masih loading. kita dapat mengganti text loading ini dengan gambar animasi (Gif) ataupun animasi css.


Kemudian tambahkan css
.preloading {width: 100%; 
text-align: center;
height: 100%;
position: fixed;
background: #000000;
z-index: 999999;
top: 0px; 
display: table; 
left:0}
.preloading .textpreload {
display: table-cell; 
text-align: center; 
vertical-align: middle;}
 banyak sekali situs yang menyediakan gambar preloading ini, contohnya kamu dapat mengambilnya dari sini
http://preloaders.net/en/free





Web Design : Agar menu bootstrap muncul ketika dihover ( bukan diklik ) maka kamu perlu lakukan cara ini..



Linkdesain. Di artikel ini kita akan ngebahas issue yang sering dialami para web designer pengguna bootstrap. Para web designer atau frontend developer pasti sudah tidak asing dengan nav pada bootstrap, biasanya secara standar dan default submenu pada nav bootstrap ini akan muncul ketika kita klik pada menu, ternyata cara menampilan menu seperti ini tidak terlalu disukai oleh kebanyakan user atau pengunjung website, dan ada banyak pertanyaan bagaimana mengubah behavior dari menu tersebut agar kita cukup menghover saja menu pada navigasi dan submenu akan muncul dengan sendirinya dan kondisi ini hanya berlaku di tampilan desktop sedangkan di mobile tetap mengklik pada menu untuk menampilkan submenu. Jika kita googling banyak sekali trik untuk mengatasi masalah ini, tapi kali ini kita akan ngebahasnya dengan trik css versi linkdesain.

Kalau kalian sering berkutat dengan framework Bootstrap pasti sudah tau kalau toggle menu atau menu pada tampilan mobile bootstrap ini akan muncul di resolusi dibawah 768 px , karena hover menu ini tidak akan kita buat di tampilan mobile, maka kita akan membatasi properti css nya diatas resolusi 767 px saja atau min 768px .
 

Untuk membuat hover menu bootstrap pada tampilan desktop ternyata sangat mudah,  setelah saya bereksperimen ternyata jadilah kode cssnya seperti ini, cukup kopi dan paste kode berikut di file css mu dan menu navigasinya akan muncul dengan cara di hover.

/*hover menu bootstrap*/ 
@media only screen and (min-width: 768px) { 
.dropdown:hover > .dropdown-menu { display: block;}
.dropdown > .dropdown-menu.sub-menu >  .dropdown:hover > .dropdown-menu.sub-menu { margin-left: 100%;top: -2px;  } 
.dropdown .dropdown-menu.sub-menu .dropdown-menu.sub-menu .dropdown-menu.sub-menu {  top: -8px;  } 
.dropdown:hover > .dropdown-menu > .dropdown-menu { display: block; }
.dropdown:hover > .dropdown-menu > .dropdown-menu > .dropdown-menu { display: block;}
.navbar ul li ul.dropdown-menu {background: #e9a825}
.navbar ul li ul.dropdown-menu li {margin: 0px 0px 0px 0px}
.navbar ul li ul.dropdown-menu li a{padding: 5px 20px;}
.navbar .dropdown-menu > li > a:focus, 
.navbar .dropdown-menu > li > a:hover {background-color: #d79717;}
}

untuk warna background bisa disesuaikan sendiri.. ~hdr

Frontend Web : kode-kode css ini bisa mengatasi masalah crossbrowsermu tanpa bantuan javascript.


Crossbrowser issue adalah masalah yang timbul ketika tampilan website berubah atau tidak seperti yang kita lihat di browser lain. misal template web yang kita buat sudah sangat bagus di browser mozila dan crome tapi muncul masalah di browser safari atau muncul masalah pada safari di leptop macbook dmana ada bagian-bagian template tsb menjadi rusak, hilang, tidak bekerja semesti, dan issue lainnya. Rusaknya template website pada browser-browser tertentu ini biasanya karena css di browser tersebut tidak bekerja semestinya, sedangkan hal yang membuat css tsb tidak bekerja dengan baik biasanya karena struktur html dan css yang kita buat tidak semantic atau tidak sesuai standar , tidak teratur, asal asalan, sangat dipaksakan dan tidak rapi .

Ada bnyak cara untuk mengatasinya, biasanya untuk mengatasi masalah ini kita bisa menggunakan javascript , cara kerja javascript tsb adalah dengan mendeteksi browser yang digunakan oleh user. Setelah js tsb mendeteksi browser si user script tsb akan menambah class tertentu di tag <body> dan kita membuat class-class khusus untuk setiap browser , misal si user menggunakan browser safari untuk mengakses webnya maka kita harus membuat class yang akan dibuat oleh js disafari contohnya dengan nama class "safari" setelah script tersbut mendetksi bahwa situs tsb diakses dengan safari maka otomatis di tag body akan muncul class safari seperti berikut <body class="safari">

Langkah selanjutnya adalah membuat style css khusus untuk safari. misal bagian yang rusak di safari ada dibagian tag header maka kita harus membuat style khusus untuk header dengan menambahkan class induknya tadi yang ada di tag body yaitu class "safari" jadi code yang harus kita tulis di css haruslah diawali dengan klas safari seperti berikut

.safari header { isi style cssnya }

style tsb hanya akan bekerja di browser safari saja karena dibrowser lain style dengan class safari tidak akan terdeteksi.

Kekurangan mengunakan cara javascript seperti ini biasa adalah dari tampilan header yang rusak tadi menjadi bagus akan ada delay sekian detik atau sekian milidetik karena style css safari tadi harus menunggu script js pendeteksi browser tadi ke load oleh browser terlebih dahulu, jika koneksi internet kita sangat cepat delay ini tidak akan terlihat.

Cara paling mudah dan cepat kita cukup menggunaka css yang lain darpada biasany.. yakni code css yang memang di khususkan untuk browser broser terntentu jadi kita tidak perlu menggunakan javascript apapun karena css ini sudah dapat mendeteksi browser yang digunakan tanpa bantuan js dan tanpa delay untul meload js karena memang tidak menggunakan js (javascript)

Dan seperti inilah css khusus browser browser terntentu tsb, dengan properti class misal width 100px dan height 80px..

/*mozilla*/
@-moz-document url-prefix() {
    .classnya {width: 100px; height: 80px }
}

/* chrome*/
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .classnya {width: 100px; height: 80px}
}

/* ie>9 */
@media screen and (min-width:0\0) {
    .classnya {width: 100px; height: 80px}
}


/* ie8 */
@media \0screen {
    .classnya {width: 100px; height: 80px}
}

/**safari**/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari 5+ ONLY */
    ::i-block-chrome, .classnya {
     width: 100px; height: 80px
    }
}





Cara menggunakan mockup PSD - bikin desain kamu makin realistis!


linkdesain.com, Kali ini kita akan ngbahas tentang mockup psd untuk mengimplementasikan desain kita agar terlihat lebih nyata. sebelumnya sudah tahukah apa itu mockup yang saya maksud disni.. kalau belum tahu mari kita simak..

Suatu ketika kita membuat sebuah desain tshirt, baru desain vectornya aja dan kita ingin melihat hasilnya ketika desain tersebut sudah jadi dalam bentuk tshirt, nah dengan bantuan mockup ini kita bisa langsung melihat hasil desain tersebut di tshirt tanpa harus mencetaknya, dan hasilnya sangat realistis, kamu cukup mendownload mockup psd tersebut dengan googling di internet, kalo kamu ga mau bayar y cari aja yang gratisan, mockup-mockup psd ini bnyak juga yang gratisan, ketik aja di google free psd mockup tshirt jika kamu ingin mencari mockup untuk deseain tshirt. Ada banyak macam-macam mockup psd yang dapat kita gunakan dan bisa kamu cari di internet seperti mockup stationery, mockup mug, mockup logo bisa logo yang di aplikasikan di kertas, logo yang biasa di pasang di dinding ( wall signed) , logo di kaca, mockup stempel , mockup untuk desain botol minuman, mockup untuk desain mobil, mockup ui di smartphone, mockup untuk desain web di macbook dan masih banyak lagi aneka mockup desain lainnya.

untuk mendapatkan mockup-mockup psd secara gratis kamu bisa mencarinya di google atau situs-situs design resources seperti www.graphicburger.com  , www.mockupworld.co , dll

Lalu agaimana cara menggunakan mockup ini?
Caranya sangat mudah sekali , pertama y searching dan download terlebih dahulu mockup yang kamu cari kemudian buka dengan photoshop.. tidak perlu menggunakan photoshop versi paling baru, karena biasanya menggunakan photoshop versi lama seperti cs4 atau cs5 pun sudah bisa. Setelah dibuka biasany di mockup tersebut ada layer dengan judul "logo here" atau "design here" atau "your design here" dll pokokny layer yang judulnya meminta kamu untuk meletakan desainny di layer tsb.. klik layer tsb maka akan terbuka lembar kerja photoshop baru, kemudian taruh desain kamu disitu , jika desein kamu ada background putih hilangkan dahulu background tersebut dan ganti dengan transparan agar hasilnya maksimal, kemudian save, dan buka kembali lembar kerja mockup yang kamu download tadi dan lihat hasilnya.. sekarang desain yang kamu buat nampak realistis..

Sebagai contoh disini saya mempunyai desain tshirt yang saya bikin dengan corel draw yang kemudian saya eksport ke gambar png transparan, desainnya seperti ini...


 


Kemudia gunakan mockup tshirt di photoshop , klik pada layer color shirt dan pilih warnanya , pad mockup psd dibawah saya menggunakan warna merah maron, lihat gambar berikut.




kemudia pada daftar layer cari layer dengan nama "put your design here" berarti kamu harus menempatkan desain kamu disitu.




setelah memilih layer tsb, maka lembar kerja baru akan muncul dan letakan desain kamu di lembar kerja tsb, di page baru tadi kamu akan menemui layer dengan gambar tshirt lagi , tapi thisrt disini menggunakan warna flat atau solid, ubah lagi warna solid tsb ke merah agar kontras dengan gambar tshirt yang sebelumnya, dan buat layer baru dengan nama misal "layer 1" kemudia letakan desainmu di layer 1 tsb ( layer tshirt dibawah layer 1 ) . Desen we are drowning bla bla bla juga bisa kita ubah-ubah warnanya dengan  blending option dan pilih "color overlay" disini saya menggunakan warna kuning.



kemudian klik save.. dan buka page/halaman mockup yang tadi dan liat hasil..



 
~hdra

Yang harus kamu tahu membuat tampilan website responsive dengan media query




linkdesain.com, Saat ini hampir semua website sudah menerapkan layout yang mobile friendly dalam artian layaot web akan otomatis menyesuaian lebar atau resolusi layar device atau perangkat yang kita gunakan, jika jaman dulu sebelum maraknya perangkat ponsel pintar kebanyakan website menggunakan layout atau halaman web terpisah dimana saat website mendeteksi bahwa web tsb dibuka melalui layar dengan resolusi terntentu misal resolusi dibawah 760px atau tampilan mobile maka website tersebut akan menggunakan halaman dalam mobile version yang biasanya berbeda halamannya dengan desktop version, sekarang menampilkan web dengan cara tersebut sudah jarang kita temui walaupun masih ada juga sih sebenarnya seperti  situs-situs berita atau forum yang banyak menggunakan kolom dan layout yang ribet , tapi saat ini kebanyakan website sudah menggunakan 1 halaman web saja untuk menampilkan layout web versi mobile, tablet dan desktop yang biasanya kita sebut dengan responsif. 

Ada banyak cara yang dapat kita gunakan untuk membuat tampilan website responsive yang pertama kita bisa menggunakan CSS Framework seperti Bootstrap dari twitter, foundation, materialize dari google,  purecss dari yahoo dan framework css lainnya. Dengan menggunakan framework css memang cukup mudah karena kita tinggal memanggil class untuk besar gridnya tapi terkadang kalau mengandalkan framework saja layout website kita juga belum belum tentu rapi sesuai dengan yang kita harapkan di tampilan mobile, tablet, dan desktop dan untuk merapikannya tersebut kita perlu styling css secara manual dengan media query.







Yang harus kamu tahu tentang Media Query 
Untuk membuat tampilan website yang responsive atau layout website yang menyesuaikan otomatis di tampilan mobile, tablet, desktop secara manual tanpa menggunakan CSS Framework kita harus menggunakan media query.
media query memiliki format atau baris kode yang standar seperti berikut 

@media only screen and ( batas resolusi layar bisa max, min ) { kondisi style }
contoh : @media only screen and (min-width: 768px)  { width:200px; height:100px } 

 atau kita bisa menggunakan batasan antara resolusi sekian sampai sekian seperti berikut

@media screen and (min-width: 1200px) and (max-width: 1365px)  { kondisi style }

dan harus kita masukan dalam file css, perlu diperhatikan kamu harus membuat penulisan media query harus sesuai standar untuk menghindari crossbrowser issue dan bekerja disemua browser seperti safari, chrome, mozilla , iphone, macbook, android dll

karena saat ini ada sangat banyak device dengan standar resolusi berbeda misal saja pada iphone memilike standar resolusi seperti berikut 



/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}



belum lagi standar resolusi smartphone-smarphone lainya yang saat sangat banyak model nya maka kita dapat mengkondisikan batasan resolusi setiap device seperti pada bootsrap saja seperti berikut



 /*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}



misal kita memiki halaman web dimana heading dengan tag html seperti berikut <h1> loerm ipsum </h1> di tampilan desktop ukuran fontnya adalah 18px dan saat dibuka pada tablet ukuran font menjadi 16px dan di buka menggunakan smartphone / mobile menjadi 12px, maka kondisi style css dengan media query akan seperti ini



   h1 { font-size: 18px; }

   /* Medium Devices, Desktops */
   @media only screen and (max-width : 992px) {
   h1 { font-size: 18px; }
   }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    h1 { font-size: 16px; }
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
    h1 { font-size: 12px; }
     }




         
~hdr