amapolaのブックマーク - はてなブックマーク

角丸ライブラリ - tikeda::Diary:

最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu

amapola 2006/05/01

リンク

はてな内の2カラムレイアウト - tikeda's blog

最近のリニューアルなどを経て、はてなのサイトは、2カラムでブラウザサイズに合せてメインカラムが可変するレイアウトが増えてるのですがキーワードページなどメインカラムの要素が様々だったり、カラムの上下左右と柔軟性が必要な場合が多く、色々やりくりした結果、floatを使った以下の方法で定着しています。 HTML <div id="main"> <div class="box"></div> <div class="box"></div> </div> <div id="sidebar"> </div> CSS #main{ float:left; width:100%; } #sidebar{ float:left; width:250px; background:#CCC; margin-left:-260px; } .box{ margin-right:260px; }こうすると、メインカラ

amapola 2006/04/29

リンク

tikeda::Diary - アクア風素材などのEPSデータ

以前、アクア風に関して描いたのですが、少し改良してバリエーションもできたので、よかったら使ってください。 aqua.zip 「！」とか「？」とかなんか描いてシャドウ落とせばそれっぽくなると思いますので。EPSデータだから、パスのままです。印刷にも使えます。分析したり、改造もできます。もちろん、僕もはてなのサイト内でもアクセントに使っていくつもりです。

amapola 2006/02/05

photoshop

リンク

tikeda::Diary - 今更だけどAqua風デザイン分解

OSXアイコンやWidgetなんかでは定番となってるAqua風のデザイン。ちょっと遅い感じですが、今更ながらAqua風を突っ込んでみました。 Photoshopを使った簡単な作り方のTIPSなんかは時々目にしてたので、自分はIllustratorでやってみた。現物は以下のドロップと矢印です。簡単なパスで作られたデータです。これだと印刷物なんかでも大丈夫。色々な応用も可能です。実際CMYKカラーで作りました。Photoshopでアルファやレイヤースタイルをいじらなくても、コツを見つければなんとなく作れます。拡大するとこういう感じどちらも、単なる単体のシンプルなグラデーションで塗られたオブジェクトを３つ・４つ重ねているだけです。今の所感じてるポイントとしては以下２つ面をはっきり出すことお互いのグラデーションの終わりと始まりがはっきりしていることで面がはっきりして「パリ」っとした硬い質