Cách tạo logo RSS Feed bằng CSS3

Ahihi

Logo RSS Feed là một trong những logo được sử dụng phổ biến nhất trong thiết kế web. Bạn đã thấy nhiều hướng dẫn về vẽ logo RSS Feed bằng phần mềm đồ họa như Photoshop, nhưng làm thế nào để vẽ nó hoàn toàn bằng CSS3?

Trong bài viết này, Quantrimang.com sẽ chỉ cho bạn cách dễ dàng để tạo logo RSS Feed tiêu chuẩn chỉ bằng CSS3!

Bước 1:

Tạo một file HTML, chèn đoạn code sau vào file nếu nó hoàn toàn trống.

<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>

Bước 2:
Chèn code dưới đây vào file HTML để tạo feed box.

HTML cho feed box

<span class='feed-box'>
</span><!-- .feed-box -->

CSS cho feed box

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;
}

Đây là kết quả bạn sẽ đạt được:

Tạo feed box

Bước 3:

Ta sẽ vẽ một hộp khác nằm bên trong feed box đầu tiên, vì vậy hãy đặt code HTML bên dưới vào code HTML của feed box đầu tiên. Bạn cũng sẽ thêm border ở đây.

HTML cho feed box nhỏ hơn

<span class='feed-box-in'>
</span><!-- .feed-box-in -->

CSS cho feed box nhỏ hơn

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; */
}

Đây là kết quả bạn sẽ đạt được:

Vẽ một hộp khác nằm bên trong feed box đầu tiên

Bước 4:

Trong bước này, ta sẽ tạo 1/4 vòng tròn lớn. Đặt code HTML của 1/4 vòng tròn lớn vào code HTML của feed box nhỏ hơn như sau:

HTML cho 1/4 vòng tròn lớn

<span class='feed-quarter-circle-big'>
</span><!-- .feed-quarter-circle-big -->

CSS cho 1/4 vòng tròn lớn

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;
}

Đây là kết quả bạn sẽ đạt được:

Tạo 1/4 vòng tròn lớn

Bước 5:

Bây giờ chúng ta sẽ tạo 1/4 vòng tròn nhỏ, đặt code HTML bên dưới vào code HTML của vòng tròn lớn.

HTML cho 1/4 vòng tròn nhỏ

<span class='feed-quarter-circle-small'>
</span><!-- .feed-quarter-circle-small -->

CSS cho 1/4 vòng tròn nhỏ

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
}

Đây là kết quả bạn sẽ đạt được:

Tạo 1/4 vòng tròn nhỏ

Bước 6:

Trong bước 6, vòng tròn nhỏ nhất sẽ được tạo bên trong vòng tròn nhỏ, vì vậy hãy đặt code HTML của nó vào code HTML của vòng tròn nhỏ.

HTML cho vòng tròn nhỏ nhất

<span class='feed-circle'> </span><!-- .circle -->

CSS cho vòng tròn nhỏ nhất

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
}

Đây là kết quả bạn sẽ đạt được: