Category: Tutorial


Memberi Efek Animasi Warna Pada Gambar Dengan CSS3 Filter

By Irvan Galuh,

Membuat efek dengan css semakin marak saat ini, dengan menggunakan CSS Filter kita bisa membuat efek-efek yang biasanya kita temukan di Photoshop, bahkan efek-efek seperti instagram bisa kita ciptakan dengan kemampuan CSS3. CSS Filter ini relatif masih baru, dan masih jarang digunakan.




Pada tutorial kali ini kita akan mencoba membuat efek dengan CSS Filter di gabung dengan CSS Animation sehingga akan menghasilkan efek transisi warna gambar yang menarik. Sayang nya baru support browser webkit seperti Google Chrome atau Safari.

Penggunaan: Efek ini bisa digunakan untuk mempercantik Header, Gambar di website gallery, dan lainnya.



Langsung saja kita mulai dengan membuat file html.


HTML

Pada tulisan ini saya hanya menampilkan satu div saja, walaupun dalam demo nya akan banyak div karena untuk mempercantik tampilan demo, tapi intinya hanyalah satu div yang ada efek saja.



<div class=”column1 my-cell”>
<img src=”http://imcreator.com/wp-content/uploads/2014/01/wpid-Featured_Picture22.jpg” alt=””>
<div class=”desc”>
<h1>Tutorial Web Design Indonesia</h1>
<p><a href=”http://www.tutorial-webdesign.com”>http://www.tutorial-webdesign.com</a></p>
</div>
</div>



Yang perlu diperhatikan disitu hanyalah pemberian class column1, karena kolom itu yang akan diberi efek dengan css.


CSS

Untuk memberi efek pada div yang berisi gambar tersebut kita kasih efek dengan menggunakan css berikut ini


.column1{
position: relative;
}
.column1 img{
width: 100%;
height: auto;
}

.desc{
position: absolute;
top: 50%;
left: 5%;
}
.desc h1{
color: #fff;
font-family: ‘Hammersmith One’, sans-serif;
font-size: 20px;
}
.desc a{
color: #ddd;
}

.column2{
padding: 40px;
}
.column2 p{
margin: 20px 0;
}
.column2 ul{
margin-left: 15px;
}
.column2 ul li{
border-bottom: 1px solid #ddd;
padding: 5px 0;
}

