[B! JavaScript][css] penaltyのブックマーク

penalty id:penalty

JavaScriptとcssに関するpenaltyのブックマーク (19)

フロントエンドパフォーマンス向上ルール - Speaker Deck
Transcript Leading Edge Development 勉強会フロントエンドパフォーマンス向上ルールはじめに ▪Webサイト⾼高速化 / パフォーマンス改善の重要性【Aberdeen Group Report】・Amazonはページの反応が0.1秒遅くなると、売り上げが1%ダウンする。・Googleのページ反応が0.5秒遅くなると、アクセス数が20%ダウンする。・⼀一般的に表⽰示スピードが1秒遅くなると、 PVは11%、コンバージョンは7%、顧客満⾜足度度は16%ダウンする。【Jakob Nielsen】　３つの重要限界　・⼼心理理的・感情的な違和感を感じないのは0.1秒まで　・思考の流流れが妨げられないのは1秒まで　・注意⼒力力を維持する限界の時間は10秒まではじめに ▪パフォーマンス改善の⼿手段【改善箇所】・パフォーマ
penalty 2014/12/11
performance

css

JavaScript
リンク
Webアニメーションを高速化するために知っておくべき10のこと（前編）
Webアニメーションを高速化するために知っておくべき10のこと（前編）斉藤祐也（株式会社リッチメディア）アニメーション／トランジションは身の回りに当たり前にあるものです。むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。アニメーション／トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。今回はそんなアニメーション／トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。アニメーションを高速化する理由アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス
penalty 2013/09/13
css

javascript

html5

performance
リンク
Google Code Archive - Long-term storage for Google Code Project Hosting.
Code Archive Skip to content Google About Google Privacy Terms
penalty 2010/02/09
iPhone向けのdev kit

iphone

javascript

css
リンク
25 Code Snippets for Web Designers (Part2)
penalty 2007/03/18
カッコイイエフェクト集

css

javascript

webdesign
リンク
javascript - CSSをいじくる : 404 Blog Not Found
2007年03月12日02:00 カテゴリLightweight LanguagesiTech javascript - CSSをいじくる JavaScriptでDOM要素のstyle属性をいじるのは簡単ですが、これがCSSともなるとobject treeが深くて大変で、Webを見回してもほとんど参考例がありません。動的にCSSをいじっているサイトの例は徳保さん趣味のWebデザインぐらいしか見かけません。というわけで、習作を兼ねて、style属性ではなくCSSをまるごと書き換える関数を作ってみました。 CSS Manipulation via JavaScript http://www.dan.co.jp/~dankogai/css/css_handlers.html 解説動作確認はFirefox 2, Opera 9, Safari, Mac IE5で行っています。Safariでのみ
penalty 2007/03/13
cssをjsオブジェクト化。

javascript

css
リンク
https://www.snap.com/about/spa1B.php?source=pub-2311827-www.wordpress.com&campaign=spa_bsblogo!dapper.wordpress.com
penalty 2007/03/06
javascript

css
リンク
CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」
IE7、Firefox、Netscape、Operaで動作するグラフィカルなイメージ画像を使ったチェックボックスとラジオボタンです。通常のチェックボックスなどではおもしろみがないという場合に使うとかなり大きなインパクトがあります。コードのダウンロードと実際の動作例は以下から。 Styled Checkboxes and Styled Radio Buttons | formStyle 動作例はこちら以下も似たようなタイプの例です。 Niceforms コードのダウンロードは以下から。 badboy.media.design :: articles :: Niceforms
penalty 2006/10/13
ポップ！

css

javascript
リンク
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』:phpspot開発日誌
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』 2006年10月01日- Transcorners ? Cornerus Pride is there *scared* Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn. CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』。 mootoolsをフレームワークとして使用しています。次のように、左下の大きな角丸や、右上の一部切り取ったような角も簡単に実現できます。大きな角丸を作るには、radiusというプロパティを大きく指定することで実現できます。この
penalty 2006/10/01
ラウンドコーナー。色々なタイプがあって使えそう！

css

javascript

design
リンク
CSSとJavaScriptで影付きの角丸ボックス要素を作る:phpspot開発日誌
Transparent custom corners and borders, version 2 | 456 Berea Street It’s been almost a year and a half since I posted Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency. CSSとJavaScriptで影付きの角丸ボックス要素を作る。次のような２重線と影がついたボックスのサンプルが公開されています。 HTMLは次のようにシンプルな形に出来るようです。 <div class="cbb"> <h1>Transparent custom corners and borders, v
penalty 2006/09/28
こんな事もできるのか。。。画像の方が綺麗ではあるけど。

css

javascript
リンク
JavaScriptとCSSを使ったクールなメッセージBOX:phpspot開発日誌
Cros sfade DIV Demo For a long time, people looking to introduce animations to their website needed to resort to a third-party plugin such as Flash or Java applets to get the job done. JavaScriptとCSSを使ったクールなメッセージBOXのデモ。ライブラリはscriptaculousを使用。スクリプト自体は非常にシンプルで、単純にsetIntervalでタイマーをまわしてscriptaculousのEffect.fade / Effect.appear で各DIVを切り替えているだけのようです。デモサイト上のソースをみれば、プログラミングの知識がない方でも実装できそうです。 WEBデザイン時のちょ
penalty 2006/09/21
script.aculo.us

