Membuat Background Parallax dengan CSS

by Firmansssyah March 20, 2017 CSS

CSS Float

by Firmansssyah March 15, 2017 CSS

Belajar CSS Menggunkan Float CSS

Teknik Floating pada bagaian web desaign merupakan sebuah kebutukan yang paling banyak di perlukan .float berfungso untuk mengatur letak element secara horixontal . ada empat value yang bisa di gunakan untuk property float , yaitu left, right, inherit dan none.

salah satu contoh penggunaan float yang paling di temukan adalah ketika kita ingin membuat gambar postingan website yang terletak di bagian sampingan tulisan konten berikut akan di berikan contoh tentang penggunaan float pada css.

index.html

<!DOCTYPE html>
<html>
<head>
 <title>Border style CSS</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <h1>Lorem Ipsum</h1>

 <div class="kotak">
 <img class="gambar" src="http://www.extremetech.com/wp-content/uploads/2012/01/linux.jpg">
 
 Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.Sudah merupakan fakta bahwa seorang pembaca akan terpengaruh oleh isi tulisan dari sebuah halaman saat ia melihat tata letaknya. Maksud penggunaan Lorem Ipsum adalah karena ia kurang lebih memiliki penyebaran huruf yang normal, ketimbang menggunakan kalimat seperti "Bagian isi disini, bagian isi disini", sehingga ia seolah menjadi naskah Inggris yang bisa dibaca. Banyak paket Desktop Publishing dan editor situs web yang kini menggunakan Lorem Ipsum sebagai contoh teks. Karenanya pencarian terhadap kalimat "Lorem Ipsum" akan berujung pada banyak situs web yang masih dalam tahap pengembangan. Berbagai versi juga telah berubah dari tahun ke tahun, kadang karena tidak sengaja, kadang karena disengaja (misalnya karena dimasukkan unsur humor atau semacamnya) Tidak seperti anggapan banyak orang, Lorem Ipsum bukanlah teks-teks yang diacak. Ia berakar dari sebuah naskah sastra latin klasik dari era 45 sebelum masehi, hingga bisa dipastikan usianya telah mencapai lebih dari 2000 tahun. Richard McClintock, seorang professor Bahasa Latin dari Hampden-Sidney College di Virginia, mencoba mencari makna salah satu kata latin yang dianggap paling tidak jelas, yakni consectetur, yang diambil dari salah satu bagian Lorem Ipsum. Setelah ia mencari maknanya di di literatur klasik, ia mendapatkan sebuah sumber yang tidak bisa diragukan. Lorem Ipsum berasal dari bagian 1.10.32 dan 1.10.33 dari naskah "de Finibus Bonorum et Malorum" (Sisi Ekstrim dari Kebaikan dan Kejahatan) karya Cicero, yang ditulis pada tahun 45 sebelum masehi. BUku ini adalah risalah dari teori etika yang sangat terkenal pada masa Renaissance. Baris pertama dari Lorem Ipsum, "Lorem ipsum dolor sit amet..", berasal dari sebuah baris di bagian 1.10.32.

 
 </div>
</body>
</html>

style.css

h1{
    text-align: center;
}

.gambar{
    width: 300px;
    float: left;
    margin-right: 10px;
}

Refrensi
W3Schools.com

CSS : Div dan Span

by Firmansssyah March 14, 2017 CSS

CSS Font

by Firmansssyah March 13, 2017 CSS

Keterbatasan Jenis Font di dalam Web Browser

Font adalah jenis huruf yang digunakan di dalam sebuah dokumen. Pada aplikasi pengolah kata seperti Microsoft Word, terdapat puluhan bahkan ratusan jenis font yang bisa kita pilih. Font-font ini berasal dari sistem Windows atau dari beberapa aplikasi lain.

Jika anda menginstall program tambahan seperti Adobe Photoshop, aplikasi ini juga membawa font sendiri yang akan ditambahkan ke dalam jenis-jenis font yang terdapat di dalam Windows, dan karena font ini adalah bawaan aplikasi, maka tidak semua komputer memiliki font ini.

