タグ

svgとcssに関するsoramimi-cakeのブックマーク (2)

  • 意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ

    作成:2016/02/8 更新:2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール(SegmentedControl)。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti

    意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
  • SVGで画面全体に斜め線や曲線を引く

    SVGで画面全体に斜め線や曲線を引く 一昔前だと単純な斜め線とか円をバックに置きたいときは画像で作ってましたが、最近ではわりとSVGを使うことが多いようです。 SVGの良いところはベクターなので画面全体に配置しても荒くなったりしないとか、コードで作成できるので後々アニメーションなどもできたりします。 ここでは単純な図形ですが画面全体に表示する方法をご紹介します。 投稿日2015年09月29日 更新日2015年10月14日 準備 まずはSVGHTML内に記述する方法です。 HTML <div id="wrap"> <div class="description"> ここにコンテンツが入ります。 </div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="

    SVGで画面全体に斜め線や曲線を引く
  • 1