CSS
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Membuat Efek Api pada Teks dengan CSS

Saturday, January 04, 2014 7 Comments

Membuat Efek pada Teks dengan CSS

Glow Effect
Glow Effect
   Kali ini saya akan berbagi ilmu mengenai CSS, yaitu memberikan efek glow (text shadow) pada teks. Ada tiga efek yang akan saya bagi di sini.

1. Fire Effect


Taufan Prihantoro


Script CSS:
.fire{background: black; color: #fefcc9; font-size: 50px; height: 50px; padding-top: 100px; text-align: center; text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; width: 500px;}

2. Neon Light

Taufan Prihantoro

Script CSS:
.neon{background: black; color: #fefcc9; font-size: 50px; height: 50px; padding-top: 100px; text-align: center; text-shadow: text-shadow: 0 0 10px #fff, 0 0 20px #fff,0 0 30px #fff,0 0 40px #ff00de,0 0 70px #ff00de, 0 0 80px #ff00de,0 0 100px #ff00de,0 0 150px #ff00de;}

3. Shadow Effect

Taufan Prihantoro

Script CSS:
.shadow{background: black; color: #fefcc9; font-size: 50px; height: 50px; padding-top: 100px; text-align: center; text-shadow: text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;}

Baca Juga

1. Cara Mudah Membuat Menu Horizontal Keren dengan CSS
2. Ternyata START Bisa Membuat Komputer HANG
3. WOW! PC dan Laptop Anda Bisa Bicara
4. Cara Melewati Adf.ly di Opera Mini
5. Hal yang Harus dilakukan Saat Sandal Jepit Putus
6. WOW! Kata Kunci Ini Akan Membuat Google Menjadi Menakjubkan!

Cara Mudah Membuat Menu Horizontal Keren dengan CSS

Wednesday, January 01, 2014 16 Comments

Menu Horizontal Dengan CSS3 dan HTML5


Membuat menu horizontal menggunakan CSS dan HTML
Menu Horizontal

    Menu seperti ini sering digunakan di Blog sebagai menu navigasi. Tujuannya untuk memudahkan pembaca  untuk menemukan artikel di suatu Blog. Mungkin Anda ingin mengetahui cara membuat menu horizontal seperti itu. Berikut caranya:

1. Buka Notepad.

2. Paste script HTML di bawah ini:
    <!doctype html>
<html>
<head>
<title>Belajar UL Horizontal</title>
<style>

</style>
</head>
<body>
<ul class="float">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pemrograman</a></li>
<li><a href="#">Hiburan</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Daftar Isi</a></li>
</ul>
</body>
</html>

3. Taruh script CSS di bawah ini di dalam tag style:
.float li
{
float: left;
list-style: none;
}
.float li a
{
color:#fff;
text-decoration: none;
font-variant: small-caps;
background:#000;
border: 1px solid black;
padding: 10px 15px;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;
}

.float a:hover
{
text-decoration: none;
background:#fff;
color: #000;
}

 4. Simpan file dengan format .html dan save as type: All Files.


Hasilnya:



Baca Juga

Memadukan Tabel dengan CSS

Friday, December 20, 2013 2 Comments

Memberikan Tabel Sebuah Style yang Menakjubkan

CSS digunakan untuk memberi style pada suatu objek
Tabel

     Untuk memberikan style di sebuah tabel, hal yang diperlukan adalah bahan percobaan yaitu tabel. Script tabelnya :




Script Tabel <table border="1">
<tr>
<td>Nomor Versi Android</td><td>Nama Versi Android</td>
</tr>
<tr>
<td>1.5</td><td>Cupcake</td>
</tr>
<tr>
<td>1.6</td><td>Donut</td>
</tr>
</table>
dan Anda telah mengetahui apa itu CSS.

Memberikan Style collapse

<html>
<head>
<style>
table
{
border-collapse:collapse;
}
</style>
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>Nomor Versi Android</td><td>Nama Versi Android</td>
</tr>
<tr>
<td>1.5</td><td>Cupcake</td>
</tr>
<tr>
<td>1.6</td><td>Donut</td>
</tr>
</table>
</body>
</html>

Style di tag td

a.  Mengatur Align di Tag td

<html>
<head>
<style>
td
{
text-align:center;
}
</style>
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>Nomor Versi Android</td><td>Nama Versi Android</td>
</tr>
<tr>
<td>1.5</td><td>Cupcake</td>
</tr>
</table>
</body>
</html>

b. Mengatur Padding di td

<html>
<head>
<style>
td
{
text-align:center;
padding:15px;
}
</style>
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>Nomor Versi Android</td><td>Nama Versi Android</td>
</tr>
<tr>
<td>1.5</td><td>Cupcake</td>
</tr>
</table>
</body>
</html>

Mengatur Width dan Height Tabel

<html>
<head>
<style>
table
{
width:100px;
height:75px;
}
</style>
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr>
<td>Nomor Versi Android</td><td>Nama Versi Android</td>
</tr>
<tr>
<td>1.5</td><td>Cupcake</td>
</tr>
</table>
</body>
</html>
Baca juga: Kelebihan dan Kekurangan nge-Blog dan Blog

Memberikan Teks Sebuah Style dengan CSS

Thursday, December 19, 2013 Add Comment

Memberikan Style ke dalam Sebuah Kata

CSS bukanlah bahasa pemrograman
CSS

    Kata akan lebih menarik jika kata tersebut memiliki warna yang indah, bentuk yang menarik. Dalam dunia Web untuk memberikan style ke dalam sebuah kata digunakanlah CSS. Dalam menggunakan CSS saya biasanya menggunakan metode Inline Style Sheet atau Internal Style Sheet.

Untuk belajar CSS, Anda harus menguasai HTML.

Membuat HTML dengan Metode Inline Style Sheet dan Internal Style Sheet

A. Memberikan Warna

a. Inline Style Sheet

<html>
<head><title>Belajar CSS</title></head>
<body style="color:blue;">
Tulisan di HTML ini berwarna biru
<h1 style="color:red; text-align:center;">Taufan Prihantoro</h1>
<h1 style="color:green;">Taufan Prihantoro</h1>
</body>
</html>

b. Internal Style Sheet

<html>
<head>
<style>
body
{
color:blue;
}
h1.taufan
{
color:red;
text-align:center;
}
h1.prihantoro
{
color:green;
}
</style>
<title>Belajar CSS</title>
</head>
<body style="color:blue;">
Tulisan di HTML ini berwarna biru
<h1 class="taufan">Taufan Prihantoro</h1>
<h1 class="prihantoro">Taufan Prihantoro</h1>
</body>
</html>


B. Memberikan Garis

a. Inline Style Sheet

<html>
<head><title>Belajar CSS</title></head>
<body>
<h1 style="text-decoration:underline;">Teks bergaris bawah</h1>
<h1 style="text-decoration:overline;">Teks bergaris atas</h1>
<h1 style="text-decoration:line-through;">Teks dicoret</h1> 
</body>
</html>

b. Internal Style Sheet

<html>
<head>
<style>
h1.bawah
{
text-decoration:underline;
}
h1.atas
{
text-decoration:overline;
}
h1.dicoret
{
text-decoration:line-through;
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<h1 class="bawah">Teks bergaris bawah</h1>
<h1 class="atas">Teks bergaris atas</h1>
<h1 class="dicoret">Teks dicoret</h1> 
</body>
</html>

C. Huruf Awal Teks Berhuruf Kapital

a. Inline Style Sheet

<html>
<head><title>Belajar CSS</title></head>
<body>
<h1 style="text-transform:capitalize;">huruf awal di seluruh teks ini berhuruf besar</h1> 
</body>
</html>

b. Internal Style Sheet

<html>
<head>
<style>
h1
{
text-transform:capitalize;
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<h1>huruf awal di seluruh teks ini berhuruf besar</h1> 
</body>
</html>

D. Memberikan Background Pada Teks

a. Inline Style Sheet

<html>
<head><title>Belajar CSS</title></head>
<body>
<p style="background:yellow;">Taufan Prihantoro</p>
<p style="background:lightblue;">Taufan Prihantoro</p>
</body>
</html>

b. Internal Style Sheet

<html>
<head>
<style>
p.yellow
{
background:yellow;
}
p.birumuda
{
background:lightblue;
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<p class="yellow">Taufan Prihantoro</p>
<p class="birumuda">Taufan Prihantoro</p>
</body>
</html>

E. Margin dan Padding

<html>
<head>
<style>
p.margin
{
margin:50px;
background:lightgreen;
}
p.padding
{
padding:50px;
background:lightblue
}
</style>
<title>Belajar CSS</title>
</head>
<body>
<p class="margin">Teks dengan margin 50px</p>
<p class="padding">Teks dengan padding 50px</p>
</body>
</html>

F. Memberikan Efek Shadow

<html>
<head><title>CSS</title>
<style>
h1
{
text-shadow:15px 15px 15px blue ;
text-align:center;
font-size:100px;
color:red;
}
</style>
</head>
<body>
<h1>Taufan Prihantoro</h1>
</body>

Perkenalan Dengan CSS

Monday, December 16, 2013 2 Comments
Semua di CSS
CSS

Pengertian

CSS merupakan suatu “kode” yang digunakan untuk mengatur atau mengedit suatu tulisan. Jadi CSS bukanlah bahasa pemograman. Sama seperti opsi style yang ada di Microsoft Word seperti bold, italic, underline, mengatur paragraf, mengatur spasi, warna background, warna teks, mengatur gambar, border, margin, bla-blablabalbla....

Jadi intinya CSS digunakan untuk mengedit tulisan, image, maupun border, dan masih banyak lagi. File CSS disimpan dengan ekstensi .css. Dengan adanya CSS setiap web mungkin memiliki style yang berbeda, karena CSS yang digunakan atau yang dibuat berbeda.

 Sebelum Anda melanjutkan belajar CSS, diharapkan Anda telah mengerti tentang HTML dan beberapa tagnya, karena ini sangat penting sekali.

Perkembangan

Sampai saat ini terdapat 3 versi CSS, yaitu CSS1, CSS2, dan CSS3.
1. CSS1 dikembangkan pada pemformatan dokumen HTML. 
2. CSS2 dikembangkan untuk memenuhi kebutahan terhadap    format dokumen agar bisa ditampilkan di printer. 
3. CSS3 dapat membuat suatu animasi di halaman web.

Ada tiga cara untuk memasukan CSS ke dalam HTML, yaitu dengan metode  Inline Style Sheet, External Style Sheet, dan Internal Style Sheet.

11.     Inline Style Sheet

Artinya CSS langsung ditulis di dalam tag HTML. Contoh:
            <h1 style=”color:green;”>Hello world</h1>

            h1=Tag HTML, yaitu Heading
            style= Mendeskripsikan bahwa itu adalah CSS
            color= salah satu attribute CSS
            green= value.

      Untuk mengetahui lebih lanjut mengenai attribute yang ada di CSS nanti akan saya bahas.

22.     Internal Style Sheet

           Seperti namanya, CSS ditulis di dalam HTML yaitu di bagian <head>.
     Dengan tag <style> dan tag end </style>.
            Contoh:
Contoh penggunaan CSS untuk mengatur Style



Hasilnya:
Penampilan CSS di web

3.     Eksternal Style Sheet
          CSS ini berada di luar file html. Cara memasukannya dengan menuliskan:
          <link rel=”stylesheet” type=”text/css” href=”namafilecss.css” />

Untuk pembahasan lebih lanjut saya tidak menggunakan Eksternal Style Sheet, karena lebih rumit.
           

Fakta CSS:

a)     Telah didukung oleh banyak browser, tetapi tidak didukung oleh browser lama.

b)    Lebih fleksibel.

c)     Mempercepat memuat file HTML. Karena menggunakan tag HTML yang minimal, karena sudah dilaksanakan oleh CSS.

d)    Dapat menampilkan konten utama terlebih dahulu, setelah itu barulah image ditampilkan.

e)     Penerjemahaan CSS di setiap browser berbeda, tata letak akan berubah.

f)      CSS adalah layouting “Masa Depan”


