yuduki-designのブックマーク - はてなブックマーク

CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld

ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。

yuduki-design 2017/03/16

css

リンク

UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20 - NxWorld

webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect

yuduki-design 2016/11/16

リンク

Monthly Bookmarks 2016/04 - 2016/06 - NxWorld

2016年4月〜2016年6月の個人的ブックマークです。 2016/04 Development Almost complete guide to flexbox (without flexbox) | Kenan Yusuf CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス MaintainableCSS - an approach to writing modular, scala ble and maintainable CSS | By Adam Silver Modaal is a WCAG 2.0 Level AA accessible modal plugin Popper.js 360 Degrees Product Viewer in CSS and jQuery | CodyHouse Turntable.js : A Resp

yuduki-design 2016/06/23

css
form

リンク

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld

画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。

yuduki-design 2015/10/07

リンク

hr要素のデザインサンプル 12 - NxWorld

hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。はじめにここで紹介しているものは、すべてHTMLは<hr />のみです。また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。