Posts

Tutorial Membuat Dropdown Box Menggunakan CSS3 Animation Dengan Sedikit Trik Checkbox

asda

Dalam tutorial ini kita akan membuat dropdown box dengan menggunakan CSS3 Animation dengan sedikit trik checkbox sebagai triggernya, biasanya ini dibuat dengan bantuan JQuery namun berkat CSS3 kita dapat membuat ini dengan properti transtion.

Silahkan lihat demonya disini.

HTML5 Untuk Dropdown Box

Mari kita lihat markup HTML5 untuk tutorial ini dengan lebih detail

<!-- Dropdown box slider -->
<section class="slider">

  <!-- Checkbox, kita akan menggunakan sedikit trik pada checkbox ini -->
  <input type="checkbox" id="toggle">
  <!-- Kita akan buat label ini sebagai pemicu dropdown slider. -->
  <label for="toggle">
    <!-- icon yang digunakan adalah entypo. kalian dapat mengubahnya -->
    <i class="toggle-icon"></i>
  </label>

  <!-- Konten dari dropdown box slider -->
  <section class="main-content">
    <h1>CSS3 Drop down box</h1>
  </section>

</section>

Komentar di atas di buat agar lebih mudah dipahami. Satu hal penting yang perlu ditambahkan disini adalah bahwa penting untuk memunculkan konten setelah checkbox. Kita perlu ini untuk memanfaatkan ~ selector. Selector ini digunakan untuk memilih sebuah elemen yang datang setelah elemen lain . Dalam hal ini kita perlu memilih konten yang datang setelah checkbox.

Jadi, mari kita lakukan styling.

Trik Checkbox Sebagai Pemicu Dropdown Box

Jadi, mari kita lihat bagaimana kita mengubah checkbox dan label menjadi tombol aktivasi yang terlihat bagus. Pertama-tama, kita menggunakan ikon dari webfont entypo sebagai contoh. Kita gunakan down arrow untuk posisi unchecked, dan up arrow untuk posisi checked.

input#toggle + label i.toggle-icon:before {
  font-family: 'entypo', sans-serif;
  content: "\e764";
}

input#toggle:checked + label i.toggle-icon:before {
  content: "\e767";
}

 Sekarang tentu saja kita perlu menyembunyikan checkbox dan menambahkan beberapa styling ekstra untuk label. Hal ini penting untuk menginisialisasi atas menjadi 0 pada label agar animasi bekerja. Atau anda bisa menggunakan properti transform untuk animasinya.

.slider input#toggle {
  display: none;
}

.slider input#toggle + label {
  font-size: 25px;
  width: 25px;
  height: 25px;
  display: inline-block;
  padding: 10px;
  color: white;
  background: #8f2c2c;
  position: relative;
  top: 0;
  transition: top 0.5s ease-in-out;
}

 Di properti transition ini kita definisikan properti agar animasi berfungsi, kecepatan, dan fungsi dari transisinya. Dan disini ada beberapa styling umum untuk slider dan konten.

.slider {
  width: 600px;
  text-align: center;
  margin: 0 auto;
}

.slider .main-content {
  background: #eee;
  height: 150px;
  position: relative;
  top: -195px;
  transition: top 0.5s ease-in-out;
}

.slider .main-content h1 {
  line-height: 150px;
  color: #30303f;
  width: 100%;
  text-stroke: 1px;
  font-size: 30px;
  text-shadow: 0 1px 1px #000;
  font-family: "Roboto"
}

 Membuat Animasi Dropdown Box Dengan CSS3

Sekarang mari kita lihat betapa mudahnya untuk membuat animasi dropdown box berfungsi seperti ditarik:

input#toggle:checked + label {
  top: 150px;
}

input#toggle:checked ~ .main-content {
  top: -45px;
}

 Apa yang kita lakukan disini adalah mengatur posisi label checkbox dan konten dari dropdown box. Perubahan properti ini akan memiliki animasi seperti yang ditentukan oleh properti transition yang kita definisikan sebelumnya. Perlu di perhatikan bagaimana kita menggunakan ~ selector untuk menargetkan class .main-content yang muncul setelah checkbox.

Sekian tutorial kali ini, kalian bisa lihat demonya disini.

Terimakasih.

Efek Animasi Kata Pada Text Dengan CSS Animations

ta

Dalam tutorial hari ini kita akan membuat efek tipografi. Idenya adalah untuk membuat animasi pada beberapa kata. Kata-kata itu akan bertukar dengan Kata lainnya menggunakan Animation pada CSS.