Apabila kita membuat sebuah dokumen dan mencetaknya langsung, menggunakan font apapun yang tersedia di komputer tidak akan menjadi masalah. Namun jika anda membuat dokumen yang akan digunakan di dalam komputer lain, sebaiknya menggunakan font standar yang kemungkinan besar akan tersedia di komputer tujuan.

Dalam memilih jenis font untuk website, kondisi yang sama juga menjadi pertimbangan penting. Di dalam CSS, kita bisa menggunakan berbagai jenis font sesuai dengan desain yang diinginkan. Namun font yang akan ditampilkan pada web browser sepenuhnya berasal dari komputer user (pengunjung web). Jika kita memilih font yang tidak standar, maka desain web yang telah dirancang serapi mungkin akan menjadi ’kacau’ karena bisa saja font yang kita pilih tidak tersedia di komputer pengunjung.

Untuk mengatasi hal ini, salah satunya adalah dengan menggunakan font ’standar’ yang umum tersedia di dalam berbagai sistem operasi seperti Windows, Linux, Mac OS, dll. Menggunakan font-font standar ini akan ’menjamin’ desain web yang telah dirancang dapat didukung oleh mayoritas web browser.

Mengenal Jenis-jenis Font Standar CSS

Font Standar / Font Generik adalah jenis font yang umumnya tersedia pada hampir semua sistem. Jika kita membagi jenis font berdasarkan ’bentuknya’, terdapat 5 jenis font generik, yaitu serif, sans-serif, monospace, cursive, dan fantasy.

Jenis Font Sans-serif

Font dengan jenis ‘sans-serif’ adalah jenis font yang tidak memiliki ‘kaki’ pada setiap ujung karakternya. Contoh dari font jenis ini adalah Arial, Verdana, Trebuchet MS, Helvetica, dan Calibri. Font jenis ini sering digunakan di media elektronik seperti web.

Jenis Font Monospace

Font berjenis ‘monospace’ adalah tipe font yang lebar setiap karakternya sama panjangnya. Huruf ‘i’ akan mengambil panjang yang sama dengan huruf ‘w’. Contoh dari font jenis ini adalah Courier, Courier New, dan Andale Mono. Biasanya font jenis ini digunakan untuk hal yang bersifat teknis, seperti penulisan contoh kode program.

Jenis Font Cursive

Font jenis ‘cursive’ adalah jenis font yang ‘meniru’ tulisan tangan atau kaligrafi. Contoh dari font ini adalah Comic Sans. Font jenis ini biasanya digunakan untuk aspek tulisan yang tidak terlalu ‘formal’.

Jenis Font Fantasy

Font dengan jenis ‘fantasy’ adalah font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dll. Font jenis ini jarang digunakan untuk text halaman.

Cara Mengubah Jenis Font dengan Property font-family

Untuk menentukan jenis font dari sebuah text HTML, kita bisa menggunakan property CSS : font-family. Berikut adalah contoh penulisan kode CSSnya :

<style type="text/css">
body { font-family: Arial; }
p { font-family: Courier, monospace; }
div { font-family: “Duru Sans”, Verdana, sans-serif; }
<style>

Seperti yang terlihat, nilai yang didukung oleh property font-family adalah nama-nama font yang diinginkan. Saya menyebutnya ‘nama-nama’ karena kita bisa memberikan lebih dari 1 nama font untuk 1 jenis elemen HTML.

Tujuan dari memberikan lebih dari 1 font, terkait dengan pembahasan pada bagian awal tutorial ini, yakni tentang keterbatasan font yang terdapat di dalam komputer pengunjung web kita.

Ketika kita mendefenisikan nilai font-family sebagai: “Duru Sans”, Verdana, sans-serif, dapat dilihat bahwa terdapat 3 jenis font, yakni font Duru Sans, font Verdana, dan font sans-serif.

