SQLの窓 イラストAC フリー素材

2014年09月23日

CSS の子要素系の指定は、子としてのありかたであって親はなんであっても良いのですが、セレクタで指定された最初だけなんてのは指定できない

E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-child
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type

全て試したわけでは無いですが、E は、セレクタでも動作するようです。

いずれにしても、選択された対象が、その親からみてどういう状況かを指定するものであるので、例えば .class とかで任意のクラスの一覧を取得しても、その中の先頭は JavaScript でしか取り出せないです。

.class で取り出したおのおのが、例えば皆長男( first-child ) だったら、全員対象になります。

E:nth-child(n) : 兄弟のうち、上から数えて何番目か
E:nth-last-child(n) : 兄弟のうち、下から数えて何番目か
E:nth-of-type(n) : 兄弟のうち、ある特徴をもった中の何番目か
E:nth-last-of-type(n) : 兄弟のうち、ある特徴をもった中の下から何番目か
E:first-child : 長男または長女
E:last-child : 末っ子
E:first-of-type : 兄弟のうち、ある特徴をもった中で最も年上
E:last-of-type : 兄弟のうち、ある特徴をもった中で最も年下
E:only-child : 兄弟のうち、一人だけ特別な子
E:only-of-type : 兄弟のうち、一人だけある特徴を持った子

なんて意味で、別々の家族を含めた比較は行われないです。



タグ:CSS
posted by at 2014-09-23 13:46 | Comment(0) | CSS | このブログの読者になる | 更新情報をチェックする

2014年08月16日

とてもシンプルで応用実装可能な『LOADING』CSS

すこし変更するだけで、簡単に応用がききそうです。ただ、backface-visibility の効果がイマイチ良く解りません。範囲をラップした DIV 内に収めないと、ページのリンクが効かなくなりました。( ページ全体に対して実行するなら、意味ありますが )

あと、フォントの扱いでいろいろ微妙だったので、フォント部分は画像にしたほうがよさそうです。
Loading


Loading
オリジナルはこちらですが、ここではフォントは Google を使っていません。あと、表示位置レイアウトは調整しています。元々の仕様は、 position: fixed; を使用していて、ページ全体に対して固定位置なんですが、これは固定 DIV 内で使う事を想定して、top 指定だとアニメーションの都合で、上下運動になってます。

ま、これはこれでいいかなと。

下のほうは、bottom 指定なので、上下しません
<style type="text/css">
.quiver {
  position: absolute;
  top: 50px;
  left: 250px;
  width: 100px;
}

.quiver2 {
  position: absolute;
  bottom: 50px;
  left: 250px;
  width: 100px;
}

.arrows {
  -moz-animation: equalizor cubic-bezier(0.77, 0, 0.175, 1) 0.5s alternate-reverse infinite;
  -webkit-animation: equalizor cubic-bezier(0.77, 0, 0.175, 1) 0.5s alternate-reverse infinite;
  animation: equalizor cubic-bezier(0.77, 0, 0.175, 1) 0.5s alternate-reverse infinite;
  vertical-align: baseline;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 1px 10px;
  border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #0b486b rgba(255, 255, 255, 0);
}

.st {
  border-bottom-color: #0b486b;
}

.nd {
  border-bottom-color: #3b8686;
}

.rd {
  border-bottom-color: #79bd9a;
}

.th {
  border-bottom-color: #a8dba8;
}

.fth {
  border-bottom-color: #cff09e;
}

