タグ

ブックマーク / lab.sonicmoov.com (3)

  • 表現力を上げるCSSアコーディオン15選 | SONICMOOV LAB

    CSSを使ったアコーディオンと言ってもシンプルなものもあれば、ちょっとした動きを取り入れることでまったくもって違ったものになり、表現力が増します。そんなわけで今回はCSSアコーディオンで表現力をあげるためのサンプルをまとめてみました。 ファンキーなFunky Pure CSS Accordion アニメーションがファンキーなアコーディオンです。この画面で見づらい場合はリンク先にアクセスしてみてください。 多段構造によるMulti-level Accordion 多段構造によるアコーディオンメニューです。 動きがオシャレCSS + HTML only Accordion Element シンプルですが、全体的に動きがオシャレな印象を受けます。 シンプル&安定なAccordion Menu 左サイドにアイコン、右サイドには開閉のための矢印でナビゲーションしているシンプル&安定のアコーディオンで

    表現力を上げるCSSアコーディオン15選 | SONICMOOV LAB
  • コピペで絶対使いたくなるCSSボタン 25選 | SONICMOOV LAB

    動きがシャープなStylish Social Buttons マウスオーバー時の背景の動きがシャープです。 送信完了が分かりやすいSend button with a transition クリックして送信完了するまでの過程が分かりやすいです。 視覚をさらにプッシュするMaterial Button Hover マウスオーバーでさらに視覚に対してプッシュしてくれます。 広がるメニューAnimated Material Design Button マウスオーバーでメニューが広がります。 tの文字にも注目Twitter Button Concept 遊び心があるボタンです。 隠しボタンHidden door twitter button ツイッターフォローボタンで動きを付けたい時にオススメです。 立体的なボタンSquishy Toggle Buttons CSSだけでの表現でこんなボタンも。

    コピペで絶対使いたくなるCSSボタン 25選 | SONICMOOV LAB
  • 無料で色編集もできる!フリーのアイコン素材サイトOrion Icon Library | SONICMOOV LAB

    以前の記事アプリのアイコンデザインの参考にしたいサイト12選でアプリのアイコンのデザインの参考になりそうなサイトを紹介したのですが、今回はオンライン上で無料で配布されているフリーのアイコン素材サイトOrion Icon Libraryを紹介したいと思います。 関連 これは便利!コピペで使えるCSSのみで作られたアイコン500+ CSS Icons 目次 Orion Icon Libraryとは? ライセンスについて 使い方 Orion Icon Libraryとは? Orion Icon Libraryは、6000以上の中から好きなアイコンを選んで、線の太さや大きさを変更でき、しかも色を編集することもできるフリーのアイコン素材配布サイトです。また、同じアイコンでも「線、塗りつぶし、カラー、フラット」と4種類のデザインの中から選んで編集することができるようになっています。 例えば、線の太さや

    無料で色編集もできる!フリーのアイコン素材サイトOrion Icon Library | SONICMOOV LAB
  • 1