CSS3でGmailロゴを作成する方法

数ヶ月前、CSS3を使ってRSSフィードロゴを作成する方法を紹介しました。もう少し複雑なものを作成するのは楽しいことだと思いました。本日の記事では、CSS3だけを使ってGmailロゴの1つではなく2つのバリエーションを作成する方法を紹介します.

へのショートカット：

• GmailロゴCSSチュートリアル＃1 |プレビュー
• GmailロゴCSSチュートリアル＃2 |プレビュー

Gmailロゴ＃1

この最初のロゴはシンプルで、作成もかなり簡単です。さらに苦労せずに、ここにステップがあります。お気に入りのコードエディタを起動して次のHTMLコードを入力し、名前を付けて保存しましょう。 logo-gmail.html.

次のCSSスタイルを デフォルトのCSS値をリセットする.

.gmail-logo、.gmail-logo *、.gmail-logo *：前、.gmail-logo *：後マージン：0;パディング：０。背景：透明です。ボーダー：0。アウトライン：0;表示ブロック;フォント：通常通常0/0セリフ。 

次のCSSコードは、Gmailロゴの赤い背景と丸みを帯びた側面を示しています。.

 .gmail-logo margin：110px auto;背景：rgb（201、44、25）。幅：600ピクセル。高さ：400ピクセル。ボーダートップ：4ピクセルソリッドRGB（201、44、25）。ボーダーボトム：4pxソリッドrgb（201、44、25）。 border-radius：10ピクセル。 -moz-border-radius：10ピクセル。 -webkit-border-radius：10ピクセル。 

それから、赤い背景の中に白いボックスを作ります。.

 .gmail-logo .gmail-box オーバーフロー：非表示。フロート：左。幅：440ピクセル。高さ：400ピクセル。マージン：0 0 0 80ピクセル。背景：ホワイト。 border-radius：5ピクセル。 -moz-border-radius：5ピクセル。 -webkit-border-radius：5ピクセル。 

赤い "M"効果を作成するために、最初に赤い枠のボックスを作成します。.

 .gmail-logo .gmailボックス：位置の前：相対;内容： ";; z-index：1;背景：白;フロート：左;幅：320px;高さ：320px;罫線：100px solid rgb（201、44、25）;マージン：-310px 0 0 -40px; border-半径：10ピクセル; -moz境界線半径：10ピクセル; -webkit境界線半径：10ピクセル; -moz変換：回転（45度）;  - ウェブキット変換：回転（45度）; -o変換：回転（45度） ）;

それから私達は私達に赤い色の完全な「M」を与えて、過剰な側面を隠して進みます.

 .gmail-logo .gmail-box オーバーフロー：非表示。 

それでは、2つの細い赤いボーダーを付けて、エンベロープのように見せましょう。.

 .gmail-logo。gmail-box：content： "; float：left; width：360px; height：360px; border：2px solid rgb（201、44、25）; margin：10px 0 0 40px; -o-transform ：rotate（45deg）; -webkit-transform：rotate（45deg）; -moz-transform：rotate（45deg）;

もう終わりです。赤い封筒にグラデーションを追加しましょう.

 .gmail-logo：content： "; position：relative; z-index：2; content：";の後フロート：左。マージントップ：-404px。幅：600ピクセル。高さ：408ピクセル。表示ブロック;背景：-moz-linear-gradient（top、rgba（255、255、255、0.3）0％、/ * rgba（255、255、255、0.3）30％、* / rgba（255、255、255、0.1） ）100％）背景：-o-linear-gradient（上、rgba（255、255、255、0.3）0％、/ * rgba（255、255、255、0.2）30％、* / rgba（255、255、255、0.1） ）100％）背景：-webkit-gradient（線形、左上、左下、カラーストップ（0％、rgba（255、255、255、0.3））、/ * color-stop（30％、rgba（255、255、255） 、０．２））、＊ ／カラーストップ（１００％、ｒｇｂａ（２５５、２５５、２５５、０．１）））。  

大事なことを言い忘れましたが、ホバー時に異なる色を付けましょう。次のHTML DOCTYPEを前に追加してください