span:nth-child(1) {
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

span:nth-child(2) {
  -moz-animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

span:nth-child(3) {
  -moz-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

span:nth-child(4) {
  -moz-animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

span:nth-child(5) {
  -moz-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

@-moz-keyframes equalizor {
  from {
    border-bottom-width: 60px;
  }

  to {
    border-bottom-width: 1px;
  }
}
@-webkit-keyframes equalizor {
  from {
    border-bottom-width: 60px;
  }

  to {
    border-bottom-width: 1px;
  }
}
@keyframes equalizor {
  from {
    border-bottom-width: 60px;
  }

  to {
    border-bottom-width: 1px;
  }
}
.box * {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.loading {
  display: block;
  font: normal 25px/1em "Merriweather Sans", sans-serif;
  text-transform: uppercase;
  color: #cff09e;
}

</style>
<div class="box" style='width:600px;height:200px;background-color:#141517;position:relative;'>
<div class="quiver"><span class="arrows st"></span><span class="arrows nd"></span><span class="arrows rd"></span><span class="arrows th"></span><span class="arrows fth"></span><span class="loading">Loading</span></div></div>
<br><br>
<div class="box" style='width:600px;height:200px;background-color:#141517;position:relative;'>
<div class="quiver2"><span class="arrows st"></span><span class="arrows nd"></span><span class="arrows rd"></span><span class="arrows th"></span><span class="arrows fth"></span><span class="loading">Loading</span></div></div>



posted by at 2014-08-16 03:42 | Comment(0) | CSS | このブログの読者になる | 更新情報をチェックする

2014年08月12日

CSS 時計

オリジナルは、もっと細かくて実際に動きます(CSSのアニメーション機能で)。
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
<style>
ul { list-style:none; margin:0; padding:0 }
#watch {
	width: 600px; 
	font-size:1em; 
	position:relative 
}
#watch .frame-face {
  position:relative;
  width:30em;
  height:30em;
  margin:2em auto;
  border-radius:15em;
  background:-webkit-linear-gradient(top, #f9f9f9,#666);
  background:-moz-linear-gradient(top, #f9f9f9,#666);
  background:linear-gradient(to bottom, #f9f9f9,#666);
  box-shadow:rgba(0,0,0,.8) .5em .5em 4em;
}

/* 白い背景 */
#watch .frame-face:after {
  content:'';
  width:28em;
  height:28em;
  border-radius:14.2em;
  position:absolute;
  top:.9em; left:.9em;
  box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em;
  border:.1em solid rgba(0,0,0,.2);
  background:-webkit-linear-gradient(top, #fff, #ccc);
  background:-moz-linear-gradient(top, #fff, #ccc);
  background:linear-gradient(to bottom, #fff, #ccc);
}

/* 分目盛り */
#watch .minute-marks li {
  display:block;
  width:.2em;
  height:.6em;
  background:#929394;
  position:absolute;
  top:50%; left:50%;
  margin:-.4em 0 0 -.1em;
}


/* 5分単位の数字 */
#watch .digits li {
  font-size:1.6em;
  display:block;
  width:1.6em;
  height:1.6em;
  position:absolute;
  top:50%; left:50%;
  line-height:1.6em;
  text-align:center;
  margin:-.8em 0 0 -.8em;
  font-weight:bold;
}
#watch .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
#watch .digits li:nth-child(3) { transform:translate(8em, 0) }
#watch .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
#watch .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
#watch .digits li:nth-child(6) { transform:translate(0, 8em) }
#watch .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
#watch .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
#watch .digits li:nth-child(9) { transform:translate(-8em, 0) }
#watch .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
#watch .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
#watch .digits li:nth-child(12) { transform:translate(0, -8em) }

/* 短針 */
#watch .hours-hand {
  transform:rotate(90deg);

  width:.8em;
  height:7em;
  border-radius:0 0 .9em .9em;
  background:#232425;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -.8em -.4em;
  box-shadow:#232425 0 0 2px;
  transform-origin:0.4em 6.2em;
  animation:hours 43200s linear 0s infinite;
}
#watch .hours-hand:before {
  content:'';
  background:inherit;
  width:1.8em;
  height:.8em;
  border-radius:0 0 .8em .8em;
  box-shadow:#232425 0 0 1px;
  position:absolute;
  top:-.7em; left:-.5em;
}
#watch .hours-hand:after {
  content:'';
  width:0; height:0;
  border:.9em solid #232425;
  border-width:0 .9em 2.4em .9em;
  border-left-color:transparent;
  border-right-color:transparent;
  position:absolute;
  top:-3.1em; left:-.5em;
}

/* 長針 */
#watch .minutes-hand {
  transform:rotate(0deg);

  width:.8em;
  height:12.5em;
  border-radius:.5em;
  background:#343536;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -1.5em -.4em;
  box-shadow:#343536 0 0 2px;
  transform-origin:0.4em 11em;
  animation:minutes 3600s linear 0s infinite;
}

/* 秒針 */
#watch .seconds-hand {
  transform:rotate(90deg);

  width:.2em;
  height:14em;
  border-radius:.1em .1em 0 0/10em 10em 0 0;
  background:#c00;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -2em -.1em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  transform-origin:0.1em 12em;
  animation:seconds 60s steps(60, end) 0s infinite;
}
#watch .seconds-hand:before {
  content:'';
  width:.8em;
  height:3em;
  border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  background:inherit;
  position:absolute;
  left:-.35em; bottom:-3em;
}

/* デシタル部分 */
#watch .digital-wrap {
  width:9em;
  height:3em;
  position:absolute;
  top:50%; left:50%;
  margin:3em 0 0 -4.5em;
  overflow:hidden;
}
</style>
<div id="watch">
  <div class="frame-face"></div>
  <ul class="minute-marks">
  </ul>
  <div class="digital-wrap">
  </div>
  <ul class="digits">
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
    <li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
  </ul>
  <div class="hours-hand"></div>
  <div class="minutes-hand"></div>
  <div class="seconds-hand"></div>
