ボタンやロゴ、画像などのホバー時にCSSアニメーションを加えたり、Appleのプロダクトページのようにスクロールに合わせてアニメーションで要素を表示させたり、キーフレームを使ったアニメーションを作成したりなど、CSS3アニメーションを簡単に利用できるライブラリを紹介します。 CSS3アニメーション好きの人は、デモを見ているだけで楽しくなれます。
ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..
This slider, as seen on the landing page of the FWA, plays with 3D perspective and performs some interesting animations on the right-hand side images. CSS Animations We are using 12 different animations for showing and hiding the items of a slide. The animations are defined by randomly adding data-attributes called data-effect-in and data-effect-out for every slide. Tilted Items The perspective vi
CSS3で追加したプロパティ「box-sizing」が結構便利です。皆さんブログで良さを紹介していますが、私なりに具体例を入れつつ解説してみますので、これを読んで「box-sizing」への理解が深まれば嬉しいです。 以前「初めてスマートフォン専用ページを作成する際に知っておきたいポイント|Webpark」という記事を書いたときに、スマホ用サイトを作るときにbox-sizingが便利という内容を書きましたが、スマホ用だけでなくレスポンシブなサイトにも便利です。 box-sizingとは box-sizingの値には「content-box」「border-box」「inherit」があります。content-boxは初期値で、要素の大きさを、width、padding、borderで計算されます。 今回便利というのborder-boxを使った場合です。border-boxを指定すると、要素
今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[CSSだけで作るtableデザインテクニック]の続編です。今回はCSSだけで作るテーブル2つと、おまけとしてCSS+ちょっとした画像で作るテーブルを紹介させていただきます! こんなに朝早くから投稿した理由は、これから新潟に旅行に行くからです!!予約投稿すればよかったんですが、ちょっと手直しをしたかった所があったので、ついでに投稿しちゃいました! 気に入っていただけましたら自由に使ってください。シンプルなデザインですのでカスタマイズもしやすくなっていると思います。ではどうぞ! CSSテーブルデザインテクニック01 HTML テクニック01 <table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top
Rotate HTML elements by mouse in JavaScript - Propeller.js html要素をプロペラ風になめらかに回転させるjQueryプラグイン「Propeller.js」 自動で回転させることもできるし、ドラッグ&ドロップによって回転させて加速度をつけたアニメーションをさせることもできます 汎用性はありませんが、ちょっとしたエフェクトとして使えそうですね 関連エントリ CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 読み終わったらスライドアニメーションで他記事に誘導できるjQueryプラグイン「Promo Slide」 アニメーションするプログレスバーで達成度を視覚化できるjQueryプラグイン
jQuery Panorama Viewer by Pete R. | The Pete Design サイト内にパノラマ画像をモダンな感じに読み込めるjQueryプラグイン「Panorama Viewer」。 パノラマ画像をよみこんで、D&Dやスワイプによって動かせるという感じのUIを作れます 実装されたページはなかなかいい感じ 関連エントリ 色々なタイプのスライダーが実装できる「sGlide」 HTML5&CSS3なレスポンシブなスライダー実装jQueryプラグイン「Slippry」 スライダーの背景もダイナミックに切り替えるクールなスライダ実装jQueryプラグイン「Immersive Slider」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」
「ゼロからjQueryを学びたい人たち」が効率的に理解できるように、 1章から順に難易度が上がるステップアップ形式の解説を行っています。 また、jQuery初心者のデザイナーの視点を加えることで、 プログラミング未経験者の「つまずきやすいポイント」を押さえた内容になっています。 通常、サンプルコードは全て出来上がった状態で配布されますが、 本書ではあえて途中までのみを記載しています。 コードに余白を残すことで、サンプルをただなぞるだけではなく、 読み手の工夫次第で様々な表現を生み出すことができるようにしています。 最終章では、実際の仕事でデザイナーやエンジニアが手がけるWebサイトと同等のクオリティのページを制作します。 単なる技術の理解に終始せず、実際のサイトを制作する上でのポイントを習得することで、 Web制作における実践的な力が身につきます。 シフトブレインの取締役、テクニカルディレ
jQuery Immersive Slider by Pete R. | The Pete Design スライダーの背景もダイナミックに切り替えるクールなスライダ実装jQueryプラグイン「Immersive Slider」。 単なるスライドだけではなくて、スライドの背景も切り替えてかっこいいエフェクトを出せるプラグインです スライダ部分だけを変更するより迫力がありますね。 ちなみに、背景画像部分の画像も用意する必要があるようです 関連エントリ ハッシュフラグメントでブックマークに対応できるスライダー「Hashslider v2」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 プロダクトを360度回転させられるjQueryプラグイン「Threesixty-slider」 3Dでグルグル回転するインパクト大なスライダー実装jQueryプラグ
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては(特にCSS3を用いているもの)ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 新人時代、CSSプロパティの書き方は分かっても、「…これなんて読むんだろ…?」と思うものが数多くありました。自分だけが知らないのかも…と思ってごまかしているうちにはや数年…こんな思いをしているのは自分だけじゃないはず! ということで、今回は読みづらいCSSプロパティ(というか以前僕が間違えて読んでいたCSSプロパティ…orz)についてまとめてみました。発音見本のリンクをつけましたので不安な方は聞いてみてください! 読みづらいCSSプロパティ目次 alt a href img src width height text-align vertical-align opacity visibility hidden border-collapse backg
作成:2013/10/15 更新:2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML5を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ 1.勉強になるテクニック/サンプルまとめ 基本知識 2.セレクタ 3.メディア クエリ 4.コーディング規約 5.フォント 6.CSSスプライト 7.アニメーション 8.正確なHTML使用方法 9.CSSハック 10.書き方/読み方 定番まとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
ちょっと前に話題になっていた、YouTubeやGoogleマップやInstagramなどの ページ内に埋め込む際のURLや埋め込みコードを 簡単にレスポンシブ化してくれるサービス「embedresponsively.com」が 便利に使えそうだったので自分用メモとして紹介してみます。 embedresponsively.com 使い方は簡単で貼り付ける媒体を選択して 画面内の入力フォームに、動画ページのURLや埋め込みコードを入力して 「Embed」ボタンをクリックするだけ。 (入力するURLの内容は媒体によって違います。) クリック後は画面の下にレスポンシブ用のHTMLやCSSのコードが生成されるので それを張り付ければいいだけ。 実際にYouTubeでコードを生成した場合は以下のような画面になります。 手軽に使えることと、CSSでどの値をどのようにすればレスポンシブ化できるか、 といっ
タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。 では、一番上のサンプルを解説します。 HTML まずはHTMLから。 Home Twitter Facebook RSS Setting a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。 続いてCSSです。いつも通りまずは全部載せます。 @font-face { font-family: 'typicon
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く