CSS (Cascading Style Sheet) dan Membuat desain foto di CSS

Cascading Style Sheet (CSS)

 

      1. Pengertian
 

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

     Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

     CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

     CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

     Adapun CSS new version yaitu CSS3 adalah standar untuk CSS yang paling baru, banyak batasan website design yang dahulu tidak bisa ditangani oleh CSS sekarang bisa dilakukan dengan CSS3. CSS3 sepenuhnya kompatibel dan pelengkap dari CSS lama, sehingga browser akan selalu mendukung CSS lama dan Anda tidak harus mengubah desain yang sudah ada.

Walaupun CSS 3 adalah sebuah standard CSS baru yang membantu kita dalam memudahkan desain web, tidak semua browser ternyata mensupport CSS 3, misalnya MS Internet Explorer yang sampai artikel ini saya tulis masih belum mendukung CSS 3.

      2. Mendesain dengan CSS

a)   Membuat sudut lengkung pada box model (Rounded Corners)

Sebelum ada CSS3 kita perlu menggunakan gambar dan trik untuk membuat sudut lengkung pada box model seperti div, p dan sebagainya, sekarang dengan CSS 3 anda hanya perlu beberapa detik untuk membuat sudut lengkung, berikut ini tag CSS3 yang kita perlukan untuk membuat sudut lengkung :

b) Membuat Bayangan Box pada CSS3 (box shadow)

Untuk menambahkan bayangan pada sebuah elemen div dan atau elemen HTML lainnya maka pada CSS3 kita bisa menggunakan property box-shadow, pada contoh di atas mari kita tambahkan bayangan :

c) Membuat bingkai foto

Secara umum, jika sebuah gambar ditampilkan di halaman web maka tampilanya sesuai dengan ukuran serta bentuk gambar yang disisipkan. Lihat gambar berikut :

Padahal kita bisa sedikit memberikan sentuhan tanpa harus mengedit gambarnya, misal untuk menambahkan bingkai/frame pada gambar tersebut. Contoh untuk menambahkan bingkai seperti gambar berikut :

Atau bisa juga dengan motif bingkai seperti berikut :

Atau bisa juga dengan model rotasi seperti berikut :

Cara Membuat bingkai gambar dengan css 

Untuk menyisipkan gambar dalam halaman web kita menggunakan perintah html seperti berikut :

<img height="400" width="400" src="nama-file-gambar.jpg" />

Jika kita hanya menggunakan perintah diatas, maka gambar akan ditampilkan seperti biasa. Untuk mengubah tampilanya maka kita perlu menambahkan css.


Untuk bingkai seperti model pertama, anda bisa tambahkan perintah css seperti berikut :

<style type="text/css">
img {
  padding:25px;
  background-color:#000066;
  border-radius:20px;
} 
</style>

Untuk bingkai seperti model kedua, anda bisa tambahkan perintah css seperti berikut :

<style type="text/css">
img {
  padding:50px;
  background-image:url(nama-file-motif.jpg);
  border:1px solid #ccc;
} 
</style>

Untuk bingkai seperti model ketiga, kita harus modifikasi perintah memasukkan gambarnya dengan menambahkan kotak luar yang bisa diwakili oleh <p> atau <div>.

<p class="bingkai">
  <img height="250" width="400" src="nama-file-gambar.jpg" />
</p>

Kemudian baru anda tambahkan css seperti berikut :

<style type="text/css">
.bingkai{
  padding:30px;
  background-image:url(motif-bingkai.jpg);
  width:500px;
  margin:0 auto;
}
.bingkai img{
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
}
</style>

Selain -5deg, anda bisa coba nilai yang lain agar rotasinya sesuai.


d) Menempatkan multiple Background pada satu elemen HTML

Satu tambahan lain pada CSS3 yang harus di catat adalah kita dapat menempatkan Background gambar lebih dari satu pada Elemen HTML

Contohnya bila anda ingin menempatkan 3 gambar di body HTML maka CSSnya adalah sebagai berikut

body {
   background-image:url(gambar1.gif), url(gambar2.gif), url(gambar_seterusnya.jpg);
}

Sumber : http://www.zainalhakim.web.id/posting/css/
                http://w3function.com/blog/