Harap dicatat: Hasil tutorial ini hanya akan bekerja pada browser yang mendukung CSS Animations.

Hasil akhirnya bisa kalian lihat disini.

Markup HTML

Disini kita akan memiliki wrapper utama dengan h2 heading yang berisi span tingkat pertama dan 2 divisi untuk kata yang akan diberi animasi:

<section class="rw-wrapper">
  <h2 class="rw-sentence">
    <span>Real poetry is like</span>
    <span>creating</span>
    <div class="rw-words rw-words-1">
      <span>breathtaking moments</span>
      <span>lovely sounds</span>
      <span>incredible magic</span>
      <span>unseen experiences</span>
      <span>happy feelings</span>
      <span>beautiful butterflies</span>
    </div>
    <br />
    <span>with a silent touch of</span>
    <div class="rw-words rw-words-2">
      <span>sugar</span>
      <span>spice</span>
      <span>colors</span>
      <span>happiness</span>
      <span>wonder</span>
      <span>happiness</span>
    </div>
  </h2>
</section>

Sekarang, abaikan placeholder, kita buat setiap span dari rw-word untuk tampil pada waktu yang ditentukan. Untuk itu kita akan menggunakan CSS Animations. Kita akan membuat satu animasi untuk setiap divisi dan setiap span akan menjalankannya, hanya dengan penundaan yang berbeda. Jadi, mari kita lihat CSS berikut ini.

CSS3

Pertama, kita beri style untuk wrapper utama dan posisikan ditengah halaman:

.rw-wrapper{
  width: 80%;
  position: relative;
  margin: 110px auto 0 auto;
  font-family: 'Bree Serif';
  padding: 10px;
}

Kita akan tambahkan beberapa text shadow ke semua elemen di dalam heading:

