[B! css3][ui] yoshiwebのブックマーク

動きがユニークで参考になるメニュー系のUIアニメーションまとめ10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近、編集長の朽木さんが一部の方々から「くーにゃん」と呼ばれているのですが、私から「くーにゃん」と呼ぶのは馴れ馴れしすぎるので「くーにゃんさん」と呼んでしまう次第であります。はい(◞‸◟) さて、今回は動きが面白いUIを集めてみました！ 1つ1つアニメーションを確認しながらご覧いただけるとうれしいです( ˘ω˘)☝ 今回は紹介するアニメーションは全部で10個です( ˘ω˘)☝ 1. GIF Sticker App – Dribbble https://dribbble.com/shots/1719325-GIF-Sticker-App サイドメニューが斜めに表示するパターン、要素もくるくる動いております( ˘ω˘)☝ 2. Home Guard 02 – Dribbble https://dribbble.com/shots

yoshiweb 2014/09/20

リンク

アイデアの宝庫！CSS3を使ったUI表現・テクニック集

CSS3を使ったUIアイデア集 / circular links menu / CSS SWITCH他...全12件

yoshiweb 2013/10/04

リンク

box-shadowで表現する、「セミフラット」なズルいデザインテクニック

box-shadowで表現する、「セミフラット」なズルいデザインテクニック：ズルいデザイン（3）（1/2 ページ）世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな

yoshiweb 2013/08/22

リンク

Googleから学ぶヌルヌルサクサクなスライドメニュー - Qiita

スマフォwebページのスライドメニューアプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。一方Google先生はパーフェクトなスライドメニューを実装していたさすがGoogle先生！俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。スライドのアニメーションがとても滑らか・ちらつかないボタンの反応にストレスを感じないメイ

yoshiweb 2013/06/12

リンク

On/Off Flipswitch HTML5/CSS3 Generator - Proto.io

On/Off FlipSwitch Generate pure CSS3 On/Off flipswitches with animated transitions.

yoshiweb 2013/03/13

リンク

HTML5 × CSS3 × jQueryを真面目に勉強 – #14 jQuery UI Widget(プラグイン)の作り方について詳しく | DevelopersIO

そんな訳で、jQuery UI プラグイン(※以下、jQuery UI Widget) の作り方について学んだので、ここに書き記しておくとします。忘れっぽい自分のための備忘録として書いた内容なので、割りと基礎的な部分にフォーカスした入門編のような内容になっています。ウィジェット作成のための前準備当然ですが jQuery UI のプラグインなのだから、作成には jQuery エンジンだけでなくjQuery UI ライブラリが必要となります。手順A | CDN で手軽にロードする学習目的やちょっとしたテクニカル調査といった場合は、わざわざファイルをダウンロードするのも大げさなので、CDN (コンテンツ・デリバリ・ネットワーク)を利用させてもらうのが妥当です。 jQuery UI オフィシャルページのフッター部分に必要なURLがすべて記載されているので、これらをアナタが作成する HTML