2013/07/05

[画像の中に文字を書く（html5+css3）]

気まぐれに書き込み☆



・画像の角丸や、右と下にシャドウいれたり余計なこともしていますが下記な感じ。

・articleの背景に画像指定、ただこのサンプルだと画像サイズが指定より小さいと並べて表示、大きいとはみ出たのは表示されないです。

・当ブログだと幅固定なのでわからないですが、floatも設定しているので幅に応じて画像も並ばれていきます。

・画像の中に文字を入れるので、どうしても見づらくなる場合があるので、文字を縁取りしたりカーソル移動で色を変えたり。

CSS

article.pict {
    float: left;
    margin-left: 20px;
    margin-top: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.80);
    -moz-box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.80);
    -webkit-box-shadow: 2px 2px 6px rgba(255, 255, 255, 0.80);
}
 
article.pict h3 {
    line-height: normal;
    font-size: 9pt;
}
 
article.pict h3 a.pictlink, article.pict h3 a.pictlink:link, article.pict h3 a.pictlink:visited {
    padding-left: 5px;
    color: #ff4500;
    overflow: hidden;
    text-decoration:none;
    text-shadow: 1px 1px 2px #000,-1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
}
 
article.pict h3 a.pictlink:hover {
    padding-left: 5px;
    color: #f0f0f0;
    overflow: hidden;
    text-decoration:none;
    text-shadow: 1px 1px 1px #ff4500,-1px -1px 1px #ff4500, 1px -1px 1px #ff4500, -1px 1px 1px #ff4500;
}

HTML

<article class="pict" style="width:nnnpx; height:nnnpx; background-image:url(画像ＵＲＬ);">
    <h3><a class="pictlink">ｘｘｘ</a></h3>
    <h3><a class="pictlink" href="リンク先">ｘｘｘ</a></h3>
</article>

※アルバムのセレクトは特に意味はありません。。。



ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)