CSS テキスト飾り罫（TexTsiTe）
border等でやるのもいいけど、そろそろＣＳＳ擬似要素でハッチャケちゃってもいい時期だと思うので、実験を兼ねて色々なパターンのサンプルを作ってみる。フォントによってどうなるかわからんのである程度は「お遊び」程度のものと捕らえて欲しい。ポイントになるのは、 字詰め（letter-spacingのマイナスの値） 「white-space:pre」必須（特に全角の文字等を使う際） 元要素に「overflow:hidden」必須 字詰めをやっとかないとアスキーアートやメルマガなんかと変わらないものが多いので注意。 その他、このパターンも良いよてなものがあったらコメント欄にでもガンガン入れちゃってください。サンプルに追加します（気が向いたら）。尚、サンプルのスタイルは都合上contentの量を減らしています。あと、このページのみ、のけぞるようなソースをしているが借り物のシステム上、お察し下さい。
フォトショいらず：CSSで画像の上に斜めの帯と文字を表示してみる - builder by ZDNet Japan
「FirefoxとSafariのCSS徹底検証」では、直近の2回に渡ってCSSのプロパティ「transform」を紹介している。 CSSでトランスフォーム：変形処理「transform」の基礎 CSSでトランスフォーム：1つの要素に複数の変形処理を適用する 今回は番外編として、transformプロパティを使って、画像に対し斜めの帯を付けて表示するテクニックを紹介しよう。 画像にななめの帯を付けて表示する transformプロパティを利用すれば、ヘッダー画像にななめの帯を付けるようなデザインをCSSで実現することができる。 たとえば、次のサンプルでは「Welcome to my Homepage」という文字を表示した黄色い帯を画像の右上に重ね、45度回転して表示している。このとき、黄色い帯の両端を画像に合わせてカットするため、全体を囲んだ
お得感を演出する | SIMPLE*SIMPLE
サイト上で懸賞キャンペーンをやることはよくある（かのYouTubeも最初のビデオを集めるためのiPodを配ったのだ）。 そんなときはPollDaddyのように「切り取り線のメタファー」を使うのも一つの手であろう。 「切り取り線」は「クーポン」を連想させ、「クーポン」は「お得感」を連想させる。 お得感を演出するには切り取り線。ちょっと覚えておいてもいいかもですね。
Photoshopで破線のボーダーの矩形を描く方法 - hedgehog’s blog
ネタがないので、今回は初めてのPhotoshopに関するエントリーです。 cssならば簡単に p.box { border:1px dotted #333 }のように破線のボーダーをもった矩形を描画できますが、デザインの段階でPhotoshopを使って同様のオブジェクトを描くのって皆さまどうしているでしょうか？「1px毎にカラーをコピーしていけばいいじゃん」と言われてしまえばそれまでなのですが、実際それも面倒だよなぁという方には使える小技かもしれません。 手順（Win Photoshop 7を使っています） 【前準備】 2x2pxの新規ファイルを用意します 新規レイヤーを作成します 背景レイヤーを削除します 左上と右下のピクセルを任意のカラーで塗りつぶします（右上の表示画像のようなパターンができます。これは56x56pxですが） メニューの「編集」から「パターンを定義」を選択し、作成したパ
icon Labo(アイコンラボ) -FirewoksでWeb素材-
Fireworksで作成した，アイコンなどのWeb素材の公開のほか画像処理からデザインまで幅広く書いています。 移転のお知らせ ただいま、icon Labo(アイコンラボ)の主要な記事を下記ブログへ移行しています。 »FindxFine -Web制作に関するメモ - アイコンラボの記事は主に移転先ブログFindxFineのGraphicのサブカテゴリーFireworksに移転します。 移行に伴いRSSが変更されますので、購読いただいている場合は変更をお願いします。 RSSへのリンクを記載します。ソーシャルブックマークなども変更いただければと思います。 »FindxFine(全体) »FindxFine(Gallery除く) »FindxFine(Galleryのみ) FindxFineでは通常の記事のほかに気になるウェブサイトをGalleryカテゴリーで紹介しています。 配信回数が多くなり
ページ全体に枠線をつけるCSSテクニック:phpspot開発日誌
CSS Trick: Creating a?Body-Border - CSS-Tricks Hicksdesign has been “fiddling” with their site design. ページ全体に枠線をつけるCSSテクニック。 ↓ブラウザのサイズを変更しても、水色の枠が画面にフィットするCSSサンプルです。 まず、マークアップ。上下左右用にdivを作成 <div id="left"></div> <div id="right"></div> <div id="top"></div> <div id="bottom"></div> 次にCSS。left,right,top,bottomのtop,left,rightなどを調節して、上下左右に設定して枠線を表現しています。 #top, #bottom, #left, #right { background: #a5ebff
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS:tableの枠線の色を付ける:border-collapse - Web Artisan Blog