そして以下のCSSスタイル

 .gmailのロゴ：ホバー背景：＃313131;ボーダーカラー：＃313131。 / * cursor：ポインタ。 * / .gmail-logo：ホバー.gmail-box：の前border-color：＃313131; .gmail-logo：ホバー.gmail-box：の後border-color：＃313131; border-bottom-color：#fff;右ボーダー色：#fff; 

プレビュー|ソースファイルをダウンロード

Gmailロゴ＃2

次に、3D効果を少し加えて、Gmailのロゴを別の観点から作成します。基本的なHTMLマークアップから始めましょう.

ロゴは別の視点を持っているので、少し回転させて必要なレイヤーを作成します 要素） 順番通りに.

 ＃gmail-logo2 margin：0自動;表示ブロック;幅：380ピクセル。身長：290ピクセル。 -moz-transform：rotate（6度）; -webkit-transform：rotate（6deg）; -o-transform：rotate（6度）;変換：回転（６度）。 ＃gmail-logo2 .element1 display：block;;幅：380ピクセル。身長：290ピクセル。 ＃gmail-logo2 .element2、＃gmail-logo2 .element3、＃gmail-logo2 .element4、＃gmail-logo2 .element5 float：left;表示ブロック;幅：380ピクセル。身長：290ピクセル。マージン：-290px 0 0 0。  

スタイリング .element1 :: before

 ＃gmail-logo2 .element1 :: before content： "; position：relative; margin：2px 0 0 14px; float：左;表示：ブロック;背景：rgb（201、44、25）;幅：30px;高さ： 276px;  -  moz変換：回転（3度）;  -  webkit変換：回転（3度）;  -  o変換：回転（3度）;変換：回転（3度）; border-radius：22px 0 0 20ピクセル; -moz -border-radius：22px 0 0 20px; -webkit-border-radius：22px 0 0 20px; box-shadow：-1px 1px 0 rgb（109、10、0）、-2px 2px 0 rgb（109、10、0） ）、 -  3px 3px 0 rgb（109、10、0）、 -  4px 4px 0 rgb（109、10、0）、 -  5px 5px 0 rgb（109、10、0）、 -  6px 6px 0 rgb（109、10） 、0）; -webkit-box-shadow：-1px 1px 0 rgb（109、10、0）、 -  2px 2px 0 rgb（109、10、0）、 -  3px 3px 0 rgb（109、10、0）、 -4px 4px 0 rgb（109、10、0）、 -  5px 5px 0 rgb（109、10、0）、 -  6px 6px 0 rgb（109、10、0）;  -  moz-box-shadow：-1px 1px 0 rgb（109、10、0）、 -  2px 2px 0 rgb（109、10、0）、 -  3px 3px 0 rgb（109、10、0）、 -  4px 4px 0 rgb（109、10、0）、 -  5px 5px 0 rgb（109、10、0）、 -  6px 6px 0 rgb（109、10、0）; 

スタイリング .element1 :: after

 ＃gmail-logo2 .element1 :: after content： "; position：relative; margin：40px 5px 0 0; float：右;表示：ブロック;背景：rgb（201、44、25）;幅：30px;高さ： 238px; -moz変換：回転（3度）; -webkit変換：回転（3度）; -o変換：回転（3度）;変換：回転（3度）;ボーダー半径：0 18ピクセル26ピクセル0; -webkit -border-radius：0 18ピクセルx 26ピクセルx 0; -moz-border半径半径：0 18ピクセルx 26ピクセルx 0; box-shadow：-1ピクセルx 1ピクセルx 0 rgb（109、10、0）、-2 px 2ピクセルx 0 rgb（109、10、0） ）、 -  3px 3px 0 rgb（109、10、0）、 -  4px 4px 0 rgb（109、10、0）、 -  5px 5px 0 rgb（109、10、0）、 -  6px 6px 0 rgb（109、10） 、０）、−６ｐｘ ７ｐｘ ０ ｒｇｂ（１０９，１０，０）；  - モズボックス影：−１ｐｘ １ｐｘ ０ ｒｂｂ（１０９，１０，０）、−２ｐｘ ２ｐｘ ０ ｒｂｂ（１０９，１０，０）、 -3px 3px 0 rgb（109、10、0）、 -  4px 4px 0 rgb（109、10、0）、 -  5px 5px 0 rgb（109、10、0）、 -  6px 6px 0 rgb（109、10、0） ）、 -  6px 7px 0 rgb（109、10、0）;  -  webkit-box-shadow：-1px 1px 0 rgb（109、10、0）、 -  2px 2px 0 rgb（109、10、0）、 -  3px 3px 0 rgb（109、10、0）、 -  4px 4px 0 rgb（109、10、0）、 -  5px 5px 0 rgb（109、10、0）、 -  6px 6px 0 rgb（109、10、0）、 -6px 7px 0 rg ｂ（１０９、１０、０）。  

