タグ

jqueryとcss3に関するmamuchiのブックマーク (3)

  • CSS で作るスマートフォン向け片手操作メニュー

    ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UICSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UICSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox

    CSS で作るスマートフォン向け片手操作メニュー
  • 画面外からニョキっとスライドしてくるエフェクト at softelメモ

    ちょっと注目してほしいアラートや誘導に使えます。 Ajaxで非同期でデータを更新した後、「更新しました!」などの情報を表示したり。 上からでてくるのはiOSの通知センターみたいですね。 jQueryではanimateという動きを指定できる機能が用意されていますのでそれを利用します。 jQuery:animateでスライドエフェクト CSS3が使えるブラウザだとanimateを使わなくても(つまりjQueryいらず)実装できます。 (Firefox,google Chrome,safariで閲覧してください。IEだとアニメーションしません) CSS3でスライドエフェクト jQuery単体ではできない背景色の変化もCSS3では行うことができます。

    画面外からニョキっとスライドしてくるエフェクト at softelメモ
  • CSS3とjQueryでフォームを美しく装飾する方法

    2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです!そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト! フォームの仕様 今回チャレンジするフォームの主な仕様です! グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける(モダンブラウザ) 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ?という人もひとつひとつ記述していけば意外と簡単に作れるはずです!リンクをクリックで各項目にジャンプします。 テキストボック

    CSS3とjQueryでフォームを美しく装飾する方法
  • 1