Cara Membuat Background Gradien Radial Menggunakan CSS 3
Background adalah sebuah diantara komponen dari desain yang amat urgen, di pembahasan kali ini kita akan merancang sebuah Efek Gradien Radial, Efek Gradien Radial adalah sebuah sebuah effect yang diraih oleh perubahan antara dua buah warna tau lebih, nah di Background Gradien Radial ini akan menyusun sebuah gradien warna yang menyusun sebuah lingkaran. Background Gradien ini pun dapat merancang tampilan blog yang kita miliki menjadi lebih menarik, di panduan Cara Merancang Background Gradien Radial Menggunakan CSS 3 kita akan mencoba merancang sebuah background dengan menggunakan Greadiasi radial.
Cara Merancang Background Gradien Radial Menggunakan CSS 3 langkah pertama-tama silahkan teman-teman buka text editornya berikutnya silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Merancang Background Gradien Radial Menggunakan CSS 3</title>
<link rel=stylesheet type=text/css href=style.css>
</head>
<body>
<div class=container>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing sistem like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>
Setelah kita merancang file index.html nya, berikutnya kita akan merancang sebuah file bagi mengatur CSS dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama style.css
*{margin:0; padding:0;}
.container {
width: 500px;
height:300px;
margin:auto;
background: -webkit-radial-gradient(circle, green, yellow, red); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient(circle, green, yellow, red); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, green, yellow, red); /* For Fx 3.6 to 15 */
background: radial-gradient(circle, green, yellow, red);
padding:20px;}Di file style.css terdapat sebuah script background: radial-gradient(circle, green, yellow, red); yang berfungsi selaku mengatur dari warna gradien yang ingin kita tampilkan, dan di script tersebut teman-teman lazimnya mengganti warnanya sesuai dengan inginkan, sekiranya kita jalankan script yang terdapat diatas karenanya akan terlihat seperti dibawah ini.
Bagai mana teman-teman lumayan gampang bukan Cara Merancang Background Gradien Radial Menggunakan CSS 3, sekianlah dulu panduan saya kali ini mengenai Cara Merancang Background Gradien Radial Menggunakan CSS 3.
Semoga bermanfaat
Terimakasih.
Sumber https://kursuswebsite.org
