Zeroless // CSS + jQuery Technics

T-01：立体感のあるリンクボタン

example

css

li {
      display:block;
      list-style:none;}

li a {
      display:block;
      width:180px;
      padding:4px;
      color:#222;
      letter-spacing:3px;
      margin-bottom:1px;
      background:#3a3a3a;
      border-top:solid 1px #474747;
      border-left:solid 1px #474747;
      border-bottom:solid 1px #333;
      border-right:solid 1px #333;}

li a:hover {
      color:#fff;
      background:#333;
      border:solid 1px #333;
      border-bottom:solid 1px #474747;}

xhtml

<ul>
  <li><a href="index.html" rel="text_01">button-01</a></li>
  <li><a href="index.html" rel="text_02">button-02</a></li>
  <li><a href="index.html" rel="text_03">button-03</a></li>
  <li><a href="index.html" rel="text_04">button-04</a></li>
</ul>

++page top

T-02：ドロップキャプスを付ける

example

W3C勧告仕様書によれば、emタグはemphasis（強調）の意味でstrongタグはstronger emphasis（より強い強調）を意味しています。それによれば、通常の文章内で強調したい部分についおてはemで記述するのが正しいという事になります。しかしながらWebブラウザの初期スタイルでem要素が斜体で表示されるため、製作側がそれを嫌うemを飛び越えてstrongを使う事が多く見受けられます。斜体が問題ないのであればemのスタイルをCSSで使いたいものに変更すればいいだけなので、strongではなくemでマークアップするようにしたいですね。

css

p{
        width:400px;
        color:#fff;
        font-size:1em;
        line-height:1.5em;}

p:first-letter{
        float:left;
        font-size:3em;
        margin:0.1em 0.15em 0.1em 0.1em;
        display:inline;}

xhtml

<p>
  W3C勧告仕様書によれば・・・・・・・・・・
  ・・・・・・・・・・・・・・・・・・・・・
  ・・・・・・・・・・・・・・・・・・・・・
  ・・・・・・・・・・・・・・・・・・・・・
</p>

++page top

T-03：ボックスの上下にフェードアウト効果を付ける

example (This is not cross browser.)

W3C勧告仕様書によれば、emタグはemphasis（強調）の意味でstrongタグはstronger emphasis（より強い強調）を意味しています。それによれば、通常の文章内で強調したい部分についおてはemで記述するのが正しいという事になります。しかしながらWebブラウザの初期スタイルでem要素が斜体で表示されるため、製作側がそれを嫌うemを飛び越えてstrongを使う事が多く見受けられます。斜体が問題ないのであればemのスタイルをCSSで使いたいものに変更すればいいだけなので、strongではなくemでマークアップするようにしたいですね。
3C勧告仕様書によれば、emタグはemphasis（強調）の意味でstrongタグはstronger emphasis（より強い強調）を意味しています。それによれば、通常の文章内で強調したい部分についおてはemで記述するのが正しいという事になります。しかしながらWebブラウザの初期スタイルでem要素が斜体で表示されるため、製作側がそれを嫌うemを飛び越えてstrongを使う事が多く見受けられます。斜体が問題ないのであればemのスタイルをCSSで使いたいものに変更すればいいだけなので、strongではなくemでマークアップするようにしたいですね。
3C勧告仕様書によれば、emタグはemphasis（強調）の意味でstrongタグはstronger emphasis（より強い強調）を意味しています。それによれば、通常の文章内で強調したい部分についおてはemで記述するのが正しいという事になります。しかしながらWebブラウザの初期スタイルでem要素が斜体で表示されるため、製作側がそれを嫌うemを飛び越えてstrongを使う事が多く見受けられます。斜体が問題ないのであればemのスタイルをCSSで使いたいものに変更すればいいだけなので、strongではなくemでマークアップするようにしたいですね。

css

div{
        width:400px;
        position:relative;}

p{
        height:300px;
        overflow:auto;
        color:#fff;
        font-size:1em;
        line-height:1.5em;}

p#fade_top{
        width:100%;
        height:94px;
        position:absolute;
        top:0px;
        left:0px;
        z-index:10;
        background:url(fade_top.png) repeat-x;}

p#fade_bottom{
        width:100%;
        height:94px;
        position:absolute;
        bottom:0px;
        left:0px;
        z-index:11;
        background:url(fade_bottom.png) repeat-x;}

xhtml

<div>
  <p id="fade_top"></p>
  <p id="fade_bottom"></p>
  <p>
    W3C勧告仕様書によれば・・・・・・・・・・
    ・・・・・・・・・・・・・・・・・・・・・
    ・・・・・・・・・・・・・・・・・・・・・
    ・・・・・・・・・・・・・・・・・・・・・
  </p> 
</div>

++page top

T-04：テキストに擬似的なドロップシャドウをつける

example

ZEROLESS

ZEROLESS

ZEROLESS

ZEROLESS

css

div{
        width:400px;
        position:relative;}

p{
        font-size:54px;
        font-weight:bold;
        color:#555;
        margin:0px;
        padding:0px;}

