CSS3の機能でボックスに角丸や影、グラデーションをかけられるJSライブラリ「tripleb.js」:phpspot開発日誌
CSS3の機能でボックスに角丸や影、グラデーションをかけられるJSライブラリ「tripleb.js」 2009年09月02日- tripleb.js (javascript CSS 3 simulation) CSS3の機能でボックスに角丸や影、グラデーションをかけられるJSライブラリ「tripleb.js」 ライブラリを読み込んだら、ボックス要素の class="***" に修飾条件を指定しておくだけで、自動でボックスを角丸や、影付き、グラデーション効果 を与えることができるみたいです。 ↓適用すると以下のように修飾されます↓ 配布元は、色々なライブラリで有名な www.netzgesta.de。 CSS3の機能を使うので非対応ブラウザでは使えませんが、面倒な部分もJavaScriptでサクッと実現できちゃいますね。
一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
CSSで影付きテキストにマウスオーバーでスポットライトを当てるサンプル:phpspot開発日誌
text shadow bow CSSで影付きテキストにマウスオーバーでスポットライトを当てるサンプルが公開されています。 Safari, Firefox 3.5, Opera, Chromeでしか動きませんが、Flashを使わずに、CSSとJavaScript で実現されているのが面白い。 マウス移動でスポットライトが移動。 Text Shadow 部分が画像でなくて以下のようなタグで表現されているのも面白いところです。 <div class="wall"> <p id="tsb-text">Text Shadow</p> <div></div> </div> 関連エントリ 便利なＣＳＳテクニック３０選 CSSとdivを使った画像先読みテクニック 本の目次部分のようなリストをCSSでデザインするテクニック
[JS]リキッドレイアウト上のカラムの幅や数を自動調整するスクリプト -Smart Columns
表示されたブラウザの幅に合わせて、ぴったりになるようにカラムの幅や数を自動調整するスクリプトをSoh Tanakaから紹介します。
Рубрика: Марафон 2022 | Марафон скачать
Зеркало Марафон марафон вход сейчас Зеркало Марафон «Marathonbet»: как найти альтернативное работающее зеркало сегодня Букмекерская контора «Марафон» является одним из топовых беттинговых операторов России, что подтверждается высокими позициями в рейтинге SocialBet. Однако стоит различать легальную в России БК «Марафон» (marathonbet.ru), и оффшорного организатора азартных игр «Marathon» (marathonb
スタイルシートやスクリプトなどのテクニックをまとめたフリーのeBook
スタイルシートの構造設計から、グリッド・フォーム・ナビゲーション・角丸などの実装例、データベースやAJAXの実践的なサンプルが豊富に掲載されているフリーのeBook「The Woork Handbook」を紹介します。 The Woork Handbook The Woork Handbookのテキストは英語ですが、キャプチャやコードが豊富に掲載されているため、英語が分からなくても理解できる箇所は多いと思います。 ダウンロードできる「The Woork Handbook」はPDFファイルで、現在配布されているv.0.1の目次は下記のようになっています。 スタイルシート データベース AJAX MooToolsやScriptaculous、他のJavaScriptのフレームワーク Blogger その他 フォント
これが決定版！JS＋CSSでお手軽に「target= _blank」なリンクを一目で判断させる
先日「target="_blank"」の設定されているリンクを簡単に判別できるようにする、という内容のエントリを書きました。 CSSのみで「target="_blank"」のリンクを一目で判別できるようにする これは最終的に「CSSの属性セレクタ」＋「手動class設定」という形に落ち着いたんですが、予想したとおり「class設定するの面倒だよね」(意訳)という指摘が。私自身はエディタとツールを使っているのでclassを設定するのはそんなに大変でもないのですが、一般的に考えれば面倒であることは間違いありません。FirefoxやGoogle Chromeならclass設定は不要なのですが、シェアトップのIE6(7)が対応してないのではやはり意味はないでしょう。 というわけで、今度はCSSとJavaScriptの両方を使って、classを設定しないでIE6(7)にも対応させ、「target="
div要素もリンクにするjavascript「jquery.biggerlink」
リンクと言えばaタグですが、ボックス単位の大きなdiv要素もリンクにしたくなります。 jquery.biggerlinkはそんな我が儘を叶えてくれるjavasrciptです。 sponsors 使用方法 jquery.biggerlinkからjquery.biggerlink.jsを、jQueryからjquery.js（v1.2.1）をダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.biggerlink.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#id名 div')
CSSとJavaScriptで実装するタブ型インターフェイス37選 -noupe | コリス
noupeのエントリー「37+ Great Ajax, CSS Tab-Based Interfaces」から、CSSとJavaScriptで実装するタブ型インターフェイス37選の紹介です。 37+ Great Ajax, CSS Tab-Based Interfaces 自動で切り替わるタブ型インターフェイス Easy Tabs 1.2 - now with autochange Rotating jQuery tabs example Tab Content Script (v 2.1) スライド式のタブ型インターフェイス Sliding Tabs Coda-Slider Perspective Tabs AJAXを使用したタブ型インターフェイス Ajax Tabs Content Script (v 2.1) 閉じることも可能なタブ型インターフェイス Tab Panels Close
CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie : 4GALAXYのメモ
19 29 08 2007 CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie jQuery, Css CSSを動的に切り替える方法をいくつか紹介します。全てcookieにより保存されます 1.styleswitch.jsを使う方法 まずGoogleで一番ヒットするのがstyleswitch.jsです。 コード <script src="styleswitch.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="default.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="title1" href="css1.css" />
displayプロパティを初期値に戻す為のJavaScript
displayプロパティを初期値に戻す為のJavaScript table要素やtr要素などはブラウザ毎にdisplayプロパティが異なる為、何かいい方法はないかといろいろ試行錯誤していたら面白い事を発見しました。 document.getElementById(element).style.display = '' このようにdisplayプロパティに空欄を代入すると、displayプロパティが初期値に戻ります。 サンプル Firefox2とIE6で確認しました。 かなり便利そうです。 関連エントリー リンク先のはてなブックマーク数を表示するブックマークレット ie以外でもクリップボードが使えるsetClipboard.js 一番簡単な画像置換の方法-imageReplace.js- アルファ画像を扱うalphafilter.jsライブラリ javascriptで文字にドロップシャドウを
ソースがシンプルなJSによるロールオーバー｜CSS HappyLife
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
JavaScriptフレームワーク各種からCSSセレクタのテストを一括で行える「SlickSpeed Selectors Test」:phpspot開発日誌
SlickSpeed Selectors Test Every framework runs in his own iFrame, thus no conflicts can happen.JavaScriptフレームワーク各種からCSSセレクタのテストを一括で行える「SlickSpeed Selectors Test」。 次のように、フレームワークとCSSセレクタに対応する、選択にかかった時間と要素選択数のベンチマークをブラウザ上で取れます。 それぞれのフレームワークの特徴について知ることが出来ますね。
フリーのCSS＆JavaScriptカレンダースクリプトいろいろ:phpspot開発日誌
DHTML Site - 10 Free CSS and Javascript Calendars Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. フリーのCSS＆JavaScriptカレンダースクリプトいろいろ 多くのウェブアプリに必要になってくるのがこのカレンダー機能なんですが、フリーで高機能なものが沢山出回っています。 ドラッグ＆ドロップなどでGoogleカレンダーライクなものまで色々とあるようです。 Monket Calendar Quick Calendar Using AJAX and PHP Integrating Googl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
おしゃれなリスト実装サンプル:phpspot開発日誌
[JS]一つの要素に複数の背景画像を自由に配置できるスクリプト -Background Layering
[JS]高さの異なるカラムを同じ高さに揃えるスクリプト -Equal Heights
http://e0166nt.com/blog-entry-440.html
cyano: なぜCSSは先でJavaScriptは後に読み込ませることが推奨されるのか
http://youmos.com/news/import_js