Home » Posts filed under Web Disain
Sebuah dinamisasi perpaduan warna dalam desain website akan menjadikan tampilan menjadi lebih sejuk dan harmonis. Seperti layaknya warna gradasi yang akan secara otomatis memberikan warna secara bertingkat dalam sebuah warna tertentu. Hal ini terkadang kita sulit dalam mencari referensi kode warna yang relevan, maka berikut ini merupakan kode-kode warna yang dapat kita gunakan untuk membuat gradasi warna dalam website.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Terkadang dalam mendesain website kita memerlukan referensi kode html dari sebuah warna. Karena tentu saja kita tidak mungkin akan hafal semuanya, dan berikut ini beberapa nama warna beserta kode html nya serta contoh warnanya. Semoga bermanfaat dan memudahkan kita mendesain tampilan website.
| Nama Warna | Kode Warna | Warna |
|---|
| Black | #000000 | |
| Navy | #000080 | |
| DarkBlue | #00008B | |
| MediumBlue | #0000CD | |
| Blue | #0000FF | |
| DarkGreen | #006400 | |
| Green | #008000 | |
| Teal | #008080 | |
| DarkCyan | #008B8B | |
| DeepSkyBlue | #00BFFF | |
| DarkTurquoise | #00CED1 | |
| MediumSpringGreen | #00FA9A | |
| Lime | #00FF00 | |
| SpringGreen | #00FF7F | |
| Aqua | #00FFFF | |
| Cyan | #00FFFF | |
| MidnightBlue | #191970 | |
| DodgerBlue | #1E90FF | |
| LightSeaGreen | #20B2AA | |
| ForestGreen | #228B22 | |
| SeaGreen | #2E8B57 | |
| DarkSlateGray | #2F4F4F | |
| DarkSlateGrey | #2F4F4F | |
| LimeGreen | #32CD32 | |
| MediumSeaGreen | #3CB371 | |
| Turquoise | #40E0D0 | |
| RoyalBlue | #4169E1 | |
| SteelBlue | #4682B4 | |
| DarkSlateBlue | #483D8B | |
| MediumTurquoise | #48D1CC | |
| Indigo | #4B0082 | |
| DarkOliveGreen | #556B2F | |
| CadetBlue | #5F9EA0 | |
| CornflowerBlue | #6495ED | |
| MediumAquaMarine | #66CDAA | |
| DimGray | #696969 | |
| DimGrey | #696969 | |
| SlateBlue | #6A5ACD | |
| OliveDrab | #6B8E23 | |
| SlateGray | #708090 | |
| SlateGrey | #708090 | |
| LightSlateGray | #778899 | |
| LightSlateGrey | #778899 | |
| MediumSlateBlue | #7B68EE | |
| LawnGreen | #7CFC00 | |
| Chartreuse | #7FFF00 | |
| Aquamarine | #7FFFD4 | |
| Maroon | #800000 | |
| Purple | #800080 | |
| Olive | #808000 | |
| Gray | #808080 | |
| Grey | #808080 | |
| SkyBlue | #87CEEB | |
| LightSkyBlue | #87CEFA | |
| BlueViolet | #8A2BE2 | |
| DarkRed | #8B0000 | |
| DarkMagenta | #8B008B | |
| SaddleBrown | #8B4513 | |
| DarkSeaGreen | #8FBC8F | |
| LightGreen | #90EE90 | |
| MediumPurple | #9370D8 | |
| DarkViolet | #9400D3 | |
| PaleGreen | #98FB98 | |
| DarkOrchid | #9932CC | |
| YellowGreen | #9ACD32 | |
| Sienna | #A0522D | |
| Brown | #A52A2A | |
| DarkGray | #A9A9A9 | |
| DarkGrey | #A9A9A9 | |
| LightBlue | #ADD8E6 | |
| GreenYellow | #ADFF2F | |
| PaleTurquoise | #AFEEEE | |
| LightSteelBlue | #B0C4DE | |
| PowderBlue | #B0E0E6 | |
| FireBrick | #B22222 | |
| DarkGoldenRod | #B8860B | |
| MediumOrchid | #BA55D3 | |
| RosyBrown | #BC8F8F | |
| DarkKhaki | #BDB76B | |
| Silver | #C0C0C0 | |
| MediumVioletRed | #C71585 | |
| IndianRed | #CD5C5C | |
| Peru | #CD853F | |
| Chocolate | #D2691E | |
| Tan | #D2B48C | |
| LightGray | #D3D3D3 | |
| LightGrey | #D3D3D3 | |
| PaleVioletRed | #D87093 | |
| Thistle | #D8BFD8 | |
| Orchid | #DA70D6 | |
| GoldenRod | #DAA520 | |
| Crimson | #DC143C | |
| Gainsboro | #DCDCDC | |
| Plum | #DDA0DD | |
| BurlyWood | #DEB887 | |
| LightCyan | #E0FFFF | |
| Lavender | #E6E6FA | |
| DarkSalmon | #E9967A | |
| Violet | #EE82EE | |
| PaleGoldenRod | #EEE8AA | |
| LightCoral | #F08080 | |
| Khaki | #F0E68C | |
| AliceBlue | #F0F8FF | |
| HoneyDew | #F0FFF0 | |
| Azure | #F0FFFF | |
| SandyBrown | #F4A460 | |
| Wheat | #F5DEB3 | |
| Beige | #F5F5DC | |
| WhiteSmoke | #F5F5F5 | |
| MintCream | #F5FFFA | |
| GhostWhite | #F8F8FF | |
| Salmon | #FA8072 | |
| AntiqueWhite | #FAEBD7 | |
| Linen | #FAF0E6 | |
| LightGoldenRodYellow | #FAFAD2 | |
| OldLace | #FDF5E6 | |
| Red | #FF0000 | |
| Fuchsia | #FF00FF | |
| Magenta | #FF00FF | |
| DeepPink | #FF1493 | |
| OrangeRed | #FF4500 | |
| Tomato | #FF6347 | |
| HotPink | #FF69B4 | |
| Coral | #FF7F50 | |
| Darkorange | #FF8C00 | |
| LightSalmon | #FFA07A | |
| Orange | #FFA500 | |
| LightPink | #FFB6C1 | |
| Pink | #FFC0CB | |
| Gold | #FFD700 | |
| PeachPuff | #FFDAB9 | |
| NavajoWhite | #FFDEAD | |
| Moccasin | #FFE4B5 | |
| Bisque | #FFE4C4 | |
| MistyRose | #FFE4E1 | |
| BlanchedAlmond | #FFEBCD | |
| PapayaWhip | #FFEFD5 | |
| LavenderBlush | #FFF0F5 | |
| SeaShell | #FFF5EE | |
| Cornsilk | #FFF8DC | |
| LemonChiffon | #FFFACD | |
| FloralWhite | #FFFAF0 | |
| Snow | #FFFAFA | |
| Yellow | #FFFF00 | |
| LightYellow | #FFFFE0 | |
| Ivory | #FFFFF0 | |
| White | #FFFFFF | |
sumber : W3Schools
Bagi kita yang sering otak-atik web maupun blog tentu saja akan sangat senang sekali apabila kita juga bisa menambahkan beberapa style pada judul maupun sub judul yang ada di halaman postingan. Sebagai contoh kita akan menambahkan style berupa Neon Glow (teks kelihatan menyala) pada sub judul h3.
Untuk membuat seperti pada gambar diatas kita hanya sedikit mengedit CSS pada h3. Jika kita menempatkan bayangan kabur di balik teks, dengan nol offset, kita akan dapat menciptakan cahaya disekitar huruf tersebut. Dan apabila cahaya dari sebuah bayangan tidak cukup kuat, maka kita dapat mengulangi bayangan yang sama beberapa kali. Sebagai contoh seperti berikut ini :
h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F}
Selanjutnya bagaimana merubahnya ? yup, tentu saja kita edit pada CSS nya. silahkan dicari CSS yang berkaitan dengan h3 atau pun yang lain misalnya h1, h2 atau terserah temen-temen.
Untuk melihat secara detail berikut ini ada contoh script dari halaman yang sudah saya buat seperti contoh diatas. Silahkan dicopy dan simpan pada halaman Notepad kemudian Save As Html.
Setelah temen-temen baca semua artikel
Mengenal Semua Jenis CMS bag. 1 dan
Mengenal Semua jenis CMS bag.2
Maka sekarang kita akan masuk pada bagian yang ketiga, silahkan disimak....
CMS Made
Simple adalah sebuah CMS yang bersifat Open Source berbasis PHP dan menggunakan
Mysql sebagai databasenya. CMS ini memungkinkan kita untuk memanajement sebuah
web lebih cepat karena cara penggunaan nya tergolong yang mudah untuk digunakan
(friendly). Mulai dari instalasi hinnga manajemennya bisa dikatakan mudah.
Zikula
adalah aplikasi framework dengan lisensi open source atau gratis. Apapun yang
Anda butuhkan, Zikula akan memberikan solusi untuk Anda. Tidak peduli apakah
itu website perusahaan bonafit dengan ecommerce, sebuah blog yang sederhana
atau situs komunitas, Zikula dapat memberikan solusi.
DokuWiki
adalah CMS Wiki yang sangat mudah untuk digunakan, terutama untuk membuat
dokumen apapun. DokuWiki ditargetkan untuk perusahaan kecil, kelompok kerja dan
tim pengembang.
LimeSurvey
(sebelumnya bernama PHPSurveyor) adalah sebuah aplikasi PHP yang berbasis web
dan memiliki lisensi gratis. LimeSurvey memungkinkan Anda untuk mendevelop,
mempublikasin dan mengumpulkan responden secara offline dan online.
glFusion
adalah sebuah CMS atau content management system dengan lisensi open source
yang dikembangkan dengan PHP untuk membuat blog, forum, gallery dan download.
Podcast
Generator adalah sebuah aplikasi podcast berbasis web dengan lisensi gratis dan
ditulis dengan PHP. Podcast Generator memungkinkan untuk mengupload file media
(dengan format audio) melalui web dan secara otomatis membuat podcast
w3c-compliant.
PyroCMS
adalah sebuah modul, mendukung penggunaan theme dan CMS yang sangat ringan yang
dibangun dengan menggunakan PHP framework CodeIgniter.PyroCMS di desain untuk
memudahkan para developer dalam membuat modul-modul untuk para penggunanya.
BoxBilling
adalah sebuah software billing gratis yang dapat membantu memanagement klien
dan tagihan Anda. BoxBilling sangat cocok untuk sebuah perusahaan web hosting
dan user yang melakukan penjualan secara online.
Pixie
adalah sebuah aplikasi berbasis web dengan lisensi opensource atau gratis yang
dapat membantu Anda untuk membuat sebuah website. Kebanyakan orang menyebut
Pixie sebagai sebuah CMS atau Content Management System, namun kami lebih suka
menyebutnya dengan sebuah pembuat website yang ringan dan mudah digunakan.
AdaptCMS
adalah sebuah sistem manajemen konten (CMS) yang ditulis dalam PHP, menggunakan
database MySQL. AdaptCMS memungkinkan user mengontrol semua aspek dalam website
mereka. Selain itu, AdaptCMS juga telah dilengkapi fitur-fitu yang menarik
seperti template, kustom field, kategori dan lain-lain.
Tiki
adalah sebuah aplikasi web yang sangat powerful yang dibuat oleh sebuah
komunitas yang besar. Tiki merupakan tool yang ideal untuk digunakan dalam
membuat dan memaintenance website atau membuat project lainnya secara online.
PivotX
adalah CMS dengan lisensi gratis yang dapat membantu Anda membuat sebuah situs
dinamis seperti weblog, jurnal online dan lainnya. PivotX ditulis dalam PHP dan
menggunakan MySQL atau flat file sebagai suatu database.
demikianlah sekian banyak CMS dan aplikasi website yang bisa kita gunakan dengan gratis, namun tentu saja masih banyak juga yang belum dipaparkan di postingan ini. Semoga menambah pengetahuan dan bermanfaat untuk kita semua.
baca juga :
Mengenal Semua Jenis CMS bag. 1
Mengenal Semua jenis CMS bag.2
Blog ini rifro dedikasikan untuk temen-temen yang sedang mencari Tutorial, Tips dan Info-info seputar Teknologi Terbaru. IT Perkantoran dan umum juga menjadi fokus blog ruumit.