/* Animation */
@-webkit-keyframes pulse {
0% { -webkit-filter: contrast(400%) grayscale(0%); }
100% { -webkit-filter: contrast(100%) grayscale(100%); }
}
@-webkit-keyframes mover {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

.column1{

/* -webkit-filter: */
/* contrast(200%) */
/* brightness(25%) */
/* invert(100%) */
/* hue-rotate(110deg) */
/* grayscale(100%) */
/* sepia(100%) */
/* blur(10px); */

/* Bisa dipilih efek-efek diatas */

/* -webkit-transition: -webkit-filter 1s; */
-webkit-animation: pulse 3s alternate infinite
/*mover 5s alternate infinite*/;

}
.column1:hover { -webkit-filter: contrast(300%) hue-rotate(80deg) grayscale(100%) /* blur(2px) */; }

bisa dilihat disitu kita hanya menggunakan efek contrast dan grayscale saja, untuk efek lainnya bisa anda gunakan seperti invert, sepia, blur, dll.





Sekian, semoga berguna untuk anda yang sedang mendalami CSS3.

Salam web design indonesia









SUMBER = http://www.tutorial-webdesign.com/memberi-efek-animasi-warna-pada-gambar-dengan-css3-filter/

Membuat Animasi Efek Mengetik Teks Dengan CSS

By Irvan Galuh,

Animasi mengetik teks biasanya dibuat dengan bantuan Jquery, namun pada artikel kali ini kita akan mencoba membuatnya hanya dengan CSS.Animasi ini tentunya bisa digunakan jika ingin membuat semacam presentasi di website, atau untuk sekedar mempercantik halaman website.
Ilustrasi Mengetik, credit photo by Janelene Juanillo
 
Animasi ini juga bisanya sering kita lihat di website-website yang diretas, biasanya siperetas meninggalkan jejak dengan pesan yang seolah-olah sedang diketik.

Bagaimana Membuatnya?
Untuk membuatnya tidak terlalu sulit, cukup beberapa baris kode css maka kita bisa mendapatkan efek ketikan teks tersebut pada website kita.Kode HTML

Berikut kode HTML yang digunakan


 
<p class=”wadah-mengetik”>Welcome to Tutorial Web Design Indonesia | <a href=”http://www.tutorial-webdesign.com”>http://www.tutorial-webdesign.com</a></p>
 
Bisa dilihat disitu kita membuat sebuah class dengan nama .wadah-mengetik.

Kode CSS

Untuk kode CSS nya kita menggunakan CSS Animation yang merupakan fitur dari CSS3

.wadah-mengetik
{
font-size: 22px;
width: 740px;
white-space:nowrap;
overflow:hidden;
-webkit-animation: ketik 5s steps(50, end);
animation: ketik 5s steps(50, end);
}
@keyframes ketik{
from { width: 0; }
}@-webkit-keyframes ketik{
from { width: 0; }
}

Bisa dilihat pada kode css diatas kita membuat animasi dengan nama ketik dan mengatur animasi nya pada keyframe.Selanjutnya tambahkan overflow:hidden sehingga ketika animasi mengubah ukuran paragraf ke 0 kita tidak akan dapat melihat teks. Akhirnya kita dapat menambahkan animasi ketik dengan fungsi steps()

Animasi akan meningkatkan ukuran paragraf dari 0 sampai 740px, dalam 50 frame sehingga menciptakan efek bahwa teks yang sedang diketik.


 
 
Sekian tutorial kali ini, semoga menambah wawasan dan meningkatkan skill kita semua.
 
 
 

Membuat Tabs Dengan CSS

By Irvan Galuh,

Membuat tab biasanya lebih populer dengan menggunakan jquery, namun sebenarnya cukup dengan css saja kita sudah bisa membuat tab yang tak kalah bagusnya.




Pada tulisan kali ini kami akan menjelaskan secara singkat cara membuat tab hanya dengan css, tanpa bantuan jquery atau javascript lainnya.


Struktur HTML

Untuk pertama kita buat dulu struktur HTML nya



<main>

<h4><a href=”http://www.tutorial-webdesign.com”>Tutorial Web Design.com</a></h4>
<h2>CSS Tabs</h2>
<input id=”tab1″ type=”radio” name=”tabs” checked>
<label for=”tab1″>Home</label>
<input id=”tab2″ type=”radio” name=”tabs”>
<label for=”tab2″>About</label>
<input id=”tab3″ type=”radio” name=”tabs”>
<label for=”tab3″>Contact</label>
<input id=”tab4″ type=”radio” name=”tabs”>
<label for=”tab4″>Social Media</label>

<section id=”content1″>
<h3>Selamat Datang TWDers</h3>
<p>Content….</p>
</section>
<section id=”content2″>
<h3>About TWD</h3>
<p>Content….</p>
</section>
<section id=”content3″>
<h3>Contact TWD</h3>
<p>Content….</p>
</section>
<section id=”content4″>
<h3>Social Media</h3>
<p>Content…</p>
</section>
</main> 



Bisa dilihat pada script diatas, untuk membuat Judul dari Tab kita menggunakan tag input dan lebel, pada contoh tersebut kita membuat 4 tab, dimana setiap tab di beri ID tab1, tab2, tab3, tab4



Sedangkan untuk konten dari setiap tab dibuat dengan tag section yang masing-masing memiliki ID content1, conten2, content3, content4.


Styling dengan CSS

Setelah kita membuat struktur html dari tab tersebut, tentu ini belum akan berbentuk tab, perlu di desain atau diberi style dengan menggunakan css, seperti ini lah kode css yang kita gunakan

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
background: #5B264E;
font-family: “Open Sans”, “Arial”;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
color: #B7977B;
}
main {
background: #FFF;
width: 500px;
margin: 50px auto;
padding: 10px 30px 80px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
p {
font-size: 13px;
}

/* Important code */
input, section {
clear: both;
padding-top: 10px;
display: none;
}
label {
font-weight: bold;
font-size: 14px;
display: block;
float: left;
padding: 10px 30px;
border-top: 2px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: 1px solid #DDD;
}
label:hover {
cursor: pointer;
text-decoration: underline;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
display: block;
}
input:checked + label {
border-top-color: #B7977B;
border-right-color: #DDD;
border-left-color: #DDD;
border-bottom-color: transparent;
text-decoration: none;
}


Kode CSS untuk Tab

Yang paling penting di perhatikan pada kode diatas adalah kode yang kami tandai dengan /* Important Code */ sampai dengan akhir.

Dimana kode tersebut lah yang merubah tag input menjadi berbentuk tab, kenapa menggunakan input tipe radio? karena tab biasanya hanya memiliki satu bagian yang aktif sedangkan yang lain akan tertutup, untuk itu hanya input bertipe radio yang memungkinkan untuk di pilih seperti itu.

Jadi logika sederhanya begini: tag section pada saat diload akan disembunyikan, ketika salah satu ID tab sedang aktif (salah satu input radio dipilih), maka konten dari ID tersebut akan ditampilkan, dengan menggunakan perintah display:block



Demikian tutorial kita kali ini, salam web design & development indonesia.





SUMBER = http://www.tutorial-webdesign.com/membuat-tabs-dengan-css/

Membuat Gambar Hitam Putih Dengan CSS Filter

By Irvan Galuh,

Membuat gambar berwarna menjadi hitam putih dengan CSS3 adalah bahasan kita kali ini.

Dulu kita harus menggunakan Photoshop untuk memberi efek photo grayscale (hitam putih) untuk sebuah gambar, namun sekarang dengan kecanggihan fitur-fitur css3 kita tidak perlu capek2 mengeditnya di Photoshop, cukup dengan beberapa baris kode css kita sudah bisa membuat foto berwarna menjadi hitam putih.

Image by : comzeraddt
 

Beberapa bulan yang lalu tutorial-webdesign.com pernah membahas juga pada tulisan Membuat Efek-efek instagram dengan css3 filter, namun sampai saat ini belum support Firefox, Namun kali ini kita akan coba membuat yang efek grayscale yang bisa dijalankan di Firefox.

Oke langsung saja kita praktek membuat.

Siapkan sebuah file dengan nama grayscale.html dengan struktur sebagai berikut


<h2>CSS Filter : <small><a href=”http://www.tutorial-webdesign.com/grayscale-css3-filter/”>http://www.tutorial-webdesign.com</a></small></h2>
<div class=”normal”>
<img src=”http://www.tutorial-webdesign.com/wp-content/uploads/2013/03/coloredgrayscale.jpg” alt=””>
</div>
<div class=”grayscale”>
<img src=”http://www.tutorial-webdesign.com/wp-content/uploads/2013/03/coloredgrayscale.jpg” alt=””>
</div>

Untuk kode css nya seperti ini


 
<pre><code> .grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/></filter></svg>#grayscale”); /* Firefox 3.5+ */
}
.grayscale:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\’/></filter></svg>#grayscale”); /* Firefox 3.5+ */
}