スタイリング .element2 :: before

 ＃gmail-logo2 .element2 :: before content： ";余白：22px 0 0 48px;浮動小数点：左;表示：ブロック;背景：rgb（201、44、25）;幅：315px;高さ：14px; -moz -transform：rotate（6.8deg）; -webkit-transform：rotate（6.8deg）; -o-transform：rotate（6.8deg）; transform：回転（6.8deg）; box-shadow：0 1px 0 rgb（109、 10、0）、0 2px 0 rgb（109、10、0）、0 3px 0 rgb（109、10、0）、0 4px 0 rgb（109、10、0）、0 5px 0 rgb（109、10、 0）、-6px 6px 0 rgb（109、10、0）; -webkit-box-shadow：0 1px 0 rgb（109、10、0）、0 2px 0 rgb（109、10、0）、0 3px 0 rgb（109、10、0）、0 4px 0 rgb（109、10、0）、0 5px 0 rgb（109、10、0）、 -  6px 6px 0 rgb（109、10、0）; -moz-box影：0 1px 0 rgb（109、10、0）、0 2px 0 rgb（109、10、0）、0 3px 0 rgb（109、10、0）、0 4px 0 rgb（109、10、0） 、０ ５ｐｘ ０ ｒｂｂ（１０９，１０，０）、 -  ６ｐｘ ６ｐｘ ０ ｒｇｂ（１０９，１０，０）；

スタイリング .element2 :: after

 ＃gmail-logo2 .element2 :: after content： "; position：relative; margin：230px 0 0 36px; float：左;表示：ブロック;背景：rgb（201、44、25）;幅：310px;高さ： 12px、ボックスシャドウ：0 1px 0 rgb（109、10、0）、0 2px 0 rgb（109、10、0）、0 3px 0 rgb（109、10、0）、0 4px 0 rgb（109、10） 、０）、０ ５ｐｘ ０ ｒｇｂ（１０９，１０，０）、 -  ６ｐｘ ６ｐｘ ０ ｒｇｂ（１０９，１０，０）；  - ウェブキットボックス影：０ １ｐｘ ０ ｒｂｂ（１０９，１０，０）、０ ２ｐｘ 0 rgb（109、10、0）、0 3px 0 rgb（109、10、0）、0 4px 0 rgb（109、10、0）、0 5px 0 rgb（109、10、0）、 -  6px 6px 0 rgb（109、10、0）;  -  moz-box-shadow：0 1px 0 rgb（109、10、0）、0 2px 0 rgb（109、10、0）、0 3px 0 rgb（109、10、0） ）、０ ４ｐｘ ０ ｒｇｂ（１０９、１０、０）、０ ５ｐｘ ０ ｒｇｂ（１０９、１０、０）、 -  ６ｐｘ ６ｐｘ ０ ｒｂｂ（１０９、１０、０）；｝

スタイリング .element3 :: before

 ＃gmail-logo2 .element3 :: before content： "; position：relative; margin：8px 0 0 42px; float：left;表示：block;背景：rgb（201、44、25）; width：42px; height： 268px; -moz変換：回転（3度）; -webkit変換：回転（3度）; -o変換：回転（3度）;変換：回転（3度）;

