Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
レスポンシブなWEB制作のためのCSSフレームワークのまとめ
様々なデバイスが出現してきており、WEBサイトもその環境を考慮した制作を求められており、制作側もどんな端末でも快適に閲覧できるレスポンシブなレイアウトが広まりつつありますが、今日紹介するのはレスポンシブなWEB制作のためのCSSフレームワークのまとめ「15 Responsive CSS Frameworks Worth Considering」です。 Less Framework 4 様々な端末に対応したフレームワークが多数まとめられていますが、今回はその中からいくつか気になったフレームワークをピックアップをして紹介したいと思います。 詳しくは以下 Foundation 12カラムで構成されたレスポンシブなフレームワーク。背景も端末に併せて縮小されます。 Skeleton 真っ更なレスポンシブなフレームワーク。 Amazium ブラウザサイズによってレイアウトが組み変わるレスポンシブフレー
[CSS]まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ
画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。 デモは10種類あり、CSSでここまでできるのか！って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ 基本となるHTML HTMLは非常にシンプルです。 キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集:phpspot開発日誌
Animated Buttons with CSS3 これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集 ボタンといえば、マウスオーバーした時に色が変わって、押した時に凹みエフェクトが付くようなものが一般的ですがCSS3によってその自由度は大きく上がるようです 使わずとも一度はかならず見ておきたいボタン集となってます アイコン付きのボタン カーソルを合わせるとアイコンが拡大しながらフェードアウトしてプライスが表示されます アイコンからプライスへの変更に併せて右側の矢印色もアニメーションさせながら変更するサンプル アニメーションさせないなら画像のすり替えだけですがアニメーションさせているところがポイントですね 登録ボタンみたいなものにカーソルを合わせるとボタンが徐々に大きくなり矢印の角度なんかもアニメーションされる例 ボタンが大きくなり、更に文言を追加する例。色の変更
Animate.css | A cross-browser library of CSS animations.
Animate.css Just-add-water CSS animations See animations Close list Attention seekers bounce Copy class name to clipboard flash Copy class name to clipboard pulse Copy class name to clipboard rubberBand Copy class name to clipboard shakeX Copy class name to clipboard shakeY Copy class name to clipboard headShake Copy class name to clipboard swing Copy class name to clipboard tada Copy class name t
CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net
久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。 地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。 何より、将来的にプレフィックスは不要になるので、そのときのメンテナンスもこれにしておけば、外すだけで済むので楽ですよね。 C
著作権放棄・シンプル・軽量で、iPhoneなどにもレイアウトを調整できるレスポンシブWebデザイン対応のHTML5フレームワーク・Fluid Baseline Grid - かちびと.net
なかなか凄いフレームワークがあったので 反射的にメモ。パブリックドメインという のが何より太っ腹ですねー。自由に使用で きて、シンプルで汎用的、しかも軽量で iPhoneやiPadにもレイアウトを自動調整 するレスポンシブWebデザイン対応のHTML5 フレームワークです。 これ、凄く良い感じです。いいもの全部詰め込んだ、みたいなソフトウェアですね・・・ちゃんと使いこなせるようになりたいかも。 Media Queriesを使ったレスポンシブWebデザイン対応のCSSフレームワークです。3カラム構成で組めるようにもしてあります。マークアップはHTML5+CSS3ですが、jsを使ってIEにも対応してくれています。 以下にざっと特徴を。 著作権放棄(パブリックドメイン) 軽量(CSSは9kb) ベースライングリッドに揃済み グリッドレイアウト対応 iPhoneやiPadなどにも自動でレイアウトを
デザインをちょっと素敵にするサンプル 8
先日 HTML5 + CSS3 で書かれた、素敵な雑誌の表紙みたいな Webサイトを見つけました。それ以来、CSS3 だったらコレもできそう ... アレもできるかも ... なんてことを、雑誌のデザインなどを見ながらひとり盛り上がってます w まだまだ IE では CSS3 が使えないけれど、今回はいくつか CSS3 のサンプル作りに挑戦してみました。 まるで雑誌の表紙のようなデザインで、とっても感動してしまいました。HTML5 と CSS3 で書かれていて、ブロック要素、内包するテキストも斜めにレイアウトされています。細いテキストを斜めにすると、とても読みにくくなってしまうんですけどフォントも工夫されてて判読性も十分です。 もちろん IE では斜めではなくて水平に表示されてしまうんですけど、それでも閲覧するのに困らないようなハイブリットなデザインで、またまた感動！ これから近い将来、C
CSS tutorial - Using borders to produce angled shapes
This is a suppliment to the tutorial, and is here only for illustrative purposes. It is not part of the main tutorial. These examples will not work in Netscape 4 or WebTV, because they do not allow you to define individual borders, or Escape because it does not handle borders correctly. Internet explorer 4 and 5 may have trouble with some of the examples due to their problems with the box model. N
CSS3色モジュール
CSS3色モジュール W3C勧告候補平成15年5月14日 この版: http://www.w3.org/TR/2003/CR-css3-color-20030514 最新の版: http://www.w3.org/TR/css3-color 前の版: http://www.w3.org/TR/2003/WD-css3-color-20030214 編者: Tantek Çelik (Microsoft Corporation) <tantekc@microsoft.com> Chris Lilley (W3C) <chris@w3.org> 追加の作者: Steven Pemberton (CWI) <steven.pemberton@cwi.nl> Brad Pettit (Microsoft Corporation) <bradp@microsoft.com> 摘要 CSS(段階スタイ
[CSS]スマフォから大きいサイズのデスクトップまで考慮したレイアウト -Rubber Layouts
小さいサイズのスマートフォンから大きいサイズのデスクトップまで考慮した、StaticとFluidのいいとこ取りをしたスタイルシートのレイアウトを紹介します。 Rubber Layouts – Combining Static and Fluid Layouts [ad#ad-2] Rubber Layoutsのデモ Rubber Layoutsの特徴 Rubber Layoutsの実装 Rubber Layoutsのデモ デモはメインコンテンツとサイドバーのシンプルな2カラムのレイアウトで、ブラウザのサイズを変更することで、StaticとFluidの固定と可変をどのように取り入れているか確認できます。 デモページ：幅480pxでの表示 ヘッダ・コンテンツ・サイドバーすべてを同じ幅に変更。 Rubber Layoutsの特徴 多くのウェブページで可変であるFluid Layoutが使用されて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
adakoda.com
Simple Styles for <hr>'s
Animated Buttons with CSS3
画像もJSも使わず、CSSのみでTwitterやApple、マクドナルドなどのロゴを作成、コードを公開しているサイト - かちびと.net
HTML5 Coding assessment test - jsdo.it - Share JavaScript, HTML5 and CSS
Home - Food Sense
Media Queries