Pada css diatas kita membuat efek grayscale(hitam putih), namun ketika mouse hover gambar kembali berwarna.

Sekian tulisan kali ini, semoga bermanfaat.

SUMBER = http://www.tutorial-webdesign.com/grayscale-css3-filter/

Membuat Frame Fullscreen Dengan HTML

By Irvan Galuh,

Membuat frame yang full screen 100% dengan html akan adalah topik kita kali ini, membuat frame yang fullscreen tidak terlalu gampang, tidak cukup sekedar memberikan height 100% dan width 100%.


Image is under Creative Common by cpradi
 
Berawal dari sebuah pertanyaan di sebuah group di facebook, dimana seorang bertanya bagaimana membuat Iframe yang fullscreen, maka dengan itu kami berniat membuat sebuah tulisan yang mungkin bisa menjawab pertanyaan tersebut, tulisan ini tidak akan panjang karena membuat nya juga tidak terlalu sulit, hanya perlu sedikit tambahan kode saja.
 
 
Lalu apa gunanya membuat frame? ada banyak alasan, salah satu alasan biasa digunakan iframe yaitu saat sebuah halaman dipindahkan ke domain baru, tapi user masih mengakses halaman yang lama (sebenarnya bisa di redirect).Alasan lain yaitu ketika sebuah domain belum siap launching website nya, dan demo website masih diletakan di tempat yang berbeda, maka kadang untuk menampilkannya secara online kepada client, maka developer menggunakan frame. Dan masih banyak alasan lainnya.

