最近、私は自分のブログサイトを再設計していて、カレンダースタイルのアイコンを使用して時間を表示することにしました。以前のソリューションは、一般的に背景画像を使用することでした。 CSS3のおかげで、CSS3を使用してそのような関数を実装できるようになりました。以前のPhotoshopデザインを置き換えるために、線形勾配、境界半径、ボックスシャドウなどのプロパティを使用します。
Photoshopの概念図多くのデザイナーは、ブラウザで直接デザインする方法を使用していますが、Photoshopの概念図を最初に作成する方法を好みます。現在、多くの効果をCSSで直接実装できますが、Photoshopで効果を設計する方法は、CSSを常に変更して最終的に必要な効果を達成しようとする方法よりもはるかに簡単です。
最初に丸い長方形を作成し、丸い角の半径を10pxに設定します。その後、CSSのBorder-Radiusプロパティを使用します。
垂直勾配を長方形に追加すると、グラデーションの色は＃dad8d8から＃fcfcfcまでです。
1ピクセルのストロークを設定します。色は＃e3e3e3です
最後に、20％の透明度、0ピクセルの距離、15ピクセルのサイズで下向きの影効果を追加します。これらの効果は、Box-Shadowプロパティを使用してCSSに実装されます。
今すぐ長方形をコピーして、上部を削除します。勾配を変更し、＃790909から＃d40000に色を変更し、新しく作成された長方形を埋めます。
内側の影を設定して上部の境界を表すように、色は＃A13838、100％透明性、3px距離、0pxサイズです。
Photoshopのフォントツールを使用して、カレンダーアイコンの前半のフォント効果を設定します。フォントはhelveticaで、色は＃9e9e9eです。
下の赤いセクションに月情報を入力し、フォントをワイドに、色を白に設定します。
Photoshopモデルが完了しました。過去には、写真を背景として取り出して、HTML番号を書きましたが、今ではCSSでこれらすべてを実現できます。
HTML構造<div class = date>
<p> 25 <Span> 5月</span> </p>
</div>
今回は、Icon DemoのHTMLは非常に簡単です。クラス「日付」をコンテナとしてDIVを使用し、Pタグを使用して日付番号を表します。数日と数ヶ月は、デザインのさまざまなサイズで表されるため、<Span>タグを使用して、さまざまな要素を異なる方法で扱います。
CSSスタイル。日付 {
幅：130px;高さ：160px;
背景：#FCFCFC;
背景：線形勾配（TOP、#FCFCFC 0％、＃DAD8D8 100％）;
背景：-moz-linear-gradient（top、#fcfcfc 0％、＃dad8d8 100％）;
背景：-WebKit-Linear-Gradient（TOP、#FCFCFC 0％、＃DAD8D8 100％）;
}
CSSスタイルは最初に容器全体の高さと幅を設定し、勾配効果はCSS勾配を通じて簡単に達成できます。
。日付 {
幅：130px;高さ：160px;
背景：#FCFCFC;
背景：線形勾配（TOP、#FCFCFC 0％、＃DAD8D8 100％）;
背景：-moz-linear-gradient（top、#fcfcfc 0％、＃dad8d8 100％）;
背景：-WebKit-Linear-Gradient（TOP、#FCFCFC 0％、＃DAD8D8 100％）;
ボーダー：1pxソリッド＃D2D2D2;
ボーダーラジウス：10px;
-moz-border-radius：10px;
-webkit-border-radius：10px;
}
Border属性を使用して、Photoshopで1pxの境界効果を実現し、境界線走行を使用して丸みを帯びたコーナー効果を達成します。 -moz-および-webkit-プレフィックスを追加して、古いブラウザーとの互換性を有効にすることを忘れないでください。
。日付 {
幅：130px;高さ：160px;
背景：#FCFCFC;
背景：線形勾配（TOP、#FCFCFC 0％、＃DAD8D8 100％）;
背景：-moz-linear-gradient（top、#fcfcfc 0％、＃dad8d8 100％）;
背景：-WebKit-Linear-Gradient（TOP、#FCFCFC 0％、＃DAD8D8 100％）;
ボーダー：1pxソリッド＃D2D2D2;
ボーダーラジウス：10px;
-moz-border-radius：10px;
-webkit-border-radius：10px;
Box-Shadow：0px 0px 15px RGBA（0,0,0,0.1）;
-moz-box-shadow：0px 0px 15px rgba（0,0,0,0.1）;
-webkit-box-shadow：0px 0px 15px rgba（0,0,0,0.1）;
}
コードの最後の部分は、Box-Shadowを介してPhotoshopデザインのより低い影効果を達成することです。 0pxの水平および垂直オフセットを追加して、15pxのあいまいさを増加させます。 RGBAを使用して透明性を制御します。 Photoshopデザインでは、ここで105が0.1に置き換えられます。
.date p {
フォントファミリー：ヘルベティカ、sans-serif;
フォントサイズ：100px;テキストアライグ：センター;色：＃9e9e9e;
}
Pタグを使用してスタイルを定義し、日付のテキストスタイルを定義します。フォント、テキストサイズ、テキストの色はすべてPhotoshopからコピーされ、テキストアライグは中央に設定されています。しかし、このスタイルは月のテキストにも影響し、スパンラベルスタイルを個別に定義します。
.Date P SPAN {
背景：＃D10000;
背景：線形勾配（TOP、＃D10000 0％、＃7A0909 100％）;
背景：-moz-linear-gradient（top、＃d10000 0％、＃7a0909 100％）;
背景：-WebKit-Linear-Gradient（TOP、＃D10000 0％、＃7A0909 100％）;
}
赤い部分の実装は、スパンの背景に線形勾配属性を設定することによって達成され、赤い値もPhotoshopから来ています。
.Date P SPAN {
背景：＃D10000;
背景：線形勾配（TOP、＃D10000 0％、＃7A0909 100％）;
背景：-moz-linear-gradient（top、＃d10000 0％、＃7a0909 100％）;
背景：-WebKit-Linear-Gradient（TOP、＃D10000 0％、＃7A0909 100％）;
フォントサイズ：45px; font-weight：bold;色：#ffff;テキスト変換：大文字;
表示：ブロック;
}
テキストスタイルをデザインに一致させるように変更し、サイズを45pxに設定し、ボールドフォントに設定し、色を白に設定し、テキストトランスフォームを使用して資本変換を実装します。コンテナのサイズと一致し、赤い背景を設定するように、スパンタグをブロック要素に設定します。
.Date P SPAN {
背景：＃D10000;
背景：線形勾配（TOP、＃D10000 0％、＃7A0909 100％）;
背景：-moz-linear-gradient（top、＃d10000 0％、＃7a0909 100％）;
背景：-WebKit-Linear-Gradient（TOP、＃D10000 0％、＃7A0909 100％）;
フォントサイズ：45px; font-weight：bold;色：#ffff;テキスト変換：大文字;
表示：ブロック;
ボーダートップ：3pxソリッド＃A13838;
ボーダーラジウス：0 0 10px 10px;
-moz-border-radius：0 0 10px 10px;
-webkit-border-radius：0 0 10px 10px;
パディング：6px 0 6px 0;
}
残りは、頭の境界線を追加し、ボーダートップスタイルを使用してそれを実装し、ボーダーラディウス属性を使用して、下部に2つの丸い角を実装することです。小さなパディング属性は、月間テキストに上下の要素の間にある程度の間隔を置くことができます。
ブラウザの互換性CSSの改善された特性は、Photoshopの勾配と影の効果を達成するのに役立ちますが、Webデザイナーが過去に直面しなければならなかった問題、ブラウザの互換性に直面する必要があります。