[CSS] Progress Button Styles – プログレスバーを兼ねたボタン作例
プログレスバーを兼ねたSubmitボタンの作例まとめ。クリックするとボタンの中、もしくは周辺でプログレスバーが展開されます。ファイルのアップロードとか、進捗の確認ができた方がいいボタン作る時なんかに良さそうです。
Monthly Archives: 7月 2016
[CSS3] CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS! – CSSエフェクトまとめ
CSSを使った写真へのフィルター機能をBefore After形式でまとめた記事。作例はそれぞれCodepenを使って紹介されています。ブラーとかグレースケールあたりは、マウスオーバー芸と組み合わせるのも良さそうです。またアニメーションを併せて使った手法や、ボックス要素全体にフィルターをかける作例なんかも紹介されてます。CSSフィルターって結構いろんな事できるんですね。
CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!
[WebDesign] CSS Pixel Widths – デバイスごとの物理＆論理ピクセル一覧
iOSやAndroidデバイスの、ディスプレイ仕様を一覧で紹介したページ。それぞれのデバイスごとに、物理ピクセル、論理ピクセル、CSSピクセルレシオが一覧でまとめられています。レスポンシブレイアウトのサイト作る時、ブレイクポイント決める際に役に立ちそうです。
[UI Design] uxtools.co – 各種UIデザインツールのできる事一覧
なんか最近やたら増えているUIデザインツールの、できる事一覧ページ。このジャンルだとCraftとかFramerあたりが有名だけど、最近になってAdobe Xdなんてのも出てきましたからね。やっぱ大手が参入するとジャンル全体がアツくなりますからね。それぞれプラットフォームやインポート可能なフォーマット、アニメーションやトランジションの可否、シェアリング先などについてスペックが一覧にされています。UXの考察や、UIデザインツール探す際に便利そうです。ちなみに俺はたまにAdobe Xd使ってます。サクっとプロトタイプ作るにはこの手のツールはちょうどいいんですよね。
[Web Design] FourZeroFour – 404 Page Not Foundのデザインギャラリー
誰でも見た事のある404ページ（そんなページねぇYO！ページ）のデザイン作例だけを集めたギャラリーサイト。わりと堅めのページでも404だけは軽くフザけてたりする場合ありますよね。デザイナーにとってはアイデアや皮肉、センスの見せ所でもありますな。404どうしよっかなーって悩んでる時なんかに漁るとイイかもしれません。いやそこは普通悩まないか・・・。
[Web App] emoji-gram – 絵文字を使って文字を書けるサイト
絵文字を使って文字が書けるサイト。入力欄に文字タイプすると、絵文字がその形になって、コピペして使う事ができます。ただし半角英数にしか対応していません。文字部分は左下から、背景部分は右下からセレクトできます。主な用途がメッセージングのためか、スマホで見るとちょうどイイ感じにレイアウトされてます。文字情報は縦書きされるので、人に送った際の改行問題についても心配する必要がなさそうです。自分はオッサンなのであまり絵文字を使う機会もあまりなく、とりあえずウンコ書いておきました。
[Web Design] You Don’t Need JavaScript – JS書かなくても色々できるYO！
Javascriptなしでも、HTMLとCSSだけで結構いろんな事ができるYO！という作例がGithubでまとめられてます。アコーディオンやカルーセル、マウスオーバーアクション、メニュー、タブなどにカテゴリ分けされて紹介されていて、各項目からはデモページへのリンクが用意されています。リンク先の多くはCodepenで、JSの項目が空なのが確認できます。JS書かずにサクっと導入できるのがイイですねこれ。特にDivのShow / Hideを切り替えるタブとか使いやすそう。
[Color] Palettable – 好きか嫌いかで1色ずつ色を決めていくカラーパレット
好きか嫌いかという極めてシンプルな基準で、1色ずつ色を決めていくカラーパレット生成サイト。気に入ったらLikeの「L」を、気に入らなかったらDislikeの「D」をタイプするだけ。Likeされた色はカラーパレットに残りますが、やっぱコレいらねーやと思ったら「Backspace」キーで削除する事もできます。また作ったカラーパレットはこんな感じに固有のURLが生成されるので、他人と共有するのもラクチンです。サイトとかアプリのカラー指定する際に、「こんな感じどうかなー？」みたいにチームで議論する時なんかに使えそうです。