Lalu bagimana cara membuatnya?

 
Pertama siapkan sebuah file HTML yang kita beri nama iframe.html.Disini kita akan mencoba memuat halaman depan tutorial-webdesign.com dengan file tersebut, berikut ini adalah potongan kode yang bisa digunakan.


 
Bisa dilihat, kalau anda klik menu-menu yang ada di demo tersebut, url nya tidak berubah, itu menandakan bahwa halaman tersebut dimuat dalam sebuah frame.
 
Index.html
Letakan script berikut dibawah tag /head.
 
frameset rows=”*,1″ framespacing=”0″ border=”0″ frameborder=”NO”>
<frame src=”http://tutorial-webdesign.com/” name=”test” scrolling=”auto” noresize>
</frameset>
<noframes>
<body>
</body>
</noframes>


 
Kenapa diletakan setelah tag /head dan tidak didalam tag body dan /body ? Karena begitulah cara penggunaan frame.
 
Sekian tutorial singkat ini, salam web development indonesia
 
 
 

SUMBER = http://www.tutorial-webdesign.com/membuat-frame-fullscreen-dengan-html/

10 Ciri Web Designer Yang Berkualitas Baik

By Irvan Galuh,

Web designer yang memiliki kualitas baik itu gampang-gampang susah untuk dicari, ada banyak sekali web designer saat ini, apa lagi dengan semakin ramainya industri web di Indonesia khususnya.Jika anda sedang ingin membangun sebuah website dengan desain yang baik, atau anda sedang mencari seorang web designer yang akan anda ajak untuk menjadi partner kerja anda dalam membangun sebuah website, maka coba luangkan waktu anda untuk membaca artikel berikut ini agar anda tidak salah dalam memilih orang (web designer). Karena beberapa designer cukup profesional di bidangnya namun sangat banyak juga yang amatir dan kurang bertanggung jawab.

Disini kami akan memberikan setidaknya 10 kualitas yang harus dimiliki oleh web designer yang baik atau bisa kita bilang cukup profesional dibidangnya, sehingga bisa jadi acuan anda dalam memilih web designer yang berkualitas.



1. Pendengar Yang Baik.


Image by Radu Chibzii
 

Seorang web designer yang baik itu mutlak harus bisa jadi pendengar yang baik, sehingga dia bisa memahami apa kebutuhan anda dan mempertimbangkan apa yang harus dia berikan untuk memenuhi keinginan anda dalam sebuah desain website.


2. Mempertimbangkan Gagasan Anda.


Banyak web designer yang egois, dia hanya fokus pada apa yang ingin dia lakukan terhadap website anda dan tidak memperdulikan apa yang anda inginkan terhadap website yang ingin dibuat. Web designer memang memiliki pengetahuan tentang apa yang dia akan buat, namun dia juga harus mempertimbangkan apa keinginan klien nya.



3. Komunikasi.

Selain harus bisa jadi pendengar, Seorang designer yang baik harus memiliki komunikasi yang baik juga, dia harus bisa menjelaskan terminologi tentang website dalam bahasa yang anda lakukan dengan dia. Dia Juga gampang dihubungi dan enak diajak berbicara.



4. Pengetahuan Tentang Teknologi.

Jika anda ingin menguji kemampuan atau pengetahuan web designer anda, maka tes lah pengetahuan nya tentang teknologi web. Dia harus familiar dengan tools yang digunakan dalam pembuatan sebuah website.




5. Penggunaan Terminologi.

Seorang web designer tidak hanya mengenal teknologi, tapi dia juga harus mengerti bagaimana menggunakan teknologi tersebut.

Misalnya saat ini sedang marak istilah “Responsive Web Design“, designer mungkin tau secara teori namun apakah dia sudah bisa menggunakannya? apakah dia sudah pernah membuat. Silahkan anda lihat bagaimana dia menggunakan teknologi tersebut, bisa dengan melihat portfolio atau dari gagasan yang dia berikan.


