タグ

ブックマーク / www.webdesignleaves.com (3)

  • CSS clip-path の使い方

    CSS clip-path や mask-image の仕様などについては以下のサイトで確認することができます。 CSS Masking Module Level 1(日語訳) CSS Masking Module Level 1(W3C) CSS Shapes Module Level 1(日語訳) CSS Shapes Module Level 1(W3C) MDN CSS マスク 以下で clip-path や mask-image 関連のブラウザの対応状況を確認できます。 can i use: clip-path can i use: mask-image 関連ページ: HTML SVG の基的な使い方 SVG アニメーション(SMIL を使ったアニメーション) Photoshop で SVG CSS マスキング mask-image の使い方 CSS Shapes / sh

  • JavaScript でオーディオプレーヤーやプレイリストを作成

    HTML .audio-controller を指定した div 要素で全体をラップし、その中に audio 要素とコントロールを配置します。audio 要素には controls 属性を指定しません。 ボタンは type="button" の button 要素にクラスを指定して識別し、再生位置とボリュームは type="range" の input 要素(レンジスライダー)にクラスと name 属性を指定して識別します。 この例の場合、ボタンのテキストが幅をとってしまうため、2段で表示しています。 HTML <div class="audio-controller"> <audio src="sample.mp3"></audio> <div class="controls"> <div class="row"> <button class="toggle" type="button"

  • jQuery 不要 スライダープラグイン Swiper の使い方

    スライダープラグイン Swiper の使い方 jQuery 不要でレスポンシブ及びタッチデバイス(スマホやタブレット)対応のスライダープラグイン Swiper の基的な設定方法や使い方についての解説(覚書)です。 バージョン 7 では、スライダーのメインコンテナに指定するクラスが swiper-container から swiper に変更になったため、以下はバージョン 7 に合わせて書き換えました(実質的にはメインコンテナのクラスの変更と若干のオプションの追加だけです)。 また、2022年3月時点での最新版はバージョン 8 です。バージョン 7 と 8 では Swiper Angular でのイベントの処理方法を除いて大きな変更はないようです(バージョン 7 から 8 へのアップグレード)。 このページのサンプルはバージョン 7 でもバージョン 8 でも同様に動作します(このページでは

  • 1