Membuat Bentuk Menggunakan CSS

Kali ini saya akan coba membahas sedikit tutorial CSS yaitu cara membuat suatu area atau wrapper menggunakan CSS. Pertama masuk ke editor online yang cukup bagus untuk digunakan, di sini saya menggunakan HTMl Editor yaitu menggunakan http://htmledit.squarefree.com/ buka link tersebut lalu pada kotak/area yang berwarna biru salin kode berikut

<style type="text/CSS">
.persegi{
width:200px; /*lebar area*/
height:200px; /*tinggi area*/
background:orange; /*warna latar belakang*/
border:2px solid yellow; /*garis tepi*/
}
</style>

<div class="persegi">
</div>

Dan hasilnya akan seperti berikut:

Cara Membuat Background Radial

Kalau post sebelumnya saya post tentang bagaimana cara Membuat Background Linear menggunakan CSS. Kali ini saya akan menerangkan sedikit bagaimana cara Membuat Warna Background Radial.

Seperti biasa, misal kita ingin membuat background radial seperti di bawah ini:

Maka kode yang harus kita buat seperti di bawah ini:

background:-webkit-radial-gradient(circle, red 25%, green 50%, blue 100%);
background:-moz-radial-gradient(circle, red 25%, green 50%, blue 100%);
background:-ms-radial-gradient(circle, red 25%, green 50%, blue 100%);
background:-o-radial-gradient(circle, red 25%, green 50%, blue 100%);
background:radial-gradient(circle, red 25%, green 50%, blue 100%);
height:100px;
width:400px;

Dari kode CSS di atas dapat dijelaskan bahwa background di atas menggunakan type radial background, untuk circle yaitu yang membentuk bulat berwarna merah lalu seperti pada artikel sebelumnya red, green, dan blue adalah warna yang meliputi backgroundnya mungkin sudah mengerti jika sudah membaca pada artikel sebelumnya.

Lalu selain itu cara di atas juga dapat di modifikasi sedikit tampilannya seperti di bawah ini:

Dan script/kodenya di bawah ini:

background:-webkit-radial-gradient(top, circle, red 25%, green 50%, blue 100%);
background:-moz-radial-gradient(top, circle, red 25%, green 50%, blue 100%);
background:-ms-radial-gradient(top, circle, red 25%, green 50%, blue 100%);
background:-o-radial-gradient(top, circle, red 25%, green 50%, blue 100%);
background:radial-gradient(top, circle, red 25%, green 50%, blue 100%);
height:100px;
width:400px;

Hampir sama dengan yang tadi, hanya saja ditambahkan kode top sebelum kode circle dengan memberi tanda koma setiap batas kode.

Ada juga bentuk lainnya seperti ini:

Caranya:

background:-webkit-radial-gradient(top left, circle, red 25%, green 50%, blue 100%);
background:-moz-radial-gradient(top left, circle, red 25%, green 50%, blue 100%);
background:-ms-radial-gradient(top left, circle, red 25%, green 50%, blue 100%);
background:-o-radial-gradient(top left, circle, red 25%, green 50%, blue 100%);
background:radial-gradient(top left, circle, red 25%, green 50%, blue 100%);
height:100px;
width:400px;

Sedikit tambahan dari yang tadi hanya menambahkan kode left sesudah kode top tanpa koma yang artinya sebelah kiri atas yang membentuk bulatan/circle.

Sudah deh selesai Cara Membuat Warna Background Radial, semoga bermanfaat.

Marhaban Ya Ramadhan

Marhaban Ya Ramadhan

Sdr. Bayu Handono

Cara Membuat Background Linear

Kali ini saya akan membahas mengenai warna atau pewarnaan menggunakan CSS, pada bahasan kali ini saya akan membahas tentang Background Linear Gradient di mana cara ini bisa diterapkan ke dalam background blog/web. Pertama yang saya bahas adalah saya ambil contoh cara memberi warna pada background blog sebenarnya tidak terpaku pada background blog saja tapi cara ini juga dapat diterapkan pada elemen lain seperti tombol navigasi dan lainnya.

Langsung saja pertama saya akan sedikit menbahas apa yang sudah saya ketahui mengenai background linear ini, di bawah ini contohnya:

