良い感じのWebデザインを発見したら、その場で確認後、このエントリーへ追記していく

デザインWebデザイン

一覧

 状態:-  閲覧数:793  投稿日:2015-01-07  更新日:2018-03-04
hajipion.com
sussan-po.com
ceblog.mediba.jp

今後の方針

 閲覧数:117 投稿日:2018-02-02 更新日:2018-02-02 

ローカル保存


良い感じのデザインを見つけたら、その場でローカル保存しておく
・良い感じのデザインを発見したら、後で確認するためとりあえずエントリーしておく

ローカル保存が必要な理由
・後で確認しようと思っても、デザイン変更されていることが多い
⇒ 「ローカルで動作確認可能な状態」で保存しておくことが必要

Internet Archive“Wayback Machine”
・デザイン確認には不適当
・正常表示されないことが多い

失敗例


blur
・マウスオーバーでメニュー表示している間、メインコンテンツにblur効果を付与
<div id="container" style="-webkit-filter: blur(0px);">


サイトCLOSEしたため、確認不可
・リンク削除

hajipion.com

 閲覧数:117 投稿日:2018-02-02 更新日:2018-02-02 

気になるパーツ


header背景画像
▼images/portfolios.png
.header__portfolio {
   position: absolute;
   top: 21px;
   left: -10%;
   width: 120%;
   height: 600px;
   background-image: url(images/portfolios.png);
   background-repeat: repeat-x;
   background-size: auto 600px;
   background-position: 0px center;
   transform: rotate(-5deg);
   animation: portfolioMoving 20s linear infinite;
}


headerアイコン画像
▼images/site-hajipion.png
.site__image, .header__siteImage {
   position: absolute;
   top: 0;
   left: 0;
   border-radius: 50%;
   background-image: url(images/site-hajipion.png);
   background-repeat: no-repeat;
   background-position: center center;
   transition: all .5s ease-in-out;
}


header文字列画像
▼images/site-title.png
.site__title, .footer__siteTitle, .header__siteTitle {
   opacity: 1;
   position: absolute;
   background-image: url(images/site-title.png);
   background-repeat: no-repeat;
   text-indent: -9999px;
   transform: scale(1);
   filter: blur(0px);
   transition: all .25s .75s ease-in-out;
}


Ajax処理


詳細不明
▼/wp-admin/admin-ajax.php
Failed to load https://hajipion.com/wp-admin/admin-ajax.php: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.

100%再現不可


読み込み時の時間差アニメーション
・再現出来ない
・詳細不明

動画と思しき背景


実際はただの一枚png画像
・CSSでキーフレームアニメーションしているだけ
・その際「transform: rotate(-5deg);」で若干の角度を付与している

CSSキーフレームアニメーション
animation: portfolioMoving 20s linear infinite;
・「portfolioMoving」はユーザ定義キーフレーム名
@keyframes portfolioMoving{0%{background-position:0px center}100%{background-position:1370px center}}
・メディアクエリで複数定義している

「背景」の「背景」に指定
・「position: absolute;」指定することで、「背景グラデーション」のさらに「背景」へ指定している
・背景グラデーションには「z-index」指定

sussan-po.com

 閲覧数:113 投稿日:2018-02-11 更新日:2018-02-11 

PDFかと見紛うWebサイト


理由は2つ
・日本語フォント
・黒で覆う

Google日本語フォント指定
・Noto Sans Japanese
body, button, input, select, textarea {
   font-family: 'Noto Sans Japanese', sans-serif;
}


全体を黒で囲っている
・bodyタグ直下のdiv(wrapper的役割)クラスへ下記指定
@media screen and (min-width: 44.375em)
.site {
   margin: 21px;
}
.site {
   background-color: #fff;
}


感想


この発想はなかったわ
・Webサイトだけど、PDFっぽく見せたい時って確かにあんねん
・「信頼がおけるようなテキスト中心のサイト」として見せたい(機能させたい)時などに有効かも

ceblog.mediba.jp

 閲覧数:117 投稿日:2018-03-04 更新日:2018-03-04 

気になるパーツ


左ナビ
・いかにもデザイナーズテイストな画像

構成
・wrapper … div要素 ← 黒背景
・inner … div要素 ← ボケがキツイ画像を背景指定。その際「opacity: .5;」で透明度を50%に指定。wrapperである黒背景が効いてくる

▼html
<div class="banner_inner">
 <section class="search widget">
   <form action="/search" method="get"><input type="text" placeholder="Search..." name="q" value="">
     //中略
   </form>
 </section>
 <div class="banner_wrap">
   //中略
 </div>
 <div class="cover_image"></div>
</div>


▼css
#banner {
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   background-color: #000;
   position: relative;
}
.cover_image {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-image: url(http://static.tumblr.com/ac0291a…/bcwoqdv/N0Snsyksb/tumblr_static_bbamyqlutqo8wkgockcc088oc_2048_v2.jpg);
   opacity: .5;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% center;
   padding-right: 1px;
   width: 100%;
   z-index: -1;
}


その他


<menu>
非推奨
この機能は Web 標準から削除されました



デザイン変更

デザイン変更



類似度ページランキング
順位 ページタイトル抜粋
1 いい感じのロゴを見つけたら、そのサイトへのリンクを張っていくページ 49
2 格好が良いロゴを見つけたら、そのページへのリンクを張っていくエントリー 45
3 随時確認エントリー(よく見返すエントリーへのLink) 32
4 WebサイトをHTML5で作成したら、IE8で、グローバルナビゲーション表示がおかしくなった 32
5 ダウンロードしたモックアップベクター素材の感想を書いてみる予定のエントリー 31
6 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 31
7 Webデザイナー と デザイナー の違い 30
8 いい感じのGIFアニメーションを探してみる 29
9 画面幅に応じて取得ディレクトリパスを変更したい 28
10 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 28
11 iframe経由で読み込んでいるページへ直接アクセスした場合は、トップページへリダイレクト 28
12 「position:absolute;」が分からなくなったときに見るエントリー 28
13 ディスプレイ比較の重要性/画像が重要な意味を占めるサイトで、何か違うなと感じたら 27
14 textareaを手動リサイズできない時は、ブラウザを落としてみる 27
15 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない 27
16 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない 27
17 ボタン候補2 / 「ボタン」エリア外で「テキスト」表示しても良いの? 27
18 自分の環境でスプライト画像を作成したい 27
19 ブックマークアイコンをクリックした際、最初から編集画面を出す方法を知りたい 26
20 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない 25
2021/7/28 9:28 更新
週間人気ページランキング / 7-21 → 7-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 47
2 画面キャプチャ | Chrome 拡張機能(ブラウザ) 32
3 血の色 / #b30000 / #360800 / #ff0000 | 色 30
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 26
5 RGBの種類 / ビットカラー | RGB(色) 17
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 16
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 HSLとHSVの違い | 色変換(色) 15
8 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 14
9 Design 0 12
9 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
10 「bgcolor」「background-color」「background」の違い | CSS 10
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
12 親要素の背景色を、CSSで打ち消したい | CSS 7
12 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 7
12 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 7
13 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 ログイン 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
2021/7/28 1:01 更新