HTML+CSS3やレスポンシブwebデザインでサイト作成することも増えてきたと思いますが、
アニメーションなどを使用する際は画像は極力使わずCSSのみでデザイニングできた方がベストですよね。
、、、、ということで、今回はHTML+CSS3を使用したアイコン作成に関してまとめたいと思います!

27の驚くほどリアルなCSSのアイコンとロゴ(原題:27 Amazingly Realistic CSS Icons and Logos)

27 Amazingly Realistic CSS Icons and Logos

ただひたすらにリアルです。現時点でここまでCSSのみで表現できるとなるとこの先CSSがどこまで発展を遂げるのか想像できません(汗)

この記事では様々なクリエイターのアイデアがまとめられています。

CSSアイコン制作時のポイント


RSSアイコン

CSS3でアイコンを装飾する際のポイントに関してRSSアイコンの作成を例に書き出してみます。

  • パーツの作成

    まずはアイコンの要素をHTMLで書き出します。上記のRSSアイコンの場合に必要なパーツは

    • RSSの背景とボーダー部分

      [html]

      [/html]
    • 下記三つのパーツを包括するブロック要素

      [html]

      [/html]
    • アイコン内の外側の曲線

      [html][/html]
    • アイコン内の中央の曲線

      [html][/html]
    • アイコン内の左下部分の円

      [html][/html]
    • となります。
      HTML完成形↓
      [html]



      [/html]

  • CSSでデザイニング

    次にCSSでパーツを装飾していきます。
    RSSアイコンではborder-radiusプロパティで真円を作成し、positionプロパティabsoluteで位置を設定、

    パーツを包括するブロック要素でoverflowプロパティhiddenを指定しちょうど円の4分の1を表示しています。
    [css]

    rssiconwrapper {

    background: -moz-linear-gradient(center bottom , #FF6B1C 12%, #FF9F29 100%) repeat scroll 0 0 transparent;
    border: 0.3em solid #C63E0D;
    border-radius: 1.5em 1.5em 1.5em 1.5em;
    height: 10em;
    overflow: hidden;
    position: relative;
    width: 10em;
    margin: 20px auto 60px;
    transition: all 0.12s ease-out 0s;
    

    }

    rssiconmain {

    height: 80%;
    overflow: hidden;
    position: relative;
    width: 80%;
    left: 10%;
    top: 10%;
    

    }

    .outer_ring {
    border-radius: 10.5em 10.5em 10.5em 10.5em;
    height: 170%;
    right: 0;
    top: 0;
    width: 170%;
    border-color: #FFFFFF;
    border: 1.5em solid #FFFFFF;
    position: absolute;
    }

    .middle_ring {
    border-radius: 8em 8em 8em 8em;
    height: 110%;
    position: absolute;
    right: 32%;
    top: 32%;
    width: 110%;
    border-color: #FFFFFF;
    border: 1.5em solid #FFFFFF;
    }

    .circle {
    background-color: #FFFFFF;
    border-radius: 4em 4em 4em 4em;
    bottom: 0;
    height: 30%;
    left: 0;
    width: 30%;
    position: absolute;
    border-color: #FFFFFF;
    }
    [/css]



うまく表示されていますかね^^;

コチラの元ネタはPure CSS Iconsです。

1shiharaT
1shiharaT
本名 : 石原隆志

2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です