p em{
        position:absolute;
        top:-6px;
        left:-2px;
        color:#fff;
        margin:0px;
        padding:0px;}

div.02 p{
        color:#eee;}

div.02 p em{
        color:#666;}

xhtml

<div>
  <p><em>ZEROLESS</em></p>
  <p>ZEROLESS</p>
</div>

<div id="02">
  <p><em>ZEROLESS</em></p>
  <p>ZEROLESS</p>
</div>

++page top

T-05：背景画像でタブリーダを付ける

example

アクセシビリティ項目1
アクセシビリティ項目2
アクセシビリティ項目3
アクセシビリティ項目4

css

ul{
        width:300px;

li{
        list-style:none;
        width:100%;
        margin-bottom:5px;
        background:url(...) left 50% repeat-x;}

li a{
        background:#111;
        color:#fff;
        padding-right:10px;}

li span{
        float:right;
        color:#fff;
        background:#111;
        padding-left:8px;}

xhtml

<ul>
	<li><span>アクセシビリティ</span><a href="#">項目1</a></li>
	<li><span>アクセシビリティ</span><a href="#">項目2</a></li>
	<li><span>アクセシビリティ</span><a href="#">項目3</a></li>
	<li><span>アクセシビリティ</span><a href="#">項目4</a></li>
</ul>

++page top

T-06：クロスブラウザで高さを100%にする

example

サンプル

css

html, body {
	height:100%;}

body > #wrapper {
	height:auto;}

#wrapper {
	height:100%;
	min-height:100%;
	background:#111111;}

h1 {
	color:#fff;
	font-size:50px;}

xhtml

<body>
<div id="wrapper">
  <h1>クロスブラウザでheightを100%にする</h1>
</div>
</body>

++page top

T-07：ＣＳＳ３で角丸ボックスを作る

example

角丸10px

角丸40px + 0px

角丸40px + 0px + 20px + 20px

css

p{
	background:#09c;
	width:200px;
	height:100px;}

p.01{
	border: solid 1px #fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;}

p.02{
	-moz-border-radius: 40px 0px;
	-webkit-border-top-left-radius: 40px;
	-webkit-border-top-right-radius: 40px;
	-webkit-border-bottom-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;}

p.03{
	-moz-border-radius: 40px 0px 20px 20px;
        -webkit-border-top-left-radius: 40px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;}

xhtml

<p class="01">角丸10px</p>
<p class="02">角丸40px + 0px</p>
<p class="03">角丸40px + 0px + 20px + 20px</p>

++page top

T-08：ＣＳＳで透過処理

example

透過80%

透過50%

透過20%

ロールオーバー

css

p{
	background:#09c;
	padding:25px;
	border:double 3px #fff;}

p.01{
	opacity: 0.8;
	filter:proid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=80);
	filter: alpha(opacity=80);}

p.02{
	opacity: 0.5;
	filter:proid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=50);
	filter: alpha(opacity=50);}

p.03{
	opacity: 0.2;
	filter:proid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=20);
	filter: alpha(opacity=20);}

p.04{
	background:none;
	padding:0;}

p.04 a{
	background:#09c;
	display:block;
	padding:25px;}

p.04 a:hover{
	opacity: 0.5;
	filter:proid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=50);
	filter: alpha(opacity=50);}

xhtml

<p class="01">透過80%</p>
<p class="02">透過50%</p>
<p class="03">透過20%</p>
<p class="04"><a href="#">ロールオーバー</a></p>

++page top

T-09：ＣＳＳとpngでマスクをかける

example

マスク sea

css

p{
	position:relative;
	height:91px;
	width:354px;
	overflow:hidden;}

p img{
	position:absolute;
	top:0px;
	left:0px;
	z-index:20;}

p img.01,
p img.02{
	z-index:30;}

xhtml

<p class="01">
	<img src="..." alt="マスク用png" width="354" height="91" class="01" />
	<img src="..." alt="" width="354" height="91" />
</p>
<p class="02">
	<img src="..." alt="マスク用png" width="354" height="91" class="02" />
	<img src="..." alt="" width="354" height="91" />
</p>

++page top

T-10：jQueryでインタラクションをかける

example

fadeIn fadeOut

fade トグルボタン

slide トグルボタン

hover

ON

OFF

toggle トグルボタン

css

a{
	margin-bottom:10px;
	background:#036;
	color:#fff;
	cursor:pointer;}

