(個人的な)Graceful Degradationへのシフト webcre8はこれまでIE対応の必要な環境で仕事をしていた為あまりIE6,7で使えない技術には興味が湧かなかったんですが、(ずっと進んでない)ブログのリニューアルのことを考えていると、やはりどうしても擬似要素や過去ブラウザを無視(ざっくり対応)した形でのCSS3の使い方に魅力を感じてしまうわけです。 つまりプログレッシブ・エンハンスメント→グレースフル・デグラデーション的な考え方に気持ちがシフトしているんですね。そしてどうせCSS3を使用してディティールに凝るのなら、「空divや重ね使いで無理矢理作っていたものをさっくり作れる」ことに驚くより、「フォールバックを意識したコーディングをして過去ブラウザにはあっさりコンテンツを見せる」方がやっぱりいいなーと感じているわけです。 とりあえず擬似要素で そこで今回は自分が擬似要素を使

一週間ぐらい前の記事だが、さっき以下の記事を読んだ。 社会人の俺が考えた最良の学生生活プランを教える http://blog.livedoor.jp/kinisoku/archives/3680986.html 学生生活の過ごし方、というのはなかなか難しい。世の中には無数の「学生時代の過ごし方」についてのアドバイスがあるが（本まで出てるくらいだ）、正直、普遍的な「正解」は無いと思っている。というのも、価値観に依存するところが大きいからだ。僕は「働きたくない」という価値観の持ち主なので、学生時代に会社に入ってから役に立つことを一生懸命学ぶというのは意味が無いと思っているが、これとは真逆のことを考えている人もいるわけで、どっちが正しいとは断言しづらい。そういう意味で、このトピックについて何かを書くと、どうしてもチラ裏的なところが生じてしまうのは避けられない。 それでも、今日は学生時代の過ごし方

HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);