テキストの回りこみ処理をCSSで実現するための『CSS Text Wrapper』 | 100SHIKI
テキストの回りこみ処理をCSSで実現するための『CSS Text Wrapper』 December 7th, 2007 Posted in その他 Write comment 他サイトでも紹介されているが、個人的にぐっと来たのでご紹介。 複雑な図形の形にあわせてテキストを回り込ませたい、というときがたまにある。 ワードやイラストレーターではそういった処理が可能だが、ウェブでそれを再現しようと思うとちょっと厄介だ。 そこで登場したのがCSS Text Wrapperだ。このサイトでは自分で好きな図形を描き、それにあわせてテキストを配置することができる。 そのようにして作った「テキストの回りこみ処理」はCSSのコードでダウンロードすることができる。このコードを回り込ませたいテキストの直前に配置するなどすれば自分のサイトで簡単に応用可能だ。 ウェブで表現するのが厄介、で思考停止せずに、こうした
ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
WEB制作者のための32個のブックマークまとめ（part2）*ホームページを作る人のネタ帳
前回ご紹介した 今押さえておくべきWeb制作に役立つ37個のブックマークまとめ と一緒にあわせて使うとより強力になるかもしれません。 前回の記事のあとにみつけた32個のブックマーク集です。 WEBツール CSS Dock Menu マックのドックのような動きをするインターフェイスタブをあなたのページにつける事が出来るツール。動きが滑らか。 Dynamic Page Flip v2 from shift+control 本をぺらぺらとめくるようなイメージギャラリー。 これはかなり見た目インパクトが強い。 画面中央左の『Download the source files』のところで無料でダウンロードできる。オリジナルのカタログもつくれそう。 ためしに使ってみたけど、RSSパーサーと組み合わせると、ページにRSS受信も出来た。アイデア次第でなんでもいけそうですよ。 10 Free CSS Gra
404 Blog Not Found:誤った404エラーページをつくるただ1つの方法
2007年03月29日23:00 カテゴリiTech 誤った404エラーページをつくるただ1つの方法 この話題は以前「404 Blog Not Found:200 Blog Not Found」でも触れたのだけど、まだわかっていない人々があとを断たないのでもう一度。 わかりやすい404エラーページについて考えてみる | caramel*vanilla アクセスされたページを削除してしまったのなら仕方ありませんが、URLが変わっただけならなんとか探し当てていただきたいもの。 せっかくなにかのきっかけで訪れてくれた方をガッカリさせたままでは申し訳ありません。 なにかのきっかけで訪れるのは、人間とは限りません。 特に検索エンジンは「非人間の訪問者」としては非常に重要な訪問者です。 「彼ら」にとって「ページが存在しない」とはいったいどういうことでしょう? ページがわかりやすいこと? 違います。その
Design Spice - ドットモザイク
Captcha security check designspice.com is for sale Please prove you're not a robot View Price Processing
53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is. Over the la
IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法:phpspot開発日誌
Insert HTML page into another HTML page | published @ aplus moments IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。 Objectタグで外部ファイルを読み込む方法があるんですね。 <html> <head> <title>test</title> </head> <body> <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="/exec/some.html" style="width:100;height:100px"> <p>non object</p> </object> <![endif]--> <!--[if !IE]> <--> <object type="text/html
Hybrid CSS Dropdowns
I know what you’re thinking…“Do we really need another article about CSS dropdowns?” Allow me to convince you. What if we could have one clean, well-structured menu which would combine the dynamism and code-ease of dropdown menus and do away with their main problems (not to mention degrade beautifully)? The problems with dropdown menus are: their secondary options are inaccesible unless you activa
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ:phpspot開発日誌
wg:Bubble Tooltips Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. 吹き出し方式のツールチップテキスト作成JavaScriptライブラリ。 次のような吹き出し方式のツールチップテキストを作成できます。 次のようなJavascriptコードを書いておき、 <script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script> アンカー<a>タグのt
Lightbox JS
Overview Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. Note: An new version of this script is available: Lightbox JS v2.0 Example To make sense of it all, check out these examples. Click on a thumbnail or text link below: Benefits Places images above your current page, not within. This frees you fr
Lightbox 2
Overview Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. What's New in Version 2 Image Sets: group related images and navigate through them with ease Visual Effects: fancy pants transitions Backwards Compatibility: yes! How to Use Part 1 - Setup Lightbox 2 uses the Prototype Framework and Scriptaculous Effe
Javascriptで指定のHTML要素を動的に角丸デザインにする方法:phpspot開発日誌
Nifty Corners This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. Javascriptで指定のHTML要素を動的に角丸デザインにする方法。 NiftyCornerを使えば、単一のDIV要素を角丸デザインにすることが可能です。 例えば、次のような単一DIV要素も簡単に角丸にできます。 <div id="nifty"><p>test</p></div> <script type="text/javascript"> Rounded("div#nifty","#377CB1","#9
AQUA風ボタンの作り方リンク集 - チープカ
00:06 | いろんなサイトをみているとそこかしこで見かけるいわゆるフォトショップでのAQUA風ボタンの作り方が紹介されているページを（主にはてブから）集めてみました。http://quarter.vis.ne.jp/books/log/eid329.htmlhttp://www.0range.cc/icon/tips/TIPS3/index.shtmlhttp://www.allef.com/gpx/aqua/index.phphttp://www.tutorialoutpost.com/count/2272http://www.tutorialoutpost.com/count/182http://home.zonnet.nl/epragt/tutorials/photoshop/shapesandobjects/aquabuttonprop6/index.jsp.htmhttp:/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
aplus moments
caramel*vanilla
デフォルトスタイルの差異を無くすCSS
Shift: Zoho Writer に待ちに待った機能が・・・
［220436］以前の Illustrator 形式で保存する際の注意事項