CSS と SVG で曇りガラスのような効果を作る | Unformed Building

2013/03/01 132 users SVG CSS Firefox カラス ブラウザ

2011年の9月に CSS と SVG filter でガラスっぽい効果をつける というのを書きましたが、これは Firefox のみを対象としたものでした。 そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。 完成品 Frosted glass effect with CSS & SVG 背景画像には WetFoto.com による #246 Wetlook with Beaut... 続きを読む

CSS の書き方についてのメモ | Unformed Building

2012/09/25 355 users CSS メモ 書き方

どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button cla... 続きを読む

サイト制作時のメモ 2012年前半 | Unformed Building

2012/08/16 259 users サイト制作時

ここ最近でサイトを作ったときに思ったことのメモです。 個人的なサイトを昨年末と今年の7月に1つずつ、仕事でやったのが春に1つ(結局なかったことにされたけど)、今やってるのが1つ。 昨年末のは一応レスポンシブウェブデザイン、7月のと春のは普通のソリッドレイアウト、今やってるのがスマートフォンサイト。 昨年末に作ったものについてははてなダイアリーの方でも書いたし、内容は被るけど改めて。 全般 HTML... 続きを読む

CSS の勉強中に困ったら | Unformed Building

2012/07/02 726 users CSS プロパティ 目次 仕様 CSS3

CSS の勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認する とりあえず W3C を見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate 現在の状況と仕様書の目次。 CSS3の日本語訳集 – ... 続きを読む

そのベンダー接頭辞はいつまで書くの？ | Unformed Building

2012/05/14 151 users ベンダー接頭辞 接頭辞 プレフィックス 接頭辞つき CSS

ベンダー接頭辞(プレフィックス)については最近いろいろと議論が活発ですが、そういう難しい話ではなくて、現状の CSS についての話です。 新しい CSS モジュールを使うために、ブラウザごとに接頭辞をつけなくてはいけない場合があります。まあそれについては現状では仕方ないことなんですが、接頭辞なしでも動作するようになったものでも、いつまで経っても接頭辞つきのものを書くのはどうなのかなと思うわけです。... 続きを読む

CSS Transforms についてのメモ | Unformed Building

2012/01/24 275 users メモ 自信 範囲 デモページ 自分

既に色々なデモページが作られていたり、実用されていたりする CSS Transforms ですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transforms は 2D と 3D とで別になっていますが、将来的には SVG Transforms と合わせて一... 続きを読む

CSS アニメーションの基礎 | Unformed Building

2011/10/07 531 users 基礎

今さらながら CSS animation の使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011 CSS animations – MDN 上のは dev.w3.org にある、2011年7月25日版のエディターズドラフトです。 ちなみに... 続きを読む

斜めグリッドを使ったデザインのウェブサイト集 | Unformed Building

2011/09/22 138 users インパクト ウェブサイト集 基準 デザイン サイト集

ここ最近のことなのですが、綺麗なデザインのサイト集なんかを見て回っていると何度か斜めグリッドを基準にしたデザインのサイトを見かけました。 こういうの何て言うんでしょうね。斜めグリッドなので Diagonal Grid Based Webdesign とでも言えばいいんでしょうか。 どのサイトも非常にインパクトが強く印象的だったので、数は少ないですが紹介してみようと思います。 Jessica Cal... 続きを読む

CSS3 での背景指定方法のまとめ | Unformed Building

2011/08/23 205 users プロパティ CSS モジュール ボーダー CSS3

CSS であれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3 ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3 現在の仕様です。 CSS 背景 & ボーダー モジュール ... 続きを読む