articles

2013 年 6 月 20 日

CSS3 filter:blurでぼかし

CATEGORYCSSCSS3 　 1:28 AM

ドロップシャドウを用いてテキストにボケ表現をするパターンは見ますが、画像そのものをぼかす表現は見たことがなかったのでサンプル作ってみます。

header h1{
 -webkit-filter: blur(0px);
 -webkit-transition: all 0.2s linear;
 /*filter: blur(0px);*/
 /*transition: all 0.6s linear;*/
}

header h1:hover{
 filter: blur(0px);
 -webkit-filter: blur(10px);
}

このブログのことでした。

2013 年 6 月 19 日

IE10 ハック

CATEGORYCSShacks 　 8:22 PM

このブログは主に自分の備忘録なので、IEに関して何もしてないのです。
さすがに失礼なのとマイクロソフトのせいで恥をかかされるのもイヤなので
IE10限定ということで10行限定でハックを書くことにしました。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
　/*IE10 style*/
}

これで3行つかってます。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
　#articles{
　　width: 60%;
　}
}

これで5行です。
これ以上はIEに時間を割く気になれません。
IEで見てる人ごめんなさいだけど、そういった方がこういった情報を欲しがるわけもないので大丈夫だと思います。
あとFirefoxの方も多いのですが、すみません。
Fireboxがboxモデルに完全に対応するまでお待ち下さい (今はflexが使えないもようです）

2013 年 6 月 18 日

選択文字列の背景を変える

CATEGORYCSS3 　 1:59 AM

選択文字列の色をかえる方法です。
よく忘れるので。
使わないほうが無難と言われますが、使いたいのでしょうがないです。

::selection {
	color:white;
	background: #9b0000;
}

2013 年 6 月 18 日

CSS3 ボックスモデル

CATEGORYCSSCSS3 　 TAG 1:51 AM

このブログはCSS3に対応していないブラウザでは見れない形にしてあります。
というのも、boxモデルを使っているからです。
floatでの実装は高さを揃えるためにクリアしたりと古臭くて陳腐なのでやめました。

一番簡単な実装

#content{
	display: -webkit-box;
	display: -moz-box;
	margin: 0 0 50px 0;
	border-bottom:1px solid #333;
}
#articles{
	-webkit-box-flex: 1; 
	-moz-box-flex: 1;
	position: relative;
}

2013 年 2 月 8 日

CSS 基礎ですが、簡単な優先順位

CATEGORYCSS 　 1:48 PM

!importantは極力使わない方がいいというのは有名ですが
その代替として。

span.test1{
 margin:0 auto;
}

このように記述しているものをオーバーライドするときは
!importantをつかうと無茶苦茶になるので
上位のクラスやIDを指定するのが一般的

#container span.test1{
 margin:0 auto 0 10px;
}

なので最初から優先順位のことを考えずに

#container span.test1{
 margin:0 auto;
}

などとは書かないほうがいいみたい。

2011 年 1 月 24 日

CSS リンクのアウトライン? 枠線？

CATEGORYCSS 　 1:58 PM

リンクのアウトラインだか枠線だか
フォーカスがあたったときの例の点線を消す方法です。

a{ outline: none; }

これ、有名なんでしょうか？
全然知りませんでした。
blurとか使ってました。

2010 年 8 月 5 日

HTML CSS イメージ要素の隙間について

CATEGORYCSSHTML 　 TAG 1:45 PM

イメージ要素の隙間についてはいつも

#sample img {
 display:block;
}

として回避していましたが、

#saple img {
  vertical-align:bottom;
  height:100px;
}

とするやり方もあるようです。

heightは無理にいれなくてもよさそうです。
imgを強引にblock要素にするよりは素直っぽいです。

これからはvertical-align:bottom;を使っていきます。

勉強になりました。

2010 年 7 月 7 日

CSS IE7だけのハック

CATEGORYCSS 　 TAG 4:53 PM

なんだかアホらしいのでメモしたくなかったのですが一応。

#test {
　　position:absolude;
　　top:50px;
}
*:first-child+html #test {
　　/*IE7のみ適用される*/
　　top:50px;

}