Web browser pertama kali akan mencoba ‘mencari’ font dengan nama “Duru Sans” di komputer user (pengunjung web) jika tidak ditemukan, maka web browser akan mencari font di urutan selanjutnya, yakni font Verdana. Dan jika tidak ditemukan juga, maka web browser akan menampilkan font dengan jenis generik: sans-serif.

Font jenis generik ini bisa bernilai 1 dari nilai berikut: serif, sans-serif, monospace, cursive, dan fantasy. Jika kita menuliskan font-family: serif, maka web browser akan mencari font standar dengan kategori serif yang terdapat di dalam komputer user. Penulisan font generik ini biasanya digunakan sebagai pilihan terakhir dalam nilai font-family.

CSS tidak membatasi seberapa banyak jenis font yang boleh ’disiapkan’ untuk nilai font-family. Kita bahkan bisa menulis 10 jenis font untuk 1 nilai font-family. Namun rata-rata web designer hanya membuat 3 pilihan, dimulai dari yang paling spesifik, sampai dengan jenis font yang paling umum (jenis font generik).

Dalam memberikan nilai untuk nama font, terdapat beberapa aturan penulisan. Aturan tersebut adalah sebagai berikut:

Untuk setiap penulisan nama font, huruf pertama pada tiap kata harus menggunakan huruf besar, contohnya: penulisan font “arial” harus ditulis menjadi “Arial” . Tetapi aturan ini tidak berlaku untuk font ‘generik’ seperti monospace dan sans-serif.

Untuk memisahkan antara satu font dengan font lainnya, gunakan tanda koma.

Jika nama font memiliki spasi, maka harus ditulis didalam tanda kutip, seperti: ”Times New Roman”.

Contoh penggunaan property font-family CSS dengan HTML

Untuk melengkapi tutorial cara mengubah jenis font HTML menggunakan CSS, kita akan langsung mempraktekkannya menggunakan contoh program.

Berikut adalah contoh penggunaan property font-family dalam CSS:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menganti font-family di css</title>

<style type="text/css">
body { font-family: Calibri, Helvetica, Arial, sans-serif; }
h3 { font-family: Cambria,"Times New Roman",serif; }
#paragraf2 { font-family: Georgia, serif; }
</style>

</head>

<body>
<h3>Belajar CSS: font-family</h3>

HTML dan CSS

merupakan bagian tak terpisahkan dari website modern saat ini.
HTML digunakan untuk membuat konten atau kerangka logis dari
halaman web,
sedangkan CSS digunakan untuk mengatur tampilan dari website,
seperti warna dan font yang digunakan.

CSS biasanya selalu dikaitkan dengan HTML,
karena keduanya memang saling melengkapi.
HTML ditujukan untuk membuat struktur,
atau konten dari halaman web.
Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut.
Istilahnya, HTML for content, CSS for Presentation.

</body>
</html>

CSS Margin & Padding

by Firmansssyah March 11, 2017 CSS

CSS Border

by Firmansssyah March 10, 2017 CSS

A. Pengertian

Border di CSS adalah properti yang bisa digunakan untuk memberi style pada border.

B. Alat dan Bahan

Text Editor
Web Browser

C. Pembahasan

-Mengubah Border Style

pada CSS terdapat banyak gaya atau model untuk membuat garis . Ada yang berbentuk titik-titik , berbentuk garis yang putus-putus , garis ganda dan bnyak lagi style/gaya yang bisa di gunakan pada garis dengan css . Untuk membuat garis sekaligus memberi value style yang kita inginkan kita bisa menggunakan border-style. silahkan perhatikan cotoh di bawah iin.

buatlah file baru dengan nama index.html

<!DOCTYPE html>
<html>
<head>
 <title>Border style</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 Garis dengan gaya solid
 Garis dengan gaya dotted
 Garis dengan gaya dashed
 Garis dengan gaya double
 Garis dengan gaya groove
 Garis dengan gaya inset
 Garis dengan gaya outset
 Garis dengan gaya ridge
</body>
</html>

dan buat juga file style.css