css

design

javascript
リンク
Dreamweaverの代わりになるフリーソフト「Aptana」 - GIGAZINE
JavaScriptの開発環境、要するにJavaScript用IDEという位置づけなのですが、HTML、CSSの構造をアウトラインで示してくれたり、文法の間違いを指摘してくれたり、やっていることはほとんどDreamweaverの持っている機能と同じです。特に面白いのはJavaScriptやCSSなどがInternetExplorerとFirefoxに対応しているかどうかが一発で分かる点。JavaScriptのエラーについても細かい部分まで指摘してくれます。つまり、実行しなくてもエラーがドコにあるのか分かる「静的解析」が可能というわけ。 Windows、Macintosh、Linux版があり、Eclipseプラグインとして動作するバージョンもあります。スクリーンショットや実際に動かして機能を解説しているムービー、ダウンロードは以下から。 Aptana: The Web IDE http:
penalty 2006/08/01
お、使ってみるか。

aptana

css

javascript

opensource

software
リンク
ブログへ簡単に追加できるJavaScript製サイドノート
付箋紙のような感じのサイドノートをブログの本文中に追加できます。背景色の変更なども自由自在で、非表示にするのも再表示させるのも簡単。JavaScriptとCSSを使っています。ダウンロードと使い方や例は以下のサイトから。 arc90 lab : tools : Unobtrusive Sidenotes ダウンロードはこちらから http://lab.arc90.com/tools/sidenote.zip 上記サイトの「How Do I Use It?」に使い方が詳しく書いてあります。実際の例はこちら。 arc90 lab | tools: Sidenote Demo http://lab.arc90.com/tools/sidenote/ 左上の「Hide Sidenotes」をクリックするとサブノートを非表示にできます。本文中に、脚注やちょっとした豆知識みたいなのを入れておきたい
penalty 2006/06/16
ブログに使える付箋

library

css

javascript
リンク
Dynamic Drive DHTML Scripts- Bullet Image Link script
A premium domain name exclusively for sale on the BrandBucket network. Dynamic Drive: A vibrant, forceful name that conveys motion and innovation, suggesting cutting-edge techno logy and forward-thinking solutions. Possible uses: A mobile app for car diagnostics. A tech platform for logistics. An adaptive learning software. Full ownership of domain dynamicdrive.com. Logo design source files and rig
penalty 2006/05/12
ｶｯｸｲｲ～

css
リンク
Niceformでエレガントなフォーム生成:phpspot開発日誌
badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例） <scrip
penalty 2006/04/19
ｶｺｲｲ♪

Design

javascript

css
リンク
川o・-・）＜2nd life - JavaScript や CSS の query に自動で最終更新時間をつける Rails Plugin
最近いろいろなサイトで <script src="/javascripts/foo.js?1142509269" type="text/javascript"></script>や <script src="/javascripts/bar.js?v=2.3" type="text/javascript"></script>の記述を見るようになってきました。また CSS でも <link href="/stylesheets/foo.css?1142509300" media="screen" rel="Stylesheet" type="text/css" />といった記述もちらほら見かけます。これは JavaScript や CSS を更新しても、ブラウザキャッシュが読み込まれているため、更新された JS ファイルなどがロードされない場合への対策です。上記のような最終更新時刻やバージ
penalty 2006/03/18
デファクトスタンダード？

javascript

css
リンク
S5: A Simple Standards-Based Slide Show System
S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well. The markup used for the slides is very simple, highly semantic, and completely accessible. Anyone with even a smidgen of familiarity with HTML or XHTML can look at the markup and figure out how to adapt it to their particular needs. A
penalty 2005/11/26
XHTML + CSS + Javascriptでプレゼン作成

xhtml

css

javascript
リンク
Drag & Drop Sortable Lists with JavaScript and CSS
Update 4/26: tested and working as expected in IE6, Firefox 1.0, and Safari 1.3, unless otherwise noted. In Web applications I've seen numerous — and personally implemented a few — ways to rearrange it ems in a list. All of those were indirect interactions typically involving something like up/down arrows next to each it em. The most heinous require server roundtrips for each modification...boo. T
penalty 2005/11/15
ドラック＆ドロップ今度やってみよう。

css

javascript
リンク
ACCESS R - HTML,DHTML,CSS,JavaScript,CGI,アクセス
HTML,JavaScript,CSS,DHTML,CGI,アクセス情報を載せているサイト。ウェブマスター必見の様々なテクニックによるサイト構築術を紹介。本当にお久しぶりです。管理人のるび〜です。ようやく戻ってまいりました･･･約7ヶ月未更新･･･ありえません･･･今まで更新を心待ちにしていた皆様申し訳ありませんでした；；で･･･この間は何をしていたかというと仕事の都合で出張しておりました。およそ7ヶ月･･･長かったですがなんとか帰ってきましたので、これからまた徐々に更新していきます。まったくもって･･･この間サイトに訪問していただいた方に感謝でございます！
penalty 2005/09/05
javascript

html

css
リンク
1