その他 - コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

ネームの帯が重なった記事ブロック

copypet.jp — Fri, 10 May 2019 07:55:08 +0000

カギカッコがついた記事ブロック

copypet.jp — Fri, 10 May 2019 07:53:53 +0000

斜めラインで止めたような記事ブロック

copypet.jp — Fri, 10 May 2019 07:52:24 +0000

ネームに帯がついた記事ブロック

copypet.jp — Fri, 10 May 2019 07:50:34 +0000

タイトルタブがついた記事ブロック

copypet.jp — Fri, 10 May 2019 07:48:31 +0000

ステッチがついた記事ブロック

copypet.jp — Fri, 10 May 2019 07:46:12 +0000

シンプルな記事ブロック

copypet.jp — Fri, 10 May 2019 07:41:21 +0000

[パーツ]「続きを読む」ボタンを押したらピロっと下にテキストが出てくる

copypet.jp — Mon, 22 Jan 2018 04:18:52 +0000

長い文章などの高さを制限して、クリックで表示したいときによく使われている「続きを読む」「もっと見る」ボタンのサンプルです。
要素を隠して、ボタンをクリックすると全文が表示されるアレです。
こちらはグラデーションではなくボタンの下にピロっとテキストが出てきます。
UIが適切かはともかく、ページの高さを節約したいときや、別ページに移管させたくない時などに使えますね。
仕組は、チェックボックスを使用し、チェックされたら兄弟要素を表示状態にするというものになります。

ボタンのデザインを変える

コピペでできる！CSSとhtmlだけの使い勝手のいいボタンデザイン15選 | copypet.jp

htmlとcssだけで作れる、使い勝手のいいボタンデザインを15種類をピックアップしています。…

copypet.jp

記事を見る

The post [パーツ]「続きを読む」ボタンを押したらピロっと下にテキストが出てくる first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

[パーツ]「続きを読む」以下をグラデーションで隠すボタン

copypet.jp — Mon, 22 Jan 2018 04:13:15 +0000

長い文章などの高さを制限して、クリックで表示したいときによく使われている「続きを読む」「もっと見る」ボタンのサンプルです。
要素をグラデーションで隠して、ボタンをクリックすると全文が表示されるアレです。
UIが適切かはともかく、ページの高さを節約したいときや、別ページに移管させたくない時などに使えますね。
仕組は、チェックボックスを使用し、チェックされたら兄弟要素を表示状態にするというものになります。

ボタンのデザインを変える

コピペでできる！CSSとhtmlだけの使い勝手のいいボタンデザイン15選 | copypet.jp

htmlとcssだけで作れる、使い勝手のいいボタンデザインを15種類をピックアップしています。…

copypet.jp

記事を見る

The post [パーツ]「続きを読む」以下をグラデーションで隠すボタン first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.