articles

2013 年 6 月 20 日

CSSハック firefoxも

CATEGORYCSShacks  3:10 AM

前日のIEハックの件で、ちょうどFirefoxもboxモデルあたりが危ういのでハックを入れました。

#articles,x:-moz-any-link, x:default {
width: 60%;
max-width: 1000px;
min-width: 300px;}

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 日

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;
}

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

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;を使っていきます。

勉強になりました。