Ketergantungan

CSS tidak bisa lepas dari sebuah halaman web, karena tanpanya halaman web akan terasa tidak menarik. Hampir semua web yang ada di dunia maya menggunakan CSS. Lebih baik melihat web yang full color kan? Dari pada melihat web yang hitam putih (tahulah bagaimana rasanya menonton Televisi hitam putih).

Anda bisa surfing di search engine mengenai web yang menggunakan CSS tingkat tinggi. Banyak orang yang terkagum-kagum dengan keindahaan web tersebut, karena berbagai style yang menarik.

Tips

Salah satu web yang menyediakan tutorial CSS adalah tympanus.com. Disitu Anda bisa belajar, melihat web dengan CSS, dan mendownload file CSS. Dalam membuat web ada beberapa tahap yaitu:

 1.     Jelajah
      Mengunjungi web yang anda sukai.
2.     Lihat
Lihat struktur webnya seperti apa. Dan Anda aplikasikan ke html. Pahami script-script yang ada.

 3.     Edit
Mulailah mengedit struktur html tersebut. Tujuannya untuk memahami fungsi-fungsi dari script yang di edit.

 4.     Buat
Membuat web sendiri dari ilmu yang telah didapat dari step-step sebelumnya.

 5.     Coba dan gagal
Mencoba web yang telah dibuat. Jika masih gagal itulah pengalaman baru yang didapat. Diamana letak salahnya, apa yang salah, dll. Cobalah untuk mengikuti sikap dari Thomas Alva Edison, yaitu dia menemukan 999 jalan menuju kegagalan untuk mengantarnya kepada tujuan.

Jadi kesimpulannya jangan takut GAGAL!. Jelajah, Lihat, Edit, Buat, Mencoba!

Itulah sedikit pembahasan mengenai CSS. Terima Kasih.

 Baca juga: Kelebihan dan Kekurangan nge-Blog dan Blog
Subscribe to: Comments (Atom)