CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ | コリスここ2, 3年、CSSアニメーションの進化がすごいですね！ 次のプロジェクトにさっそく使ってみたくなるようなものから、こんなことも出来るのか！という驚きのテクニックまで、CSSアニメーションのスゴ技・小技を紹介します。 Animated Gameboy in CSSのデモのアニメーションGIF まずは、CSSで作られたゲームボーイ。 上はデモをアニメーションGIFにしたものですが、下は生HTMLと生CSSです。 そのままのアニメーションでも驚きですが、ホバー時にはスケルトンになります。
【CSS3】メディアクエリをIE7、IE8でも使えるようにする at softelメモ
問題 あら？IE8はメディアクエリ（cssの@media何々）使えないんでしたっけ？ 答え IE9からはメディアクエリが使えるけど、IE6、IE7、IE8は使えない。 こちらのスクリプトを使うと、何とかなるでしょう。 <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> HTML5も！というときは、こちら。 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecod
レスポンシブデザインの基礎と制作時の注意点を解説
ferret編集部：この記事は2015年11月2日の記事を再編集しています。 ここ数年で定着してきた「レスポンシブデザイン」。 Webデザインに関わる人であれば、この言葉を耳にしたことがあるのではないでしょうか。 iPadなどのタブレットや、スマートフォンの表示に最適化されたページと理解されている方も多いかもしれません。 では従来のモバイル対応ページとはなにが異なるのでしょうか？ スマートフォンが一般に普及し、タブレットも次々に上位機種が発売される今、ますます需要が高まってくると見られるレスポンシブデザインについてまとめました。 レスポンシブデザインの定義 レスポンシブは日本語だと「反応が良いさま」と訳され、レスポンシブデザインは「単一のURL（HTMLファイル）であらゆるデバイスに最適化されるデザイン」を指します。 従来は、パソコン、スマホ、タブレットなど、表示サイズの異なるデバイス毎に
Dev.Opera — CSS will-changeプロパティについて知っておくべきこと
はじめにWebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほとん
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
HTML の br タグを CSS だけで消す方法
HTML に br という要素がありますね。 4.6 Text-level semantics — HTML5 The br element represents a line break. ということで、改行を表すということになってます。 以前は <br /> が不要なら <br /> を入れなきゃいいじゃない というだけの話だったんだけど、 最近これを有効にしたり無効にしたりと切り替えたくなることがあります。 例えばいわゆるレスポンシブデザインでサイトを組むときに 大きな画面なら表示範囲にゆとりがあるから改行を入れて広く使ってもいいけど スマートフォンなどの画面でそれをやると一目に入る情報量が減っちゃうから そのときだけ br をなかったことにしたいという具合に。 考えたこともやったこともなかったんだけど、 これ実に簡単な話でした。 display: none; にする 要するに br
CSS3で線（border）をグラデーションさせるテクニック
Illustrator とかでよくやる「塗りとパスのオフセットを使って実現する線のグラデーション」を、CSS3で実験してみました。 ↓とりあえず、border を使った場合と、線をグラデーションさせた場合の作例です。CSS だけで作っています。モダンブラウザで見てください。 微妙な違いかもしれませんが、線にグラデーションを適用した方、よりリアルで繊細な印象になります。 作り方 border は使いません。替わりに、ネストしたボックスを作り、親ボックスをグラデーションさせることで、線がグラデーションしているように見せます。 HTML 内側に span を入れ込んで「重ねた塗り」を実現します。 <a href="#" class="button"><span>ボタン</span></a> 外側のボックス (a) の padding が線幅になります。内側のボックス (span) は、白で塗りつ
CSSで９パッチ(9スライス)をする方法 | Nega Universe
リキッドレイアウトやマルチデバイス対応を行なうための重要なテクニックの１つ、「9パッチ(9スライス)」をCSSで行なう方法を紹介したいと思います。 アプリ開発やFlashでは「9Patch」「9Slice」という名前のこの機能、つまり角丸ボタンなどの画像を縦横に拡大させても角丸が変形しないアレです。 以前のHTML/CSSでは画像を分割して拡大に対応する方法がありましたが、CSS3では最小の画像１つで実現することができます。 CSS3では「border-image」を使う CSSで9パッチを行なう場合、CSS3の「border-image」プロパティを使います。 border-imageプロパティはその名のとおり、ボーダーに画像を使うことのできるプロパティですが、実はこれがCSSの9パッチなんです。 border-imageプロパティにはborder-image-source、bord
Web Designer News - The best curated news for designers
Web Designer News - A curated collection of the best news for designers each day. http://www.WebdesignerNews.com
digitalskill.jp
Buy this domain. digitalskill.jp 2020 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
Which Responsive Frameworks are Designers Using?
All the mathematics involved in creating a responsive website design can be exhausting and time consuming, but thankfully there’s a range of responsive frameworks available that make the process quick and easy. These frameworks or boilerplates have all the complicated grids, layouts and media queries in place ready for you to add your own design and markup. Here’s a roundup of the most popular fra
Create a Trendy Retro Photo Effect Purely with CSS
Home » Tutorials » Create a Trendy Retro Photo Effect Purely with CSS Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more I’ve done plenty of retro photo effect tutorials in the past, but they’ve all been done using Photoshop. After playing around with some cool new CSS3 features I managed to create a pret
JavaScriptなし!! CSSだけで実現する3Dアニメーション | HTML5GOGO
CSS3のアニメーションサンプルで、立方体を扱ったものは数あれど、それ以上の多面体のサンプルが見当たらなかったので、倍の12面体を作りました。 イメージ 概要 今回はそのサンプルを題材に、CSS3で新たに追加されたアニメーション系のプロパティをご紹介します。 ※今回ご紹介するプロパティは、執筆時点では全て要ベンダープレフィックスです。 ※対応ブラウザ：Chrome 12～, Safari 5～ Mozillaは「現時点では Z 軸はサポートされていないため 3D の回転や 3D 拡大縮小、3D 変換はサポートされていません。」だそうです。 MDN – CSS transforms の利用 ※グラフィックボードが3Dの表現に対応している必要があります。 ※動作にはCPUパワーが少々必要になります。 HTMLサンプル ※各面はリンクになっています。 回転方向を指定できるコントローラー付きのサン
CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
30 Cool CSS Animations For Your Inspiration
CSS is one of the most versatile programming languages in popular use. From layouts and text effects to colour and size of your content, the possibilities are endless. One of the most interesting uses of CSS is to create animations. And this is what this post is all about. This post lists some of the most creative CSS animations you’ll find on the web. From transition effects to character animatio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインリリック
Blog - LINE ENGINEERING
Gimme Bar | Front end styleguides and pattern libraries
eky.hk
UI設計におけるスマートフォン対応のまとめ
