LimeChatのテーマ作成で遊ぶ、WebKitのCSS3
iPhoneの購入と同時にWebKitを触り始めたのですが、CSS Level 2と3の一部の機能を、何の不安も無く使える製作過程に感動しました。ちょっと未来のテクニックを先取りして発見しちゃったような気分にもなりました。 (中略) MacのLimeChatがWebKitを使っていて、CSSで自由にテーマを編集できることを思い出し、ひとつ実験的なものを作ってみました。:after, :beforeプロパティから、WebKitが独自に先攻実装しているCSS3のAnimation、Transition, Transformプロパティ、IE6がくたばれば使える透過PNGを使ったエフェクト、新たな色の値のRGBAプロパティバリューなど、CSSの記述も今まで馴染みの無い不思議な感じになってたりするので、興味のある方はテーマを使ってみて下さい。 Mac OSX LimeChat ver.1.0 用テー
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
サブスキン CSS
追記: 2008.01-07. Mono Crystal サブスキンも追加しました。スキンページからダウンロードできます。 以前のエントリーで CSS スキンの構成について解説しましたが、そこでスキンの色彩定義等をまとめたサブスキンというものを作ったと書きました。今回、Ninja スキンをベースに、イメージを大きく変える Boomer というサブスキンを作ったので紹介します。 Ninja スキンはデフォルトではモノクロのやや暗い感じの配色なのですが、サブスキンの入れ替えでイメージを変えやすいように作ってあり、サブスキン第一弾として、Ninja スキン用の Boomer サブスキンを配付しました。 Boomer sub skin Ninja スキンを適用後、style-ninja/subSkinを、Boomer のsubSkinフォルダと差し替えることで適用されます。 1-subSkin.
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
CSSNite LP, Disc3 行ってきたよレポート - 3ping.org
零次会 ついったー部のみんなとジョナサンで待ち合わせ。 あらかじめプリントアウトしておいたジョナサンの場所を示したGoogle Mapをセブンイレブンの姉ちゃんに見せて聞くも、「ちょっとわかんないですねぇ」といわれる。お礼をいって外でたら、その2階がジョナサンだった。どうなってんだ!! 初対面の人も多かったけど、なんかすんごい気軽に話せてびっこり。 みんなで僕の名刺を手書きで40枚製作。どうもありがとう! そのまま名刺配布。(どうもすみません、今度はちゃんと作ってきます) 12:15 davoくんと一緒に駅までRiszwさんとkomakuさんをおむかえ。 みんなでCSSNite会場へ向かう。思ってたより遠かった。 CSSNiteアフターパーティー ここでnicとmikiちゃんとkapponとカツオ合流CSSNiteアフターパーティの会場へ向かうためにみんなで歩く。 しばらく歩いたところで
ロゴとか作るときに使える地味なテクニック - 3ping.org
ウェブ製作では、閲覧者の環境にないフォントを使用するときは画像として製作してimg要素で貼り付けたりCSSで背景画像として表示させたりすることがありますが、そういうテキストを含む画像を作るときにはFLASH8のFlashTypeで作ると通常のアンチエイリアスより綺麗にできちゃう。 FlashTypeっていうのは、WindowsXPに搭載された ClearTypeと同じ仕組みのアンチエイリアス技術で、液晶モニターでは特にその視認性が優れています。ClearTypeは日本語フォントには対応していませんが(Vistaの新日本語フォントのみ対応)、FlashTypeでは英字・日本語フォント全てに対応しており、カスタムアンチエイリアスパネルで細かく調整できます。 次の画像はPhotoshopで製作した通常のアンチエイリアスと、FlashTypeを比較したものです。 中間色ではそれほど変化はみられませ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