6. Menjaga Bisnis dan Tujuan Bersama.

Anda tentu ingin website anda terlihat bagus, web designer yang baik juga harus punya komitmen untuk membuat sebuah desain yang memiliki kualitas bagus juga, web designer harus paham kalau apa yang dia buat akan menjadi/menambah portfolionya. Dengan memahami itu biasanya web designer akan selalu memberikan yang terbaik disetiap pekerjaan nya.

Untuk itu anda bisa dengan melihat portfolio nya, apakah dia konsisten membuat yang bagus atau hanya sesekali.


7. Menghemat Waktu dan Biaya Anda.

Kadang web designer hanya berfikir bagaimana agar dia mendapat penghasilan yang banyak dari anda. Jadi berhati-hatilah dengan web designer yang meminta waktu pengerjaan yang terlalu lama atau terlalu cepat, apa lagi jika dia dibayar perjam atau per hari. Sebaiknya tentukan berapa lama target dan biaya yang akan dikeluarkan sebelum memulai pekerjaan, designer yang baik tidak akan menghabiskan waktu anda dan tidak akan terburu-buru juga, buru-buru bisa membuat hasil jadi tidak maksimal.

Namun perlu diingat, jangan menekan harga web designer, karena bisa membuat dia bekerja dengan hati kurang senang, sehingga hasil jadi tidak maksimal, berikan harga terbaik sehingga dia happy dan dapat menghasilkan karya yang baik.


8. Pandai Menggabungkan Desain Lama Dengan Yang Baru.

Web designer yang baik bisa menggabungkan apa yang ada sebelumnya dengan gagasan-gagasan yang baru, dalam hal pembuatan desain website yang baru misal nya, dia akan memberikan sentuhan baru dengan tidak meninggalkan karakter website lama anda.

Namun jika anda ingin yang sesuatu yang benar-benar 100% berubah sebaiknya bicarakan dengan tegas juga, karena sebagian designer bekerja dengan melihat bagaimana anda/perusahaan anda sebelumnya.

Jadi minta dia memberikan masukan apa yang akan dia perbuat terhadap website anda, sebelum dia benar-benar anda pekerjakan, web designer yang baik harus bisa menjabarkan apa yang akan dia lakukan.


9. Memiliki Portfolio Yang Baik.


Image By kodamapixel
 
Yang paling utama tentu kita harus melihat apa yang pernah dia kerjakan, inilah hal cukup penting ketika kita ingin bekerjasama dengan orang lain. Lihat hasil karyanya, jika menurut anda menarik, janga hanya melihat satu, tapi lihat beberapa, apakah dia konsisten membuat yang baik atau tidak.
 
10. Rekomendasi / Nama Besar.
 
Image by Skampy
 
Jika dia banyak direkomendasikan oleh orang lain sudah barang tentu dia adalah seorang yang berkualitas dan punya citra baik dimata orang lain. Jadi cobalah untuk melihat sepak terjangnya di dunia maya, dengan aktifitasnya di sosial media atau di group/forum, kalau dia sering memberikan solusi untuk pertanyaan-pertanyaan di group bisa dibilang dia memiliki kemampun yang bisa diandalkan.Sekian.
 
 
 

6 Tips Untuk Membuat Website Responsive

By Irvan Galuh,

Ingin desain website responsive Anda bisa dibanggakan? Ini jelas bukan pekerjaan yang mudah. Meskipun proyek Anda terlihat cukup baik dari sudut pandang desain, masih banyak hal yang bisa menghancurkannya seiring dengan waktu.Berikut ini kami memiliki beberapa tips untuk membuat web responsive anda menjadi lebih maksimal dan agar menghamat waktu anda dalam proses pembuatan sehingga anda mencapai tujuan anda dengan website responsif yang kerennya maksimal 😀

Fokus Pada Konten

Mobile-first, desktop-first atau pendekatan apapun yang anda gunakan atau sejenisnya, hal yang paling penting untuk diingat adalah konten. Konten harus selalu mendorong struktur dan organisasi website. Jadi, hal pertama yang harus dilakukan adalah untuk menjadi lebih familiar dengan konten website. Hal ini harus dilakukan sebelum anda menulis kode program, sebelum membuat setiap wireframe atau mockup(maket). Semakin cepat anda melakukan langkah ini, semakin baik.

