タグ

2022年5月31日のブックマーク (6件)

  • Clippy — CSS clip-path maker

    The inset() shape optionally allows values similar to border-radius for rounded edges. This new feature may be buggy in your browser.

  • CSSで“切り抜く”あれこれ (clip-pathとmask-imageの違い)|長谷川満@制作業

    WEB制作で要素を「特定の形に切り抜く」テクニックについて再確認する機会があったので共有します。 CSSで切り抜くメリット・画像などの素材を予め任意の形に切り抜いておく必要がなくなる ・動画をはじめとするあらゆる表示要素に適応可能 ・アニメーションなどと組み合わせることで、切り抜きの形が変わるなどより柔軟なデザインが可能 使い所・デザイン性の高いWEBサイトで曲線を多用する場面 ・ECサイトなどの素材・色見等、形状を均一化する場面 ・情報量の制限(一部だけ見せる)が必要な場合等 切り抜く方法方法A:clip-pathプロパティを使う 方法A-I:図形ファイル(SVG)がある場合 方法A-II:基的な図形の場合 方法B:mask-imageを使う 方法A:clip-pathプロパティを使う任意の形の内側だけを表示領域にできるという優れたCSSプロパティです。 clip-path : ❶c

    CSSで“切り抜く”あれこれ (clip-pathとmask-imageの違い)|長谷川満@制作業
    ar0
    ar0 2022/05/31
  • 【jQuery】初回アクセス時のみポップアップ表示(jquery.cookie.js使用) | LIOT BLOG

    jquery.cookie.jsは、PHPなどの環境がなくてもcookieを取り扱うことができるとても便利なjQueryのライブラリです。今回はこちらを用い、初回アクセスの1回だけ画面全体にLightbox風のオーバレイポップアップ画面を表示させる方法をご紹介します。 ※2019.4.15 一部ご指摘を受けたためコードを修正しました。 DEMOプログラムの動作デモページを用意しました。下記リンク先をご確認下さい。 » 初回アクセスのときのみポップアップ画面を表示させるサンプル 設置方法jQuery体・jquery.cookie.jsの読み込みどちらもCDNで配布されています。下記コードをそのまま<head>内に記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></sc

    【jQuery】初回アクセス時のみポップアップ表示(jquery.cookie.js使用) | LIOT BLOG
    ar0
    ar0 2022/05/31
  • 【簡単!】ページのアクセス時にモーダル(フロート)を表示するjQuery.layerBoard.js

    「セール情報」や「重要なお知らせ」を、 モーダル(フロート)で目立たせたいという要望があったので、 ページのアクセス時にモーダル(フロート)を表示するjQueryプラグインを制作しました。 「jquery.layerBoard.js」は商用利用・改変・再配布可能です。 デモ トップページのアクセス時にモーダルを表示させるプラグイン。 ダウンロード:layerboard.zip【111KB】 デモをみる 次にアクセスしても指定した時間までひらきません。 デフォルトでは1分で、再びひらくようになっています。 再びひらくまでの時間は分単位で指定できます。 必要なファイル 必要なのは jQuery jquery.cookie.js jquery.layerBoard.js jQueryとjquery.cookie.jsはサイトからダウンロードしてください。 jquery.layerBoard.js

    【簡単!】ページのアクセス時にモーダル(フロート)を表示するjQuery.layerBoard.js
    ar0
    ar0 2022/05/31
  • 【jQuery】初回アクセス時のみモーダル(ポップアップ)ウィンドウを開く方法 - GOKAN DESIGN STUDIO

    緊急のお知らせや、メールマガジン登録画面等を サイトのアクセス時にモーダル(ポップアップ)ウィンドウとして表示する方法の紹介です。 最近ではコロナウイルスへの対応についての情報を、このモーダルウィンドウで告知しているサイトもありますし、僕の所にも実装するための見積もり相談がありました。 紹介しておいてなんですが、こういう強制的なものはユーザーに嫌がられるので多用するのは控えましょう。 今回は良さそうなものを2つピックアップしました。 DEMO 1 はアクセス時しか体験できないのご注意ください(cookieを削除したらまた見れます)。 DEMO 2 は再度モーダルウィンドウを開くボタンがあります。 DEMO 1 DEMO 2 設置方法 DEMO 1 版 DEMO 1 以下のコードを丸っとコピペで実装できます。 HTMLCSSは参考サイトのものを少し修正しているので、 使用するサイトに合わせ

    【jQuery】初回アクセス時のみモーダル(ポップアップ)ウィンドウを開く方法 - GOKAN DESIGN STUDIO
    ar0
    ar0 2022/05/31
  • nuconeco.net - nuconeco リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    nuconeco.net - nuconeco リソースおよび情報
    ar0
    ar0 2022/05/31