Clippy – Hasilkan CSS clip-path dengan Cara Praktis

Link

Di dalam CSS, clip-path property memungkinkan kita untuk membuat bentuk-bentuk yang rumit dengan memotong elemen gambar atau foto menjadi bentuk-bentuk dasar seperti lingkaran, elips, poligon dsb. ataupun juga menjadi sesuai bentuk yang dihasilkan source SVG.
Animasi dan transisi CSS juga dapat dihasilkan dengan dua atau lebih bentuk-bentuk clip-path dengan jumlah titik-titik yang sama.

Clippy adalah webtool yang dapat membantu kita dalam menghasilkan CSS clip-path.

Clippy

CodePen

Link

CodePen adalah HTML, CSS, dan JavaScript code editor online dengan preview instan dari kode yang Anda lihat dan tulis. Sangat berguna untuk mempresentasikan pekerjaan Anda dan melihat serta sekaligus belajar dari user CodePen lainnya. CodePen juga bagus untuk memecahkan problem coding dan mendapatkan kritik dari komunitas yang ada di dalamnya.

CodePen

Menggunakan pattern sebagai background website

Standard

Ada banyak cara untuk membuat tampilan sebuah website menarik. Bisa dengan menambahkan illustrasi, menggunakan font yang unik, menggunakan komposisi warna berbeda dengan yang lain, dan lain sebagainya. Satu cara yang lainnya adalah dengan menggunakan pattern. Menggunakan pattern terutama yang bermotif lembut dan transparan sebagai background (latar belakang) suatu website saat ini juga sedang menjadi trend dan hari ini kita akan membahas sedikit tentang penggunaan pattern untuk mempercantik tampilan website.

Pattern sebagai background website

Pattern sebagai background website

Apa saja yang perlu disiapkan?

Digital Pattern

Pertama-tama tentu saja Anda harus menyiapkan pattern. Ada beberapa website yang menyediakan pattern gratis. Anda bisa mengunjungi artikel berikut:

Segera download gambar pattern yang Anda rasa cocok untuk background website Anda melalui situs penyedia pattern gratis yang Anda sukai.

Selain tersedia dalam format Photoshop Pattern (.PAT), pattern gratis biasanya juga tersedia dalam format grafis digital, berupa .PNG, .JPG, atau .GIF yang umumnya berdimensi kecil. Khusus untuk background website, akan lebih praktis jika kita menggunakan pattern berformat grafis digital.

Continue reading

CSS Selector

Standard

Pada artikel sebelumnya tentang CSS Syntax disebutkan bahwa salah satu bagian CSS adalah selector. Pada CSS, terdapat 3 macam selector, yaitu ID, class, dan tag HTML.

Contoh kode CSS

Contoh kode CSS

Selector ID diawali dengan tanda #, selector class diawali dengan tanda . (dot), sedangkan selector tag HTML tidak memerlukan tanda awalan apapun. Cukup dengan mengetikkan langsung nama tag HTMLnya. Pada tutorial ini akan dijelaskan semua hal yang berhubungan dengan CSS Selector.

Continue reading

CSS Syntax

Standard

Syntax bisa diartikan sebagai bentuk kode. Jadi Syntax CSS bisa berarti bentuk kode CSS. Kode CSS berbeda dengan kode HTML. Kode CSS tidaklah sulit.

Contoh syntax CSS. Image from photobucket

Contoh syntax CSS. Image from photobucket

Kode CSS hanya dibagi menjadi 3 bagian, yaitu selector, property, dan value.

selector {
    property : value;
}

Selector adalah elemen HTML yang akan diberikan style. Property adalah atribut dari suatu elemen HTML yang ingin anda tentukan stylenya, sedangkan Value adalah nilai dari atribut tersebut. Untuk memberikan gambaran yang lebih jelas, berikut contoh kodenya:

body {
    background-color:#cccccc;
    font-family: "Calibri", Verdana, Tahoma;
}

Kode CSS diatas bisa berarti elemen body (tag <body>) akan ditampilkan dengan warna background abu-abu (#cccccc adalah kode warna untuk abu-abu), dan pada perintah berikutnya kita menentukan agar elemen body menggunakan font Calibri. Jika font Calibri tidak ada pada komputer user, maka gunakan font Verdana, begitu seterusnya. Penulisan font Calibri menggunakan petik dua adalah karena font Calibri bukan merupakan font standart dalam CSS. Font yang tidak standart dalam CSS sebaiknya diberi tanda petik dua. Font yang namanya terdiri lebih dari satu kata juga harus diberikan tanda petik, misal “Times New Roman”.

Continue reading