Baca juga:
Manfaatkan Wireframe Sebagai Tahap Awal Pembuatan Desain Web
Panduan Membuat Wireframe Untuk Web Designer — Ebook

 

Bandwidth

Satu hal yang perlu dipertimbangkan ketiwa membuat website responsive adalah bandwidth. Semua ini berarti bahwa anda harus mempertimbangkan secara menyeluruh apa yang harus anda sediakan untuk mengoptimalkan segala sesuatu yang anda bisa. Tentunya ini berkaitan dengan optimasi, penggunaan ukuran file gambar yang lebih kecil, mengoptimalkan file CSS dan Javascript dengan membuat nya menjadi terkompres atau istilahnya di minify.

 

Phone, Tablet, Desktop, dan….

Kita tidak bisa pungkiri, ketika membuat website responsive kita tidak hanya fokus pada 3 jenis atau kategori perangkat (PC, Tablet, Phone), Anda harus ingat kalau perangkat bukan hanya itu saja, di zaman sekarang ini orang membuka website anda dari berbagai perangkat, seperti smartwatches, ebook reader, ponsel, smartphone, tablet, netbook, notebook, ultrabook, desktop, widescreen, dan banyak lagi. Jadi berikan sedikit waktu anda untuk membuat website anda agar bisa mengakomodir perangkat-perangkat tersebut.

 

Typography

Pada dasarnya website itu adalah 95% tipografi. Sebagian besar konten yang kita konsumsi setiap hari adalah tergantung dari tipografi, baik itu postingan di blog atau infographic. Jadi gunakanlah font yang baik untuk website anda. Pertimbangkan besar file font yang akan di load, pertimbangkan ukuran font ketika website dibuka di layar yang kecil, pertimbangkan warna font agar terlihat jelas di layar pengunjung, gunakan jenis font yang mudah dibaca dan tidak membingungkan.

Javascript & Performa

Katika kita berbicara performance, maka Javascript dapat menjadi influencer utama. Javascript menjadi sangat populer dalam beberapa tahun belakangan ini, plugin nya begitu banyak dan bagus-bagus, animasi yang dibuat begitu menakjubkan. Akhirnya web designer dengan sesuka hati menggunakan banyak sekali plugin agar website nya tampil luar biasa, tanpa memikirkan performa website nantinya, bankan tidak tanggung-tanggung puluhan plugin jquery di load secara bersamaan karena website tersebut sangat banyak menggunakan efek dan lainnya. Ini tentu sangat memberatkan website nantinya. Biasanya ini bisa kita lihat di template yang multipurpose, dimana template bisa digunakan untuk semua jenis website, dan untuk membuat itu biasanya sang developer menyertakan semua plugin yang digunakan jenis-jenis website tersebut.

 
Retina Display

Poin terakhir yang perlu kita perhatikan yaitu bagaimana penampilan website anda pada perangkat yang sudah menggunakan retina display. Layar ini memiliki pixel density yang lebih tinggi yang berarti kemampuan untuk menampilkan lebih banyak pixel dan jauh lebih baik, tampilan yang lebih halus. Singkatnya, Anda dapat melihat lebih detail dalam resolusi tinggi atau lebih kecil dalam gambar yang beresolusi rendah.
Intinya adalah pikirkan untuk menyertakan gambar untuk resolusi yang lebih tinggi yang akan ditampilkan hanya ketika user menggunakan perangkat yang disertai fitur retina display.

 
Ringkasan

Desain responsif bukan hanya tentang pembuatan website yang tampak keren di smartphone, tablet dan desktop. Untuk membuat pengalaman yang benar-benar responsif ada banyak lagi yang perlu diingat dan diperhatikan. Semoga tips ini akan membantu anda mencapai tujuan anda.







SUMBER = http://www.tutorial-webdesign.com/6-tips-untuk-membuat-website-responsive/

Cara Mudah Mengetahui Jenis Font Pada Sebuah Website

By Irvan Galuh,

