BORDER

Dalam contoh di atas, kita memakai border untuk menunjukkan wilayah. Border sendiri lebih umum terlihat di table yang sayangnya hendak di hapuskan secara tak langsung dalam html walau penggunaannya sendiri masih ada.

di CSS border terdiri dari 3 elemen yaitu

• warna
• ukuran
• tipe border terdiri dari
• solid
• ridge
• none

Border sendiri tidak di atur secara tunggal untuk posisi atas,bawah,kiri dan kanan dalam 1 perintah. kita bisa mengatur untuk posisi berbeda dengan style berbeda. style tersebut dapat di lihat di

• border-top
• border-bottom
• border-left
• border-right

CSS REPEAT

Gunakan css dan HTML berikut

<style>

.icon {

background-image:url(http://wscont1.apps.microsoft.com/winstore/1x/a14c3995-34d7-454c-82e2-0c192e48b91a/Icon.173718.png);

min-height:160px;

min-width:160px;

border:2px blue double;

margin:2px;

}

.icon2a {

background-repeat: repeat-x;

}

.icon2b {

background-repeat: repeat-y;

}

</style>

<div class='icon'></div>

<div class='icon icon2a'></div>

<div class='icon icon2b'></div>

LATAR BELAKANG CSS

internet..

Dalam membuat sebuah latar, css memiliki style bernama background. Namun background sendiri terdiri dari

• background warna
• background gambar dan pendukungnya

Untuk Background warna sangat mudah yaitu dengan menuliskan salah satu dari contoh dibawah. Kita sudah melakukan pada contoh sebelumnya

• background:blue;
• background-color:blue;

PERULANGAN CSS

Berbicara tentang perulangan. Terkadang kita membuat 2 class (id) atau lebih yang memiliki bentuk yang sama. Dalam hal ini kita membuat 2 class (kotak1 dan kotak2) memiliki style yang sama. Daripada menulis 2 style yang sama, akan lebih baik menulis 1 kali.

.kotak1, .kotak2 {

border:1px solid blue;

}

contoh:

<style>

.kotak1, .kotak2 {

border:1px solid green;

width:100px;

margin:10px 0;

min-height:10px;

}

</style>

<div class=”kotak1”>kotak 1</div>

<div class=’kotak2’>kotak 2</div>

HIRARKI pada CSS

Dalam HTML, kita akan berhadapan dengan css yang memiliki semacam hirarki. Di contoh dibawah, kita membuat murid (kotak) yang memiliki warna berbeda.Untuk mencoba tuliskan ini dalam 1 tempat seperti yang tertulis pada artikel pelajaran css dan html pada artikel sebelumnya

Webdesign : merancang design web sederhana

Tujuan : Membuat tampilan menggunakan CSS inline

Untuk membuat css inline, kita mulai dengan menuliskan < div > < /div > terlebih dahulu. Lalu memasukkan kedalamnya style sehingga mendapatkan seperti berikut

< DIV style="{masukkan style}"> </div>

lakukan hal tersebut untuk tugas dibawah ini. Untuk isinya bisa di masukkan sendiri

Buatlah tampilan sebagai berikut sebagai berikut:

JUDUL

MENU ( home, about me, contact us)

ISI (tulisan sebanyak 2 paragraf)

FOOTER

Template dasar pelajaran HTML

Untuk kedepannya, saya akan share tulisan saya tentang pelajaran html dan css. Di pelajaran itu ada template dasar yang harus di ikuti. Template itu mungkin tidak sesuai dengan bagaimana html seharusnya.

Pada template ini, semuanya digabung jadi satu! kecuali script atau js luar yang tidak langsung bersangkutan seperti jquery.js alasan kenapa memakai template ini murni buat belajar. Bila dalam keadaan sebenarnya!
letakkan javascript dan style pada file di luar HTML.. dan terpenting jangan memakai inline css .. kecuali itu memang tidak ada jalan lain.

bootstrap part 1

Sejujurnya saya sendiri tidak faham kenapa bootstrap terkenal di kalangan teman web design. Tapi akhirnya saya mencoba sendiri walau tidak tahu apakah berhasil / tidak. Semua tulisan ini sebenarnya berasal dari site berikut ( http://www.onextrapixel.com ). Bila anda merasa membuang waktu membaca disini.. klik saja link tersebut, karena disini akan dibahas dengan gaya saya sendiri.

Semua ini memiliki sejarah kenapa muncul bootstrap. ternyata sumbernya dari keinginan 2 orang agar dapat memiliki web yang bisa di akses baik dari alat apapun (desktop/mobile atau pad). Namun ternyata tidak semudah itu karena masing-masing memiliki gaya dan cara menangani html di tempat mereka.

CSS >> Position

Akhir-akhir ini saya melihat cerita BRS ini cukup hangat dan banyak dibahas.. Walau saya sendiri tidak faham ceritanya. Maklumi, karena saya sendiri bukan penontonnya. Mari kita lanjut untuk membahas Position, untuk position atau posisi.. Merupakan perintah css yang agak krusial. Untuk saya yang pemula, mencari posisi yang tepat untuk div yang kugunakan tidak selalu benar dan mudah.

Position sendiri digunakan untuk berbagai keperluan seperti melayang, berada di posisi kanan yang sulit dan lain-lain. Bila anda perhatikan, beberapa css memerlukan position agar kemampuannya dapat bekerja. Contoh css yang butuh positin untuk bekerja benar adalah bottom

Property yang dimiliki oleh Position adalah:

• Static
• Absolute
• Fixed
• relative
• inherited

Dimana Static adalah default dari position.

Masalah tampilan pada Code Igniter (Framework)

Problem ini terjadi saat ada komplain klien. Klien merasa bahwa form/kotak yang saya buat kurang posisinya ke kanan. Ternyata memang benar pernyataan bahwa para designer takut dan benci pada perubahan design. Apalagi design itu dicoba di browser yang bisa dibilang tidak di testing oleh designer tersebut. Entah apakah saya pernah share tulisan ini atau belum, tapi saya asumsikan belum.

Cyclone

Untuk menyingkat saya memperbaikinya. Berterima kasih karena saya meletakkan coding utamanya (untuk tampilan) di file css. Jadi saya melakukan perubahan saja di CSS!! bukan di view. Perlu diketahui bahwa dengan meletakkannya di CSS, editing jadi lebih mudah. Tetapi entah kenapa masalah tiba-tiba muncul.

Saya asumsikan bahwa motor yang harusnya tampil harusnya bukan cyclone. Klien melaporkan bahwa motornya yang hadir tidak tepat, seharusnya berganti dengan motor lain seperti motor berikut

Ride Shooter (ryuki cs)

Melihat dari coding, saya melihat bahwa area preview itu dikendalikan oleh  CSS. Sedikit hint, backgroundnya yang perlu saya edit, karena kebetulan ukuran dan lebar sama jadi hanya ganti background semua langsung jadi.

CSS >> Padding

Ironman 3 sudah hadir infonya. Temanku jadi galau melihat previewnya. Tetapi bagi saya yang terpenting adalah jalan cerita bukan teknologinya.

Iron man

Untuk menyingkat tulisan. Saya membuat sebelumnya tentang margin. Bila margin adalah batas dari sisi terluar tag, maka padding dihitung dari sisi terdalam. Keduanya bisa dibilang mirip, tetapi dalam penggunaannya tentu saja berbeda. Ada beberapa bentuk padding yaitu

• Padding: 10px;
• Padding: 10px 20px;
• Padding: 10px 20px 30px 15px;

hasil di atas tentu saja berbeda, penjelasa panjang tentu bikin anda bosan.. Jadi mari kita coba. pada dasarnya padding itu kalau dibagi-bagi menjadi

• padding-top
• padding-left
• padding-bottom
• padding-right

anda bisa langsung menulis padding-top bila hanya butuh padding-top saja. Tetapi saya membiasakan diri mengetik padding lalu memberikan angkanya semua seperti no 3 (Padding: 10px 20px 30px 15px;)

Padding: 10px;

Padding: 10px 20px;

Padding: 10px 20px 30px 15px;

sudah terlihat perbedaannya? penjelasannya:

• Padding: 10px;
  dari sisi terdalam 10px untuk semua sisi
• Padding: 10px 20px;
  dari sisi terdalam 10px untuk atas dan bawah, 20px dari kanan dan kiri. Untuk kanan tidak terlihat jelas tentunya dalam contoh di atas.
• Padding: 10px 20px 30px 15px;
  dari sisi terdalam 10px untuk sisi atas, 20 dari kiri, 30 dari bawah, dan 15 dari kanan.

Berikutnya kita akan mencoba meneruskannya ke "clip" .. css yang bisa kubilang agak unik

CSS >> Margin

Sebelumnya kita sudah mencoba float, clear dan juga position. Berikutnya adalah margin. Nanti setelahnya kita akan mencoba Padding.

Saya berfikir dahulu, bukan pusing

Sebelumnya kita pelajari bahwa namanya halaman memiliki namanya margin. Kalau dalam analogiku, margin = lajur. Atau kita bisa katakan batas. Batas dari sisi terluar hingga terdalam. Atau bisa kita bilang seperti besar area diluar dari area rumah/kamar kita. Nantinya kita akan pelajari Padding, dimana dari sisi area rumah kita.. harus masuk kedalam beberapa pixel. 

Saya sudah terjebak dengan pemakaian padding dan margin. Pemakaian yang saya maksud adalah menentukan 'jumlah' sebenarnya yang digunakan oleh area (DIV) yang saya beri style tersebut. Untuk margin, area yang saya beri akan bertambah sejumlah dengan margin yang diberikan. Misal saya memiliki 100 pixel (horizontal), saat saya beri margin 20.. maka kita akan dapat 140!! karena ada 20 pixel tambahan. Sedangkan Padding kita beri 100, maka tetap 100! Namun penjelasan Padding akan dibahas nanti.

Penggunaan margin dalam html/css adalah

margin: 0px;

atau

margin: 10px 10px 20px 20px; 

dapat dipecah menjadi

• margin-top
• margin-right
• margin-bottom
• margin-left

tanpa basa-basi inilah contohnya.

margin:10px

margin:10px 20px

margin:10px 0

tampaknya untuk tampilan di atas tidak menyertakan margin-top dan bottom... jadi bentuknya tidak sesuai keinginan. jadi kumasukkan padding 1px untuk gambaran saja.

margin: auto; width: 300px;

Untuk membuat ditengah.. tulis saja margin auto, jangan lupa ukurannya (300px). tidak memberikan berapa panjangnya tidak akan bisa menjadi ditengah seperti di bawah

margin: auto;

intinya.. jangan menjadi

pusing

CSS >> Clear

Saber dikenal sebagai salah satu karakter anime yang terkenal. Dibuat dengan konsep raja Arthur jaman pedang dan sihir. Dia awalnya digambarkan pria, tetapi malah di buat konsepnya jadi perempuan seperti disini. Ternyata konsep ini sangat sukses dan dia memiliki banyak varian.

Dalam membuat sebuah html dengan float kiri atau kanan, terkadang kita ingin agar setelah itu akan ada garis yang melingkupi area dimana kotak itu berada. Sebenarnya menggunakan table lebih baik tetapi kenyataannya kebanyakan memakai table. Bahkan ada yang menyarankan menghindari table, kecuali bila kamu tak memiliki solusi lain.

Clear disini adalah memberikan pembersihan, walaupun clear memiliki 5 nilai yaitu:

1. left No floating elements allowed on the left side
   
2. right No floating elements allowed on the right side
   
3. both No floating elements allowed on either the left or the right side
   
4. none Default. Allows floating elements on both sides
   
5. inherit
   

walaupun nilai terakhir tidak kuhitung sebenarnya.

CSS >> Float

Position memiliki keterkaitan dengan float walau tidak secara langsung. Sama dengan gambar berikut yaitu 'Power Ranger Hijau' yang berkaitan tidak langsung dengan Zyuranger. Secara umum memang tidak dapat disamakan keduanya. Tetapi karena adanya Power ranger, nama sentai setelahnya jadi terkenal. Lalu apa hubungannya di position dan float??

Float diketahui kegunaannya karena kemampuan position, yang menentukan posisi dari sebuah tempat tertentu. Perlu di garis bawahi, kita tidak bisa menyamakan keduanya. Untuk nilainya hanya terbatas 4 saja yaitu

• None. Standarnya
• Left. Kiri
• Right. Kanan
• Inherited. Turunan dari sebelumnya.

Pemakaian float akan mudah mendapatkan kendala, seperti posisi yang kurang tepat sehingga bisa saja membuat berantakan. Kita jangan lupa memakai clear untuk merapikan kembali .. tentu gunakan sesuai keperluan. Dibawah adalah contoh dari div yang saya buat dan semoga terlihat jelas.

float: none;

float: right;

float: left;

CSS >> BORDER (3)

Sebelumnya saya akan tunjukkan bentuk style dalam border

dotted

dashed

solid

double

groove

ridge

inset

outset

inherited

None

hidden

Berikutnya saya akan bahas tentang Radius. Radius sendiri terdiri dari :

1. border-top-left-radius:2em;
2. border-top-right-radius:2em;
3. border-bottom-right-radius:2em;
4. border-bottom-left-radius:2em;

untuk format agak membingungkan. Untuk mudahnya saya menulis

border-radius: 2em 1em 4em 3em/ 0.5em 3em;

(memakai /). Disini saya mendeklarasikan

1. border-top-left-radius:2em 0.5em;
2. border-top-right-radius:1em 3em;
3. border-bottom-right-radius:4em 0.5em;
4. border-bottom-left-radius:3em 3em;

agak sulit membuat penjelasan atas ini. Versi lebih mudahnya

border-radius: 2em 1em 4em 3em

saya mendeklarasikan

1. border-top-left-radius:2em ;
2. border-top-right-radius:1em;
3. border-bottom-right-radius:4em;
4. border-bottom-left-radius:3em ;

CSS >> Bottom

style ini digunakan untuk meletakkan sesuatu seperti gambar/div (disarankan div jangan ke gambar) dibawah. Perlu diperhatikan bahwa penggunaan Bottom ini tergantung pada position, percobaan dengan berbagai position berbeda akan menghasilkan hal berbeda. Perhatikan logicnya dalam meletakkannya. percobaan dibawah:

position:absolute; bottom:5px;

  bottom: -65px; position: relative;

bottom: +10px; position: relative;

Berikutnya kita akan membahas position.

CSS >> Border (2)

Pada topik sebelumnya kita membahas border, border sendiri memiliki 3 sub bagian yaitu:

1. Warna 
2. gaya 
3. dan besar

Sebagai contoh:

border-bottom 3px solid blue

Untuk bottom kita bisa memecah sebagai berikut:

• border-bottom-color . Nilainya:
  1. yellow; 
  2. #00ff00; 
  3. rgb(255,0,255);
• border-bottom-style. Nilainya dapat dilihat di style (ada dibawah)
• border-bottom-width. Ukuran berupa pixel / px

Bentuk CSS Border lainnya

1. border-collapse memiliki nilai :
   • collapse;
   • separate;
   • Inherited
     
2. border-spacing. Di isi angka berupa pixel
3. border-color: di isi warna seperti
   • yellow;
   • #00ff00;
   • rgb(255,0,255);
4. border-style
   • none; 
   • hidden; 
   • dotted; 
   • dashed; 
   • solid; 
   • double; 
   • groove; 
   • ridge;
   •  inset; 
   • outset;
   •  inherited

BORDER-IMAGE

format dasar

border-image: url(border.png) none 100% 1 0 stretch;

saya kurang faham penggunaan border-image, tetapi tampaknya tidak begitu bagus digunakan. Untuk hasil yang lebih maksimal, masukkan juga dengan tulisan dibawah:

• -moz-border-image source slice width outset repeat;
• -webkit-border-image
• -o-border-image

Dimana formatnya sama seperti di atas. Penjelasan tentang isi dari border-image, border image ini terdiri dari

• source 
• slice
• width
• outset
• repeat;

Versi detailnya

• border-image-source
• border-image-width
  

Untuk keamanan lebih baik hindari

• border-image-repeat(stretch|repeat|round;); 
• border-image-outset (angka px); 
• border-image-slice (angka|%|fill;)

didalam kurung adalah nilai yang bisa dimasukkan


berikutnya kita akan membahas border-radius

CSS >> BORDER (1)

Border disini ditujukan untuk memberi garis di luar wilayah tag. Perlu diperhatikan bahwa garis ini bisa tidak sejalan dengan harapan karena beberapa alasan tertentu. Perhatikan coding HTMLnya.
Format

BORDER: 3px solid blue

Beberapa sub bagian dari border. Untuk posisi (normal) border terdiri dari

• TOP
• BOTTOM
• LEFT
• RIGHT

border-bottom

format:

3px solid blue;

border-bottom

format:

2px solid red;

border-left

format:

3px solid blue;

border-right

format:

2px solid red;

CSS >> background

Background digunakan untuk memasukkan gambar/warna di dalam div atau tag html. Tidak semua tag dapat memakai background dengan sempurna.

Format dasar:

background: url('paper.gif') yellow no-repeat;

Sub bagian dari Background:

1. background-attachment. Nilainya
   
   • Scroll
   • Fixed
   • inherited
2. background-color. Nilainya
   
   • yellow;
   • #00ff00;
   •  rgb(255,0,255);
3. background-image. nilainya : url(xxxx.gif );
4. background-position. nilainya
   
   • left top
   • left center
   • left bottom
   • right top
   • right center
   • right bottom
   • center top
   • center center
   • center bottom
   • x% y%
   • xpos ypos
   • inherit
5. background-repeat. Nilainya
   
   • repeat;
   • repeat-x;
   •  repeat-y;
   • no-repeat;
   • inherit
6. background-clip dan -webkit-background-clip
   
   • border-box;
   • padding-box;
   • content-box;
7. background-origin. Nilai
   
   • border-box;
   • padding-box;
   • content-box;
8. background-size
   
   • 60px 80px = ukuran gambar
   • 12% 18% = persentase ke lebar
   • cover = ukuran sebesar lebar
   • contain = setinggi layar