background:-webkit-linear-gradient(red 25%, green 50%, blue 100%);
background:-moz-linear-gradient(red 25%, green 50%, blue 100%);
background:-ms-linear-gradient(red 25%, green 50%, blue 100%);
background:-o-linear-gradient(red 25%, green 50%, blue 100%);
background:linear-gradient(red 25%, green 50%, blue 100%);
height:100px;
width:400px;

Artinya dalam elemen tersebut dengan tinggi 100px dan lebar 400px, dengan warna background yang diterapkan yaitu warna merah 25%, warna hijau 50%, dan warna biru 100%. Jadi diantara batas warna merah dan hijau terdapat warna campuran antar warna merah dan hijau. Begitu juga dengan batas antara warna hijau dan biru. 

Membuat batas antar warna

Selain itu kita juga dapat memberi batas pada masing-masing warna untuk lebih jelasnya dapat dilihat:

background:-webkit-linear-gradient(red 35%, green 35%, green 65%, blue 65%);
background:-moz-linear-gradient(red 35%, green 35%, green 65%, blue 65%);
background:-ms-linear-gradient(red 35%, green 35%, green 65%, blue 65%);
background:-o-linear-gradient(red 35%, green 35%, green 65%, blue 65%);
background:linear-gradient(red 35%, green 35%, green 65%, blue 65%);
height:100px;
width:400px;

Hampir sama dengan yang tadi hanya saja terdapat batas antara warna satu dengan warna lainnya, warna merah 35% dan dibatasi dengan warna hijau 35% juga. Artinya background yang berwarna merah sebesar 35% dari tinggi elemen dan di berhentikan oleh warna hijau pada 35% nya lalu dilanjutkan dengan warna hijau dari 35% sampai 65% beigtu seterusnya. Kurang lebih seperti itulah begitu seterusnya. Dengan sedikit menambah kode maka background akan terlihat rapi. 

Sampai sini saja dulu ntar kapan-kapan dilanjut :D

CSS MTT Logo

Terinspirasi dari Blog DTE dengan adminnya yang szzuper yaitu mas Taufik Nurrohman yang pernah membuat Logo DTE(Dora The Explorer), saya tertarik membuat logo sendiri menggunakan CSS. Walaupun tidak terlalu bagus, ya lumayanlah buat simbol2 aja hehe.

)

Just Iseng Logo

☺

MIRE TAHU TEMPE

CSS Amplop Cokelat Eksperimen

CSS amplop, sesuai dengan judulnya percobaan yang saya buat kali ini yaitu CSS amplop atau angpau yang suka diberikan pada yang sedang mempunyai hajatan (undangan dalam bahasa sunda). Mungkin sudah tidak aneh lagi melihat tampilan dari CSS ini, karena di kehidupan sehari-hari kita sudah menggunakannya. Jadi curhat deh :p

Tujuan saya dari membuat percobaan ini sebagai pengasah kemampuan saya dalam CSS, karena ilmu saya masih sedikit dalam memahami CSS. Sebenernya sih saya udah bingung mau posting tentang apaan lagi, padahal sudah banyak hal-hal umum yang sudah di posting sama para blogger cuman pengen mencari sesuatu yang aneh dan unik, walaupun sudah banyak seperti CSS  amplop ini tapi saya ingin buat berbeda. Langsung sajalah daripada tambah pusing lihat 

demonya, untuk tampilan maksimal gunakan Google Chrome saya pakek Google Chrome 13-16 

Anda??? Di bawah demonya

Yth:
Sdr.Bayu Handono
yang Ganteng

Search Box Dengan Efek Focus Hijau

Kali ini saya akan post tentang Search Box, search box ini hampir sama persis dengan search box yang saya gunakan sekarang tepatnya di sebelah kanan atas blog ini. Namun pada dasarnya sama saja dengan search box lainnya, hanya saja saya beri sedikit sentuhan box shadow untuk memperindah tampilannya. Search Box ini sangat cocok digunakan pada blog yang berlatar belakang gelap karena terdapat efek box-shadow berwarna hijau namun jika digunakan pada background berwarna cerah pun tetap lumayan bagus. Namun jangan lupa untuk membackup template sebelum melakukannya.

