CSS Membuat Round Sudut pada Image

CSS Membuat Round Sudut pada Image - Malam ini seperti biasanya saya akan membagi satu tutorial yang bagus. Tutorial CSS ini tentang Round image. Round pada image ini biasanya sering kita temui pada home blog atau memang variasi dari blog-blog yang menggunakan CSS 3 dan HTML 5.

Berikut ini script nya :

.post-body img {
border-radius: 50%;
box-shadow: 0px 0px 15px #000; /
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0;
border-radius: 0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Demonya :

Kemudian kode pemanggilnya :

<img class="round" src="URL image" />

Oke silakan dicoba dulu untuk tutorial CSS Membuat Round Sudut pada Image.

Cara Membuat Description Blog Random

Cara Membuat Description Blog Random - Huh dingin banget malam ini guys, sebelum terlelap malam ini aku iseng googling untuk menuliskan sedikit artikel yang tadi tak sengaja aku temu di blog apa tadi ya.. achh lupa dech. Mungkin agan2 senior saya ini bingung dengan judul itu atau malah sudah sering baca tutorialnya dan udah paham maksutnya, ya satu guru satu ilmu jangan ganggu, hee.

Oke keburu aku ketiduran aku cepet-cepet selesaikan saja tulisan tentang Cara Membuat Description Blog Random. Owh iya jika kamu bingung dan gag ngerti maksutku silahkan lihat descripttion blogku diatas di bawah judul blognya. kemudian Refresh (F5) maka akan tampil description yang berbeda. Paham kan..!!!

Oke berikut ini caranya untuk buat Description Blog Random

Setelah kamu masuk blogger langsung menuju edit HTML saja.

cari script berikut ini :

<data:description/>

Jika sudah ketemu silahkan di replace saja dengan script dibawah ini :

<script language='Javascript'>
//<![CDATA[
<!--

function text() {
};
text = new text();
number = 0;
// textArray
text[number++] = "Descripción #1"
text[number++] = "Descripción #2"
text[number++] = "Descripción #3"
text[number++] = "Descripción #4"

increment = Math.floor(Math.random() * number);
document.write(text[increment]);
//-->
//]]>
</script>

Silahkan kamu ganti tulisan yang berwarna merah itu dengan kata yang ingin kamu tampilkan di description.

Jika kamu ingin menambahi lebih banyak lagi, tinggal kamu copy code berikut ini :  

text[number++] = "Descripción #5"

 Sekian dulu tutorial hari ini, Good nite and happy nice dream guys.

CSS Membuat Text 3D

CSS Membuat Text 3D - Text 3D tentunya akan membuat lebih indah text yang kita tampilkan di postingan. Seperti yang ada pada contoh dibawah, 3 dimensi akan memberikan efek yang lebih kompleks dalam text yang kita buat dalam postingan. Silahkan kamu edit angka di script CSS untuk mengganti ukurannya dan edit code warna untuk merubah warna fontnya.

Berikut ini contohnya :

TEXT FILEST

Script CSS 3D :

.textfilest {
  font: bold 80px/1 arial;
  text-transform: uppercase;
  color: #c69c1e;
  text-shadow: 0  2px  0   #8b6e15,
               0  4px  0   #7c6213,
               0  6px  0   #6e5611, 
               0  8px  0   #5f4b0e, 
               0 10px  0   #503f0c,
               0 12px  0   #41330a,
              3px 8px 15px rgba(0,0,0,0.1),
              3px 8px  5px rgba(0,0,0,0.3);
}

 TEXT FILEST

Script CSS 3D variasi :

.textfilestx {
  font: bold 80px/1 arial;
  text-transform: uppercase;
  color: #c69c1e;
  text-shadow: 0 12px 0 #41330a;
}

Sampai disini dulu tutorial tentang CSS 3D. Saatnya tidur. -_-

Dukung saya di Contest Blog " HMPS TI Unikama dan Kampus Multikultural " dengan memberi komentar di artikel saya, thanks.

CSS Membuat Slider Image Variasi 1

CSS Membuat Slider Image Variasi 1 - Slider dan Slider lagi, gag tau ni pas seneng ama slider, bagi sebagian orang slider adalah daya tarik tersendiri bagi blognya. Ada juga yang beranggapan hanya akan memperlambat loading Blog kita saja. Tapi kembali lagi tergantung dari kebutuhan masing-masing.

CSS Membuat Slider Image Variasi 1 - Bingung mau ngasih judul apa, karena yang memakai judul itu pasti banyak sekali, dan pastinya gag bisa jadi keyword yang cocok untuk judulku itu. West babahin yang penting jika kapan-kapan pingin make, aku tinggal buka blog ku lagi.

Yang mau nyoba atau lihat demonya bisa klik link dibawah ini :

 Berikut ini script CSS nya :

.contenedorvisor {
position: relative;
width: 600px;
height: 560px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.contenedorvisor a {
display: inline;
text-decoration: none;
}
/* Estilo miniaturas */
.miniatura {
width: 18%;
margin:1px;
border: 3px solid black;
opacity: 1;
}

.grande {
width:100%;
position: absolute;
top: 800px; margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}

.muestra {
opacity: .3;
width: 200%;
top: 170px;
}

a:hover .miniatura {
border: 3px solid grey;
opacity: .5;
}

a:hover .grande {
top: 170px;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
z-index:3;
}

Script HMTL :

 <div class="contenedorvisor">

<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGE_MIN1" />
<img class="grande" src="URL_IMAGE_ORIG1" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGE_MIN2" />
<img class="grande" src="URL_IMAGE_ORIG2" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGE_MIN3" />
<img class="grande" src="URL_IMAGE_ORIG3" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGE_MIN4" />
<img class="grande" src="URL_IMAGE_ORIG4" />
</a>
<a href="javascript:void(0);">
<img class="miniatura" src="URL_IMAGE_MIN5" />
<img class="grande" src="URL_IMAGE_ORIG5" />
</a>
<a href="javascript:void(0);">
<img class="grande muestra" src="URL_IMAGE_ORIG1" />
</a>
</div>

Oke, Selesai silahkan dipraktekin bagi yang mau.  heee.. :)

Dukung saya di Contest Blog " HMPS TI Unikama dan Kampus Multikultural " dengan memberi komentar di artikel saya, thanks.