.rw-sentence{
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

Dan lakukan styling pada teks pada span:

.rw-sentence span{
  color: #444;
  white-space: nowrap;
  font-size: 200%;
  font-weight: normal;
}

Divisi akan ditampilkan sebagai elemen inline, yang akan memungkinkan kita untuk memasukkan mereka ke dalam kalimat tanpa merusak kalimatnya:

.rw-words{
  display: inline;
  text-indent: 10px;
}

Setiap span dalam div rw-word akan diposisikan absolute dan kita sembunyikan setiap overflow:

.rw-words span{
  position: absolute;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  color: #6b969d;
}

Sekarang, kita akan menjalankan 2 animasi. Seperti yang disebutkan sebelumnya, kita akan menjalankan animasi yang sama untuk semua span dalam 1 div, hanya dengan penundaan/delay yang berbeda:

.rw-words-1 span{
  animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
  animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
  animation-delay: 3s; 
  color: #6b889d;
}
.rw-words span:nth-child(3) { 
  animation-delay: 6s; 
  color: #6b739d;	
}
.rw-words span:nth-child(4) { 
  animation-delay: 9s; 
  color: #7a6b9d;
}
.rw-words span:nth-child(5) { 
  animation-delay: 12s; 
  color: #8d6b9d;
}
.rw-words span:nth-child(6) {  
  animation-delay: 15s; 
  color: #9b6b9d;
}

Animasi yang kita buat akan menjalankan satu siklus, yang berarti bahwa setiap span akan ditampilkan sekali selama 3 detik delay/penundaan. Semua animasi akan berjalan 6 (jumlah kata) * 3 (waktu tampil) = 18 detik. Kita perlu mengatur pesentase yang tepat untuk nilai opacity(atau apapun yang membuat span muncul). Dengan membagi 6 dengan 18 kita dapatkan hasil 0,333… yang akan  menjadi 33% untuk langkah keyframenya. Setelah tweaking dan melihat apa yang paling cocok, kita buat dengan animasi berikut untuk kata-kata pertama:

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
  25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

Kita akan buat itu memudar/fade di dalam span dan juga buat animasi untuk tingginya.

Animasi untuk kata yang ada didalam div kedua akan memudar dan menganimasikan widthnya. Kita tambahkan sedikit untuk persentase keyframe, karena kita ingin kata ini muncul sedikit lebih lambat dari kata pertama:

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
  20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

Dengan demikian animasinya akan berjalan dengan lancar, kalian juga bisa mencoba CSS Animation yang lain. Hasilnya bisa kalian lihat disini.

Sekian tutorial hari ini. Terima kasih..

Tutorial Membuat Accordion Menggunakan CSS3

accordion

Ada banyak variasi dari akordion yang dibuat hanya dengan CSS saja, sebagian besar dibuat menggunakan pseudo-class :target. Masalah dengan menggunakan :target adalah kita tidak benar-benar bisa menutup bagian kontennya lagi atau memiliki beberapa bagian yang terbuka bersamaan. Dengan menggunakan checkbox yang disembunyikan(hidden), kita dapat mengontrol terbuka atau tertutupnya bagian konten. Atau, kita juga bisa menggunakan radiobox jika hanya 1 bagian konten yang ingin kita buka. Kali ini, kita akan mencoba menggunakan checkbox. mari kita mulai..

Harap dicatat: hasil dari tutorial ini hanya akan bekerja pada browser yang support CSS3 ya. Jadi bagi kalian yang mencobanya pada IE9 atau dibawahnya, mungkin akan ada beberapa yang tidak berfungsi.

Untuk hasilnya kalian bisa lihat disini.

Markup HTML

Kita akan menggunakan contoh checkbox dimana bagian kontennya terbuka secara default/otomatis (‘checked’ pada checkbox) semuanya akan kita bungkus(wrap) dengan class ac-container. Untuk setiap item akan memiliki checkbox, label, dan artikel yang merupakan bagian konten dari item tersebut:

<section class="ac-container">
  <div>
    <input id="ac-1" name="accordion-1" type="checkbox" checked />
    <label for="ac-1">Tentang Kami</label>
    <article class="ac-small">
      <p>Konten.... </p>
    </article>
  </div>
  <div>
    <input id="ac-2" name="accordion-1" type="checkbox" />
    <label for="ac-2">Bagaimana Kami Bekerja</label>
    <article class="ac-small">
      <p>Konten.... </p>
    </article>
  </div>
  <div>
    <input id="ac-3" name="accordion-1" type="checkbox" />
    <label for="ac-3">Referensi</label>
    <article class="ac-small">
      <p>Konten.... </p>
    </article>
  </div>
  <div>
    <input id="ac-4" name="accordion-1" type="checkbox" />
    <label for="ac-4">Kontak Kami</label>
    <article class="ac-small">
      <p>Konten.... </p>
    </article>
  </div>
</section>

Perhatikan bahwa kita perlu memberikan ID pada setiap input yang akan kita gunakan untuk atribut label. Kita perlu ini untuk memeriksa checkbox ketika mengklik label.

Setiap artikel akan memiliki class yang akan membantu kita menentukan tinggi yang akan kita tambah. (Secara optional, kita bisa menggunakan ‘auto’ sebagai nilai tinggi yang ditambah, tapi sayangnya itu tidak akan memiliki animasi seperti itu).

Mari kita liat Stylenya.

CSS

Mari kita definisikan lebar untuk accordion:

.ac-container{
  width: 400px;
  margin: 10px auto 30px auto;
}

Selanjutnya, kita akan membuat label sebagai tombol yang dapat kita klik. Kita juga akan mengatur z-index ke 20, untuk memastikan itu berada di atas bagian konten:

.ac-container label{
  font-family: 'Segoe UI';
  padding: 5px 20px;
  position: relative;
  z-index: 20;
  display: block;
  height: 30px;
  cursor: pointer;
  color: white;
  line-height: 33px;
  font-size: 19px;
  background: #3498db;
  border: 1px solid #bdc3c7;
}

Pada saat dihover, kita akan buat label menjadi berwarna biru sedikit gelap:

.ac-container label:hover{
  background: #2980b9;
}

Ketika kita klik pada label, checkbox menjadi checked dan ketika itu terjadi kita buat style label yang terpilih tadi dengan style ‘selected’ seperti ini:

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
  background: #2980b9;
  color: white;
}

Seperti yang kalian lihat, kita menggunakan combinator yang berdekatan untuk memilih label karena langsung didahului oleh input checkbox.

Mari kita tambakan  ikon arrow kecil pada saat dihover. Untuk itu kita hanya akan menggunakan pseudo-class ‘after’ sehingga tidak usah menambahkan markup yang tidak dibutuhkan:

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  right: 13px;
  top: 7px;
  background: transparent url(arrow_down.png) no-repeat center center;	
}

untuk ‘selected’ item, kita tambahkan icon arrow yang menunjuk ke atas:

.ac-container input:checked + label:hover:after{
  background-image: url(arrow_up.png);
}

Dan karena kita tidak ingin input ditampilkan, kita akan menyembunyikannya:

.ac-container input{
  display: none;
}

 Area konten akan memiliki tinggi awal 0px dan setiap overflow akan kita hidden. Kita juga akan menambahkan transisi untuk tinggi kotaknya. Transisi yang kita tambahkan disini akan bertindak ‘closing'(menutup) item. Kita mendefinisikan transisi yang lain untuk item yang dipilih. Jadi pada dasarnya kita dapat mengontrol dua action dengan melakukan ini. Seperti yang kalian lihat, kami akan membuat transisi menutup sedikit lebih cepat dari pada saat membuka.

.ac-container article{
  background: white;
  margin-top: -1px;
  overflow: hidden;
  height: 0px;
  position: relative;
  z-index: 10;
  transition: 
    height 0.3s ease-in-out, 
    box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
  transition: 
    height 0.5s ease-in-out, 
    box-shadow 0.1s linear;
  border: 1px solid rgba(155,155,155,0.3);
}

Mari kita beri sedikit style pada konten:

.ac-container article p{
  font-style: italic;
  color: #777;
  line-height: 23px;
  font-size: 14px;
  padding: 20px;
}

Sekarang kita beri tinggi area konten, animasi dari transisi akan seukuran tinggi ini:

.ac-container input:checked ~ article.ac-small{
  height: 140px;
}

Seperti yang telah disebutkan, tinggi ‘auto’ tentunya menjadi pilihan terbaik disini, tapi karena kita tidak dapat mambuat animasi pada itu, kita perlu mengatur beberapa tinggi untuk transisinya.

Dengan begitu selesailah proses pembuatan accordionnya, Silahkan lihat hasilnya disini.

Dan demikianlah Tutorial membuat accordion menggunakan CSS3. Saya harap kalian menikmatinya. Terima Kasih…

Tutorial Membuat Efek Hover Pada Gambar Menggunakan CSS3

hvr

Dalam dunia web yang modern, ada banyak teknik yang dapat digunakan untuk membuat interface dan interaksi website yang menarik, tapi yang paling sederhana dan paling elegan biasanya CSS, dan khususnya CSS3 dengan berbagai fitur baru.

Dulu, kita harus bergantung pada javascript untuk membuat efek seperti ini, namun dengan semakin meningkatnya support untuk CSS3 di browser, sekarang kita bisa membuat efek seperti ini tanpa scripting sama sekali. Sayangnya IE9(Internet Explorer 9) dan versi dibawahnya masih tidak support CSS3.

Kali ini kita akan membuat efek hover pada gambar yang menyembunyikan caption sebelum gambar itu di hover.

Kalian bisa melihat demonya disini.

Markup HTML

Kita akan menggunakan unordered list lalu kita wrap caption dan gambar didalamnya, perhatikan bahwa kita juga akan menambah class demo dan efek dalam tag unordered list. kita akan membuat efek kartu yang membalik. Ini berarti ketika Anda hover mouse Anda pada gambar itu, maka gambar akan berputar membalik untuk menampilkan caption, Kita juga akan menggunakan HTML5 figure element dengan tag figure caption didalamnya, markupnya akan terlihat seperti ini:

<ul class="demo">
   <li>
      <figure>
         <img src="image1.jpg" alt=""/>
         <figcaption>
            <h2>Ini Judul</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
         </figcaption>
      </figure>          
   </li>
</ul>

CSS

Pada CSSnya, Kita akan menetapkan figure gambar ke posisi relatif dan kemudian menyembunyikan backface-visibility. Kita juga akan menggunakan rotateY transform: -180 derajat(degrees) untuk figcaption dan mengubahnya ke 180 derajat untuk hover dari gambar dan caption:

body {
    background:#3498db;
    overflow: hidden;
}


ul {
    margin:12px auto;
    width:30%;
}

ul li {
    display: inline-block;
    list-style: none;
    margin:0 10px;

}
.demo {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}

.demo figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}

.demo figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}

.demo figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

.demo figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}

.demo figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}

.demo figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}

.demo figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}

.demo figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}

.demo figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

Dengan demikian kitaberhasil membuat efek hover kartu membalik pada gambar. untuk previewnya bisa dilihat disini.

Sekian tutorial membuat efek hover pada gambar menggunakan CSS3. Terima kasih..

Tips cepat: Tutorial Membuat Efek Hover Dengan Gambar Lingkaran(Circle) Menggunakan CSS3

crcl

Dalam tutorial ini kita akan coba membuat efek hover CSS3 menggunakan animation dan transform gambar lingkaran(circle) untuk meningkatkan interface desain web kalian. Ini terlihat jauh lebih menarik dengan menggunakan transition style pada gambar. efek transisi/animasi ini full menggunakan CSS3 tanpa Javascript/JQuery, jadi kali ini kita akan membuat efek hover spesial pada CSS3.