#garis_1{
    border-style:solid;
}
#garis_2{
    border-style: dotted;
}
#garis_3{
    border-style: dashed;
}
#garis_4{
    border-style: double;
}
#garis_5{
    border-style: groove;
}
#garis_6{
    border-style: inset;
}
#garis_7{
    border-style: outset;
}
#garis_8{
    border-style: ridge;
}

Hasil yang akan ditampilkan web browser.

-Mengatur Ukuran Border CSS

Untuk mengatur pada border kita bisa menggunakan property css yaitu border-width . berikut ini adalah contoh cara penulisan property border-width untuk membuat ukuran garis.

index.html

<!DOCTYPE html>
<html>
<head>
 <title>Border style</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 Garis dengan gaya solid
 Garis dengan gaya dotted
 Garis dengan gaya dashed
 Garis dengan gaya double
 Garis dengan gaya groove
 Garis dengan gaya inset
 Garis dengan gaya outset
 Garis dengan gaya ridge
</body>
</html>

style.css

#garis_1{
    border-style:solid;
    border-width: 5px;
}
#garis_2{
    border-style: dotted;
    border-width: 10px;
}
#garis_3{
    border-style: dashed;
    border-width: 3px;
}
#garis_4{
    border-style: double;
    border-width: 9px;
}
#garis_5{
    border-style: groove;
    border-width: 25px;
}
#garis_6{
    border-style: inset;
    border-width: 5px;
}
#garis_7{
    border-style: outset;
    border-width: 5px;
}
#garis_8{
    border-style: ridge;
    border-width: 50px;
}

Hasilnya :

-Memberi warna pada Border

untuk memberikan warana pada garis gunakan property css yaitu border-color berikut adalah contoh membuat warna pada garis menggunakan CSS.

index.html

<!DOCTYPE html>
<html>
<head>
 <title>Border style</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 Garis dengan gaya solid
 Garis dengan gaya dotted
 Garis dengan gaya dashed
 Garis dengan gaya double
 Garis dengan gaya groove
 Garis dengan gaya inset
 Garis dengan gaya outset
 Garis dengan gaya ridge
</body>
</html>

style.css

#garis_1{
    border-style:solid;
    border-width: 5px;
}
#garis_2{
    border-style: dotted;
    border-width: 10px;
    border-color:red;
}
#garis_3{
    border-style: dashed;
    border-width: 3px;
    border-color:blue;
}
#garis_4{
    border-style: double;
    border-width: 9px;
    border-color:green;
}
#garis_5{
    border-style: groove;
    border-width: 25px;
    border-color:#12ff00;
}
#garis_6{
    border-style: inset;
    border-width: 5px;
    border-color:#333333;
}
#garis_7{
    border-style: outset;
    border-width: 5px;
    border-color:yellow;
}
#garis_8{
    border-style: ridge;
    border-width: 50px;
    border-color: violet;
}

Hasil yang ditampilkan

D. Refrensi

https://www.w3schools.com/css/css_border.asp

CSS Background

by Firmansssyah March 09, 2017 CSS

A. Pengertian

Background css adalah tampilan latar belakang pada suatu halaman web, baik itu bakground gambar maupun warna.

B. Latar Belakang
Karena warna background default adalah warna putih sehingga kurang menarik untuk tampilan web yang kita buat.

C. Maksud dan Tujuan
Dapat memahami dan cara penggunaan backgound CSS.

D. Alat dan Bahan

Text Editor
Web Browser

E. Pembahasan
Sifat latar belakang CSS digunakan untuk menentukan efek latar belakang untuk elemen.
Background Properti CSS :

background-color
background-image
background-repeat
backgound-attachment
background-position

Background Color

Properti latar belakang halaman diatur seperti ini, Contoh :

ketikan ditampilkan di browser :

pada CSS ada beberapa cara dalam memberi nilai warna :

Dengan mengunkan nama : "red","blue","green".
Dengan nilai HEX : "ff0000".
Dengan RGB : "rgb(255,0,0)"

