タグ

Web開発とWEBデザインに関するwitchstyleのブックマーク (1)

  • [レスポンシブ対応] CSSでチャット風デザインを実装する | vdeep

    「好きなプログラム言語何?」と聞かれれば、ためらいなく「CSS」と答えるokutani(@okutani_t)です。(ちなみにCSSはプログラム言語ではありません…) 今回はCSSでチャット風のデザインを作ってみました。レスポンシブ対応。 これで面白いやりとりし放題ですね。 スポンサーリンク 画像の準備 チャット画面の隣に自分と相手の写真を載せるので、90×90px以上の画像を用意しておきましょう。 ・自分 ・相手 相手の画像は下記リンクから拝借。 LINKFLAT ICON DESIGN -フラットアイコンデザイン-『FLAT ICON DESIGN』 両方ともサーバーにアップロードしておきます。 基のレイアウト まずは基のレイアウトを作っていきます。 HTMLはこちら。 <div class="chat-box"> <div class="chat-face"> <img src=

    [レスポンシブ対応] CSSでチャット風デザインを実装する | vdeep
    witchstyle
    witchstyle 2016/10/21
    (2015/04/15、2016/09/30のエントリ)
  • 1