Sering kali kita penasaran dengan font yang digunakan oleh sebuah website, ketika kita membuka website dan melihat sebuah tipografi yang menarik biasanya kita ingin mengetahui nama font yang digunakan website tersebut.Untuk mengetahui font yang digunakan pada suatu website kita biasanya melihat source code (view source) halaman website tersebut, lalu melakukan pengecekan pada meta tag, atau dengan membongkar isi file css di website tersebut dan mencari pada properti font-family. Cara lainnya biasanya dengan menggunakan firebug.

Namun semua cara tersebut kurang efektif dan cenderung memakan waktu, ada cara yang lebih mudah dan lebih cepat untuk mengetahui font yang digunakan pada website yang sedang kita buka, yaitu dengan menggunakan Fontface Ninja. Dengan fontface ninja kita cukup mengerahkan cursor pada tulisan yang ingin kita ketahui, maka seketika akan muncul nama font dan ukuran fontnya.




Menginstall Fontface Ninja

Fontface ninja adalah sebuah extension chrome dan safari (belum tersedia untuk firefox), untuk menginstall nya kita harus menggunakan browser google chrome, lalu buka link berikut Fontface Ninja Extension.



Klik tombol Free berwarna biru






Akan muncul popup, lalu klik tombol Add


Muncul notifikasi bahwa Extension telah selesai terinstall




Untuk menguji nya kita tinggal membuka sebuah website (pada contoh ini membuka tutorial-webdesign.com), lalu klik icon ninja yang ada di kanan atas, lalu arahkan cursor pada tulisan yang ada di halaman website.




Dari situ kita bisa lihat bahwa yang font yang digunakan pada judul website Tutorial Web Design adalah KoolBean Regular
Kita bisa mendownload font yang digunakan tersebut dengan cara melakukan klik pada tulisan yang kita sorot, lalu menuliskan contoh tulisan, mengatur ukuran font, dan menekan tombol download.




Membedakan Fontface dan Font pada gambar.

Pada halaman website terdiri dari teks dan image, kadang didalam sebuah image terdapat tulisan(teks), kita tidak bisa mengetahui jenis font pada teks yang ada pada sebuah image dengan fontface ninja, untuk menghilangkan gambar yang ada di sebuah website dan agar kita fokus pada teks saja maka kita bisa menekan tombol MASK yang ada di kanan atas saat extension Fontface Ninja sedang aktif.




Sekian trik singkat untuk mengetahui font yang digunakan oleh suatu website, semoga bisa membantu anda.

*Tulisan ini tidak ditunjukan untuk mengajarkan cara mencuri font orang lain, namun hanya sebagai pembelajaran untuk anda yang penasaran ingin mengetahui nama font, jika font tersebut berbayar maka sebaiknya anda membelinya.





SUMBER = http://www.tutorial-webdesign.com/cara-mudah-mengetahui-jenis-font-pada-sebuah-website/

Membuat slide control dengan Jquery

By Irvan Galuh,

Pada tutorial kali ini kita akan mencoba membuat Slide Control dengan Jquery, Apa sih slide control itu? Pada dasarnya kita akan mengontrol isi dari sebuah input text hanya dengan menyeret pengontrol nya saja.

Jquery Slide Control
 
Ini bagus jika anda ingin menggunakannya untuk mempercantik form ketika terdapat field untuk mengisi berat badan misal nya, atau tinggi badan, atau jika di sebuah website e-commerce ini bisa digunakan untuk mempercantik field jumlah barang yang ingin dibeli, atau jika ada sedang membuat website musik, nah ini bisa digunakan untuk mengatur volume dll. Ya kira-kira penggunaanya seperti itu lah.

Oke kita mulai

Pertama siapkan sebuah folder js, berisi file berikut:

  • jquery.js
  • jquery.slideControl.min.js
Plugin Jquery Slide Control bisa didapat disini.
Selanjutnya siapkan folder css berisi file berikut:
  • slideControl.css
  • style.css
Oke sekarang buat sebuah file bernama index.html, diletakan diluar folder js, dan css


Isinya kira-kira sebagai berikut


<section>

<ul>
<li><label>Responsiveness: </label><input type=”text” value=”6.0″ class=”slideControl” /></li>
<li><label>Safety: </label><input type=”text” value=”4.0″ class=”slideControl” /></li>
<li><label>Information: </label><input type=”text” value=”9.0″ class=”slideControl” /></li>
</ul>
</section>


