画像も角丸にするjavascript「roundedcorners」
twitter facebook hatena google pocket 今回はjavascriptライブラリ「mootools」で角丸を実現します。 roundedcornersでは、画像も角丸にできるjavascriptを公開しています。 ＊画像も使用しているので少し煩雑かもしれません。 sponsors 使用方法 roundedcornersからroundedcorners.jsとroundedcorners.cssをmootoolsからmootools.jsをダウンロードします。 またcssで使用している画像（各角に1つ）を作成するなどしてください。 ＊画像サンプル：topLeft.gif <script type="text/javascript" src="http://yourdomain/mootools.js"></script> <script type="text/
Parallax Backgrounds で背景画像のスクロール速度を変える
背景画像のスクロール速度を変えることで、コンテンツと背景画像で遠近感を演出することができるスクリプト「Parallax Backgrounds」を紹介します。 via:ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」 via:背景イメージを遠近感トリックでスクロールする方法 （Parallax Backgrounds） 公式サイトのサンプルでは、スピードが異なる2つの背景画像を組み合わせているので、やや奇抜な印象を受けますが、背景を遠方として捉えたイメージで作り直したサンプル（単に雲を除いただけ）をご覧頂ければ、シンプルな遠近感の動きを楽しめます。 サンプル サンプル途中にある引用（blockquote）部分は、横スクロールで背景画像のスクロール速度が変わります。 以下、サンプルを例に、 ひとつの背景画像を縦スクロー
[JS]フォームの入力フィールドにアイコンを表示するスクリプト -Sexy Forms
フォームの入力フィールドにアイコンを表示するなど、9種類のスタイルのデザインを簡単に適用できるスクリプトをCoders.meから紹介します。
複数ブラウザに対応したWeb開発支援ツール·Pirka'r MOONGIFT
Pirka'rはWindows/Mac OSX/Linux向けのフリーウェア（ソースコードは公開されている）。ここ数年でブラウザのシェアは大きく変わってきている。それまでIEが主流だったのがFirefoxが大きくシェアを取り、さらにSafariやGoogle Chromeといったブラウザが続いている。特にCSSやJavaScriptの互換性の問題もあってIE系ブラウザが嫌われる状況になっている。 検証もできる ユーザにとって選択肢が増えるのは良いことだが、開発者やデザイナーにとっては辛い。JavaScriptの動作やレンダリング結果にブラウザによる差異があるとなっては確認作業も大変になる。その手助けをしてくれるツールがPirka'r（ピリカル）だ。 Pirka'rはEclipseベースの開発支援ソフトウェアで、HTMLファイルやJavaScript、CSSファイルのメンテナンスを行うことが
ログインフォームとサインアップフォームを一体化するテクニック – creamu
Leah Culver’s Blogで、ログインフォームとサインアップフォームを一体化するテクニックが紹介されています。 ↑の画像を見てもらうとわかるんですが、 メールアドレス（ユーザー名）とパスワードは共通 「I have an account」にチェックを入れると「Log in」ボタンに切り替わり、パスワード忘れのリンクを表示 「I’m new!」にチェックを入れると「Sign up!」ボタンに切り替わり、利用規約へのリンクを表示 といった仕組みになっています。 ログインフォームとサインアップフォームを分けなくていいので、シンプルで使いやすそうですね。 参考に、HurlとAmazonの例が載っています。見てみると、確かにAmazonもこういうインターフェースになっていることに気づきますね。 フォーム作成の参考にしてみてはいかがでしょうか？ Log in or sign up? 昨日はま
ブログ記事のTwitterでの「つぶやかれ数」を表示するパーツ :Heartlogic
ブログ記事のTwitterでの「つぶやかれ数」を表示するパーツ ブログの記事に、「はてブされ数」のようにTwitterでの「つぶやかれ数」を表示するようにしてみました。以下の5つのサービスを試しています。@tomozoさんの情報提供に感謝。 ※記事公開直後にTwitterで言及したところ。Tweetmemeが瞬時に反映。backtweetとTopsyがほぼ同時と思われるタイミングで反映しました。他2つは5分以上経っても反映されませんでした。 Twib 解説： Twib - Twib API サーバーが不安定で、「つぶやかれ数」が表示されないことが多いです。これは厳しい。つぶやきの収集率もあまりよくないようです（つまり、数が増えないことがあります）。 サンプル： Movable Type用のソース。「<$MTEntryPermalink$>」の部分を記事のパーマリンクを出力するタグに置
2009年、ウェブ関連でアクセスが多かったエントリーBest 20
2010年は、1/7から更新を予定していますので、よろしくお願いいたします。 当サイトの購読は、RSS Feedをご利用すると便利です。 コリスのRSS Feed 2009年、アクセスが多かったエントリー フリーの高品質なアイコンがダウンロードできるサイト -iconspedia IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester 商用サイトでも無料で利用できる日本語のフリーフォント集 ハートなどの記号「♥♡♣♦♠」の入力方法 たった一晩で睡眠の周期を変える方法 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 IE7とIE6を共存させる方法：まとめ フリーの紙や布のテクスチャ素材のリンク集 swfファイルを抽出・解析・flaにデコンパイルするアプリケーション集 [JS]jQueryのプラグイン100選
jQueryのプラグイン100選 -2008年総集編 | コリス
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
IE5～8をCCS3の疑似セレクタ対応にするスクリプト - ie-css3.js
CSS3に対応していないIE5/6/7/8をCSS3の擬似セレクタに対応させるスクリプトを紹介します。 ie-css3.js 対応するセレクタは、下記の11種類です。 :nth-child :nth-last-child :nth-of-type :nth-last-of-type :first-child :last-child :only-child :first-of-type :last-of-type :only-of-type :empty スクリプトの動作は、セレクタを見つけたらシミュレーションしたものに変更されて適用されている、とのことです。 スクリプトの使用方法は、DOMAssistantと併用し、外部スクリプトとして記述します。 <textarea name="code" class="html" cols="60" rows="5"> <head> <script t
IEをモダンブラウザのように扱う方法10 – creamu
IEにだけできないことを可能にしたい。 そんなときにおすすめなのが、『10 ways to make Internet Explorer act like a modern browser』。IEをモダンブラウザのように扱う方法です。 便利そうなのが揃っているので、ざっとご紹介しますね。 HTML5をIEでも使用可能にする html5.jsを読み込んで、HTML5をIEでも使用可能にする text-shadowプロパティー IEでtext-shadowプロパティーをfilterを使って実現 IEでのbox-shadow filterを使ってシャドウに見せるテクニック 角丸 モダンブラウザはborder-radiusで、IEにはDD roundiesを適用 マルチカラム div要素にカラムを追加する。IE用にはjQueryプラグインで実装 HTML5の表現はだんだん増えてくるかと思うので、一
美大に行かないでデザイナーになる方法！
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ プロが教える『美大いらずのデザイン講座』 770ページに及ぶデザイン講座。僕の2年間の集大成！ http://kelo.heteml.jp/melmaga_01/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ どうもkeloです。 如何お過ごしですか。 今回のお題「寄せたり、離したり？」 何の話でしょうか？ 「レイアウト」のお話です。 今まで「色」についてのお話は、 してきましたが、 「レイアウト」についてきちんと書くのは、 このメルマガでは初めてでしたね。 少し短く要点だけまとめましたが、 かなり大切な事を整理して書かせて頂きますので、 是非、しっかりと理解して実践してもらえたら、 嬉しいです。 レイアウトについて、 伝えるべき情報の整理がなかなか 上手くまとまらない、 という声を聞
本格的なネットショップを構築したい人におすすめのソリューション５ – creamu
95455835/ Hemera/ Thinkstock 手軽に本格的なネットショップを開きたいという人にお勧めのソリューションを５つご紹介いたします。 小さなショップから比較的規模の大きなショップまで利用できるものを基本として、それぞれの特長を独自の観点で簡単にまとめています。 既に構築したいシステムの要件が細かく決まっている場合は、それが実際に実装できるサービスかどうかを事前にご確認いただくことをお勧めいたします。 EC-CUBE 日本発のECオープンソースです。 とても高機能なのに無料で利用できてしまうところが素敵です。 オープンソースですから、自身で機能を追加することも可能です。 もちろんその場合は技術力を要しますが、EC-CUBEを利用したサイト構築の代理店も多く存在しますので、そういったところに依頼するのも手です。 サーバを既にお持ちだったり、多少の技術的知識がある場合におすす
グラフィックデザイナーとしてのやりがい
転職の経験がある方、同業者の方にお聞きしたいです。 仕事は紙媒体のグラフィックデザイナーで今年5年目になる20代女です。 グラフィックデザイナーをやっているような人は「やりがい」に重きを置いて仕事をしているように思えます。現に同じ職場で働く人たちも私にはそう見えます。 しかし、はっきりいって私はあまりこの仕事にやりがいを感じられません。 食べるためだけに仕事をしているという感覚が強いです。 過酷な労働環境が当たり前のこの業界で、私の勤めている会社は割と良いほうだと思います。閑散期には定時で帰れたりしますし、社員同士も仕事の量を助け合って調節したり（それは普通かな）、先輩社員も皆いい人で、訊けば仕事のアドバイスをくれたりします。基本給は15万ですが、普通なのか安いのかもよくわかりません。（高くはないんだろうな…） ですから、比較的仕事で受けるストレスは軽いほうだと思います。 でも、出来上がっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS, JavaScript, jQuery, WordPressなどのよく使うコードをまとめたスニペット集
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
DesignWalker