スタイリング .element3 :: after

 ＃gmail-logo2 .element3 :: after content： "; position：relative; margin：40px 32px 0 0; float：右;表示：ブロック;背景：rgb（201、44、25）;幅：22px;高さ： 236px; -moz変換：回転（3.0度）; -webkit変換：回転（3.0度）; -o変換：回転（3.0度）;変換：回転（3.0度）;ボックス影：0 1px 0 rgb（109、10、0）、0 2px 0 rgb（109、10、0）、0 3px 0 rgb（109、10、0）、0 4px 0 rgb（109、10、0）、0 5px 0 rgb（ 109、10、0）、 -  6px 6px 0 rgb（109、10、0）;  -  webkit-box-shadow：0 1px 0 rgb（109、10、0）、0 2px 0 rgb（109、10、0） 、０ ３ｐｘ ０ ｒｂｂ（１０９、１０、０）、０ ４ｐｘ ０ ｒｂｂ（１０９、１０、０）、０ ５ｐｘ ０ ｒｂｂ（１０９、１０、０）、 -  ６ｐｘ ６ｐｘ ０ ｒｂｂ（１０９、１０、０）。 -moz-box-shadow：0 1px 0 rgb（109、10、0）、0 2px 0 rgb（109、10、0）、0 3px 0 rgb（109、10、0）、0 4px 0 rgb（109、 １０、０）、０ ５ｐｘ ０ ｒｇｂ（１０９、１０、０）、 -  ６ｐｘ ６ｐｘ ０ ｒｇｂ（１０９、１０、０）；

スタイリング .element4 :: before

 ＃gmail-logo2 .element4 :: before content： "; position：relative; margin：-2px 0 0 130px; float：左;表示：ブロック;背景：rgb（201、44、25）;幅：54px;高さ：192px; -moz-transform：回転（-49deg）; -webkit-transform：回転（-49deg）; -o-transform：回転（-49deg）; transform：回転（-49deg）; box-shadow：-1px 0 0 rgb（109、10、0）、 -  2px 0 0 rgb（109、10、0）、 -  3 px 0 0 rgb（109、10、0）、 -  4 px 0 0 rgb（109、10、0）、 -5px 0 0 rgb（109、10、0）、 -  6px 0 0 rgb（109、10、0）、 -  7px 0 0 rgb（109、10、0）、 -  8px 0 0 rgb（109、10、0） -moz-box-shadow：-1px 0 0 rgb（109、10、0）、 -  2 px 0 0 rgb（109、10、0）、 -  3 px 0 0 rgb（109、10、0）、 -  4 px 0 0 rgb（109、10、0）、 -  5 px 0 0 rgb（109、10、0）、 -  6 px 0 0 rgb（109、10、0）、 -  7 px 0 0 rgb（109、10、0）、 -8px 0 0 rgb（109、10、0）; -webkit-box-shadow：-1px 0 0 rgb（109、10、0）、 -  2px 0 0 rgb（109、10、0）、 -  3px 0 0 rgb（109、10、0）、 -  4px 0 0 rgb（109、10、0）、 -  5px 0 0 rgb（109、10、0）、 -  6px 0 0 rgb（109、10、0）、 -  7px 0 0 rgb（109、10、0）、 -  8px 0 0 rgb（109、10、0）;

スタイリング .element4 :: after

 ＃gmail-logo2 .element4 :: after content： "; position：relative; margin：12px 88px 0 0; float：右;表示：ブロック;背景：rgb（201、44、25）;幅：54px;高さ： 186 px;ボーダー半径：30 px 0 0 0; -webkitボーダー半径：30 px 0 0 0; -mozボーダー半径：30 px 0 0 0; -mozトランスフォーム：回転（53度）; -webkitトランスフォーム：回転（53度）; -o-変換：回転（53度）;変換：回転（53度）;

スタイリング .element5 :: before

＃gmail-logo2 .element5 :: before content： "; position：relative; margin：115px 0 0 125px; float：左;表示：ブロック;背景：rgb（201、44、25）;幅：2px;高さ： 150px; -moz変換：回転（55度）; -o変換：回転（55度）; -webkit変換：回転（55度）;変換：回転（55度）;

スタイリング .element5 :: after

 ＃gmail-logo2 .element5 :: after position：relative;内容： ";余白：115px 0 0 150px;浮動小数点：左;表示：ブロック;背景：rgb（201、44、25）;幅：2px;高さ：150px; -moz変換：回転（-50deg）;  - webkit-transform：rotate（-50deg）; -o-transform：rotate（-50deg）; transform：rotate（-50deg）;