Langsung saja di bawah ini cara memasang Search Box di blog :

Buka  Template sobat lanjutkan  Edit HTML, kemudian beri tanda check Expand Template Widget.  Lalu cari kode ]]></b:skin> dan salin kode CSS berikut di atas kode ]]></b:skin>

#searchbox{padding:0 auto;margin:3px;float:right;height:28px;text-align:center;background:url(http://putsavic.xtgem.com/Images/search%20Fixed.png) no-repeat 10px 9px #555;font-size:14px;color:#fff;width:166px;border:0;solid;#444;border-radius:2px;outline:none;
box-shadow:2px 2px 5px hsla(0,0%,100%,.5),-2px -2px 5px hsla(0,0%,0%,.5),inset 5px 5px 15px hsla(0,0%,0%,.5)
}

#searchbox:hover{background:url(http://putsavic.xtgem.com/Images/search%20Fixed.png) no-repeat 10px 9px #888;color:#000}

#searchbox:focus{background:url(http://putsavic.xtgem.com/Images/search%20Fixed.png) no-repeat 10px 9px #111;color:#000
-webkit-box-shadow: inset 0 0 20px green, 0 0 20px green;
-moz-box-shadow: inset 0 0 20px green, 0 0 20px green;
-ms-box-shadow: inset 0 0 20px green, 0 0 20px green;
-o-box-shadow: inset 0 0 20px green, 0 0 20px green;
-khtml-box-shadow: inset 0 0 20px green, 0 0 20px green;
box-shadow: inset 0 0 20px green, 0 0 20px green;
}

Setelah itu pada Bagian Elemen Laman klik tambah Gadget dan pilih HTML/javascript dan letakkan kode berikut di dalam formulirnya atau juga bisa meletakannya sesuai keinginan.

<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='240' name='q' value="Telusuri..." onfocus="this.value='';" />
</form>

Demo

CSS Smile's Good Logo

Seperti sebelum-sebelumnya saya posting tentang percobaan-percobaan yang amburadul, sekarang saya coba post tentang CSS yang telah saya pelajari dan saya terapkan pada CSS eksperimen kali ini. Setelah post di CSS Semboro, kali ini saya post tentang Smile's Good Logo hasil eksperimen saya. Dari beberapa percobaan lama-lama jadi suka juga nih sama eksperimen-eksperimen seperti ini, soalnya dibutuhkan kesabaran dan keuletan buat yang baru belajar kayak saya. CSS Logo di bawah ini saya menggunakan Background Linear Gradient dengan border dan efek box shadow, selain itu juga saya menggunakan font yang sangat besar karena saya belum bisa membuat logo Smilenya jadi saya buat menggunakan font, tapi ini hanya sekedar untuk dokumentasi saja soalnya saya coba terapkan di postingan ternyata mengalami kesusahan dalam position, jadi untuk demonya bisa dilihat di bawah, untuk hasil tampilan maksimal saya menggunakan browser Google Chrome 16.

Demo

CSS Semboro

Setelah mencoba dan mencoba akhirnya tercipta juga CSS ini. Walaupun sangat amburadul tapi yah dapet nyoba sendiri. Logo ini saya buat cuman buat nerapin apa yang saya dapat dari teman-teman blogger yang CSS nya pada hebat-hebat saya jadi tertarik iseng-iseng membuat logo ini. Selain itu juga lumayan kan nambah postingan soalnya lagi bingung nyari ide postingan ya udah deh post aja yang sudah ada.

Logo ini saya buat sengaja tidak sama persis sama seperti di iklan-iklan karena pertama susah kalo harus sama persis kaya yang di iklan-iklan tuh kedua ilmunya belum nyampe haha.

Lihat aja demonya

Salam 234 1500/10 Batang

SEMBORO
Cita Rasa Legendaris
☻

Untuk melihat kodenya bisa dilihat di samping kanan ==►

Kode

CSS Newbie

Daripada ga ada bahan post, mending iseng2 posting ini aja deh. Kalo jelek maklum masih newbie :D

We ♥♥♥ Persib
Bandung Panceg Dina Kasur Eh Galur
☻

​ ​ ​

Selengkapnya ►►