a:hover{
	border:none;
	background:#FF0;
	color:#000;}

div{
	overflow:hidden;
	border-bottom:1px solid #222;
	padding-bottom:10px;
	margin-bottom:10px;
	position:relative;}

div p{
	height:60px;
	width:180px;
	margin-bottom:10px;
	background:url(../images/img_t09_01.jpg);
	border:solid 1px #fff;
	color:#fff;
	font-size:30px;}

div p.t_10_05{
	display:none;
	border-color:#FC0;}

xhtml

<div class="t_10_01">
	<p>&nbsp;</p>
	<a class="t_10_01">fadeIn</a>
	<a class="t_10_02">fadeOut</a>
</div>
<div class="t_10_02">
	<p>&nbsp;</p>
	<a>fade トグルボタン</a>
</div>
<div class="t_10_03">
	<p>&nbsp;</p>
	<a>slide トグルボタン</a>
</div>
<div class="t_10_04">
	<p>&nbsp;</p>
	<a>hover</a>
</div>
<div class="t_10_05">
	<p>ON</p>
	<p class="t_10_05_01">OFF</p>
	<a>toggle トグルボタン</a>
</div>

jQuery

T_10 jQuery sample

++page top

T-11：フッターを固定する

example

サンプル

css

html, body {
	height:100%;
	margin:0px;
	padding:0px;
	background:#09c;}

#wrapper {
	position:relative;
	min-height:100%;}

#contents {
	padding-bottom:300px;}

#header {
	height:200px;}

#footer {
	position:absolute;
	bottom:0;
	width:100%;
	height:200px;}

xhtml

<body>
<div id="wrapper">
    <div id="header">
      <h1>フッターを固定する</h1>
    </div>
   <div id="contents">
    <div id="footer">
    </div>
  </div>
</div>
</body>

++page top

T-12：jQueryでCSSを操作する

example

lovness

sample_01

lovness

sample_02

lovness

sample_03

css

#t_12{
	width:300px;}

#t_12 a{
	margin-bottom:10px;
	background:#036;
	color:#fff;
	cursor:pointer;}

#t_12 a:hover{
	border:none;
	background:#FF0;
	color:#000;}

#t_12 div{
	overflow:hidden;
	border-bottom:1px solid #222;
	padding-bottom:10px;
	margin-bottom:10px;
	position:relative;}

#t_12 div p{
	text-align:center;
	margin-bottom:10px;
	color:#fff;
	font-size:30px;
	border:#036 5px solid;}

xhtml

<div class="box" id="t_12">
  <h4>example</h4>
  <div class="t_12_01">
    <p>lovness</p>
    <a class="t_12_01">sample_01</a> </div>
  <div class="t_12_02">
    <p>lovness</p>
    <a class="t_12_02">sample_02</a> </div>
  <div class="t_12_03">
    <p>lovness</p>
    <a class="t_12_03">sample_03</a> </div>
</div>

jQuery

T_10 jQuery sample

++page top

T-13：dlタグでナビゲーションを作る

example

dt : ページ内コンテンツ: dd : First Contetns; dd : Second Contens; dd : third Contents; dd : fourth Contents

dt00: dd01; dd02; dd03; dd04

css

#t_13{
	width:300px;}

#t_13 dt,
#t_13 dd{
	color:#ccc;
	line-height:22px;
	letter-spacing:4px;}

#t_13 dd a{
	line-height:22px;}

#t_13 .t_13_01 dt,
#t_13 .t_13_01 dd{
	font-size:10px;
	float:left;}

#t_13 .t_13_01 dl{
	margin-top:50px;
	overflow:hidden;}

#t_13 .t_13_01 dd{
	border-left:1px solid #ccc;}

#t_13 .t_13_01 dt,
#t_13 .t_13_01 a{
	display:block;
	padding:4px 6px;
	background:#333;
	border:none;}

#t_13 .t_13_01 a:hover{
	background:#111;}

xhtml

<div class="box" id="t_13">
  <h4>example</h4>
  <div>
    <dl>
	<dt>dt : ページ内コンテンツ</dt>
	<dd><a href="#">dd : First Contetns</a></dd>
	<dd><a href="#">dd : Second Contens</a></dd>
	<dd><a href="#">dd : third Contents</a></dd>
	<dd><a href="#">dd : fourth Contents</a></dd>
    </dl>
  </div>
  <div class="t_13_01">
    <dl>
	<dt>dt00</dt>
	<dd><a href="#">dd01</a></dd>
	<dd><a href="#">dd02</a></dd>
	<dd><a href="#">dd03</a></dd>
	<dd><a href="#">dd04</a></dd>
    </dl>
  </div>
</div>

++page top

zerolessArchive×Loveness Zeroless

CSS&jQuery_Technic+techics.

T-01：立体感のあるリンクボタン

example

css

xhtml

T-02：ドロップキャプスを付ける

example

css

xhtml

T-03：ボックスの上下にフェードアウト効果を付ける

example (This is not cross browser.)

css

xhtml

T-04：テキストに擬似的なドロップシャドウをつける

example

css

xhtml

T-05：背景画像でタブリーダを付ける

example

css

xhtml

T-06：クロスブラウザで高さを100%にする

example

css

xhtml

T-07：ＣＳＳ３で角丸ボックスを作る

example

css

xhtml

T-08：ＣＳＳで透過処理

example

css

xhtml

T-09：ＣＳＳとpngでマスクをかける

example

css

xhtml

T-10：jQueryでインタラクションをかける

example

css

xhtml

jQuery

T-11：フッターを固定する

example

css

xhtml

T-12：jQueryでCSSを操作する

example

css

xhtml

jQuery

T-13：dlタグでナビゲーションを作る

example

css

xhtml