CSS3でRSSフィードロゴを作成する方法

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る.

RSSフィードロゴは、Webデザインで最もよく使用されるロゴの1つです。あなたはPhotoshopのようなグラフィックソフトウェアを使ってRSSフィードロゴを描くことについて多くのチュートリアルを見ました、しかしどうですか？ 純粋にCSS3を使ってそれを描く? ええ、あなたは私を聞いた:-)

この機会に、CSS3だけで標準のRSSフィードロゴを作成する簡単な方法をお見せしたいので、最初のCSS3フィードロゴを取得するには、包括的な手順とグラフィックを使用してチュートリアルに従ってください。!

これは、すぐに作成できるもののプレビューです。チュートリアルの最後にソースファイルをダウンロードすることもできます。.

ステップ1

HTMLファイルを作成します。完全に空の場合は、ファイルに次のコードを挿入します。.

   私の最初のCSS3 RSSフィードロゴ    - ここにあなたのHTMLを挿入 -

ステップ2

以下のコードをHTMLファイルに挿入してフィードボックスを作成します。.

フィードボックスのHTML

フィードボックスのCSS

 span.feed-box display：block;幅：200ピクセル。高さ：200ピクセル。マージン：0自動。背景：＃F9A004。ボックスシャドウ：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：20ピクセル。 -webkit-border-radius：20ピクセル。 border-radius：20ピクセル。  span.feed-box * float：right;;表示ブロック;

これはあなたが達成する結果です：

ステップ3

最初のフィードボックスの内側にある別のボックスを描画するので、下のHTMLコードを最初のフィードボックスのHTMLコードに配置します。ここでバリアとしてボーダーを追加します.

小さいフィードボックスのHTML

小さいフィードボックスのCSS

 span.feed-box .feed-box-in border：4ピクセルx solid＃FFC563;幅：184ピクセル。高さ：184ピクセル。マージン：4px 4px 0 0。 -moz-border-radius：20ピクセル。 -webkit-border-radius：20ピクセル。 border-radius：20ピクセル。 / *オーバーフロー：非表示。 * /

これはあなたが達成する結果です：

ステップ4

このステップでは、1/4の大きな円を作ります。小さなフィードボックスのHTMLコードに、1/4の大きな丸のHTMLコードを入れます。以下がそのコードです。

1/4ビッグサークル用HTML

1/4ビッグサークル用CSS

 span.feed-box .feed-box-in .feed-quarter-circle-big マージン：16px 16px 0 0;幅：260ピクセル。高さ：260ピクセル。ボーダー：30ピクセルソリッド＃FFDEA5。 -moz-border-radius：260ピクセル。 -webkit-border-radius：260ピクセル。ボーダー半径：260ピクセル。

これはあなたが達成する結果です：

ステップ5

下のHTMLコードを大きな円のHTMLコードに入れます。.

1/4小円のHTML

1/4小円用CSS

 span.feed-box .feed-box-in .feed-four-circle-big .feed-quarter-circle-small margin：16px 16px 0 0;幅：176ピクセル。高さ：176ピクセル。ボーダー：26ピクセルソリッド＃FFDEA5。 -moz-border-radius：176px。 -webkit-border-radius：176px。ボーダー半径：176px

これはあなたが達成する結果です：

ステップ6

ステップ6では、小さい円の内側に小さい円が作成されるので、そのHTMLコードを小さい円のHTMLコードに入れます。.

最小円のHTML

最小円のCSS

 span.feed-box .feed-box-in。feed-four-circle-big .feed-quarter-circle-small .feed-circle マージン：24px 24px 0 0;背景：＃FFDEA5。幅：70ピクセル。高さ：70ピクセル。 -moz-border-radius：70ピクセル。 -webkit-border-radius：70ピクセル。ボーダー半径：70px

これはあなたが達成する結果です：

仕上げタッチ

コードを検索, / *オーバーフロー：非表示。 * / それからこのコードと取り替えなさい, オーバーフロー：隠れています。, はい！ CSS3 RSS Feedのロゴを達成しました!

ボーナス：ホバー効果を追加

あなたはあなたのRSSフィードのロゴを魔法のホバー効果なしでは欲しくないでしょう？それを達成するために以下のCSSスタイルを追加するだけです。!

ホバー効果のためのCSS

 span.feed-box：ホバー背景：＃07C103;ボックスシャドウ：1px 1px 0＃058E02、2px 2px 0＃058E02、3px 3px 0＃058E02、4px 4px 0＃058E02、5px 5px 0＃058E02、6px 6px 0＃058E02; -moz-box-shadow：1px 1px 0＃058E02、2px 2px 0＃058E02、3px 3px 0＃058E02、4px 4px 0＃058E02、5px 5px 0＃058E02、6px 6px 0＃058E02; -webkit-box-shadow：1px 1px 0＃058E02、2px 2px 0＃058E02、3px 3px 0＃058E02、4px 4px 0＃058E02、5px 5px 0＃058E02、6px 6px 0＃058E02;  span.feed-box：ホバー.feed-box-in border-color：＃58FC55; span.feed-box：ホバー.feed-box-in .feed-quarter-circle-big、span.feed-box：ホバー.feed-box-in .feed-quarter-circle-big .feed-quarter-circle -small border-color：＃B9FFB7;  span.feed-box：ホバー.feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle background：＃B9FFB7;

プレビューとダウンロード

CSS3フィードのロゴをさまざまなサイズとスタイルでプレビューしています。特定の手順を実行できない場合は、ソースファイルもダウンロードできます。.

プレビューCSS3 RSSロゴ （大）
プレビューCSS3 RSSロゴ （中）
プレビューCSS3 RSSロゴ （小さい）
プレビューCSS3 RSSロゴ （中、反転）
CSS3 RSS Logoソースファイルをダウンロードします。 （.zip）

編集者注： この投稿はによって書かれています イルハム・ケンデニ Hongkiat.comのために。 IrhamはIndaamとも呼ばれ、インドネシアのWebデザイナー兼開発者です。 CSSとWordPressのテーマ開発も大好きです。.