CSS Tinderbox
Does This Browser Make Me Look Fat? Any web designer/developer worth their salt understands the importance of cross-browser compatibility. Admittedly, taking the time to check your work across multiple browsers can add up, especially when you come across the proverbial square peg not wanting to go in a round hold. (Note: The role of the square peg is more often than not being played by IE6 and the
MOONGIFT: » プレゼンのお供に「Slider.js」:オープンソースを毎日紹介
技術者のプレゼンが熱い。毎度、色々なプレゼンを見るたびに様々な趣向がこらされ、新しいテクニックが登場している。内容もさることながら、視覚に訴えるテクニックも見逃せない。 単なるPowerPointのプレゼンではメリハリもなく、ありきたり過ぎる。視覚的に興味をひきつけられれば、あなたのプレゼンはもっと面白くなるに違いない。 今回紹介するオープンソース・ソフトウェアはSlider.js、横の変化による視覚アクションを起こすJavaScriptライブラリだ。 簡単に言うと、スライドを切り替える際、縦ではなく横から次のスライドが登場してくる。まさにスライドだ。Webの画面というと大抵、縦にページ送りされるイメージがあるので、横に変化するだけでも新鮮に感じられる。 動作にはprototype.js、Scriptaculousが利用されている。HTMLとCSSに簡単な指定をするだけで使えるので、サイト
MOONGIFT: » 不要なCSSの洗い出し「CSS Redundancy Checker」:オープンソースを毎日紹介
CSSははじめこそきちんと定義しながら進めるのだが、修正が重なったり、日々の運用の中で徐々に肥大化していく。HTMLと同じで多少間違っていたり、不要な情報が紛れ込んでいてもそれなりに表示されるので気にならないのだ。 だが不要な情報が紛れ込んでいると、ちょっとした修正が全く無関係と思われる場所に影響を及ぼしたり、管理しきれなくなってくる。そこで使ってみたいのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Redundancy Checker、不要なCSSチェッカーだ。 CSS Redundancy CheckerはRubyで作られている、CUIベースで動作するアプリケーションだ。また、gemでhpricotをインストールする必要がある。そのため、若干敷居が高いかも知れないが、便利なアプリケーションだと思うのでぜひトライしてみて欲しい。 使い方は簡単で、CSSファイル
画像を角丸にしたり影を付けたりできる「Corner.js」
画像の角をまるっこくしたり、影を付けたりといったことが簡単にできる「Corner.js」というのが公開されたようです。これらを組み合わせることも可能なのでかなり応用の幅は広いかと。 実際のサンプルは以下の通り。 Corner.js http://www.netzgesta.de/corner/ これはノーマル状態 グラデーションシェードを付ける 影を付ける 角を丸くする へこんだ感じの影にする そしてそれらを全部組み合わせることも自由自在 これぐらいまるくすることも可能 オリジナルのアイディアは「reflection.js」から来ているようですが、それにしてもすごい。
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
CSSを使ってカッコいい円形メニューを作る:phpspot開発日誌
metal.ize - tutoriales Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.CSSを使ってカッコいい円形メニューを作るサンプル。 次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹介されています。 尚、紹介したページの言語は英語ではないのですが、解説ページのサンプルコードを読みつつ原理を理解するとよいでしょう。 HTMLがリスト要素になっていて綺麗なHTMLになっているのが特徴。ＣＳＳをオフにすると次のようなリスト要素の見栄えになります。 Flashや画像のクリッカブルマップでこういったナビゲーションを作るのは簡単そうですが、リスト形式のものはなかなか無かった気がします。
フリーの超クールCSSグラフまとめ１０個:phpspot開発日誌
DHTML Site - Free CSS Graph Resources Generators Often in web-based applications, developers want to be able to display on the fly graphs. フリーのCSSグラフまとめ１０個が紹介されてました。 CSSでいろいろとできるものですね。 Ajax MGraph PlotKit CSS Javascript Bar Charts Vertical Bar Graphs with CSS and PHP CSS For Bar Graphs CSS Vertical Bar Graphs Displaying Percentages with CSS Dynamic Pie Chart with CSS Real World Bar Graphs (with so
HTMLの16進カラーコードとRGBを相互変換するサービス:phpspot開発日誌
Color converter - HEX to RGB and rgb to hex color converter This free color converter gives you the hexadecimal values of your RGB colors and vice versaHTMLの16進カラーコードとRGBを相互変換するサービス. 次のように、16進カラーコードとRGBを相互変換できます。 ふとしたとき、こういった機能ってほしいものですが、なかなか無かったりするのでメモっておくとよさそう。
JavaScript/Ajax＆CSSなツールチップライブラリ集:phpspot開発日誌
Kollermedia.at - The Website of the Freelancer Koller Jgen List of 25 Javascript/Ajax & CSS Tooltip Scripts List of 25 Javascript/Ajax and CSS Tooltips JavaScript/Ajax＆CSSなツールチップライブラリ集。 次のようにカーソルを合わせたときに説明を出すようなライブラリが沢山紹介。 Ajax Tooltip by dhtmlgoodies.com. [Example Page.] Ajax-Powered Help Balloons/Tooltips. Tool Tip Script by Cody Lindley. [Example Page.] jTip - a jQuery Tool Tip by Cody Lindley.
div要素をクロスフェード表示するJavaScript | WWW WATCH
結構前に公開されているので、すでに使っている人もいるかと思いますが、最近、個人的な用途で使わせていただいたので紹介。 Brand Spanking New で公開されている、「Javascript / CSS Crossfader」 は、JavaScript ひとつで簡単に、任意の div 要素 （じゃなくてもいいんですが） をクロスフェード表示で切り替えてくれるスクリプト。スクリプト自体が軽いのと、設定も簡単なので、ちょっとした画像の切り替えなんかに重宝しそう。 デモがこちらで公開されています。 必要なのは JavaScript ファイル 1つのみ。ダウンロードした JavaScript ファイルをサーバに上げたら、(X)HTML ファイルに読み込みます。 <script type="text/javascript" src="/js/bsn.Crossfader.js"></scrip
窓の杜 - 【NEWS】好きなテキストエディターでHTMLタグ入力補完を利用できる「HTMLAssistant」
さまざまなテキストエディターでHTMLタグ入力補完機能を利用できるようにする支援ソフト「HTMLAssistant」v1.06が公開された。Windowsに対応するフリーソフトで、編集部にてWindows XPでの動作を確認した。現在、作者のホームページからダウンロードできる。 「HTMLAssistant」は、タスクトレイ常駐型のHTMLタグ入力支援ソフト。普段利用しているさまざまなテキストエディター上で、HTMLタグの入力補完を実現できるのが特長。 本ソフト起動中に任意のテキストエディターで“<”を入力すると、HTMLタグの要素や属性の候補リストがキャレット位置にポップアップ表示される。このとき、1文字入力するたびに該当するHTML要素が絞り込まれていく仕組み。また、属性に関してもキャレット位置の要素に対応する候補のみに絞り込むことが可能。 本ソフトは多くのテキストエディターに対応して
画像編集ツールで領域を選択しているようなエフェクトをCSSとGIFアニメで実現する方法:phpspot開発日誌
画像編集ツールで領域を選択しているようなエフェクトをCSSとGIFアニメで実現する方法。 次のように、ブロック要素を目立たせたい場合に非常に効果的です。 作り方は簡単で、次のような4x4ピクセルのGIFアニメを用意します。 簡単な画像を組み合わせて、一般的なGIFアニメ作成ソフトで作れます。 次に、次のようなＨＴＭＬを作ります。 <html> <!--CSS--> <style type="text/css"> body { background-color:orange; } div#selectblock { background-image:url("back.gif"); padding:1px; width:300px; } div#innerblock { background-color:white; padding:8px; } </style> <body> <div i
入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル:phpspot開発日誌
Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル。 次のように、入力フォームにカーソルを合わせた時点でそのフィールドのヒントを表示できます。 フォームの入力フィールドの下に説明を書くよりも、ポップアップしてヒント表示したほうがユーザビリティ的によさそうですね。 要素の表示/非表示処理をJavaScriptによって行っていて、綺麗なHTMLによる実装が可能な点もいいです。 また、サンプルが1ファイル＋画像1枚とシンプルなので、あまりJavaScriptやCSSの知識のない方でも、ちょこっと変え
CSSの最適化とファイルサイズ削減をしてくれる無料ネットサービスいろいろ
ページの制作において必須とも言えるCSSですが、そのCSSファイルを最適化することによってページの読み込みを早くしてみたり、トラフィックの多いサイトであれば転送料の節約にも貢献できるらしい。 というわけで、現時点で存在するCSS最適化ネットサービスをいろいろと探して列挙してみました。最適化といってもサービスによって方法はいろいろなので、この中から自分の目指す方向の最適化サイトが見つかるかも。 CSSの最適化とファイルサイズ削減をしてくれる無料ネットサービスのリストは以下の通り。 Clean CSS - A Resource for Web Designers - Optmize and Format your CSS http://www.cleancss.com/ コメントを残したり、並べ替えたり、圧縮したり、最適化レベルやオプション指定によってかなりカスタマイズできるCSSファイルの容
タブ風ＵＩを実装するための色々:phpspot開発日誌
Tab Interface Scripts | Dr. Web Weblog タブ風ＵＩを実装するための色々。 標準的なタブＵＩから変り種タブＵＩまで、いろいろなタブ式ＵＩを実現するためのライブラリがまとまっています。 Javascript Tabs vom Stilbüro AJAX Tabs Content Script Tabmenu dhtmlxTabbar ActiveWidgets 2.0 続きをみる いろいろあって面白いですね。 関連エントリ クールなタブＵＩを簡単に実現できるJavaScriptライブラリ「LivePipe」
太阳集团tcy8722(VIP认证)登录入口-App Store
认证在线平台✅太阳集团tcy8722,太阳网集团tyc8722✅高效快速出款,拥有千万会员,持在线合法执照,信誉保证,请您放心...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クォリティの高いフリーで使えるベクトル画像１１選*ホームページを作る人のネタ帳
無料で使えるデザインテンプレート集 14サイト - DesignWalker
http://www.designwalker.com/2007/03/nature-design.html
あなた専用イラストレーター養成ソフト｢絵師のえそらごと｣