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

ローカル保存

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

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

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

失敗例

blur
・マウスオーバーでメニュー表示している間、メインコンテンツにblur効果を付与

<div id="container" style="-webkit-filter: blur(0px);">

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

気になるパーツ

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

100%再現不可

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

動画と思しき背景

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

CSSキーフレームアニメーション
・「portfolioMoving」はユーザ定義キーフレーム名
・メディアクエリで複数定義している

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

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っぽく見せたい時って確かにあんねん
・「信頼がおけるようなテキスト中心のサイト」として見せたい(機能させたい)時などに有効かも

気になるパーツ

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

構成
・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＞