--
--.--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2013
01.24

dt16_css3heart

Category: テンプレート
【DEMO】
利用にあたって
カスタマイズ○
再配布○
"template by potar"を消す○

特徴?
2カラム。プラグインは右サイドバーに表示されます。
画像を使っていません。
楕円とハートの模様は全てCSS3(カスケード・スタイル・シート3)を使って書きました。
CSSで書いているので、拡大しても模様が荒くなりません。
CSSで書いているので、CSSを編集すれば、模様の色を変えられます。
おまけで、ハート模様にカーソルを合わせると動きます。

デメリット
SEOは全く考えられていません。
CSS3を使いまくりなので、CSS3に対応していないブラウザでは模様が表示されません。


↑FireFox18での表示例


↑IE8のようなもの(IE9の開発者ツール使ってます)での表示例

カスタマイズ例
◆ハートの色を変える
スタイルシート編集で、下記のような部分を探し、赤字になっている所を書き換えます。
"rgba()"はRGBカラーモデルのred・green・blueに、alphaが加わったものです。alphaは色の透明度を表します。#ffffffのような16進数表記で書きなおしても問題ありません。ただし、透き通った色にはなりません。
下記の例の他に、/* ハート小(桃)*//* ハート小(白) *//* ハート大(赤) *//* ハート大(桃) *//* ハート大(白) */の5ヶ所があるはずなので、そこも書き換えてください。

/* ハート小(赤) */
.heart1 {
position: relative;
width: 50px;
height: 45px;
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
}
.heart1:before,
.heart1:after {
position: absolute;
content: "";
left: 25px;
top: 0;
width: 25px;
height: 40px;
background: rgba(254,67,101,0.8);
-moz-border-radius: 25px 25px 0 0;
border-radius: 25px 25px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart1:after {
left: 0;
background: rgba(254,67,101,0.8);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}



◆楕円(ハートの下のピンク色の大きな模様)の色を変える
スタイルシート編集で、下記の場所を探し、色を書き換えます。
大きな楕円を3つ書いてから、位置を左上にずらして模様にしています。ブラウザに表示されるのは、楕円全体のうち、右下の1/4程度です。
グラデーションを使っています。地道に書き換えるのは大変なので、「css3 gradient generator」等で検索して、ジェネレーターを使ってコピペしたほうが早いかもしれません。
/*下の楕円*/
.line_cut {
width: 1500px;
height: 380px;
border-radius: 50%;
background: rgba(252,157,154,0.8);
background-image: linear-gradient(bottom, rgb(251,109,104) 0%, rgb(247,185,172) 45%, rgb(255,255,255) 100%);
background-image: -o-linear-gradient(bottom, rgb(251,109,104) 0%, rgb(247,185,172) 45%, rgb(255,255,255) 100%);
background-image: -moz-linear-gradient(bottom, rgb(251,109,104) 0%, rgb(247,185,172) 45%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(251,109,104) 0%, rgb(247,185,172) 45%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient(bottom, rgb(251,109,104) 0%, rgb(247,185,172) 45%, rgb(255,255,255) 100%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(251,109,104)),
color-stop(0.45, rgb(247,185,172)),
color-stop(1, rgb(255,255,255))
);

position: relative;
top: -583px;
left: -770px;
}
/* 中の楕円 */
.line_cut {
…略…
/* 上の楕円 */
.line_cut2{
…略…

スポンサーサイト
Comment:0  Trackback:0
back-to-top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。