【HTML/CSS/Javascript】見出しをデザインしてみる

, , No Comments
HTML/CSS/Javascript

HTMLで固有IDをつけてCSSから様々なデザインに変更できる、とっておきをご紹介させていただこうと思います(`・ω・´)
これをつけてあげるだけで、ブログ更新中での文章で躓いても一旦プレビューし見出しを見る度に気持ちモチベーションが上昇したりします!(個人差) 
遊び感覚でつけるだけでも十分なので是非試してみてね!

今このブログで最近使い始めた見出しCSSはこれです(*‘ω‘ *)
#heading03{
position:relative;
margin:0 -10px;
padding:5px;
font:normal 28px/1.6 "Times New Roman", Times, serif;
text-align:center;
color:#fafafa;/*色設定*/
background:#ccc;/*色設定*/
-webkit-transform: rotate(-3deg) skew(-3deg);
-moz-transform: rotate(-3deg) skew(-3deg);
-o-transform: rotate(-3deg) skew(-3deg);
transform: rotate(-3deg) skew(-3deg);
box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);
background-image: -webkit-gradient(linear, left top, left bottom,
from( rgba(0, 0, 0, 0.0)),
color-stop(0.08, rgba(255, 255, 255, 0.5)),
color-stop(0.12, rgba(255, 255, 255, 0.5)),
color-stop(0.12, rgba(0, 0, 0, 0.0)),
color-stop(0.88, rgba(0, 0, 0, 0.0)),
color-stop(0.88, rgba(255, 255, 255, 0.5)),
color-stop(0.92, rgba(255, 255, 255, 0.5)),
color-stop(0.92, rgba(0, 0, 0, 0.0)),
to( rgba(0, 0, 0, 0.0))
);
background-image: -moz-linear-gradient(top,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
background-image: -o-linear-gradient(top,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
background-image: linear-gradient(to bottom,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
}
#heading03:before{
content:" ";
position:absolute;
top:-5px;
left:0;
width:0;
height:0;
border-width:0 0 5px 10px;
border-style:solid;
border-color:transparent;
border-bottom-color:#000;/*色設定*/
}
#heading03:after{
content:" ";
position:absolute;
top:100%;
right:0;
width:0;
height:0;
border-width:5px 10px 0 0;
border-style:solid;
border-color:transparent;
border-top-color:#000;/*色設定*/
}
これが今現在使用してる見出しのCSSになります・・・!
コピーして自分のCSSの最後尾に貼り付けるだけ!簡単だね・・・!←
ただしこれだけでは全く反映されませんので、次はHTMLにこのタグを挿入します!
HTML CSS Javascript 見出しをデザインしてみる
必ずこのHTMLタグを設置して真ん中に表示させたいテキストを入力させてあげるだけで簡単に設置できちゃいます!
引用:SQUEEZE URL:http://squeeze.jp/lab/sample-page/heading-design-css-only/

0 コメント :

コメントを投稿

※閲覧記事と無関係なコメントはスパムとみなす場合がございます。
(ㆁωㆁ*)管理人がコメントを承認するまで表示されません(ㆁωㆁ*)

top