の優先度を調整する Zインデックス.

 ＃gmail-logo2 .element1 :: before z-index：3;＃gmail-logo2 .element1 :: after z-index：1; / *＃gmail-logo2 .element2 :: before  * /＃ gmail-logo2 .element2 :: after z-index：2;＃gmail-logo2 .element3 :: before z-index：5;＃gmail-logo2 .element3 :: after z-index：1; ＃gmail-logo2 .element4 :: before z-index：4;＃gmail-logo2 .element4 :: after z-index：3; / *＃gmail-logo2 .element5 :: before ＃gmail- logo2 .element5 :: after  * /

もう終わりです。 Gmailのロゴは次のようになります。

最後に、ホバー時に違う色を付けましょう.

 ＃gmail-logo2：hover * :: after、＃gmail-logo2：hover * :: before background：rgba（20、196、7、1）; ＃gmail-logo2：hover .element1 :: before box-shadow：-1px 1px 0 rgb（10、90、4）、 -  2px 2px 0 rgb（10、90、4）、 -  3px 3px 0 rgb（10） 、９０、４）、 -  ４ｐ×４ｐ×０ｒｂｂ（１０、９０、４）、 -  ５ｐ×５ｐ×０ｒｂｂ（１０、９０、４）、 -  ６ｐ×６ｐ×０ｒｂｂ（１０、９０、４）。 -webkit-box-shadow：-1px 1px 0 rgb（10、90、4）、 -  2px 2px 0 rgb（10、90、4）、 -  3px 3px 0 rgb（10、90、4）、 -  4px 4px 0 rgb（10、90、4）、 -  5px 5px 0 rgb（10、90、4）、 -  6px 6px 0 rgb（10、90、4）。 -moz-box-shadow：-1px 1px 0 rgb（10、90、4）、 -  2px 2px 0 rgb（10、90、4）、 -  3px 3px 0 rgb（10、90、4）、 -  4px 4px 0 rgb（10、90、4）、 -  5px 5px 0 rgb（10、90、4）、 -  6px 6px 0 rgb（10、90、4）。 ＃gmail-logo2：hover .element1 :: after box-shadow：-1px 1px 0 rgb（10、90、4）、 -  2px 2px 0 rgb（10、90、4）、 -  3px 3px 0 rgb（10） 、90、4）、 -  4px 4px 0 rgb（10、90、4）、 -  5px 5px 0 rgb（10、90、4）、 -  6px 6px 0 rgb（10、90、4）、 -  6px 7px 0 rgb （10、90、4）; -moz-box-shadow：-1px 1px 0 rgb（10、90、4）、 -  2px 2px 0 rgb（10、90、4）、 -  3px 3px 0 rgb（10、90、4）、 -  4px 4px 0 rgb（10、90、4）、 -  5px 5px 0 rgb（10、90、4）、 -  6px 6px 0 rgb（10、90、4）、 -  6px 7px 0 rgb（10、90、4）。 -webkit-box-shadow：-1px 1px 0 rgb（10、90、4）、 -  2px 2px 0 rgb（10、90、4）、 -  3px 3px 0 rgb（10、90、4）、 -  4px 4px 0 rgb（10、90、4）、 -  5px 5px 0 rgb（10、90、4）、 -  6px 6px 0 rgb（10、90、4）、 -  6px 7px 0 rgb（10、90、4）。  gmail-logo2：hover .element2 :: before box-shadow：0 1px 0 rgb（10、90、4）、0 2px 0 rgb（10、90、4）、0 3px 0 rgb（10、90、 ４）、０ ４ｐ×０ｒｇｂ（１０、９０、４）、０ ５ｐ×０ｒｇｂ（１０、９０、４）、 -  ６ｐ×６ｐ×０ｒｂｂ（１０、９０、４）。 -webkit-box-shadow：0 1px 0 rgb（10、90、4）、0 2px 0 rgb（10、90、4）、0 3px 0 rgb（10、90、4）、0 4px 0 rgb（10、 90、4）、0 5pxの0 RGB（10、90、4）、計6Px 0 RGB（10、90、4）-6px。 -moz-box-shadow：0 1px 0 rgb（10、90、4）、0 2px 0 rgb（10、90、4）、0 3px 0 rgb（10、90、4）、0 4px 0 rgb（10、 90、4）、0 5pxの0 RGB（10、90、4）、計6Px 0 RGB（10、90、4）-6px。  gmail-logo2：hover .element2 :: after box-shadow：0 1px 0 rgb（10、90、4）、0 2px 0 rgb（10、90、4）、0 3px 0 rgb（10、90、 ４）、０ ４ｐ×０ｒｇｂ（１０、９０、４）、０ ５ｐ×０ｒｇｂ（１０、９０、４）、 -  ６ｐ×６ｐ×０ｒｂｂ（１０、９０、４）。 -webkit-box-shadow：0 1px 0 rgb（10、90、4）、0 2px 0 rgb（10、90、4）、0 3px 0 rgb（10、90、4）、0 4px 0 rgb（10、 90、4）、0 5pxの0 RGB（10、90、4）、計6Px 0 RGB（10、90、4）-6px。 -moz-box-shadow：0 1px 0 rgb（10、90、4）、0 2px 0 rgb（10、90、4）、0 3px 0 rgb（10、90、4）、0 4px 0 rgb（10、 90、4）、0 5pxの0 RGB（10、90、4）、計6Px 0 RGB（10、90、4）-6px。  gmail-logo2：hover .element3 :: after box-shadow：0 1px 0 rgb（10、90、4）、0 2px 0 rgb（10、90、4）、0 3px 0 rgb（10、90、 ４）、０ ４ｐ×０ｒｇｂ（１０、９０、４）、０ ５ｐ×０ｒｇｂ（１０、９０、４）、 -  ６ｐ×６ｐ×０ｒｂｂ（１０、９０、４）。 -webkit-box-shadow：0 1px 0 rgb（10、90、4）、0 2px 0 rgb（10、90、4）、0 3px 0 rgb（10、90、4）、0 4px 0 rgb（10、 90、4）、0 5pxの0 RGB（10、90、4）、計6Px 0 RGB（10、90、4）-6px。 -moz-box-shadow：0 1px 0 rgb（10、90、4）、0 2px 0 rgb（10、90、4）、0 3px 0 rgb（10、90、4）、0 4px 0 rgb（10、 90、4）、0 5pxの0 RGB（10、90、4）、計6Px 0 RGB（10、90、4）-6px。 ＃gmail-logo2：hover .element4 :: before box-shadow：-1px 0 0 rgb（10、90、4）、 -  2px 0 0 rgb（10、90、4）、 -  3px 0 0 rgb（10 、９０，４、−４ｐｘ ０ ０ ｒｇｂ（１０，９０，４）、 -  ５ｐｘ ０ ０ ｒｇｂ（１０，９０，４）、 -  ６ｐｘ ０ ０ ｒｇｂ（１０，９０，４）、 -  ７ｐｘ ０ ０ ｒｇｂ （１０，９０，４）、 -  ８ｐｘ ０ ０ ｒｂｂ（１０，９０，４）； -moz-box-shadow：-1px 0 0 rgb（10、90、4）、 -  2px 0 0 rgb（10、90、4）、 -  3px 0 0 rgb（10、90、4）、 -  4px 0 0 rgb（10、90、4）、 -  5px 0 0 rgb（10、90、4）、 -  6px 0 0 rgb（10、90、4）、 -  7px 0 0 rgb（10、90、4）、 -  8px 0 rgb（10、90、4）; -webkit-box-shadow：-1px 0 0 rgb（10、90、4）、 -  2px 0 0 rgb（10、90、4）、 -  3px 0 0 rgb（10、90、4）、 -  4px 0 0 rgb（10、90、4）、 -  5px 0 0 rgb（10、90、4）、 -  6px 0 0 rgb（10、90、4）、 -  7px 0 0 rgb（10、90、4）、 -  8px 0 rgb（10、90、4）; 

プレビュー|ソースファイルをダウンロード

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