Tips dan Tricks CSS (Cascading Style Sheets)
Saya tadinya sangat awam dan sangat malas untuk belajar Cascading Style Sheets atau CSS karena sering bikin pusing dan sangat membosankan, tapi setelah mengenal internet apalagi setelah mempunyai blog, mau tidak mau (awalnya terpaksa) harus mulai belajar dan mengenal apa itu css dan seluk beluknya. Ternyata belajar CSS itu mulai mengasikkan dan bisa betah ber-jam-jam di depan komputer, sampai-sampai kadang malah sedikit mengabaikan untuk mengupdate blog atau membuat postingan.
Supaya tidak lupa dari sedikit yang pernah saya pelajari, ijinkan saya untuk mengarsipkannya, dan siapa tahu malah mungkin bermanfaat untuk pengunjung blog ini.
1. CSS Drop Caps
p:first-letter { font-size : 300%; font-weight : bold; float : left; width : 1em; }
2. Capitalize Text
{text-transform: capitalize;} {text-transform: lowercase;} {text-transform: uppercase:}
capitalize = Mentransformasi karakter pertama dari setiap kata menjadi huruf besar.
lowercase = Mentransformasi semua karakter menjadi huruf kecil
uppercase = Mentransformasi semua karakter menjadi huruf besar
3. CSS Text Shadow
Regular text shadow kodenya : { text-shadow: 1px 1px 1px #000; } Multiple shadows : { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }
4. Rounded Corners tanpa gambar.
Berikut ini adalah cara sederhana untuk membuat bulatan sudut DIV menggunakan beberapa atribut css. Cara ini bisa berfungsi di Firefox, Safari, Chrome dan browser CSS3-lain yang kompatibel, untuk saat ini belum suport di Internet Explorer (IE).
div { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
Untuk membuat bulatan/lengkungan pada sudut tertentu, misalkan sudut kiri atas.
div { -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }
5. Browser Opacity.
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
6. Rotate Text menggunakan CSS.
.rotate-style { /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
Dan masih banyak lagi yang belum sempat saya arsipkan, insya Allah di postingan berikutnya akan saya lengkapi.
Emng sulit belajar CSS, butuh pemikiran extra….
Reply
alamendah Reply:14-09-2010 at 15:59
(Maaf) izin mengamankan KEDUAX dulu. Boleh, kan?!
Alamendah’s Blog mengucapkan selamat idul fitri 1 Syawal 1431 H.
Mohon maaf lahir batin
Reply
alamendah Reply:14-09-2010 at 15:59
(Maaf) izin mengamankan KETIGAX dulu. Boleh, kan?!
Alamendah’s Blog mengucapkan selamat idul fitri 1 Syawal 1431 H.
Mohon maaf lahir batin
Reply
alamendah Reply:14-09-2010 at 16:00
(Maaf) izin mengamankan KEEMPAX dulu. Boleh, kan?!
Alamendah’s Blog mengucapkan selamat idul fitri 1 Syawal 1431 H.
Mohon maaf lahir batin
Reply
alamendah Reply:14-09-2010 at 16:00
(Maaf) izin mengamankan KELIMAAAX dulu. Boleh, kan?!
Alamendah’s Blog mengucapkan selamat idul fitri 1 Syawal 1431 H.
Mohon maaf lahir batin
Reply
toko barcode Reply:16-09-2010 at 13:44
Turut Ucapkan Minal Aidin Wal Faidzin, Maaf Lahir dan bathin
Reply
Muhammad Faisal Aziz Reply:18-09-2010 at 08:21
Izin nyemplit di keduaxx ya…
[fl] blogs mengucapkan selamat iedul fitri 1 Syawal 1431 H,Taqabalallahu Minna Wa Minkum Shiyaamanaa wa shiyaamakum..Minal Aidzin wal faidzin mohon maaf lahir dan bathin
Reply
Muhammad Faisal Aziz Reply:18-09-2010 at 08:22
Mohon maaf lahir dan batin
Reply
munir ardi Reply:20-09-2010 at 03:16
akhirnya mas alam back apa kabar mas
Reply
Fikri Reply:14-09-2010 at 17:00
Itu kodenya dipasang dimana mas?
Reply
toko barcode Reply:16-09-2010 at 13:44
iya dipasang dimana ya apa di posting
Reply
Muhammad Faisal Aziz Reply:18-09-2010 at 08:26
saya gak tau cara masangnya dimana
Reply
Hari Mulya Reply:29-09-2010 at 09:11
saya juga kurang tahu, tuh…
Reply
Muhammad Faisal Aziz Reply:15-09-2010 at 10:30
dicoba dulu ah…semoga berhasil
Reply
toko barcode Reply:16-09-2010 at 13:45
aku juga penasaran untuk mencoba
Reply
Hari Mulya Reply:29-09-2010 at 09:12
katanya ga tahu cara masangnya, kok dicoba? :D
Reply
Hybrid car Reply:16-09-2010 at 10:01
Script lagi…
tapi lumayan, sekarang sudah sedikit bisa mengikuti…. :D
Reply
Muhammad Faisal Aziz Reply:21-09-2010 at 16:53
sekarang gak fokus buat script
Reply
Hybrid car Reply:16-09-2010 at 10:19
Awalnya begitu sob….tapi lama-lama terbiasa juga…
Reply
toko barcode Reply:16-09-2010 at 13:41
rumit tapi menarik untuk di praktekin
Reply
Hybrid car Reply:18-09-2010 at 11:07
betul…betul…betul… :D
Reply
Muhammad Faisal Aziz Reply:21-09-2010 at 16:53
nanti akan dicoba oleh saya
Reply
Hari Mulya Reply:29-09-2010 at 09:10
gampang-gampang susah…
Reply
interest !
bookmark y
Reply
M.Niam Reply:15-09-2010 at 18:54
Silahkan, tak ape-ape kok.
Reply
toko barcode Reply:16-09-2010 at 13:45
sama nih boleh di bookmark ya Kang alwi
Reply
Muhammad Faisal Aziz Reply:21-09-2010 at 16:54
bookmark dulu,sebelum komentar
Reply
wah kapan2 kembali kesini bang mau tahu lebih dalam lagi nih…
Reply
Hybrid car Reply:17-09-2010 at 10:11
Salam kenal bung reza…
Reply
Muhammad Faisal Aziz Reply:21-09-2010 at 16:54
salam kenal ya,selamat datang disini
Reply
Hybrid car Reply:22-09-2010 at 12:40
Salam kenal juga bung Faisal…
Reply
ha..ha..ha..
beLajar CSS emang bisa buat artikeL posting..
keasyikan bikin aneka kreasi CSS, apaLagi pake CSS3..
dah lama nih saya ga buat artikeL dengan CSS…
Reply
Hari Mulya Reply:15-09-2010 at 09:42
maksudnya: “beLajar CSS emang bisa bikin lupa membuat artikeL posting..”
Reply
Muhammad Faisal Aziz Reply:21-09-2010 at 16:56
bener juga sih,tapi belajar CSS bikin pusing
Reply
wah..sy juga lagi cari tau ttg CSS nih.. sambil belajar terus..Thanks 4 share
Reply
Ane pernah sampe 1 pekan utak-atik CSS sebuah theme, dari jam 5 pagi ampe jam 11 malem tiap hari, tetep gak mudeng. PUSINGGGGGGGG…
Reply
Hybrid car Reply:17-09-2010 at 10:11
hehehe…menarik nih…bisa jadi bahan penelitian… :D
Reply
Muhammad Faisal Aziz Reply:21-09-2010 at 16:57
sedang menelitinya juga,pusing kalau lihat script nya
Reply
munir ardi Reply:20-09-2010 at 03:11
aku juga nggak tahu apa-apa mas sama dong kalau gitu
Reply
kalau sudah ada yang ginian tinggal kopas kan mas
boleh kan
Reply
citromduro Reply:16-09-2010 at 00:33
terus terang terang terus saya masih pusing dengan css dan html
Reply
citromduro Reply:16-09-2010 at 00:34
masih sebagian kecil dan yang kecil-kecil yang saya pahami
Reply
citromduro Reply:16-09-2010 at 00:34
tapi masih sering lupa juga kalau tidak lihat catatan
salam dari pamekasan madura
Reply
Muhammad Faisal Aziz Reply:21-09-2010 at 16:57
html ada kemungkinan bisa,rabun tentang CSS
Reply
Muhammad Faisal Aziz Reply:21-09-2010 at 16:58
tapi berusaha untuk bisa CSS nih
Reply
Hybrid car Reply:17-09-2010 at 10:12
Copas saja mas…saya sudah kemarin-kemarin…hehe..
Reply
munir ardi Reply:20-09-2010 at 03:11
ha ha emang perlu karena kita belum ahli
Reply
mantaf sekali nih triks nya, Kang Alwi emang jagoan
Reply
toko barcode Reply:16-09-2010 at 13:46
Selalu ada hal baru setiap berkunjung ke blog ini terutama tentang WordPress
Reply
munir ardi Reply:20-09-2010 at 03:10
kang alwi gitu lo wp expert
Reply
Terimakasih untuk info CSSnya dan salam kenal sobat. Ditunggu kunjungan dan komentarnya juga di postinganku ya ?
[http://kwangkxz2010.blogdetik.com/2010/09/11/bersyukur/]
Reply
munir ardi Reply:20-09-2010 at 03:10
wah kemana-mana ya mas semoga sukses kontesnya
Reply
Mas Alwi, blognya menarik, ditunggu lagi lho artikelnya
Reply
munir ardi Reply:20-09-2010 at 03:09
lha emang menarik kok
Reply
Hybrid car Reply:20-09-2010 at 08:57
sudah bertahun-tahun…kok baru sekarang bilang menarik bung hendri ? hehehe…
Reply