見出し - コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。 https://copypet.jp CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。困った自分用のストックブログ Wed, 24 Jul 2024 08:15:07 +0000 ja hourly 1 https://wordpress.org/?v=6.9 140159577 [装飾系]シャレた見出し　リボン風の見出し[clip-path] https://copypet.jp/codedescription/2713/ Tue, 09 Jul 2024 16:05:19 +0000 https://copypet.jp/codedescription/2713/ copypet.jp

リボン風の見出し リボン風の見出しです。 リボン部分は「clip-path: polygon」で指定 clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。 最近はジェネレータもあるので、使 […]

The post [装飾系]シャレた見出し　リボン風の見出し[clip-path] first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

リボン風の見出し

リボン風の見出しです。

リボン部分は「clip-path: polygon」で指定

clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。
最近はジェネレータもあるので、使ってみてください。

CSS Clip Path Generator Online | 10015 Tools

CSS Clip Path Generator Online | 10015 Tools

Online CSS Clip Path Generator is a free tool for generating CSS clip path. You can mask your images with CSS clip-path property by previewing the path online.……

CSS Clip Path Generator Online | 10015 Tools

The post [装飾系]シャレた見出し　リボン風の見出し[clip-path] first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2713 [装飾系]紙デザインぽい見出し　本の背表紙のような見出し https://copypet.jp/codedescription/2698/ Mon, 08 Jul 2024 14:57:14 +0000 https://copypet.jp/codedescription/2698/ copypet.jp

本の背表紙のような見出し 【】で挟まれたテキストとサブテキストとナンバーで本や資料などの背表紙のような見出しです。 【】は「clip-path: polygon」で指定 clip-pathは使えるようになると、いろんな形 […]

The post [装飾系]紙デザインぽい見出し　本の背表紙のような見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

本の背表紙のような見出し

【】で挟まれたテキストとサブテキストとナンバーで本や資料などの背表紙のような見出しです。

【】は「clip-path: polygon」で指定

clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。
最近はジェネレータもあるので、使ってみてください。

CSS Clip Path Generator Online | 10015 Tools

CSS Clip Path Generator Online | 10015 Tools

Online CSS Clip Path Generator is a free tool for generating CSS clip path. You can mask your images with CSS clip-path property by previewing the path online.……

CSS Clip Path Generator Online | 10015 Tools

The post [装飾系]紙デザインぽい見出し　本の背表紙のような見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2698 [装飾系]紙デザインぽい見出し　墨付きカッコがついた見出し https://copypet.jp/codedescription/2696/ Mon, 08 Jul 2024 14:25:07 +0000 https://copypet.jp/codedescription/2696/ copypet.jp

墨付きカッコがついた見出し よくある【】で挟まれた見出しです。 【】は「clip-path: polygon」で指定 clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。 最近はジェネレー […]

The post [装飾系]紙デザインぽい見出し　墨付きカッコがついた見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

墨付きカッコがついた見出し

よくある【】で挟まれた見出しです。

【】は「clip-path: polygon」で指定

clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。
最近はジェネレータもあるので、使ってみてください。

CSS Clip Path Generator Online | 10015 Tools

CSS Clip Path Generator Online | 10015 Tools

Online CSS Clip Path Generator is a free tool for generating CSS clip path. You can mask your images with CSS clip-path property by previewing the path online.……

CSS Clip Path Generator Online | 10015 Tools

The post [装飾系]紙デザインぽい見出し　墨付きカッコがついた見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2696 [装飾系]紙デザインぽい見出し　ポイントフラグが立っている見出し https://copypet.jp/codedescription/2694/ Mon, 08 Jul 2024 14:09:15 +0000 https://copypet.jp/codedescription/2694/ copypet.jp

ポイントフラグが立っている見出し ポイントフラグはは「clip-path: polygon」で指定 clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。 最近はジェネレータもあるので、使っ […]

The post [装飾系]紙デザインぽい見出し　ポイントフラグが立っている見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

ポイントフラグが立っている見出し

ポイントフラグはは「clip-path: polygon」で指定

clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。
最近はジェネレータもあるので、使ってみてください。

CSS Clip Path Generator Online | 10015 Tools

CSS Clip Path Generator Online | 10015 Tools

Online CSS Clip Path Generator is a free tool for generating CSS clip path. You can mask your images with CSS clip-path property by previewing the path online.……

CSS Clip Path Generator Online | 10015 Tools

The post [装飾系]紙デザインぽい見出し　ポイントフラグが立っている見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2694 [装飾系]紙デザインぽい見出し　四隅をホチキスで閉じたような見出し https://copypet.jp/codedescription/2692/ Mon, 08 Jul 2024 13:44:22 +0000 https://copypet.jp/codedescription/2692/ copypet.jp

四隅をホチキスで閉じたような見出し

The post [装飾系]紙デザインぽい見出し　四隅をホチキスで閉じたような見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

四隅をホチキスで閉じたような見出し

The post [装飾系]紙デザインぽい見出し　四隅をホチキスで閉じたような見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2692 [装飾系]紙デザインぽい見出し　左にナンバリングがついた見出し https://copypet.jp/codedescription/2689/ Mon, 08 Jul 2024 13:24:05 +0000 https://copypet.jp/codedescription/2689/ copypet.jp

