Monthly Bookmarks #29 目次
Development
- driveway: pure CSS masonry layout aidJavaScriptは使用せずCSSのFlexboxを利用してMasonryレイアウトを実装したもので、レイアウト以外にも特定の要素のみフォーカスをあてたり、要素をフリップさせる動きなども用意されています。
- Buttons in Design Systems — EightShapes LLC — Mediumタイトル通り、ボタンデザインについていろいろとまとめられています。
- Webデザイナーに最低限知っておいてほしい、検索と置換(正規表現)｜Web Design KOJIKA17検索と置換(正規表現)についてをサンプル付きで解説しています。
- Animated Transition Effects in CSS and jQuery | CodyHouse主にCSSアニメーションを利用して面白いコンテンツ表示エフェクトを実装するチュートリアルで、全11種類あります。
- Distorted Button Effects with SVG Filters | CodropsSVG Filtersを使ったボタンクリック時のエフェクトサンプル集です。
プルプル震えたり、グリッチエフェクトがかかったり、水面に波紋が広がるような見せ方など全10種類。 - Simple Grid | Lightweight CSS grid for web developmentレスポンシブ対応・シンプル・軽量が特徴のCSSフレームワーク。
- GitHub - joshbuchea/HEAD: A list of everything that could go in the <head> of your document
<head>内に記述される各エレメントのチートシート。いっぱいありますね...。 - Easy Fullscreen HTML5 Background Video指定箇所の背景いっぱいに動画を配置させることができるスクリプトで、レスポンシブ対応と軽量さが特徴です。
- Sassを使ったz-indexの管理 - QiitaSass(SCSS)で
z-indexを多用する時の参考に。 - All Form Elementsフォームで使用される各要素をまとめて確認できます。
- Pixie Dust Input文字を入力するとキラキラとエフェクトがでる
input。 - Animated CSS3 Input Checkboxes with - Checkbox.cssチェック時にアニメーションを付けるもので、動きはCSSで実装しています。
エフェクトによってはinput type="radio"でも使えそうです。 - Isometric and 3D Grids | Codropsアイソメトリックグリッドの見栄えを実装するチュートリアルで、全4パターン用意されています。
- THREE Image Transition今までにない感じのエフェクトで画像を切り替えているデモで、切り替えはクリックとドラッグに対応しています。
見ればわかりますがかっこいいです :)
Design / Inspiration
- 20 User-Friendly Search Page Designs検索ページのデザインショーケース。
- 正解のないデザインについて、それでも正解について考えてみる // Speaker Deckデザイン時に最低限頭に入れておきたいような内容がわかりやすくまとめられています。
- Webデザインにおけるタイポグラフィの考察 | Notes | dotgraphyタイトル通り、タイポグラフィの考察について細かく書かれたエントリーで、実際の表示を確認できるサンプルも用意されています。
- The 100 Best Free Fonts for Designersフリーのデザインフォントが全100種類まとめられています。
- Typography: Google Fonts Combinations on Behance相性の良いGoogle Fontsの組み合わせが紹介されています。
- 10 Fresh Google Fonts Pairings That Work Perfectly Together — Prototyping: From UX to Front Endこちらも同じく相性の良いGoogle Fontsの組み合わせが紹介されています。
Material / Freebies
※以下で紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
Company Icon Set
12 FoodiesFree Photos
Service / Resource
- CSS TriggersCSSの各プロパティが「Layout」「Paint」「Composite」のどれに影響を与えるかを一覧化したものです。
- Simple Flat Colour Selectorシンプルなフラットカラーをまとめたサイトで、カラーコードもHEX・RGB・CMYKなど様々な形式でコピーできます。
- Resource Cards - Selected free resources for designersデザイナー向けの便利な各種リソースがまとめられています。
- Instagramがロゴデザインを変更Instagramがロゴデザインを変更し、これまでのデザインよりシンプル且つカラフルな感じになりました。
新しいロゴデザイン素材は「Instagram Brand Resources」から公式のものをダウンロード可能です。 - GitHubが新料金プランを発表GitHubが月額7ドルでプライベートリポジトリを無制限に作ることができる新料金プランを発表しました。
Other
- Sebastian Ly SerenaHTMLのフォーム要素を利用してピタゴラスイッチを作成したもの。
普通にすごいです。