Pada contoh dibawah ini elemen <h1>, dan <div> akan diberikan warna latar belakang yang berbeda.

Hasil :

Background Image

Properti background-image menentukan gambar untuk digunkan sebagai latar belakang suatu elemen. Secara default, gambar diulang sehinggan mencakup seluruh elemen.

Gambar latar belakang untuk halaman dapat diatur seperti ini :

Hasil :

Background Image - Repeat Horizontal atu Vertikal

Secara default, background-image properti mengulangi gambar secara horizontal dan vertikal. Beberapa gambar harus diulang dan akan hasilnya akan telihat tidak rapi. Seperti contoh :

Hasil :

Jika gambar diatas diulang hannya horizontal (background-repeat: repeat-x;), latar belakang akan terlihat lebih bagus.

Hasil :

Background Image - Mengatur Posisi dan no-repeat

Menampilkan Latar belakang hanya dengan sekali juga ditentukan oleh properti background-repeat dan mengatur posisi gambar tersebut. Contoh :

Background Image - Fixed Position

Untuk menentukan bahwa gambar latar belakang harus tetap (tidak akan gulir dengan sisa halaman), menggunakan properti background-attachment :

Background Image - menyingkat properti

Untuk mempersingkat kode, juga mungkin untuk menentukan semua properti background dalam satu properti tunggal. untuk memperpendek properti background-image :

Bila menggunakan Shortand urutan properti adalah :

background-image
background-repeat
background-attachment
background-position

F. Refrensi

https://www.w3schools.com/css/css_background.asp

Semoga bermanfaat Wassalmualaikum Wr Wb.

Syntax CSS

by Firmansssyah March 08, 2017 CSS

Pengenalan CSS

by Firmansssyah March 07, 2017 CSS

Assalamualaikum wr wb
A. Pengertian

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

CSS merupakan pemrograman wajib yang harus dikuasi oleh setiap pembuat program (Web Programmer), terlebih lagi itu adalah pendesain web (web designer).

CSS saat ini dikembangkan oleh World Wide Web Consortium (W3C) dan menjadi bahasa standar dalam pembuatan web. CSS difungsikan sebagai penopang atau pendukung, dan pelengkap dari file html yang berperan dalam penataan kerangka dan layout.

CSS mampu di berbagai platform, maksudnya dapat dijalankan pada berbagai macam sistem operasi dan web browser. Secara umum, yang dilakukan oleh CSS adalah pengaturan layout, kerangka, teks, gambar, warna, tabel, spasi, dan lain sebagainya. Kita akan mengetahui masing-masing pengaturan tersebut pada pembahasan selanjutnya.

B. Sejarah CSS

Pada tahun 1996, mungkin tepatnya pada tanggal 17 Desember 1996, W3C (World Wide Consortium) menjadikan CSS sebagai pemrograman standar dalam membangun suatu dokumen web. Tujuannya tentu saja untuk mengurangi pembuatan tag-tag. Pada saat itu, CSS masih berversi 1, yang memiliki dukungan terhadap:

Font (Jenis, Ketebalan dan lain-lain).
Warna Teks, Latar Belakang dan Lain-lain.
Text atribut, misalnya spasi antar baris, kata, dan huruf.

Melihat dukungan seperti itu, tentu kurang lengkap bukan? Oleh karena itu, pada tahun 1998, W3C menyempurnakannya dengan hadirnya CSS versi 2 (CSS2), yang menjadi standar hingga saat ini. CSS dari tahun ke tahun terus dikembangkan dan hingga kini CSS telah mencapai versi ke-3 (CSS3).

Mungkin hanya itu sedikit tentang sejarah CSS

C. Mengenal Versi CSS
Saat ini, CSS telah mencapai pada versi yang ketiga, di mana pada setiap versi selalu ada peningkatan. Pada subbab ini penulis akan mengenalkan kepada anda, apa sih perbedaan antara CSS-1, CSS-2, hingga CSS-3.

