Minggu, 27 Oktober 2019

Membuat animasi background website berubah-ubah warna

Membuat animasi background website berubah-ubah warna
Membuat animasi background website agar bisa berubah-ubah warna saat ini sangat mudah diterapkan, tentunya dengan hadirnya CSS3 khususnya fitur animasi di CSS3 membuat hal ini semakin memungkinkan untuk dibuat dengan cepat.
Background website yang berubah-ubah bisa menarik perhatian pengunjung website, tentunya bisa digunakan untuk menunjang tampilan website jika digunakan pada website yang tepat dan dengan penggunaan / penempatan animasi yang menarik.

Kali ini Tutorial-Webdesign.com akan memberikan tutorial singkat bagaimana membuat warna background website bisa berubah-ubah dengan bantuan css animation.
Artikel Terkait:

Membuat Struktur HTML

Pada demo ini tidak ada tag html yang khusus, karena kita hanya akan fokus pada background
<div class="content">
 
 <h1>Tutorial Web Design Indonesia</h1>
 <p><a href="http://www.tutorial-webdesign.com">http://www.tutorial-webdesign.com</a></p>

</div>
disitu terlihat bahwa kita hanya akan menampilkan tulisan “Tutorial Web Design Indonesia”

Memberi Efek Animasi Dengan CSS

Untuk membuat background bisa berubah warna maka kita membutuhkan fitur animation dari CSS3, seperti ini kode nya
body{
 background-color: #f1c40f;
 -webkit-animation: color 5s ease-in  0s infinite alternate running;
 -moz-animation: color 5s linear  0s infinite alternate running;
 animation: color 5s linear  0s infinite alternate running;
}