Perlu dicatat ini hanya akan bekerja/berfungsi dengan baik pada browser yang support CSS3.

Kalian bisa melihat preview/demonya disini

Mari kita mulai dengan markup HTML

Struktur markupnya kurang lebih terlihat seperti ini :

<div id="skin">
   <p class="icon"></p>
   <a href="http://trustme.co.id/" class="fdw_left">Kiri</a>
   <a href="http://trustme.co.id/" class="fdw_right">Kanan</a>
</div>

 CSS

Dan CSS nya memiliki struktur seperti ini :

#skin {
  position:relative;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border:10px solid rgba(255,255,255,.10);
  width:284px;
  height:284px;
  overflow:hidden;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s  ease;
  -o-transition: all .3s  ease;
  -ms-transition: all .3s  ease;
  transition: all .3s ease;
}
.fdw_left,
.fdw_right {
  float:left;
  width:50%;
  height:100%;
  margin:0;
  text-align:center;
  line-height:280px;
  text-decoration:none;
}
.fdw_right {
  border-radius:0 142px 142px 0;
  -moz-border-radius:0 142px 142px 0;
  -webkit-border-radius:0 142px 142px 0;
}
.fdw_left {
  background-color:#fff;
  border-radius:142px 0 0 142px;
  -moz-border-radius:142px 0 0 142px;
  -webkit-border-radius:142px 0 0 142px;
  color:#1e2a2a;
  text-indent:-30px;
}
.fdw_right {
  background-color:#1e2a2a;
  color:#FFFFFF;
  text-indent:35px;
}
#skin .icon {
  width:71px;
  height:77px;
  position:absolute;
  top:50%;
  left:50%;
  margin:-39px auto 0 -35px;
  background: url(a.png) top center no-repeat;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s  ease-in-out;
  -o-transition: all .3s  ease-in-out;
  -ms-transition: all .3s  ease-in-out;
  transition: all .3s ease-in-out;
}
#skin a {
  font-weight:700;
  font-family: 'Open Sans Condensed','Arial Narrow', Arial, sans-serif;
  text-decoration:none;
  text-transform:uppercase;
  font-size:20px;
  -webkit-transition: background-color .3s;
  -moz-transition: background-color .3s;
  -o-transition: background-color .3s;
  -ms-transition: background-color .3s;
  transition: background-color .3s;
}
#skin a:hover {
  background-color:#00b68f;
  color:#FFF;
}
#skin:hover {
  border:10px solid rgba(255,255,255,.5);
}
#skin:hover .icon {
  transform: rotate(360deg);
  -ms-transform: rotate(360deg); /* IE 9 */
  -webkit-transform: rotate(360deg); /* Safari and Chrome */
  background: url(b.png) top center no-repeat;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s  ease-in-out;
  -o-transition: all .3s  ease-in-out;
  -ms-transition: all .3s  ease-in-out;
  transition: all .3s ease-in-out;
}

 Nah, sekarang kita sudah berhasil membuat efek hover CSS3 dengan gambar lingkaran(circle).

Lihat demonya disini

Sekian tutorial Membuat Efek Hover Dengan Gambar Lingkaran(Circle) Menggunakan CSS3. Semoga bisa membantu. Terima kasih..

Tutorial Membuat Diamond Grid Menggunakan CSS3

Untuk demo/preview hasillnya bisa dilihat disini

CSS sudah lama menemani para web designer untuk styling pada website, CSS3 memungkinkan kita membuat shape tanpa gambar dengan propertinya yang baru. Ini memungkingkan para web designer bereksperimen bahkan membuat shape biasa menjadi lebih bagus dan menarik. Read more

Membuat Efek Sliding Background Menggunakan CSS

Cara membuat efek sliding background ini bukanlah hal baru. Saya sudah melihat beberapa situs web menggunakan efek ini, biasanya background yang digunakan adalah macam-macam foto dokumentasi dan sebagainya. Disini saya akan membahas bagaimana cara membuat efek sliding background. Read more

10 Trik Sederhana Desain CSS

Semua orang suka jalan pintas. Apakah Anda seorang pengembang CSS baru atau profesional berpengalaman, tidak ada salahnya untuk belajar beberapa cara baru yang lebih mudah untuk dilakukan. Ini adalah trademark dari zaman kita: kita ingin hasil terbaik dalam waktu singkat. Read more