</div>


posted by at 2014-08-12 01:19 | Comment(0) | CSS | このブログの読者になる | 更新情報をチェックする

2014年08月01日

CSS transition : 1) 最初の状態、2) マウスカーソルが上に乗った時の状態、3) 変化の定義

変化前と、変化後の状態を決めて、両方を DIV に対してクラスとして適用します。この場合、set_image と set_image:hover がそれに当たりますが、set_image をクラスとして適用すれば両方が有効です。

さらに、肝心のアニメーションの定義も適用すれば、マウスカーソルが DIV の上に来た時にアニメーションが実行されます。

transition: all 1.3s ease-out 0s;

all : set_image:hover で定義された全ての属性に対してアニメーションを行います
※ 個別に指定すると、それだけがアニメーションとなり、それ以外はアニメーションせずに切り替わります。

1.3s : 変化に要する時間
ease-out : 変化の仕方です。
0s : 変化する前の待ち時間( この場合はすぐ開始 )

少し前は、ブラウザ毎の指定が必要でしたが、現在 IE11、IE10、Chrome、Firefox で動作しています。
  -webkit-transition: all 1.3s ease-out 0s;
     -moz-transition: all 1.3s ease-out 0s;
       -o-transition: all 1.3s ease-out 0s;
<style type="text/css">
/**************************************/
/* 最初の状態 */
/**************************************/
.set_image {
	width: 526px;
	height: 526px;
	background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
	background-color: #000000;
}
/**************************************/
/* マウスカーソルが上に乗った時の状態 */
/**************************************/
.set_image:hover    {  
	width: 300px;
	height: 300px;
	background-position: -90px 0px;
	background-color: #4DBDB5;  
}  
/**************************************/
/* 変化の定義 */
/**************************************/
.box_transition {
	transition: all 1.3s ease-out 0s;
}
</style>
<div class="box_transition set_image"></div>

参考

http://css3please.com/


posted by at 2014-08-01 13:15 | CSS | このブログの読者になる | 更新情報をチェックする

2012年06月22日

各ブラウザ汎用 Linear Gradient( 縦横線形グラデーション )

わりと、IEも記述しているところ無かったので。ちなみに、IE は IE4(5.5でした) のころからこれできたはず。
<style>
.target_v {  
  width:100px;
  height:100px;
  background: -webkit-linear-gradient(top, #000000, #999999);
  background:    -moz-linear-gradient(top, #000000, #999999);
  background:      -o-linear-gradient(top, #000000, #999999);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#999999,GradientType=0);
}
.target_h {  
  width:100px;
  height:100px;
  background: -webkit-linear-gradient(left, #000000, #999999);
  background:    -moz-linear-gradient(left, #000000, #999999);
  background:      -o-linear-gradient(left, #000000, #999999);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#999999,GradientType=1);
}
</style>
<div class="target_v"></div>
<div class="target_h"></div>

と言うことでさっそく、Night Saver に適用しました。

参考

http://css3please.com/
GradientType

関連する記事

背景に画像を使い、画像に透過部分があると、CSS transition でその部分に効果が


posted by at 2012-06-22 02:39 | CSS | このブログの読者になる | 更新情報をチェックする

2008年08月21日

【CSS】インライン要素に固定幅を与える



IE は、Microsoft のブラウザですから、開発をベースを考えた場合に基本となります。
IE で動かなければ、エンドユーザに使ってもらえないからです。

ただ、全く他のブラウザを気にしていないようでは、システム屋としては落第なので、
自分のサイトでの問題はできるだけなんとかしようと思うものです。
( よほどの支障がなければ無視ですが )

で、これは専門外なので苦労しました。
現象としての問題は確定しているのですが、解決方法に心当たりが無く・・・


でもまあ、WEB さえあればなんとかなりますが、結局英文サイトまで行かないと
解決できなかったのは、このへんはあまり気にされていないのかもです。

蛇足ですが、良く 「IE の仕様がおかしい」とかいう言及がありますが、
システム屋は何を優先して、いかに時間短縮するかなので、そもそもそういう発想になりません。
どちらかと言えば、考え方は Microsoft サイドに近い考え方ですね。
多数派のエンドユーザを考えたコストパフォーマンス優先です。

そういう意味で、IE はブラウザでは無く、「プラットホーム」なので
開発者とエンドユーザの都合のいいように「仕様」が作られていて、
一般個人ユーザのおもわくとは違うところに「仕様」の考え方があります。

とは言っても、Microsoft は 一人を指すわけでは無いので問題はたくさんありますけど。


posted by at 2008-08-21 14:12 | CSS | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX