Tag : CSS

READ MORE

Webサイト上の要素の動きや操作によってユーザーに「触覚」を生み出すマテリアルデザイン。そんなマテリアルデザインの一種としてボタンをクリックした際に、そのクリックしたポイントから波動を出す動作があります。その動作をjQueryとCSSを使って実装するマテリアルデザイン風ボタンを作ってみたので紹介してみます。マテリアルデ…

READ MORE

古いIEのバージョンのサポートが終了したことやプログレッシブエンハンスメントの考えから、CSS3を使ってのレイアウトやアニメーションを気兼ねなく使えるようになってきました。画像やボタンにロールオーバーした際にCSSアニメーションを使ってのさまざまな演出方法についてまとめているサイトも多々あります。そんなCSSロールオー…

READ MORE

WindowsXPのサポートも終了し、この先はWebサイト制作においてIE8を対象外にできる状況が増えることが想定されCSS3の各機能を今まで以上に活用できる機会が増えてくるかと思います。そんな中、最近あちこちで話題になっていた複雑なCSS3アニメーションエフェクトを簡単に実装することが扱うことが可能になる「iHove…

READ MORE

レスポンシブ対応を求められるWebサイト制作ではナビゲーションメニューの構成について何かと気を使わなくてはいけない点が出てきます。ウィンドウサイズによってナビゲーションメニューの形状を変化させるやり方は様々ですが便利に使えそうだと思ってメモしておいたJSやCSSでのチュートリアルがそこそこ溜まっていたので11種類ほどま…

READ MORE

以前ここでも「CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード/マウスオーバー/クリックアクション】」と題して、CSSアニメーションの実行パターンをいくつか紹介しましたが、アニメーションの実行制御をCSS側でなくjQueryで操作させる方法が簡単でいろいろとこの先使えそうだった…

READ MORE

jQueryを使ったアニメーションではCSSのプロパティ値を操作することによってページ上に様々なバリエーションのアニメーションを簡単に実装することが可能になりますが現状(ver.1.8)のデフォルト状態でのjQueryファイルではCSS3のTransform系の回転「rotate」や拡大縮小「scale」といったアニメ…

READ MORE

今までは画像でしか表現できなかったWebサイト上の装飾がCSS3で追加されたプロパティを使うことによってCSSのみで様々な形状の模様を表現できるようになってきています。そんなCSS3を駆使しての様々なパターンを紹介している「CSS3 Patterns Gallery」がこの先もいろいろな可能性を秘めているように感じたの…

READ MORE

BlackFlagで紹介しているjQueryとCSS3を使って実装するスライドショーやカルーセル等Webサイト上でのUI系スクリプトのTIPSをまとめたページになります。※一覧は随時更新します。ALLレスポンシブスライドショー/スライダーカルーセルスワイプ/フリックスクロールパララックスフルスクリーン入力フォーム高さ揃…

READ MORE

jQueryを使ってページ内でのあらゆる制御をする際、コンテンツ要素の表示/非表示を切り替えたりアニメーションを付けたりするにはCSSのSTYLE属性を制御してプロパティに指示を与えることになります。そのようなCSSのプロパティを制御する際に、「!important」宣言をどうしても使いたい状況が意外と出てくるので、j…

READ MORE

今ではmozillaやwebkitブラウザでは、Webページ上に<textarea>タグを使ったテキストエリアを配置した際、ユーザーがエリアのサイズを自由にリサイズすることが可能になります。場合によっては、このリサイズ操作をすることで周りのレイアウトが崩れてしまったり、枠からテキストエリアが飛び出してしまったり、何かと…

BlackFlag
FOLLOW
Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner