TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめデザインは奥が深いですね。 Webサイトでよく見かけるUI要素のデザインに一手間加えるだけでぐっとよくなる、ディテールにこだわった素晴らしいデザインのアイデアをTailwindCSSで実装するテクニックを紹介します。
CSSの参考になるアイデアがいっぱい！2018年スタイルシートを使ったテクニックのまとめ
2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。 動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。 まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。
「なぜ人は怪しい壺を欲しくなってしまうのか」セミナーの内容と補足説明
「価値」という言葉がありますが、価値ってなにか説明できる方っていますか？ 価値って言葉、日本語としてはなんとなく理解しているんですが、それを説明しろと言われると困ってしまいます。最初にも話しましたが、人は勝手に自分の脳内で都合の良いストーリーを紡ぎ出します。だからしっかり定義付けしておかないと、まったく違う方向の認識になってしまう恐れがあります。 というわけで、染谷が考える「価値」の定義付けをしておきます。 それは、「人類に役立つ事象 × 希少性 ＝ 価値」です。そして「価値観はひとそれぞれ違う」ということも重要なポイントです。 例を挙げます。 この中でダイヤのネックレスが欲しい人はいますか？なぜ欲しいのか、落ち着いて考えたことはありますか？ 価値の方程式に当てはめて考えてみましょう。それは「ダイヤのネックレスが胸元にあることによって、私の美しさが際立つから」じゃないでしょうか。あるいは「
2012年よかったランキング – ウェブサイト編 | blog.bouze.me
2012年の思い出にひたるべく、超主観で2012年に出会ったものをランキングで振り返ってみるテスト、ウェブサイト編。 #5. Little Big Details http://littlebigdetails.com/ いろんなサイトの細かすぎて伝わらないデザイン集。ささやかな気遣い。 こういうの見てるとインターフェイスデザインってつくづくサービス業だなぁとか思う。 #4. Kern Type http://type.method.ac/ Mark MacKayさんの作ったデザインスキル判定ゲームの第1弾。フォントのカーニングゲーム。Adobeのデザインツールのショートカットを再現していたりして本気でカーニングせざるを得ない作りがナイス。フォントのレンダリングをsvgで制御していたりとモダンな実装。 #3. Qonversations http://qonversations.net/
[JS]スライドを縦横斜めのダイナミックなスクロールで表示するスクリプト -Ascensor.js
デモページ ページ中央の「Demo and how to use」をクリックします。 操作は、左上の「prev, next」、右下の「ナビゲーション」、キーボードの「矢印キー」です。 [ad#ad-2] Ascensorを実際に使用しているサイトも紹介します。 Reverse Buro Ascensorの使い方 外部ファイル 「jquery.js」と「scrollTo.js」、そして当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.scrollTo.js" type="text/javascript"></script> <script src="js/jquery.ascensor.js" type="text/java
今すぐマネしたい！タイムライン対応済みの国内店舗Facebookページカバー写真30選 | ソーシャルメディア集客ラボ
ソーシャルメディア集客ラボの伏田です。 前回の記事に引き続き、新Facebookページのデザインついてご紹介します。いざ「タイムライン」のFacebookページになると、どんなデザインにしていいのかわからないことが多いのではないでしょうか？特にカバー写真は一番最初に目に入るデザインですので、悩みどころだと思います。 そんな方のために、すでに「タイムライン」に対応している国内の店舗Facebookページだけを集めてみました。このデザインを参考にページを作成してみてください。 ジャンルは「飲食店」と「スパ/美容/パーソナルケア」に分けてご紹介します。 カバー写真のおさらい カバー写真にはサイズと禁止されている事項があります。先に確認しておきましょう。 カバー写真のサイズ カバー写真のサイズは幅851ピクセル × 縦315ピクセルです。 横幅が小さい場合は拡大され、縦幅が小さい場合には空白ができ
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
2011年、押さえておきたいウェブデザインの11のトレンドとテクニック
Web Design Trends in 2011 [ad#ad-2] 以下、各ポイントを意訳したものです。 1. HTML5 + CSS3 2. シンプルなカラースキーム 3. モバイル対応 4. 視差効果 5. タッチスクリーン 6. 奥行き 7. 大きい写真の背景 8. 素敵なドメイン名 9. QRコード 10. サムネイルデザイン 11. Life Stream 1. HTML5 + CSS3 HTML5とCSS3はリリースされてから今日まで、あまり多くは使用されませんでした。しかし、この2011年、多くのサイトで採用されるようになるはずです。 多くのデザイナーはFlashから離れてはじめています。次の2つのサイトを見てみてください。 Scribblertoo(Flash) ここで注意してほしいのは、FlashとHTML5は敵対するものではないことを理解しておいてください。問題は、
Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
タグ一覧 タイトルロゴ(159) プライマリナビゲーション(72) グローバルナビゲーション(246) メインビジュアル(95) 見出し(326) 文字装飾(10) アクセント(29) サイドメニュー(142) ログインフォーム(68) タブ(55) テーブル・表(23) 地図(12) 特集バナー・内部リンク(525) Twitterアイコン・バナー(64) RSSアイコン・バナー(41) フォーム(9) アイコン(195) ＜前へ 次へ＞(12) 検索窓(149) パンくずリスト(12) このページのトップへ戻る(52) フォントサイズ変更ボタン(34) 問合せ・送信・購入ボタン(72) 電話番号(41) フッター・コピーライト(99) ニュース・ポータル・検索(207) ファッション(200) 音楽・ゲーム・コンテンツ配信(58) ネット関連サービス(86) オンラインショップ(308
Using CSS Text-Shadow to Create Cool Text Effects
Learn how to use the CSS text-shadow to create cool text effects, by following this easy, step by step tutorial. Check it out and start learning! The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shad
10 HTML5 Demos to Make You Forget About Flash
Inspiration 10 HTML5 Demos to Make You Forget About Flash Henry JonesJune 24, 201079 Comments010.2k You’ve probably been hearing a lot lately about how Flash is a dying technology and how it’ll soon be replaced by HTML5. Personally, I think that it will slowly replace Flash for some things, but Flash will always have a place, especially for developing complex games and rich internet applications.
40 Beautifully-Designed Navigation Menus | Vandelay Design Blog
These earth tone color palettes are perfect for a wide variety of nature-inspired designs. Use the provided hex codes to save time choosing colors.
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
8 different ways to beautifully style your HTML lists with CSS
The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we're going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We'll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality). As a reminder, here's how a defau
ウェブデザインのエレメントを今風にデザインするPhotoshopのチュートリアル集
最近のウェブデザインでよく使用されているエレメントの制作方法を1ステップずつ分かりやすく解説しているPhotoshopのチュートリアルをCarsonifiedから紹介します。
ウェブデザインの幅をひろげる20のキーワード | コリス
20 Vital Techniques & Best Practices For Effective Web Design 下記、各エッセンスの簡単な説明とワンポイントとサイトの紹介です。noupeのサイトでは他にも多くのサイトが紹介されています。 1. ビビッド カラー 2. グラデーションとライトのエフェクト 3. 透過 4. グランジ 5. 手書き風のデザイン 6. 押さえた色味 7. 水彩画のエフェクト 8. ネイチャー系のエレメント 9. 写実的でリアルな背景 10. 特大のタイポグラフィ 11. デコラティブなタイポグラフィ 12. 大胆な背景 13. レトロやヴィンテージのエレメント 14. アイキャッチなヘッダ 15. コラージュしたエレメント 16. テクスチャを使った背景 17. タブ型のナビゲーション 18. ブラックとホワイト 19. 水平方向のスクロール 20.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SHORTCUTS GALLERY（ショートカットギャラリー)
Top 20 Premium Quality Sliders | Envato Tuts+
見出しデザイン.com -Webデザインの“見出し”を集めたサイト-
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
