Win&Co

Category: CSS3

CSS3＆jQueryを使ったパララックススライダー

本日はシンプルなパララックス対応のコンテンツスライダーをご紹介したいと思います。CSSアニメーションを使ってスライダー内の個々の要素をアニメーション化させます。それからスライダーの背景もアニメーション化させることによりパララックス効果を実現させます。

詳細を読む »
April 12, 2012 2 Comments

CSS3とHTML５をフルに活用したコンタクトフォーム

今回のチュートリアルでは画像を使用せず、HTML5とCSS3だけでコンタクトフォームを作成する方法をご紹介していきたいと思います。その前に少々免責事項ですが、HTML5とCSS3はまだドラフト状態ですので、このチュートリアルの目的はあくまで「HTML5やCSS3を使うとこういうことが出来ますよ。」と一例をお見せすることに過ぎません。古いブラウザとの互換性の問題もありますし、もし本番でこの方法を使用する場合はご自身の責任でお願い致します。

詳細を読む »
March 30, 2012 2 Comments
CSS
yuki

LESS CSSを徹底解説

私はフロントエンドディベロッパーとしての仕事を、いかに簡単にそして効率よく行うか常々考えてきました。けれど最も身近な存在であるCSSに改めて注目し始めたのは、ほんのここ最近のことです。フロントエンド開発を楽にするためには、まずグリッドシステムとobject-oriented

詳細を読む »
February 27, 2012 No Comments
CSS
yuki

CSS3 イメージスライドパネルショー

今回はCSSのみを使用して、かなりイイ感じのスライディング・イメージ・パネルの作成方法をご紹介したいと思います。これはパネルに背景画像をセットして、ラベルをクリックすればアニメーション化されるというものです。ラベルにはラジオボタンを使用し、ターゲットはそれそれのパネル部分とし間接セレクタ（general

詳細を読む »
February 22, 2012 No Comments

イケテルオリジナルマウスオーバーCSS3アニメーション

CSS3の力は尋常では無く、本当にすごいことばかりです。今回のチュートリアルではそのCSS3の巨大な力を、非常にクリエイティブな方法で「いい意味で」悪用する方法をご紹介したいと思います。早速ですが、今回は何種類かのサムネイル・ホバー効果をCSS3のトランジッションを使って表現していきます。色んなスタイルを使用し、それぞれのサンプルでサムネイルをホバーすると、予期せぬ効果が現れるようなものを作っていきます。

詳細を読む »
January 30, 2012 3 Comments

CSS3とjQueryでサムネイルをカッコよくイメージ拡大

本日はjQueryを使ってこざっぱりと綺麗にまとめられたサムネイルのプロキシミティ効果（接近効果）の作り方をご紹介したいと思います。これはマウスを画像にホバーすると自動拡大され、周辺画像もそれに合わせて適切なサイズに自動拡大されるというアイデアです。また同時に説明文も表示されるようになっています。

詳細を読む »
January 13, 2012 No Comments

WebKitを使ってスクロールバーをカスタマイズ

一昔前、IE（5.5）などでは非標準のCSSを使って、スクロールバーをカスタマイズすることが可能でした。例えばscrollbar-base-colorをスクロールする要素（<body>など）に使って、結構過激なことなんかも出来ました。けれどIEはそれを廃止してしまいました。

詳細を読む »
September 6, 2011 3 Comments

PNGファイルでカラーアニメーション

あまり普段やってみようと思うことはないかもしれませんが、<img>タグにも背景色を付けることは可能です。例えば画像周囲に2本の枠線を引きたかったとします。1本目の枠線は通常通りborderを使用し、もう1本の方はbackground-colorとpaddingを使ってあたかも枠線かのように見せることが出来ます。もしくは背景色を真っ赤にセットすれば、画像が抜けているところが一目で確認出来ます。

詳細を読む »
August 23, 2011 No Comments

  • カテゴリー

    • 最新ブログ