text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; レタープレスのテキストエフェクト

50 Free CSS/(X)HTML Templates - Noupe Design Blog フリーの(X)HTML/CSSテンプレートが沢山まとまったエントリが沢山ありましたのでご紹介。 先日も似たようなものを紹介しましたが、本日も便利そうなエントリを発見しました。 HTML5 and CSS3 Ornare iPhone App StudioClick Darkness MYportfolio 全部見る こんなものをフリーで提供してくれる方々の仕事している姿を想像すると涙が出そうになります。 関連エントリ ハイセンスにデザインされたHTML/CSSテンプレート集 ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０ クールなデザイン満載のXHTML/CSSテンプレート４０種 フリーのCSS/HTMLテンプレートいろいろ2010

20 Beautiful Free XHTML/CSS Templates | Creativeoverflow ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０が、websitetemplatesonline.com から紹介されています。 Photoshopテンプレートではなく、既にHTMLの形になっているので便利です。 Photoshopのファイルは含まれないようなので、この点は注意したほうがいいかもしれません。 全部見る 関連エントリ シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 ハイクオリティでフリーなXHTMLテンプレート61 クールなデザイン満載のXHTML/CSSテンプレート４０種 プロレベルでハイクオリティなXHTML/CSSテンプレート集

CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし

New Twitter Design with CSS and JQuery. リニューアルしたTwitter風のWEBインタフェース作成チュートリアルのご紹介。 jQueryとCSSを使って新TwitterのUIを実装している例です。 左カラムの行をクリックすることで右にコンテンツが現れるようなＵＩを実現しています。 ちゃんとスタイルすれば本当にTwitterライクなＵＩになりそうですね。 ブログの見出しと記事のレイアウトにすればTwitterライクなインタフェースのブログが作れそうです。 関連エントリ サイトにTwitterの機能を組み込むためのjQueryプラグイン集 Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」 サイト内にTwitter投稿用のフォームを直接埋め込んでしまえるjQueryプラグイン「Like

25 Online CSS Compressors to Optimize Your CSS Code ブラウザ上でCSSを圧縮・最適化できる２５のツールが色々とまとまっています。 沢山ありますが、自分にあったものを選べば作業効率を上げてくれそうです。 関連エントリ CSSのオンライン圧縮ツール色々 オンラインCSS整形＆最適化＆圧縮ツール集 サイトのパフォーマンスを上げる、PHPでCSSファイルを圧縮転送する各種方法

40 Elegant Free CSS/(X)HTML Templates from 2010 - Noupe Design Blog フリーのCSS/HTMLテンプレートが色々まとまったエントリのご紹介です。 フリーなのになかなかこったテンプレートが多いです。 関連エントリ かなりクールなフリーのWEBサイトPhotoshopテンプレート「BlueMasters」 ハイクオリティでフリーなXHTMLテンプレート61 フリーのCSSデザインテンプレート集「Free Css Templates」

715 Awesomely Simple and Free CSS Layouts | Design Shack シンプルでフリーな使えるCSSのレイアウト集７１５が紹介されています。 １から作らないでもこうしたものに頼ればすぐに出来ますね。自分の好みの使いやすいページを覚えておくとレイアウト作成をすぐに終わらせ、肝心のツール部分に集中できそうです。 Primary CSS: 22 Layouts Little Boxes: 16 Layouts CSS Easy: 8 Layouts Max Design: 25 layouts Iron Meyers: 224 Layouts 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」 複雑なCSSレイアウト

Apple-like Retina Effect With jQuery ? Tutorialzine AppleのRetinaディスプレイの説明風エフェクト実装jQueryサンプル。 Retinaの説明のような虫眼鏡で拡大したようなエフェクトをCSS+jQueryで実装するサンプルです。 次のように、マウスのカーソル位置が拡大されます。 デモページを見てみましょう 既成のプロダクトがあって、ディテールを見せたいような場合に使えるUIになってますね。 アイデア次第で面白いことができるかも。 関連エントリ 画像をスムーズに拡大できるjQuery版FancyZoom 特定ブロックの文字のみ拡大縮小できる便利機能実装jQueryプラグイン「fontScaler」 マウス位置を拡大して表示できるjQueryプラグイン「zooma」

PrimaryCSS 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」。 単体のCSSで予め用意されている22のレイアウトを簡単に実装できるものです。 レイアウトの種類は沢山あります。幅は固定されているので好みに応じて一括置換すればよいでしょう。 サイト上でHTMLコードの発行もできるので、サクッと複雑な段組レイアウトを作成したいような場合に便利そうです。 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 使えるCSSレイアウトテンプレート集「mycelly.com」 レイアウト作成に役立つCSSグリッドレイアウトジェネレーター集

Double Click in CSS | CSS-Tricks CSSのみで実装するダブルクリックの例が公開されています。 hover, active 等を利用し、要素の位置をずらすというなかなか面白いハックによって実現されています。 デモページで実際に試してみましょう JSが使えない環境でも使えるということで活用できる場面があるかもしれませんね。 関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集 便利なＣＳＳテクニック３０選 CSSリストに関する5つのテクニック集

飛ぶ前にbit.lyやTinyURL等の短縮URLの飛び先を調べられるjQueryプラグイン... 次の記事 ≫：人物等を巨大化して風景に合成したPhotoshopエフェクト集

HTML5 video player in CSS with Silverlight and Flash : MediaElement.js CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 HTML5非対応ブラウザ向けに、Flashはもちろん、こちらのライブラリではSilverlightもサポートしています。 こうしたライブラリも多数出揃ってきていますが、どれがよく使われるようになるんでしょうね。 １つの選択肢として覚えておいてもよいでしょう。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能にするライブラリ集 MooTools用のHTML5動画プレイヤー「Moovie」

繊細のポイントは「気がつくかな？」ぐらいにすること。 そんなわずかな繊細をウェブデザインに加えるスタイルシートを紹介します。 Take Advantage of CSS3 to Achieve Subtle Design デモページ 下記は各ポイントを意訳したものです。 はじめに 繊細の大事なポイントは人々が気づかないかもしれない、そして記憶に残らないくらい非常にささやかなものにすることです。 私はこれが初耳だという人がいることを疑います。これは感覚と認識研究によって述べられたよく知られている概念の一つです。 繊細なデザインが難しいのは、「もう少し多くした方がいいのかな？」と容易に思えてしまうところです。このことを知らないと、繊細は失われるでしょう。 以上を踏まえた上で、ウェブデザインにさまざまな形の繊細を提供するために使用できる三つのCSS3のテクニックを紹介します。 1. transi

jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー。css3を使っています。 Fly-out Menu with jQuery and CSS3 Rocking and Rol

<textarea name="code" class="css" cols="60" rows="5"> textarea { background: url(images/benice.png) center center no-repeat; /* This ruins default border */ border: 1px solid #888; } </textarea>