CSS-1, dikembangkan dan berpusat pada formatting dokumen HTML.
CSS-2, dikembangkan untuk bisa memenuhi kebutuhan terhadap format dokumen supaya bisa ditampilkan di printer. Pada CSS-2 ini mendukung juga dalam penentuan posisi konten, downloadable, font, table-layout, dan media type untuk printer.
CSS-3, merupakan versi pengembangan dari sebelumnya. Pada versi ini terdapat beberapa tambahan dan mengarah pada efek animasi. Namun, saat ini belum semua didukung oleh web browser.

D. Sifat CSS

Ada dua sifat CSS, yaitu internal dan eksternal. Bedanya apa ya?...

Internal, jika kode CSS yang akan dibuat tersebut kita masukkan atau sisipkan ke dalam file kode html. Namun, cara ini akan sungguh merepotkan jika kita membuat file lain dengan metode yang sama. Artinya, kita harus melakukan cara yang sama berulang-ulang (menyisipkan kode CSS ke dalam kode HTML). Bagaimana jika kita membuat 10 file HTML? Maka kita juga akan menyisipkan kode CSS sebanyak 10 kali pula.
Eksternal, pembuat kode CSS dan HTML terpisah. Artinya, kita membuatkan satu file CSS untuk kemudian file CSS tersebut dapat kita panggil berulang-ulang guna dihubungkan dengan file HTML (melalui linked). Cara ini memang sangat disarankan untuk pembuatan desain web karena dapat menyingkat waktu pembuatan.

E. Mengapa CSS

Banyak di antara mereka yang selalu bertanya mengapa CSS? .. bukankah memakai tabel kode HTML saja sudah cukup?.. memang.. tanpa CSS pun web dapat dibangun, namun tahukah anda.. salah satu kunci kesuksesan web agar banyak pengunjung adalah tampilan yang menarik, interaktif, cepat diakses, dan lain-lain. Jika web sangat lambat untuk loading, tentu pengunjung juga akan merasa bosan, malah akan menutup browser web mereka sebelum seluruh informasi dalam web tersebut ditampilkan.
Dengan kita menggunakan CSS, akan banyak keuntungan yang dapat kita peroleh, di antaranya:

Memisahkan pembuatan dokumen (CSS dan HTML).
Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web.
Akses Web lebih cepat di-loading (Mempercepat pembacaan HTML).
Flesibel, Interaktif, Tampilan lebih menarik dan nyaman dipandang.
Ringan FIlesize/Bandwith lebih kecil.
Dapat digunakan pada semua web browser.

F. Bagaimana CSS Bekerja

Cara kerja CSS sangat mudah, kita cukup menuliskan berdasarkan style (selektor, id dan class), maka secara otomatis style tersebut akan bekerja pada dokumen HTML. Tidak ada cara kerja khusus yang diterapkan oleh CSS. Berbeda dengan bahasa pemrograman lain, semisal PHP.

Kita cukup mengatur selektor, id, dan class, untuk kemudian id dan class tersebut kita sesuaikan dan terfapkan pada kode HTML.

Contoh Penulisan Dasar CSS :

Selector { Properti : Value;}

Contohnya Sebgai berikut :

P { Color : blue;}

Keterangan :

Selector = P
Properti = Color
Value = Blue

Karena kita telah menambahkan selektor P, maka setiap dokumen html memakai tag , secara otomatis warna textnya akan berubah menjadi Biru (color : blue).

Jiak kita menggunakan Id, maka formatnya menjadi sepeti berikut :

#Selektor {
Properti : Value;
}

Dan apabila kita menggunakan Class, maka formatnya akan menjadi :

.Selektor {
Properti : Value;
}

F. Refrensi

Wassalmualaikum wr wb.

Membuat Background Parallax dengan CSS

CSS Float

CSS : Div dan Span

CSS Font

CSS Margin & Padding

CSS Border

CSS Background

Syntax CSS

Pengenalan CSS

About Me

M. Firmansyah

Follow Me

ASEAN

Labels

Instagram

Followers

Popular Posts

Labels