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で角丸テ
LightBox風に角丸で可愛く画像をポップアップしてくれる「Facebox」:phpspot開発日誌
Facebox 1.0 Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. LightBox風に角丸で可愛く画像をポップアップしてくれる「Facebox」。 リンクをクリックで次のように画像をポップアップしてくれます。 これはFacebookでも使われているポップアップ方法のようで、知っている人は知っている、ポップアップの仕方のようです。 コードは次のように非常にシンプルです。 rel="facebox" でポップアップしてくれるみたいです。 <a href="/facebox/remote.html" rel="facebox">text</a> jQueryベースなので軽量な点もうれしいところ。 ちょっと気分を変えたい方は導入
影付き角丸テーブルをスタイルシートで作る その３ 〜３つのDIVと背景画像で〜
影付き角丸テーブルを作る その３ ～３つのDIVと背景画像～ 「影付き角丸テーブル その１」では、絶対指定と背景画像をミックスして角丸テーブルを実現しました。「影付き角丸テーブル その２」では、影付きのフレーム状の枠の中にテキストを入れてみました。 ここでは、全方位に影（グロー）が付いた角丸テーブルを、３つのDIV要素と背景画像を使うことで作成してみたいと思います。 完成例（円の半径：30px） 横幅は246px固定、縦はテキストの量に応じて v伸びるタイプの角丸テーブルです。テキストを入れるボックスのパディングは左14px、右22px、横幅は2108pxで、パディングと横幅を合計して246pxです（表示モードは標準準拠モード）。 どんな部品を使ったのか？ Firework 8 で横220pxの長方形を作成し、角を半径30pxで角丸にした上で、一番上と一番下を高さ42pxで影と一緒にスライ
Gimpで角丸でフェードのかかったコーナー画像の作り方 - Mattari Diary
追記：2012/02/12 コメントでも言及していますが、この記事はgimp2の現行バージョン(v2.6.11、追記時の最新版）に対応していません。 v2.6.11の場合での補足させていただくと、 ステップ4のドロップシャドウのメニューの位置は、メニューバーからフィルタ - 照明と投影内にあります ステップ7の「前景から透明に」は「描写色から透明」と同意です 記事本文 今回は、Gimpで角丸でフェードのかかったコーナー画像の作り方です。 どんなものかというと フェードがかかったカッコいいコーナーのサンプル画像集:phpspot開発日誌 こんなやつです。 かっこいいです。真似たいです。 ってことでここからサンプルをダウンロードして、真似てみましたので、手順なんかをメモっておきます。 Gimpで作ったわけですが、Photoshopでもほとんど同じようにできるかと思います。 手順 初期レイヤーの
フェードがかかったカッコいいコーナーのサンプル画像集:phpspot開発日誌
BittBox 実Free Fading Corner Images I see more and more fading corners every day, so I decided to put together some freebies, since they are becoming popular. フェードがかかったカッコいいコーナーのサンプル画像集。 次のようなフェードがかかったコーナー画像をダウンロードできます。 画像形式はgif,png,jpgの他、PhotoShopデータであるpsdファイルも含まれています。 CSSなんかでブロック要素にあてはめて、カッコいい枠を作るのに役立ちますね。 尚、当方のIEではなぜかダウンロードリンクがうまく機能しないので、Firefox等でダウンロードする必要があるようです。 関連エントリ PDFやEXE、CSS等ファイルのフォーマット
RoundedCornr: Rounded Corner and Gradient Generator
Howdy! Welcome to our vaping tribe. We are a group of American Indians who take a keek interest in vaping. For many years, our people have suffered under the harmful health effects of tobacco cigarettes. We are now pushing for everyone to start vaping, as some studies have shown that it is slightly less dangerous than tobacco itself. Our tribe recognizes that not all vaping manufacturers are creat
Spiffy Corners - Purely CSS Rounded Corners
Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff. What? Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript. Why? I needed a way to create anti-aliased round corners without the extra server calls that are incurred when using external JavaScript files or images. When your websites are
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
影付き角丸テーブルをスタイルシートで作る ～絶対指定と背景画像を駆使する～
Cornershop - Rounded Graphics for CSS Box Corners