左にナンバリングがついた見出し 左のナンバリングは、髭つきの文字などクセのあるものがおすすめ サンプルはgoogle fontの「Young Serif」を使用しています。 <link rel="prec […]

The post [装飾系]紙デザインぽい見出し　左にナンバリングがついた見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

左にナンバリングがついた見出し

左のナンバリングは、髭つきの文字などクセのあるものがおすすめ
サンプルはgoogle fontの「Young Serif」を使用しています。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Young+Serif&display=swap" rel="stylesheet">
カウントさせたいアイテムに「counter-increment」で名前をつけます。
それをcontent: counter(名前);で利用しカウントしていきます。

The post [装飾系]紙デザインぽい見出し　左にナンバリングがついた見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2689 [装飾系]紙デザインぽい見出し　サブテキストが左上についた見出し https://copypet.jp/codedescription/2687/ Mon, 08 Jul 2024 12:29:57 +0000 https://copypet.jp/codedescription/2687/ copypet.jp

サブテキストが左上についた見出し キャッチコピーとしてサブテキストが左上についた見出しです。 サブテキストは「content: attr(title);」としてtitle属性に入れたものを呼び出しています。

The post [装飾系]紙デザインぽい見出し　サブテキストが左上についた見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

サブテキストが左上についた見出し

キャッチコピーとしてサブテキストが左上についた見出しです。

サブテキストは「content: attr(title);」としてtitle属性に入れたものを呼び出しています。

The post [装飾系]紙デザインぽい見出し　サブテキストが左上についた見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2687 [装飾系]紙デザインぽい見出し　四隅がカットされた背景に枠が重なった見出しパート2 https://copypet.jp/codedescription/2685/ Mon, 08 Jul 2024 12:15:57 +0000 https://copypet.jp/codedescription/2685/ copypet.jp

四隅がカットされた背景に枠が重なった見出し バージョン違いです。 背景は「clip-path: polygon」で指定 clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。 最近はジェネレ […]

The post [装飾系]紙デザインぽい見出し　四隅がカットされた背景に枠が重なった見出しパート2 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

四隅がカットされた背景に枠が重なった見出し

バージョン違いです。

背景は「clip-path: polygon」で指定

clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。
最近はジェネレータもあるので、使ってみてください。

CSS Clip Path Generator Online | 10015 Tools

CSS Clip Path Generator Online | 10015 Tools

Online CSS Clip Path Generator is a free tool for generating CSS clip path. You can mask your images with CSS clip-path property by previewing the path online.……

CSS Clip Path Generator Online | 10015 Tools

The post [装飾系]紙デザインぽい見出し　四隅がカットされた背景に枠が重なった見出しパート2 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2685 [装飾系]紙デザインぽい見出し　四隅がカットされた背景に枠が重なった見出し https://copypet.jp/codedescription/2683/ Mon, 08 Jul 2024 11:57:17 +0000 https://copypet.jp/codedescription/2683/ copypet.jp

四隅がカットされた背景に枠が重なった見出し 背景は「clip-path: polygon」で指定 clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。 最近はジェネレータもあるので、使って […]

The post [装飾系]紙デザインぽい見出し　四隅がカットされた背景に枠が重なった見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

四隅がカットされた背景に枠が重なった見出し

背景は「clip-path: polygon」で指定

clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。
最近はジェネレータもあるので、使ってみてください。

CSS Clip Path Generator Online | 10015 Tools

CSS Clip Path Generator Online | 10015 Tools

Online CSS Clip Path Generator is a free tool for generating CSS clip path. You can mask your images with CSS clip-path property by previewing the path online.……

CSS Clip Path Generator Online | 10015 Tools

The post [装飾系]紙デザインぽい見出し　四隅がカットされた背景に枠が重なった見出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2683 [装飾系]紙デザインぽい見出し　下に三角形がついたシンプル吹き出し https://copypet.jp/codedescription/2680/ Mon, 08 Jul 2024 10:42:40 +0000 https://copypet.jp/codedescription/2680/ copypet.jp

下に三角形がついたシンプル吹き出し 擬似要素に「clip-path: polygon」で作った三角がついたシンプルな吹き出し 三角形は「clip-path: polygon」で指定 clip-pathは使えるようになると […]

The post [装飾系]紙デザインぽい見出し　下に三角形がついたシンプル吹き出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> copypet.jp

下に三角形がついたシンプル吹き出し

擬似要素に「clip-path: polygon」で作った三角がついたシンプルな吹き出し

三角形は「clip-path: polygon」で指定

clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。
最近はジェネレータもあるので、使ってみてください。

CSS Clip Path Generator Online | 10015 Tools

CSS Clip Path Generator Online | 10015 Tools

Online CSS Clip Path Generator is a free tool for generating CSS clip path. You can mask your images with CSS clip-path property by previewing the path online.……

CSS Clip Path Generator Online | 10015 Tools

The post [装飾系]紙デザインぽい見出し　下に三角形がついたシンプル吹き出し first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

]]> 2680