HTML5実践～CSSを使って時刻アイコンを作成する詳細解説（写真）

最近、ブログサイトのデザインをリニューアルし、時刻の表示にカレンダー風のアイコンを使うことにしました。以前の解決策は一般的に背景画像を使用することでしたが、CSS3 のおかげで、CSS3 を使用してこの機能を実現できるようになりました。線形グラデーション、境界線の半径、ボックス シャドウのプロパティを使用して、以前の photoshop デザインを置き換えます。

Photoshopコンセプトマップ

多くのデザイナーはブラウザ上で直接デザインする方法を使用していますが、私はやはり最初にPhotoshopコンセプトマップを作成することを好みます。多くの効果は CSS を使用して直接実現できるようになりましたが、Photoshop を使用して効果をデザインする方法は、最終的に目的の効果を実現するために CSS を変更し続けるよりもはるかに簡単です。

まず

角丸長方形を作成し、角丸半径を10pxに設定し、cssのborder-radiusプロパティを使って実装していきます。

長方形に縦方向のグラデーションを追加します。グラデーションの色は #dad8d8 から #fcfcfc です。

カラー #e3e3e3 で 1 ピクセルのストロークを設定します

最後に、不透明度 20%、距離 0 ピクセル、サイズ 15 ピクセルの下向きのシャドウ効果を追加します。これらの効果は、box-shadow プロパティを使用して CSS で実装されます。

先ほどの長方形をコピーし、上部を削除します。グラデーションを #790909 から #d40000 に変更し、月の情報が配置される新しく作成された四角形を塗りつぶします。

上の境界線を表す内側のシャドウ、色 #a13838、透明度 100%、距離 3 ピクセル、サイズ 0 ピクセルを設定します。

Photoshop のフォント ツールを使用して、カレンダー アイコンの上半分の時間コンテンツのフォント効果を設定します。フォントは Helvetica、色は #9e9e9e です。

下の赤い部分に月の情報を入力し、フォントをワイド、色を白に設定します。

Photoshopモデルが完成しました。以前は、背景として画像を抽出し、その上に html の番号を書き込んでいましたが、現在はすべて css で実現できます。

HTMLの構造

<p class="date">
    <p>25 <span>May</span></p></p>

今回のICONデモのHTMLは非常にシンプルです。コンテナとして「日付」として

class を持つ p を使用し、p タグを使用して日付番号を表します。デザインでは日と月が異なるサイズの文字で表されるため、 タグを使用してさまざまな要素を別々に扱います。

css style

.date {
    width: 130px; height: 160px;
    background: #fcfcfc;
    background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
    background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
    background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
}

CSSスタイルはまずコンテナ全体の高さと幅を設定し、CSSのグラデーションによってグラデーション効果を簡単に実現できます。

.date {
    width: 130px; height: 160px;
    background: #fcfcfc;
    background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
    background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
    background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
    border: 1px solid #d2d2d2;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Photoshopでborder属性を使用して1pxの境界線効果を実現し、次にborder-radiusを使用して角丸効果を実現します。古いブラウザとの互換性を確保するために、-moz- および -webkit- プレフィックスを追加することを忘れないでください。

.date {
    width: 130px; height: 160px;
    background: #fcfcfc;
    background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
    background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%);
    background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%);
    border: 1px solid #d2d2d2;
    border-radius: 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 デザインでローシャドウ効果を実現しています。 0 ピクセルの水平および垂直オフセットと 15 ピクセルのぼかしを追加します。 rgba を使用して透明度を制御します。Photoshop デザインの 105 は、ここでは 0.1 に置き換えられます。

.date p {
    font-family: Helvetica, sans-serif;
    font-size: 100px; text-align: center; color: #9e9e9e;
}

pタグを使用してスタイルを定義し、日付の

テキストスタイルを定義します。フォント、テキスト サイズ、テキストの色はすべて Photoshop からコピーされ、text-align は中央に設定されます。ただし、このスタイルは月のテキストにも影響します。次に、そのスパン タグのスタイルを個別に定義します。

.date p span {
    background: #d10000;
    background: linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
}

　　红色部分的实现是通过为span的背景设置linear-gradient属性实现的，红色的数值也是来自于photoshop。

.date p span {
    background: #d10000;
    background: linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
    font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
    display: block;
}

　　修改文字样式，使它和设计匹配，大小设置为45px，设置为粗体字，颜色设置为白色，使用text-transform实现大写转换。将span标签设置为块元素，这样他就会匹配容器的大小了，设置红色背景。

.date p span {
    background: #d10000;
    background: linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%);
    background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
    font-size: 45px; font-weight: bold; color: #fff; text-transform: uppercase;
    display: block;
    border-top: 3px solid #a13838;
    border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    padding: 6px 0 6px 0;
}

　　剩下的就是添加头部边框，用border-top样式实现，还有就是用border-radius属性实现下部两个圆角。一点点的padding属性可以让月份文字上下和其他元素有些间隔。

　　浏览器兼容性

　　尽管css改进的属性可以帮助我们实现photoshop中渐变和阴影的效果，但是我们仍然要面对以前web设计师要面对的问题，浏览器兼容性。

 

以上がHTML5実践～CSSを使って時刻アイコンを作成する詳細解説（写真）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。