Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: WebDesign

[CSS] CSS Text Effects From CodePen – CSSテキストエフェクトまとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

CodePenで紹介されているCSSテキストエフェクトのクールな作例をまとめた記事。ほとんどのものはPure CSSで作られてますが、モノによってはマスク背景とかに画像が使われたりもしてます。動きのある作例も多いです。元ネタがCodePenなので、コードの確認もサクっとできて汎用性も高いです。見出し装飾のネタ探しなんかにも使えそう。

[Software] Brackets Themes – Bracketsのテーマ配布サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

テキストエディタBracketsのテーマを配布しているサイト。ライト系ダーク系合わせてかなりの数のテーマが紹介されています。インストールはサイトからダウンロードするというよりは、Bracketsの「機能拡張マネージャ」内で探して、そのままインストールという流れ。テーマの適用はまた別の所にあって、インストール後に「表示>テーマ」に行くとプルダウン内に増えてます。コードの見やすさは生産性に直結するから拘りたいところ。ちなみに自分はダーク系テーマが好きなのでTwilight使ってます。明度低め、コントラスト高め、彩度抑えめで見やすいです。

[CSS] Grid Garden – CSS Grid Layoutの仕組みを学べるコンテンツ

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSを使ってグリッドレイアウトを行うCSS Grid Layoutの仕組みを、基本から応用まで順を追って学ぶ事のできるコンテンツ。このCSS Grid Layoutは「display: grid;」を使って行う新しいレイアウト手法なんだけど、格子状に区切って長方形をそれぞれ長さを決めつつ並べていくというもので、懐かしのTableレイアウトにちょっと近い印象を受けました。しかしまぁアレですな、「やっとFlexboxレイアウトを覚えたところでまた次の手法かよふじこふじこ」的な感じはありますな。けど新らしいものは否応なしに覚えていかないといけない業界ですもんね仕方ないですよね。思い起こせばTable→Float→Flexboxとレイアウトに使うタグって色々ありましたよね・・・。
ちなみにSafariはこのdisplay: grid;をまだサポートしていないので、このコンテンツ自体表示できません。Chromeあたりでお試しください。

[CSS] Animista – アニメーションに関するCSSのジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSアニメーションのジェネレーター。CSSでできる様々なアニメーションのサンプルが用意されていて、CSSコードをコピペして使う事ができます。アニメーションはカテゴリに分けて紹介されています。ベーシックなもの、アニメーションイン(導入)、アウト(はけ)、テキスト関連、注意を引く動き、背景画像に関するアニメーションの6つ。どの項目にもオプションが用意されていて、動きを細かく調整する事ができます。気に入ったものができたら右上にあるコード生成のボタンからCSSコードをコピーできます。オプションの内容も含めるとかなり多機能で、プレビューしながらコード生成できる使い勝手の良さもとってもナイスです。

[Web Design] BigPicture – 軽快に動作するModal画像ビューアー

  • Pocket
  • このエントリーをはてなブックマークに追加

サクサク動くLightbox亜種。他のJSライブラリなどは必要とせず、これ単独で動くようです。クリック or タップで画像だけがフレームレスで開いて、再度クリックで収納。とってもシンプル。スマホページではわりと敬遠されるModal表示も、こういうシンプルなものなら使いやすそうです。ロードに時間かかる場合はローディングスピナーが出て、リンク切れしてる場合にはダイアログ出してくれるあたりが新設。また画像以外にビデオもイケます。構成がシンプルなだけに導入も簡単そうです。

[CSS] 18 CSS Tabs – CSSで作るタブ作例まとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

HTMLとCSS、あと作例によっては簡単なJSも使って作られた、タブデザインの作例まとめ。クリックすると隠しdivがアクティブになって、ページ遷移なしでコンテンツを切り替えるアレです。このまとめ記事では各作例をアニメGif使って紹介しているので、それぞれの挙動も含めて一覧で見ることができるので便利です。「DEMO AND CODE」をクリックするとCodePenで見る事ができるので、タブデザインのコードスニペットまとめみたいな風にも使えそうです。紹介されている作例もかっこイイの多いです。

[Web Design] 19 Mind-Blowing CodePen Experiments – CodePenのぶっ飛んだ作例まとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

CodePenに上がっているぶっ飛んだ作例をまとめた記事。全部で19の作例が紹介されてるけど、どれもスゴいです。よくこんなの作るなーと感心するものばかり。各作例はEmbededされた形で掲載されているので、動くものをこの1ページで全部見る事ができます。BB-8超かわいい。

[CSS] Creating Non-Rectangular Headers – 長方形じゃないヘッダーの作り方色々

  • Pocket
  • このエントリーをはてなブックマークに追加

最近流行りの、長方形じゃないエッジを持つヘッダーの作り方が複数紹介されてます。斜めヘッダーだけでなく、ギザギザや円形なども用意されてます。imageを使う手法、SVGを使うもの、clip-pathを使うもの、border-radiusを使うもの、transform: skewを使うものが紹介されており、最後にそれぞれのメリットデメリットをまとめてある点がとってもナイス。border-radiusを使って円形にするってのは新しいなーと思いました。