タグ

ブックマーク / squeeze.jp (2)

  • Twitterでクリックするだけで変化するトリック画像を分解してみた! / SQUEEZE - Web Design Studio -

    Twitterでサムネイル画像をクリックすると変化する不思議なトリック画像がTL(タイムライン)に流れてきました。どのように実現しているのか気になったので分解してみました。(追記:2013-09-02 17:00 自作のツイートを追加しました。) まずは、見てみましょうTwitter公式のWeb(PC/モバイル)、またはアプリでの閲覧推奨です。以下の画像をクリックして、Twitterで表示された後、再度画像をクリックして拡大表示します。 エレンをクリックしてみてください。※Twitter公式推奨 pic.twitter.com/gqqrl1WHcU — 東山マキ (@wuhlnouveau) August 28, 2013 TL(タイムライン)のサムネイル表示では見えていなかったものが、クリックして拡大表示すると現れるという何とも不思議な画像です。 分解!透過PNGと背景色の組合せ一瞬、何

    Twitterでクリックするだけで変化するトリック画像を分解してみた! / SQUEEZE - Web Design Studio -
    s025236
    s025236 2013/09/02
    面白いけどデザインセンスが無いので俺には出来ない;;
  • H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -

    HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);

    H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
  • 1