CSS3を試してみた

TITLE
Tweet about this on TwitterShare on Google+0Buffer this pageShare on Facebook0

ここ最近、ブラウザ界隈が活気にあふれています。
Chromeやら次世代FirefoxにIE9。いわゆる「モダンブラウザ」と言われているブラウザです。

そのモダンブラウザで採用されています「HTML5」「CSS3」ですが、
今回は勉強の兼ねてCSS3の代表的な機能をいくつか組んでみました。

CSS3で組んだスクリーンショット

CSS3で組んだスクリーンショット

Safari4〜、Chromeで閲覧可能だと思います。

タイトルの「Sweet Dreams」ですが、
フォント埋込のWebfont(ウェブフォント)[@font-face]を使用。
サーバに使用したいフォントアップロードし、スタイルシートでそのURLを指定します。
例えば

@font-face {
font-family: pow;
src: url(‘fonts/FontinSans_49/HoboStd.otf’) format(“opentype”);
}

h1 {
font-family: pow;
}

とすることで、h1の要素に適用されます。

またタイトルにマウスオーバーすると
バックグラインドとタイトル文字の色が変わります。
これは[transition]効果を使用しています。
CSSのソースは

h1 {
font-family: pow;
font-size: 60px;
text-align: center;
margin: 20px;
padding: 5px;
border-bottom-style: solid;
border-bottom-color: #005291;
text-shadow: #000 1px 1px 5px;
color: #b81419;
background-color: #005291;
-webkit-transition-property: background-color,color;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;

}

h1:hover {
background-color: #ff9400;
color: #feffff;
}

となります。

まだまだ興味深い機能があるので、
追加・検証していきたいですね。

コメントを残す

メールアドレスが公開されることはありません。