css

| プログラミング | ,

CSS3で画像にドロップシャドウをつける、画像を丸くする

ブログで使用しているスタイルシートを少し修正。

最近iPhone系の画像がフラットデザインになったこともあり結構シンプルになってしまってスクリーンショットのメリハリが付かない感があったので枠を入れることにしました。

画像にドロップシャドウをつける


#content img {
border: 1px solid #000000;
box-shadow: #000000 0 0 10px -2px;
height: auto;
margin-bottom: 12px;
max-width: 100%;
}

box-shadowに該当します。これだけでも結構見栄えが良くなりますがキャプチャ系のソフトで影がつくものがあるのでその辺りは随時調整を、、

Roguer

こんな感じになります。boderタグで枠線もつけているので強調された形になりますね、。

今風な丸い感じのアイコン

元々は、下のような感じでリンクを右側に出していまいた。

Roguer 2


.wp-post-image {
border: 1px solid #CCCCCC;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
float: left;
margin-bottom: 10px;
margin-left: -80px;
padding: 1px;
height: 64px;
width: 64px;
}

このradiusというスタイルで簡単に丸くなります。

Roguer 3

| 技術 |

Webフォントを使用する

Webフォントを使いたかったのでWOFF形式に変換をしてみました。

2014 01 05 午前8 48 2

こちらの、「WOFFコンバータ」を利用して変換します。実行後には、EOT形式とWOFF形式が出力されます。

最近AWSづいているので静的コンテンツは今後AWSに移行しようと思いつつできてなかったのでフォント位はおいてどんなもんか見てみたいと思います。

2014 01 05 午前9 25

適当なバケット内に先ほど作成したフォントをおいてパーミッションをmake publicしておきます。これで外部から参照ができるようになるのでWebフォントとして利用ができます。

WordPressの場合には、直接ファイルを編集がブラウザ経由でできるのでそちらを利用して更新をしてみます。「外観」→「CSSスタイルエディタ」で下の画面になるのでそちらに適当な文言を入れるようにします。

2014 01 05 午前9 28 2

以下のように設定をしてみました。


@font-face {
font-family: "azuki";
src: url("https://s3-ap-northeast-1.amazonaws.com/webroguer/azukiLP.eot?") format('eot'), url("https://s3-ap-northeast-1.amazonaws.com/webroguer/azukiLP.woff") format("woff");
}

.myFontClass {
font-family: "azuki";
}

.entry-title {
font-family: "azuki";
}

h3.widgettitle {
font-family: "azuki";
}

上部へスクロール