角丸に角丸を入れ子にした時、それぞれの角丸をバランスよくデザインする方法
角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。 こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。 しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners Done Right 見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。
[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ
一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。
Photoshopのシェイプツールでオブジェクトの輪郭をくっきりさせる方法
知ってる人には当たり前だと思いますが、Photoshopのシェイプツールを使って描いたオブジェクトの輪郭をくっきりさせる方法を紹介します。 Fixing Photoshop's Shape Tool [ad#ad-2] 上記だと違いが分かりにくいかもしれないので、拡大すると下記のようにオブジェクトの輪郭がくっきりしているのが分かると思います。
3Dグラフィックデザインのまとめエントリ
Color Theory for Designers: Understanding the Psychology of Color
透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ
cssやプログラミングIEのバグはJSで IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_b
IE6・7・8でCSS3の角丸などを有効にするスクリプト『IE-CSS3.htc』
IE6・7・8でCSS3の角丸などを有効にするスクリプト『IE-CSS3.htc』 2010/04/13 | カテゴリ：Web制作全般 ◆CSS3 support in Internet Explorer 6, 7, and 8 IE6・7・8でもCSS3による角丸など、CSS3の一部項目が有効になるスクリプトが公開されているので紹介します。 IEでのデモ IE8で見たところ、以下のようになります。 CSS CSSは以下のようになっています。 .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet
1px欠けの角丸ボックスをCSSだけで作る方法｜web bibo
スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:
Photoshopで簡単に角丸画像を作成するフィルタプラグイン - ミblog : レビューや日常など
2008-02-27 ソフト（ツール） Photoshop Photoshopで角丸画像を作成するのって意外と面倒だったりしますよね。そんな時に便利なのがpentacomさんのRounded Cornerというフィルタプラグイン。これを使えば10秒で角丸の画像やボタンを作成することが可能です。 ダウンロード→pentaco – Rounded Corner こんな画像があっという間。角丸のサイズも調整することが可能です。 まとめサイトでよく紹介されているフリーのスタイルやグラデーションを使えば、こんなボタンもすぐに作れます。 他にもこのような画像効果をつけれるプラグインが公開されています。どれも頻繁に使えるものばかりなのでおすすめ。
画像を使わずに角丸を描画する『Liquid Canvas』 – creamu
「ruzee.com」で、HTMLのcanvas要素の中に描画できるJavaScriptライブラリ「Liquid Canvas」が公開されています。 ↑のような背景が作れてしまう、とのことですね。 デモは以下から見られます。 » Demo » basic example ブラウザはFx, IE6, Safari, Chromeでテスト済みとのことですね（ざっくりしていますが）。 ソースがダウンロードできるので、ぜひ見てみてはいかがでしょうか？ » Liquid Canvas ジョリーみたさに「トゥームレイダー 2」を見た。なかなかおもろかったね。でも最近の方がキレがある感じかな。 やること満載で混乱しています。今のサーバが海外からアクセスできない＞＜ので海外に行く前に移行しないといけなくてサーバはあそこにしようかな、とそれでメールサーバーはGoogleAppsを使おうと思ってるけどmxレコ
[CSS]一枚の画像で、四隅が角丸のパネルを実装するスタイルシート
Usability Postから、一枚の画像で、四隅が角丸のパネルを実装するスタイルシートを紹介します。 Scalable Content Box Using Only One Background Image demo 仕組みは、全体を囲む「div」と見出し「h2」に同じ背景画像を指定し、それぞれポジションを「bottom」と「top」にして配置するものです。 仕組みのイメージ 本文のテキストは、背景画像の長さ分（デモでは1000px）までテキスト量が増えても正常に表示されます。 見出しは、同じく見出しの長さ分（40px）までとなります。 追記： 下にある「Update」に、本文量がどれだけ増えても大丈夫なバージョンがあります。 demo 2
Modern Syntax : CSでのWeb2.0スタイルの角丸上半分テカリボタンの作り方
今回のモダシンラジオはここ2週間で観た映画について一人語りする回です。以下の4本の映画について14分48秒程喋っております。 ・ゴールドボーイ ・DOGMAN ドッグマン ・瞼の転校生 ・デューン 砂の惑星PART2 さて、モダシンラジオのデータをホスティングしてもらっているSpotify for Podcasters(旧Anchor）の私のページはこちらです。 https://podcasters.spotify.com/pod/show/kazuyoshi-nagasawa このSpotify for PodcastersページのRSSは以下になります。こちらのRSSではenclosureタグなどでlength値などがしっかり入っているのでこれを購読しておくとよいかと思います。 https://anchor.fm/s/66ff2830/podcast/rss ここで聴く！という人は以下
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』:phpspot開発日誌
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』 2006年10月01日- Transcorners ? Cornerus Pride is there *scared* Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn. CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』。 mootoolsをフレームワークとして使用しています。 次のように、左下の大きな角丸や、右上の一部切り取ったような角も簡単に実現できます。 大きな角丸を作るには、radiusというプロパティを大きく指定することで実現できます。 この
画像を角丸にしたり影を付けたりできる「Corner.js」
画像の角をまるっこくしたり、影を付けたりといったことが簡単にできる「Corner.js」というのが公開されたようです。これらを組み合わせることも可能なのでかなり応用の幅は広いかと。 実際のサンプルは以下の通り。 Corner.js http://www.netzgesta.de/corner/ これはノーマル状態 グラデーションシェードを付ける 影を付ける 角を丸くする へこんだ感じの影にする そしてそれらを全部組み合わせることも自由自在 これぐらいまるくすることも可能 オリジナルのアイディアは「reflection.js」から来ているようですが、それにしてもすごい。
JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」:phpspot開発日誌
JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」 2007年03月27日- ruzee.com - Steffen Rusitschka ShadedBorder - JavaScript Round Corners with Drop Shadow Rouding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed. JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」。 同様のライブラリに Nifty Corners がありますが、これを更に進化させ、使いやすく、高速に、かつよ
CSSで角丸テクニック２５:phpspot開発日誌
CSS Juice - Design, Tutorial, Showcase and more 25 Rounded Corners Techniques with CSS Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. CSSで角丸テクニック２５がまとめられていました。 様々なサイトにでの角丸実装ドキュメントのまとめです。 Sliding Doors Even More Round
1個の画像でシンプルに角丸を実装するCSSサンプル:phpspot開発日誌
Simple Round Corners in CSS (revisited) We are going to use a single image (20px x 20px) to provide our rounded corners and to save on using different images we will use one image only and simply place each corner into place using the background-position property. 1個の画像でシンプルに角丸を実装するCSSサンプル。 使うのは次の1枚の300バイトの画像。 なるほど、これでポジションをずらしてあげれば、画像は1枚でシンプルに実装できるわけですね。 HTMLマークアップとCSSの紹介と解説がされてます。 関連エントリ CSSで角丸テ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Border Radius
http://www.css-lecture.com/log/css3/css3-border-radius.html
グラデーションや角丸を使用したエレメントを簡単に作成できるジェネレーター -Fresh Generator | コリス
[JS]角丸を簡単な記述で実装するスクリプト -Roundcorners Canvas | コリス