

Retinaディスプレイ対応のレスポンシブなメニュー
この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している場合があります。オリジナルの記事はここよりご覧いただけます。
この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している場合があります。オリジナルの記事はここよりご覧いただけます。
この記事は、http://www.onextrapixel.com/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。
本日はシンプルなパララックス対応のコンテンツスライダーをご紹介したいと思います。CSSアニメーションを使ってスライダー内の個々の要素をアニメーション化させます。それからスライダーの背景もアニメーション化させることによりパララックス効果を実現させます。
今回のチュートリアルでは動きのある画像スライダーをご紹介したいと思います。メインの選択画像をスライドさせる時に、立体感を出す為複数の背景レイヤーにパララックス(視差)の原理を使用しています。こうすることにより、画像が切り替わる時に素晴らしい奥行き感を実現することが出来ます。
今回のチュートリアルでは画像を使用せず、HTML5とCSS3だけでコンタクトフォームを作成する方法をご紹介していきたいと思います。その前に少々免責事項ですが、HTML5とCSS3はまだドラフト状態ですので、このチュートリアルの目的はあくまで「HTML5やCSS3を使うとこういうことが出来ますよ。」と一例をお見せすることに過ぎません。古いブラウザとの互換性の問題もありますし、もし本番でこの方法を使用する場合はご自身の責任でお願い致します。
私はフロントエンドディベロッパーとしての仕事を、いかに簡単にそして効率よく行うか常々考えてきました。けれど最も身近な存在であるCSSに改めて注目し始めたのは、ほんのここ最近のことです。フロントエンド開発を楽にするためには、まずグリッドシステムとobject-oriented
今回はCSSのみを使用して、かなりイイ感じのスライディング・イメージ・パネルの作成方法をご紹介したいと思います。これはパネルに背景画像をセットして、ラベルをクリックすればアニメーション化されるというものです。ラベルにはラジオボタンを使用し、ターゲットはそれそれのパネル部分とし間接セレクタ(general
CSS3の力は尋常では無く、本当にすごいことばかりです。今回のチュートリアルではそのCSS3の巨大な力を、非常にクリエイティブな方法で「いい意味で」悪用する方法をご紹介したいと思います。早速ですが、今回は何種類かのサムネイル・ホバー効果をCSS3のトランジッションを使って表現していきます。色んなスタイルを使用し、それぞれのサンプルでサムネイルをホバーすると、予期せぬ効果が現れるようなものを作っていきます。
世の中では様々な用途の為にWebアプリケーションが用いられており、Webディベロッパーにとってはウハウハな今日この頃だと思います。Web開発業界にもモバイルデザインから携帯アプリに至るまで、フロントエンド開発やosCommerceやWordPressなどと言った特定のプラットホーム開発者など、幾つもののニッチ市場が存在します。
WordPressとはWEB上で使われている最大規模のブログプラットフォームの1つで、その知名度の成長とありがたいほどの柔軟性により、静的なWEBサイトのCMSとしての使用される機会も非常に増えています。
一昔前、IE(5.5)などでは非標準のCSSを使って、スクロールバーをカスタマイズすることが可能でした。例えばscrollbar-base-colorをスクロールする要素(<body>など)に使って、結構過激なことなんかも出来ました。けれどIEはそれを廃止してしまいました。
あまり普段やってみようと思うことはないかもしれませんが、<img>タグにも背景色を付けることは可能です。例えば画像周囲に2本の枠線を引きたかったとします。1本目の枠線は通常通りborderを使用し、もう1本の方はbackground-colorとpaddingを使ってあたかも枠線かのように見せることが出来ます。もしくは背景色を真っ赤にセットすれば、画像が抜けているところが一目で確認出来ます。
最近では、すっかり定番となってしまったライトボックスですが、ライトボックスのコピーキャットがオリジナルを越える機能を搭載して、どんどん出てきている。
HTMLでもCSSでもCでもJavaScriptでも、プログラーマーたちは自分たちの書くコードを一秒でも早く書くため手に様々ツールを開発してきたが、今回、ロシアからこれからのコーディングを全く新しい方法で行う、ZenCodingが注目を浴びている。