もはや「Web2.0デザイン」といえば外すことが出来ない角丸(Rounded Corners)。実現させるにはいろいろな方法がありますが、今回は CSSで角をもっと丸くする方法いろいろ - GIGAZINE で紹介されている方法にチャレンジしてみました。 » More Rounded Corners with CSS - Schillmania.com まずは、利用する角丸の画像を作成。Fireworks でやってみます。 角丸矩形で横幅が1600pxぐらいの角丸矩形を描画します。 スライスツールを使って以下のように6つのスライスを作成します。 [最適化]パネルで書き出すファイル形式を「GIF」にして、書き出しを実行します。すると、6つのGIFファイルが作成されます。 これで画像の用意ができました。次に HTML と CSS です。
代表中山陽平 ブログ「苦手意識を無くせばWeb活用はうまくいく」弊社では「がんばる中小企業」のWeb活用をサポートしています。今の時代、第3者である、制作会社や代理店におまかせでは勝てません。同じような商品・サービスが溢れる中、選んでもらうためのコンセプトを立て、それを実現するためにネットもリアルも総動員しながら戦う必要があります。 みなさんが世の中に・自社の従業員に実現したい幸せや提供価値を、しっかりと実現していくためには、みなさん自身が主役になり、私達のような専門会社が側面支援するのがベストです。 このブログでは御社が中心となってウェブ活用できるヒントを配信しています。お悩みの方はお気軽に問い合わせフォームからご相談ください。 最新の記事一覧
More Nifty Corners | Web Design | PRO.HTML.IT Nifty Corners are a combination of CSS and Javascript to get rounded corners without images. The technique is made up of four essential parts: 「Javascriptで指定のHTML要素を動的に角丸デザインにする方法」で紹介したNiftyCornersですが、このページで紹介されている方法を使えば、アンチエイリアスな角丸を設定することが出来るようです。 使い方はちょっと変わって、 Rounded("div#nifty","all","#FFF","#D4DDFF","smooth"); のようになっています。 第二引数と第五引数が追加される形になっています。
Spiffy Corners - Making anti-aliased rounded corners with CSS Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff アンチエイリアスがかかったCSS角丸を作るWEBツール。 FG,BG Colorを入れるだけで簡単にアンチエイリアスがかかったCSS角丸枠が作れます。 もちろん、画像やFlashは一切使わない、CSSオンリーで実現されています。 次の図のように美しい角丸が実現可能。 作成されるタグは<b>タグで構成されているので、この部分を修正すればよいかもしれませんね。 関連エントリ: Javascriptで指定のHTML要素を動的に角丸デザインにする方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く