Cara membuat logo Umpan RSS menggunakan CSS3
Logo RSS Feed adalah salah satu logo yang paling umum digunakan dalam desain web. Anda telah melihat banyak tutorial menggambar logo RSS Feed dengan perangkat lunak grafis seperti Photoshop , tetapi bagaimana cara menggambarnya sepenuhnya dengan CSS3?
Pada artikel ini, kami akan menunjukkan kepada Anda cara mudah untuk membuat logo RSS Feed standar hanya menggunakan CSS3 !
Langkah 1:
Buat file HTML, masukkan kode berikut ke dalam file jika benar-benar kosong.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My First CSS3 RSS Feed Logo</title>
<style type='text/css'>
- Insert Your CSS Here -
</style>
</head>
<body>
- Insert Your HTML Here -
</body>
</html>
Langkah 2:
Masukkan kode berikut ke dalam file HTML untuk membuat kotak umpan.
Masukkan kode berikut ke dalam file HTML untuk membuat kotak umpan.
HTML untuk kotak umpan
<span class='feed-box'>
</span><!-- .feed-box -->
CSS untuk kotak umpan
span.feed-box{
display:block;
width:200px;
height:200px;
margin:0 auto;
background:#F9A004;
box-shadow:
1px 1px 0 #C27C03,
2px 2px 0 #C27C03,
3px 3px 0 #C27C03,
4px 4px 0 #C27C03,
5px 5px 0 #C27C03,
6px 6px 0 #C27C03;
-moz-box-shadow:
1px 1px 0 #C27C03,
2px 2px 0 #C27C03,
3px 3px 0 #C27C03,
4px 4px 0 #C27C03,
5px 5px 0 #C27C03,
6px 6px 0 #C27C03;
-webkit-box-shadow:
1px 1px 0 #C27C03,
2px 2px 0 #C27C03,
3px 3px 0 #C27C03,
4px 4px 0 #C27C03,
5px 5px 0 #C27C03,
6px 6px 0 #C27C03;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
span.feed-box *{
float: right;
display: block;
}
Inilah hasil yang akan Anda raih:
Langkah 3:
Kami akan menggambar kotak lain di dalam kotak umpan pertama, jadi masukkan kode HTML di bawah ini ke dalam kode HTML kotak umpan pertama. Anda juga akan menambahkan batas di sini.
HTML untuk kotak umpan yang lebih kecil
<span class='feed-box-in'>
</span><!-- .feed-box-in -->
CSS untuk kotak umpan yang lebih kecil
span.feed-box .feed-box-in{
border: 4px solid #FFC563;
width: 184px;
height: 184px;
margin: 4px 4px 0 0;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/* overflow: hidden; */
}
Inilah hasil yang akan Anda raih:
Langkah 4:
Pada langkah ini kita akan membuat 1/4 lingkaran besar. Tempatkan kode HTML 1/4 lingkaran besar dalam kode HTML kotak umpan yang lebih kecil sebagai berikut:
HTML untuk 1/4 lingkaran besar
<span class='feed-quarter-circle-big'>
</span><!-- .feed-quarter-circle-big -->
CSS untuk 1/4 lingkaran besar
span.feed-box .feed-box-in .feed-quarter-circle-big{
margin: 16px 16px 0 0;
width: 260px;
height: 260px;
border: 30px solid #FFDEA5;
-moz-border-radius: 260px;
-webkit-border-radius: 260px;
border-radius: 260px;
}
Inilah hasil yang akan Anda raih:
Langkah 5:
Sekarang kita akan membuat 1/4 lingkaran kecil, letakkan kode HTML di bawah ini ke dalam kode HTML lingkaran besar.
HTML untuk 1/4 lingkaran kecil
<span class='feed-quarter-circle-small'>
</span><!-- .feed-quarter-circle-small -->
CSS untuk 1/4 lingkaran kecil
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small{
margin: 16px 16px 0 0;
width: 176px;
height: 176px;
border: 26px solid #FFDEA5;
-moz-border-radius: 176px;
-webkit-border-radius: 176px;
border-radius: 176px
}
Inilah hasil yang akan Anda raih:
Langkah 6:
Pada langkah 6, lingkaran terkecil akan dibuat di dalam lingkaran kecil, jadi masukkan kode HTML ke dalam kode HTML lingkaran kecil.
HTML untuk lingkaran terkecil
<span class='feed-circle'> </span><!-- .circle -->
CSS untuk lingkaran terkecil
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle{
margin: 24px 24px 0 0;
background: #FFDEA5;
width: 70px;
height: 70px;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px
}
Inilah hasil yang akan Anda raih:
Akhirnya, cari kode
/* overflow: hidden; */lalu ganti dengan kode ini overflow: hidden;. Anda mendapat logo RSS Feed CSS3!
0 Response to "Cara membuat logo Umpan RSS menggunakan CSS3"
Post a Comment