• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2012/06/07

[CSS]GoodDesign賞にノミネートされて落選すること間違い無しのすごくアレっぽい見出しスタイルを作成した

どうも、おつぱ( @OZPA )です。

ブログの見出し要素のデザインをいじくっていたらなんかGoodDesign賞にノミネートされそうな見出しスタイル…いや、正確には諸処の事情でノミネートが取り消されそうなスタイルが出来上がりました!

革命を起こす見出しスタイル

えー、出来上がった見出しは以下の3スタイルです。
画像ではなく、CSSで実装しております。

スタンダード

ソフト

ハード

すごい…
なんかよくわかんないけど…エロスタイリッシュ…!!

サンプルコード

サンプルコードは以下。

スタンダード

html

<p class="t_standard">スタンダード</p>

css

/**** スタンダード ****/
.t_standard{
	border-top:1px solid #CCC;
	border-right:10px solid #CCC;
	border-bottom:1px solid #CCC;
	border-left:30px double #CCC;
	padding: 5px 5px 5px 15px;
	background: #666;
	background: -moz-linear-gradient(top,  #F00,  #C00); /* FireFox */
	background: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#C00));/* Chrome & Safari */
	border-radius: 7px;
	-moz-border-radius: 7px; /* FireFox */
	-webkit-border-radius: 7px;/* Chrome & Safari */
	font-size:140%;
	color:#DDD;
}

ソフト

html

<p class="t_soft">ソフト</p>

css

/**** ソフト ****/
.t_soft{
	border-top:1px solid #888;
	border-right:10px solid #AAA;
	border-bottom:1px solid #888;
	border-left:30px double #AAA;
	padding: 5px 5px 5px 15px;
	background: #fff;
	background: -moz-linear-gradient(top,  #eee,  #ccc); /* FireFox */
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));/* Chrome & Safari */
	border-radius: 7px;
	-moz-border-radius: 7px; /* FireFox */
	-webkit-border-radius: 7px;/* Chrome & Safari */
	font-size:140%;
	color:#F00;
}

ハード

html

<p class="t_hard">ハード</p>

css

/**** ハード ****/
.t_hard{
	border-top:1px solid #888;
	border-right:10px solid #F00;
	border-bottom:1px solid #888;
	border-left:30px double #F00;
	padding: 5px 5px 5px 15px;
	background: #666;
	background: -moz-linear-gradient(top,  #666,  #252525); /* FireFox */
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#252525));/* Chrome & Safari */
	border-radius: 7px;
	-moz-border-radius: 7px; /* FireFox */
	-webkit-border-radius: 7px;/* Chrome & Safari */
	font-size:140%;
	color:#DDD;
}

使いたい方はそのまま使うも良し、クラス名がなんかアレだなと思ったら変更するも良し、ご自由にどうぞ。

…くれぐれも言っておくけど、こんなもん、ネタ以外の何物でもないからな!
(訳注を付ける気もサラサラ無いので当記事の意味が分からないと言う方はお父さんにでも聞いてみて下さい。責任は一切負いません。

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×