Sedangkan isi file css/style.css adalah sebagai berikut:


section{width:700px;margin:20px auto;}
section li {margin:10px 0;}
section ul {list-style-type:none;}
section ul.options {margin-left:20px; margin-bottom:20px; list-style-type:disc;}
section ul.options li {margin:5px 0; font-size:0.85em;}
section input.slideControl {width:40px; font-size:1.5em; padding:3px 5px; border:1px solid #ccc; border-radius:5px; text-align:center; color:#333; font-weight:bold;}
section label {font-size:1em; font-weight:bold; float:left; width:145px; margin-top:10px;}




Sekian tutorial kali ini, semoga ini bisa membantu mempercantik website yang sedang anda buat.

Salam Web Design Indonesia…



SUMBER = http://www.tutorial-webdesign.com/membuat-slide-control-dengan-jquery/

Tips Membuat Horizontal Menu Dengan CSS

By Irvan Galuh,

Navigasi merupakan hal yang ponting untuk ada di website, ini untuk memudahkan user dalam menjelajahi isi website, Navigasi bisa disebut menu, menu ada yang berbentuk Vertical, dan ada juga yang berbentuk Horizontal.Menu Vertical adalah menu yang berderet kebawah, sedangkan Horizontal Memanjang Kesamping.

Pada tips singkat berikut ini kita akan mencoba teknik dasar bagaimana teknik dasar membuat Horizontal menu dengan CSS.




Disini kita juga akan belajar Pseudo-element :before dan :first-child milik CSS.

Oke kita mulai dengan Membuat Struktur HTML seperti berikut ini



HTML



<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>Basic Horizontal Menu CSS : DEMO</title>
<style type=”text/css”>
<!– /CSS Code Here –>
</style>
</head>
<body>

<div class=”demo-container”>
<h1>Tutorial-Webdesign.com</h1>
<ul class=”horizon-menu”>
<li><a href=”#” class=””>Home</a></li>
<li><a href=”#” class=”lang”>About</a></li>
<li><a href=”#” class=”lang”>Work</a></li>
<li><a href=”#” class=”lang”>Portfolio</a></li>
<li><a href=”#” class=”lang”>Contact</a></li>
</ul>

</div>

</body>
</html>



Setelah membuat struktur HTML nya, sekarang kita mempercantik dengan CSS

CSS




h1{margin:5px}
.demo-container{margin:50px;}
.horizon-menu{list-style-type:none;padding:0;margin:0;background:#fff000;padding:10px;border-radius:5px;box-shadow:inset 0 0 5px 2px #f4f4f4}
.horizon-menu a{text-decoration:none; color:#111;font-weight:bold}
.horizon-menu li{display:inline;margin:5px 0}
.horizon-menu li:before{content:’ | ‘;color:rgba(0,0,0,.1)}
.horizon-menu li:first-child:before{content:’ ‘}
.horizon-menu li a{margin-right:5px; margin-left:5px;padding:5px;border-radius:5px;
-webkit-transition:background-color 500ms ease-in-out;
-moz-transition:background-color 500ms ease-in-out;
}
.horizon-menu li a:hover{background-color:orange}



Penjelasan:


Inti utama dalam membuat menu horizontal yaitu pada baris code 4, dimana tertulis display:inline


.horizon-menu li{display:inline;margin:5px 0}


Sedangkan untuk membuat pemisah kita menggunakan li:before{content:’ | ‘}, dimana akan menulis karakter [ | ]

Agar pemisah tidak muncul diawal maka kita membutuhkan li:first-child:before{content:’ ‘}

Tambahan:

Untuk membuat menu tersebut Responsive terhadap lebar layar, dimana akan berfungsi dengan baik jika dibuka di layar yang lebih kecil seperti Smartphone atau PC Tablet, maka kita tambahkan code berikut:


@media (max-width:767px){
.demo-container{margin:5px;}
.horizon-menu li{display:block}
.horizon-menu li:before{content:”;color:rgba(0,0,0,.1)}
}



Oke sekian tips kali ini, semoga berguna






SUMBER = http://www.tutorial-webdesign.com/tips-membuat-horizontal-menu-dengan-css3/