Cara Mudah Membuat Gradient Warna Keren Dalam 4 Style di Blog
Hallo Gengs,
Balik lagi dengan RozorTech.net, yang selalu membahas sesuatu yang menarik. Gimana kabarnya Gengers ?, semoga dalam keadaan baik dan sehat-sehat ya. Pada Kesempatan kali ini RozorTech akan memberikan info yang cukup menarik loh adalah Cara Mudah Membuat Gradient Warna Keren Dalam 4 Style di Blog disimak ya.
Pembahasan
Pada artikel kali ini kita akan masuk kepada kelebihan dari CSS 3 atau CSS yang terbaru dan terupdate, CSS 3 ini mempunyai banyak kelebihan yaitu dalam designer dan lain lain, namun mimin akan mengfokuskannya pada Gradient. Apasih itu Gradient ?
Corak warna yang bisa dikembangkan dari dua atau lebih warna, sehingga membuat tingkatan warna tertentu dengan tidak merusak dan mengubah warna itu sendiri.
Kode :
Kode :
Kode :
Jika kalian ingin memasangnya, bisa hanya menggunakan cssnya saja.
kalian bisa memilih antara ke 4 style diatas dan mungkin bisa kalian ubah sendiri sampai semenarik mungkin.
Akhir Kata
Demikian itu Cara Mudah Membuat Gradient Warna Keren Dalam 4 Style di Blog , Terimakasih semoga bermanfaat kalau ada yang mau ditanyakan silahkan tuliskan comment dibawah , jangan lupa Like Fanspage Kami Dan Share ke media sosialnya lainnya, sekali lagi saya ucapkan, terimakasih salam RozorTech.....
Balik lagi dengan RozorTech.net, yang selalu membahas sesuatu yang menarik. Gimana kabarnya Gengers ?, semoga dalam keadaan baik dan sehat-sehat ya. Pada Kesempatan kali ini RozorTech akan memberikan info yang cukup menarik loh adalah Cara Mudah Membuat Gradient Warna Keren Dalam 4 Style di Blog disimak ya.
Pembahasan
Pada artikel kali ini kita akan masuk kepada kelebihan dari CSS 3 atau CSS yang terbaru dan terupdate, CSS 3 ini mempunyai banyak kelebihan yaitu dalam designer dan lain lain, namun mimin akan mengfokuskannya pada Gradient. Apasih itu Gradient ?
Corak warna yang bisa dikembangkan dari dua atau lebih warna, sehingga membuat tingkatan warna tertentu dengan tidak merusak dan mengubah warna itu sendiri.
sekarang kita akan mencoba mengaplikasikannya kedalam bentuk design css ya :D
langsung saja ke topik pembahasan.
Baca Juga :
Cara Mudah Membuat Gradient Warna Keren Dalam 4 Style di Blog
Ada 2 tipe warna di dalam gradient atau gradasi ini yaitu :
Linear Gradient dan Radial Gradient
Linear Gradient adalah gradient yang membentuk warna yang berdampingan namun efeknya lembut.
Radial Gradient adalah warna yang memiliki titik pusat seperti bentuk lingkaran.
Linear Gradient yang memakai 2 warna
Kode :
.gradient1 {
background: linear-gradient(red, green); /* Standard syntax */
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
}
background: linear-gradient(red, green); /* Standard syntax */
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
}
Linear Gradient kanan / kiri memakai 3 warna
Kode :
.gradient2 {
background: linear-gradient(to right, red , yellow, green); /* Standard syntax */
background: -webkit-linear-gradient(left, red , yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, yellow, green); /* For Firefox 3.6 to 15 */
}
background: linear-gradient(to right, red , yellow, green); /* Standard syntax */
background: -webkit-linear-gradient(left, red , yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, yellow, green); /* For Firefox 3.6 to 15 */
}
Radial Gradient yang memakai 3 warna
Kode :
.gradient3 {
background: radial-gradient(red, yellow, green); /* Standard syntax */
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
}
background: radial-gradient(red, yellow, green); /* Standard syntax */
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
}
Radial Gradient lingkaran memakai 3 warna
Kode :
.gradient4 {
background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
}
background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
}
Ganti kode yang berwarna merah dengan warna yang kalian inginkan
Jika kalian ingin memasangnya, bisa hanya menggunakan cssnya saja.
kalian bisa memilih antara ke 4 style diatas dan mungkin bisa kalian ubah sendiri sampai semenarik mungkin.
Akhir Kata
Demikian itu Cara Mudah Membuat Gradient Warna Keren Dalam 4 Style di Blog , Terimakasih semoga bermanfaat kalau ada yang mau ditanyakan silahkan tuliskan comment dibawah , jangan lupa Like Fanspage Kami Dan Share ke media sosialnya lainnya, sekali lagi saya ucapkan, terimakasih salam RozorTech.....
0 Response to "Cara Mudah Membuat Gradient Warna Keren Dalam 4 Style di Blog "
Post a Comment