『Unformed Building』 の新着エントリー
-
CSS Filter Effects! | Unformed Building unformedbuilding.com
CSS Filter Effects の紹介をしてみたいと思います。 現在、このプロパティは Webkit nightly と Google Chrome Canary で使うことができます。たぶん dev とかにももうすぐ来るんじゃないでしょうか。 Filter Effects 1.0 – ... 続きを読む
-
vw, vh, vm(vmin) という単位についての覚え書き | Unformed Buildin... unformedbuilding.com
CSS Values and Units Module Level 3 の Viewport-relative lengths (Viewport-percentage lengths) についての覚え書きです。 これは新しく追加された長さの単位です。 CSS Values and Units... 続きを読む
-
自分用 CSS スタイルガイド | Unformed Building unformedbuilding.com
2011年12月時点での CSS を書くときの自分内での決まりごとを書いておきます。 まあこういうのは自分(やチーム)が分かりやすければ何でもいいと思いますけどね。 基本的に自分以外は編集することがないので、結構好き勝手に書いてます。 インデント・改行・空白 基本的にセレクタはインデントなし。... 続きを読む
-
CSS でつまづいたポイント ― transparent, transition, box-sizing ... unformedbuilding.com
CSS でつまづいたポイント ― transparent, transition, box-sizing 過去に CSS でつまづいたポイントとかメモしておこうと思います。 このくらい分かっとけと言われそうですが、まあ自分はその程度だということで。 transparent について CSS グ... 続きを読む
-
SVG & CSS でアンサガのスキルパネルのようなメニューを作る | Unfor... unformedbuilding.com
「SVG にチャレンジ！ 第1回」です。第2回があるかは分かりません。 インライン SVG を使って「アンリミテッド：サガ」というゲームのスキルパネル風のメニューを作ります。 実物は "アンリミテッドサガ スキルパネル" とかで画像検索してみてください。 このスクエアさんの「アンリミテッド：サ... 続きを読む
-
三角形のキャプションがスライドインするイメージギャラリー | Unfor... unformedbuilding.com
Wixel を見ていて、ナビゲーションの見せ方が面白いなーと思ったので、CSS transition を使ってギャラリーに応用してみました。 まあ練習にはなったかなと思いますｗ ギャラリー "旧古河庭園にて" デモファイルをダウンロード どうでもいいですが写真は自分で撮ったものです。 もっと見... 続きを読む
-
CSS アニメーションの基礎 | Unformed Building unformedbuilding.com
今さらながら CSS animation の使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011 CSS animations – ... 続きを読む
-
テキストを CSS 用にエスケープするオンラインツールを作ってみた | ... unformedbuilding.com
テキストを CSS 用にエスケープするツールを作ったので、一応紹介しておきます。 CSS の content プロパティなどでテキストを書くときなど、そのまま書いてもいいのですが、日本語などの場合は文字コードが面倒くさいのでエスケープした文字列を入れておくと便利だと思っています。 font-f... 続きを読む
-
斜めグリッドを使ったデザインのウェブサイト集 | Unformed Building unformedbuilding.com
ここ最近のことなのですが、綺麗なデザインのサイト集なんかを見て回っていると何度か斜めグリッドを基準にしたデザインのサイトを見かけました。 こういうの何て言うんでしょうね。斜めグリッドなので Diagonal Grid Based Webdesign とでも言えばいいんでしょうか。 どのサイトも... 続きを読む
-
CSS と SVG filter でガラスっぽい効果をつける | Unformed Building unformedbuilding.com
SVG のフィルタについては以前も少し書きましたが、今回は feGaussianBlur 要素を使って、ガラスのようなエフェクトを付けてみたいと思います。 デモページは以下ですが、たぶん Firefox でしかちゃんと見れないと思います。 Glass effect with CSS & SVG... 続きを読む
-
CSS を拡張して記述できる PHP ベースのプリプロセッサ PCSS と CSS ... unformedbuilding.com
CSS を拡張して記述できるものと言えば、Sass(SCSS) と LESS が有名ですね。 これらは HTML/CSS フレームワークなどでも使われていたり、日本語での解説も多くあります。 ですが、今回はそのどちらでもない、PHP ベースのプリプロセッサである PCSS と CSS Crus... 続きを読む
-
CSS3 での背景指定方法のまとめ | Unformed Building unformedbuilding.com
CSS であれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3 ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and... 続きを読む
-
[翻訳] これから HTML と CSS を学び始める君へ | Unformed Building unformedbuilding.com
この記事は、Stack Overflow に投稿された、user553944 による質問 Would you recommend starting from HTML5 & CSS3 for beginners? と、Boldewyn による 最も評価されていた回答 を翻訳したものです。 翻訳... 続きを読む
-
マウスホバーでキラッとするエフェクトいろいろ | Unformed Building unformedbuilding.com
Google の +1 ボタンが検索結果に反映されるようになりましたね。 あのボタン、検索結果アイテムにマウスホバーでキラッとするんですが、それを見ていて以前 jsdo.it で作ったのを思い出したので、fork されたものも含めてまとめてみようかと思います。 作ろうと思ったきっかけは、Add... 続きを読む -
News Links N.1: 2011-06-27 | Unformed Building unformedbuilding.com
最初なので、ここ数日ではなく最近1ヶ月ほどで印象に残ったものを紹介しようと思います。 HTML & CSS Namespacing fragment identifiers ― CSS Wizardry HTML の id 属性に .(ドット) と :(コロン) が使えることについての問題点と... 続きを読む
-
@supports と @document に関する覚え書き | Unformed Building unformedbuilding.com
CSS Conditional Rules Module Level 3 にある Feature queries と Document queries の簡単な説明と覚え書きです。 Media-specific style sheets (@media) は色んなところで解説されてるのでここで... 続きを読む
-
Google Chrome で text-shadow したフォントの表示がおかしくなる条... unformedbuilding.com
Google Chrome で text-shadow したフォントの表示がおかしくなることがあったのでちょっと調べてみました。 Arial やメイリオといったアンチエイリアスのかかったフォントが汚くなったり、ビットマップフォントにアンチエイリアスがかかってしまう現象です。 環境は Windo... 続きを読む
-
コンパクトな月間アーカイブメニューを作ってみる | Unformed Buildi... unformedbuilding.com
よくブログのサイドバーやフッターなんかで見かける月間アーカイブメニューですが、ちょっとスペース取りすぎだと思っています。 そんなアーカイブメニューですが、素敵なデザインを見かけましたので、そのデザインを参考にして自分なりにコンパクトなアーカイブメニューを作ってみました。 参考にしたのは以下のサ... 続きを読む
-
WordPress 日本語版で、テーマ内の日付を英語表記で表示する | Unfor... unformedbuilding.com
WordPress の記事公開日を英語表記にしたい場合ってありますよね。 "May 12th, 2011" みたいに表示したい、そういうときは the_time('F jS, Y') でいいはずなんですが、WordPress 日本語版だと "5月 12th, 2011" ってなっちゃうんですよ... 続きを読む
-
[翻訳]モバイル向けの CSS Media Queries は見掛け倒しである | Unfo... unformedbuilding.com
この記事は、2010年8月3日に Jason Grigsby によって書かれた CSS Media Query for Mobile is Fool’s Gold を翻訳したものです。 画像・表・リンクなどは掲載していませんし、翻訳が怪しい場所がところどころにありますので、ちゃんと読みたい方は... 続きを読む
はてなブックマーク