/* Animasi + Prefix untuk browser */
@-webkit-keyframes color {
    0% { background-color: #f1c40f; }
    32% { background-color: #e74c3c; }
    55% { background-color: #9b59b6; }
    76% { background-color: #16a085; }
    100% { background-color: #2ecc71; }
}
@-moz-keyframes color {
     0% { background-color: #f1c40f; }
    32% { background-color: #e74c3c; }
    55% { background-color: #9b59b6; }
    76% { background-color: #16a085; }
    100% { background-color: #2ecc71; }
}
@keyframes color {
  0% { background-color: #f1c40f; }
    32% { background-color: #e74c3c; }
    55% { background-color: #9b59b6; }
    76% { background-color: #16a085; }
    100% { background-color: #2ecc71; }
}
Disitu terlihat bahwa animasi akan dilakukan selama 5 detik dengan membuat perubahan background dalam 5 tahap dan akan diulang terus dengan perintah infinite.
di Tidak ada komentar:

Daftar Kode Warna Pada PHP,HTML & CSS

Daftar Kode Warna Pada HTML & CSS



Pada pemrograman, pewarnaan dilakukan dengan menggunakan kode. Bagi Anda yang sudah terbiasa dengan desain komputer pasti tidak asing dengan beberapa kode seperti #92a8d1 dan #ff0000. Kedua kode tersebut merupakan kode warna hexadecimal.
Ada beberapa tipe kode warna yang biasanya digunakan di dalam pemrograman komputer, yaitu berbentuk hexadecimal, RGB, RGBA, HSL, dan HSLA.
Hexadesimal tersusun dari kombinasi huruf dan angka dengan diawali dengan tanda ‘#’. Sedangkan RGB terdiri dari 3 bagian angka yang terpisah oleh tanda koma. Kode warna pada HTML menggunakan HTML triplets. Setiap dua digit kode melambangkan warna-warna red (merah), green (hijau), blue (biru) atau #RRGGBB.
Di bawah ini adalah list kode warna HTML lengkap yang dapat Anda gunakan sebagai panduan untuk menyusun kode warna.
Daftar isi  tutup 
1 Daftar Kode Warna HTML Lengkap
2 Cara Menggunakan Kode Warna HTML & CSS
2.1 Cara Menggunakan Kode Warna HTML di Karakter
2.2 Cara Menggunakan Kode Warna HTML di Background
3 Daftar Kode Warna Pada HTML & CSS
3.1 Kesimpulan

Daftar Kode Warna HTML Lengkap

Warna merupakan hal penting dan unik dalam dunia desain visual. Warna tidak memiliki bentuk, ukuran maupun simbol untuk menyampaikan pesan secara langsung. Sehingga Anda perlu untuk mengetahui warna apa saja yang cocok digunakan di dalam website.
Di bawah ini tabel kode warna HTML & CSS yang dapat Anda gunakan untuk memperindah website. Tidak hanya memperindah, banyak faktor lain yang dipengaruhi oleh warna. Lebih jelasnya Anda dapat membaca ulasan kami mengenai Menentukan Warna Efektif untuk Desain Website Anda. Tentang bagaimana warna itu sangat penting.
Nama WarnaHEXRGB
.
Alice Blue#F0F8FFrgb(240, 248, 254)
.
Antique White#FAEBD7rgb(251, 235, 217)
.
Aqua#00FFFFrgb(0, 255, 254)
.
Aquamarine#7FFFD4rgb(115, 255, 216)
.
Azure#F0FFFFrgb(239, 255, 255)
.
Beige#F5F5DCrgb(245, 245, 223)
.
Bisque#FFE4C4rgb(255, 227, 200)
.
Black#000000rgb(0, 0, 0)
.
Blanched Almond#FFEBCDrgb(255, 234, 208)
.
Blue#0000FFrgb(0, 0, 255)
.
Blue Violet#8A2BE2rgb(138, 43, 226)
.
Brown#A52A2Argb(165, 42, 42)
.
Burly Wood#DEB887rgb(222, 184, 135)
.
Cadet Blue#5F9EA0rgb(95, 158, 160)
.
Chartreuse#7FFF00rgb(127, 255, 1)
.
Chocolate#D2691Ergb(210, 105, 30)
.
Coral#FF7F50rgb(251, 127, 80)
.
Cornflower Blue#6495EDrgb(100, 149, 237)
.
Cornsilk#FFF8DCrgb(225, 248, 220)
.
Crimson#DC143Crgb(220, 20, 60)
.
Cyan#00FFFFrgb(62, 254, 255)
.
Dark Blue#00008Brgb(0, 0, 139)
.
Dark Cyan#008B8Brgb(29, 139, 139)
.
Dark Golden Rod#B8860Brgb(184, 134, 11)
.
Dark Gray#A9A9A9rgb(169, 169, 169)
.
Dark Green#006400rgb(19, 100, 0)
.
Dark Khaki#BDB76Brgb(189, 183, 107)
.
Dark Magenta#8B008Brgb(139, 0, 140)
.
Dark Olive Green#556B2Frgb(85, 107, 47)
.
Dark Orange#FF8C00rgb(251, 140, 1)
.
Dark Orchid#9932CCrgb(153, 50, 204)
.
Dark Red#8B0000rgb(139, 5, 0)
.
Dark Salmon#E9967Argb(233, 150, 122)
.
Dark Sea Green#8FBC8Frgb(143, 188, 144)
.
Dark Slate Blue#483D8Brgb(72, 61, 139)
.
Dark Slate Gray#2F4F4Frgb(47, 79, 79)
.
Dark Turquoise#00CED1rgb(48, 206, 209)
.
Dark Violet#9400D3rgb(148, 0, 211)
.
Deep Pink#FF1493rgb(249, 19, 147)
.
Deep Sky Blue#00BFFFrgb(43, 191, 254)
.
Dim Gray#696969rgb(105, 105, 105)
.
Dodger Blue#1E90FFrgb(30, 144, 255)
.
Fire Brick#B22222rgb(178, 34, 33)
.
Floral White#FFFAF0rgb(255, 250, 240)
.
Forest Green#228B22rgb(34, 139, 35)
.
Fuchsia#FF00FFrgb(249, 0, 255)
.
Gainsboro#DCDCDCrgb(220, 220, 220)
.
Ghost White#F8F8FFrgb(248, 248, 255)
.
Gold#FFD700rgb(253, 215, 3)
.
Golden Rod#DAA520rgb(218, 165, 32)
.
Gray#808080rgb(128, 128, 128)
.
Green#008000rgb(27, 128, 1)
.
Green Yellow#ADFF2Frgb(173, 255, 48)
.
Honey Dew#F0FFF0rgb(240, 255, 240)
.
Hot Pink#FF69B4rgb(240, 255, 240)
.
Indian Red#CD5C5Crgb(205, 92, 92)
.
Indigo#4B0082rgb(75, 0, 130)
.
Ivory#FFFFF0rgb(255, 255, 239)
.
Khaki#F0E68Crgb(240, 230, 140)
.
Lavender#E6E6FArgb(230, 230, 250)
.
Lavender Blush#FFF0F5rgb(254, 240, 245)
.
Lawn Green#7CFC00rgb(124, 252, 2)
.
Lemon Chiffon#FFFACDrgb(255, 250, 205)
.
Light Blue#ADD8E6rgb(173, 216, 230)
.
Light Coral#F08080rgb(240, 128, 128)
.
Light Cyan#E0FFFFrgb(224, 255, 255)
.
Light Golden Rod Yellow#FAFAD2rgb(250, 250, 210)
.
Light Gray#D3D3D3rgb(211, 211, 211)
.
Light Green#90EE90rgb(144, 238, 144)
.
Light Pink#FFB6C1rgb(252, 182, 193)
.
Light Salmon#FFA07Argb(251, 160, 122)
.
Light Sea Green#20B2AArgb(40, 178, 170)
.
Light Sky Blue#87CEFArgb(135, 206, 250)
.
Light Slate Gray#778899rgb(119, 136, 153)
.
Light Steel Blue#B0C4DErgb(176, 196, 222)
.
Light Yellow#FFFFE0rgb(255, 255, 224)
.
Lime#00FF00rgb(63, 255, 0)
.
Lime Green#32CD32rgb(50, 205, 50)
.
Linen#FAF0E6rgb(250, 240, 230)
.
Magenta#FF00FFrgb(249, 0, 255)
.
Maroon#800000rgb(128, 4, 0)
.
Medium Aqua Marine#66CDAArgb(102, 205, 170)
.
Medium Blue#0000CDrgb(0, 0, 205)
.
Medium Orchid#BA55D3rgb(186, 85, 211)
.
Medium Purple#9370DBrgb(147, 112, 219)
.
Medium Sea Green#3CB371rgb(60, 179, 113)
.
Medium Slate Blue#7B68EErgb(123, 103, 238)
.
Medium Spring Green#00FA9Argb(62, 250, 153)
.
Medium Turquoise#48D1CCrgb(72, 209, 204)
.
Medium Violet Red#C71585rgb(199, 21, 133)
.
Midnight Blue#191970rgb(25, 25, 112)
.
Mint Cream#F5FFFArgb(245, 255, 250)
.
Misty Rose#FFE4E1rgb(254, 228, 225)
.
Moccasin#FFE4B5rgb(254, 228, 181)
.
Navajo White#FFDEADrgb(254, 222, 173)
.
Navy#000080rgb(0, 0, 128)
.
Old Lace#FDF5E6rgb(253, 245, 230)
.
Olive#808000rgb(128, 128, 1)
.
Olive Drab#6B8E23rgb(107, 142, 35)
.
Orange#FFA500rgb(252, 165, 3)
.
Orange Red#FF4500rgb(250, 69, 1)
.
Orchid#DA70D6rgb(218, 112, 214)
.
Pale Golden Rod#EEE8AArgb(238, 232, 170)
.
Pale Green#98FB98rgb(152, 251, 153)
.
Pale Turquoise#AFEEEErgb(175, 238, 239)
.
Pale Violet Red#DB7093rgb(219, 112, 147)
.
Papaya Whip#FFEFD5rgb(254, 239, 213)
.
Peach Puff#FFDAB9rgb(253, 218, 185)
.
Peru#CD853Frgb(205, 133, 63)
.
Pink#FFC0CBrgb(252, 192, 203)
.
Plum#DDA0DDrgb(221, 160, 221)
.
Powder Blue#B0E0E6rgb(176, 224, 230)
.
Purple#800080rgb(128, 0, 128)
.
Rebecca Purple#663399rgb(102, 51, 153)
.
Red#FF0000rgb(255, 0, 0)
.
Rosy Brown#BC8F8Frgb(188, 143, 142)
.
Royal Blue#4169E1rgb(65, 105, 225)
.
Saddle Brown#8B4513rgb(139, 69, 19)
.
Salmon#FA8072rgb(250, 128, 114)
.
Sandy Brown#F4A460rgb(244, 164, 95)
.
Sea Green#2E8B57rgb(46, 139, 87)
.
Sea Shell#FFF5EErgb(255, 245, 238)
.
Sienna#A0522Drgb(160, 82, 45)
.
Silver#C0C0C0rgb(192, 192, 192)
.
Sky Blue#87CEEBrgb(135, 206, 235)
.
Slate Blue#6A5ACDrgb(106, 90, 205)
.
Slate Gray#708090rgb(112, 128, 145)
.
Snow#FFFAFArgb(255, 250, 250)
.
Spring Green#00FF7Frgb(63, 255, 128)
.
Steel Blue#4682B4rgb(70, 130, 180)
.
Tan#D2B48Crgb(210, 180, 140)
.
Teal#008080rgb(26, 128, 127)
.
Thistle#D8BFD8rgb(216, 191, 216)
.
Tomato#FF6347rgb(250, 99, 71)
.
Turquoise#40E0D0rgb(64, 224, 208)
.
Violet#EE82EErgb(238, 130, 238)
.
Wheat#F5DEB3rgb(245, 222, 179)
.
White#FFFFFFrgb(255, 255, 255)
.
White Smoke#F5F5F5rgb(245, 245, 245)
.
Yellow#FFFF00rgb(255, 255, 0)
.
Yellow Green#9ACD32rgb(154, 205, 49)
Anda dapat melihat perbedaan mengenai hexadecimal dan RGB.
ColorHTML / CSS
Color Name		Hex Code
#RRGGBB		Decimal Code
(R,G,B)
lightsalmon#FFA07Argb(255,160,122)
salmon#FA8072rgb(250,128,114)
darksalmon#E9967Argb(233,150,122)
lightcoral#F08080rgb(240,128,128)
indianred#CD5C5Crgb(205,92,92)
crimson#DC143Crgb(220,20,60)
firebrick#B22222rgb(178,34,34)
red#FF0000rgb(255,0,0)
darkred#8B0000rgb(139,0,0)
Selain menggunakan kode warna, Anda juga dapat menggunakan generator untuk menentukan kode warna apa saja yang bisa digunakan. Anda dapat menggunakan generator warna yang disediakan oleh beberapa website di bawah ini.
  • W3School HTML Color Picker
    Situs ini dapat Anda gunakan untuk memilih warna berdasarkan warna dasar. Anda dapat memilih tingkat saturasi dan melihat langsung (preview) hasilnya. Selain itu, terdapat juga pilihan untuk memasukkan warna berdasarkan kode dan juga memunculkan jendela HTML 5 untuk pemilihan warna.
  • Colors & SkillshareColors merupakan situs yang digunakan sebagai alat schema generator. Jika Anda seorang desainer, situs ini dapat memberikan saran schema yang sesuai dengan kebutuhan dan juga tersedia kode hexadecimal yang bisa digunakan ke dalam website.
  • HTML Color Code
    HTML Color Code merupakan situs web sederhana yang menyediakan tampilan pemilihan warna. Anda tinggal mengarahkan kursor ke dalam tabel warna atau menggeser slider untuk mendapatkan warna yang sesuai dengan kode warna dalam bentuk hexadecimal.

Cara Menggunakan Kode Warna HTML & CSS

Penggunaan kode warna pada HTML & CSS ketika diterapkan ke dalam website. Kode warna dapat Anda gunakan hampir di semua bagian, seperti karakter, background, dan border.
Berikut beberapa cara menggunakan kode warna HTML dan CSS:

  • Cara Menggunakan Kode Warna HTML di Karakter

<!DOCTYPE html>
<html>
<body>
  <p><font size=”3″ color=”#ff0000″>Daftar Kode Warna Pada HTML & CSS</font></p>
  <p><font size=”2″ color=”#00ff00″>Daftar Kode Warna Pada HTML & CSS</font></p>
  <p><font face=”verdana” color=”#0000ff”>Daftar Kode Warna Pada HTML & CSS</font></p>
  <p><strong>Catatan:</strong> Elemen font hanya mendukung pada HTML 5. Gunakan CSS sebagai ganti</p>
</body>
</html>
Skrip di atas akan menghasilkan tampilan seperti di bawah ini:
Daftar Kode Warna Pada HTML & CSS
Daftar Kode Warna Pada HTML & CSS
Daftar Kode Warna Pada HTML & CSS
Catatan: Elemen font hanya mendukung pada HTML 5. Gunakan CSS sebagai ganti

  • Cara Menggunakan Kode Warna HTML di Background

<!DOCTYPE html>
<html>
<head>
<style>
  #p1 {background-color:#ff0000;}
  #p2 {background-color:#00ff00;}
  #p3 {background-color:#0000ff;}
  #p4 {background-color:#ffff00;}
  #p5 {background-color:#ff00ff;}
</style>
</head>
<body>
  <p>HEX colors:</p>
  <p id=”p1″>Red</p>
  <p id=”p2″>Green</p>
  <p id=”p3″>Blue</p>
  <p id=”p4″>Yellow</p>
  <p id=”p5″>Cerise</p>
</body>
</html>
Kode di atas menghasilkan tampilan seperti ini:
HEX colors:
Red
Green
Blue
Yellow
Cerise
  • Cara Menggunakan Kode Warna HTML di Border
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
   border-style: solid;
   border-color: #92a8d1;
}
div {
   border-style: solid;
   border-color: #92a8d1;
}
</style>
</head>
<body>
  <h1>Daftar Kode Warna Pada HTML & CSS</h1>
  <div>Nilai dari border-color dapat diatur menggunakan angka kode hexadecimal.</div>
  <p><strong>Catatan:</strong> border-color tidak dapat bekerja jika digunakan sendiri. Gunakan properti border-style terlebih dahulu untuk mengatur border.      </p>
</body>
</html>
Skrip di atas akan menampilkan tampilan seperti di bawah ini:

Daftar Kode Warna Pada HTML & CSS

Nilai dari border-color dapat diatur menggunakan angka kode hexadecimal.
Catatan: border-color tidak dapat bekerja jika digunakan sendiri. Gunakan properti border-style terlebih dahulu untuk mengatur border.
di Tidak ada komentar:
Langganan: Postingan (Atom)

Membuat animasi background website berubah-ubah warna

Membuat animasi background website berubah-ubah warna Membuat animasi background website agar bisa berubah-ubah warna saat ini sangat m...