タグ「CSSスニペット」

タグ CSSスニペット

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 15 / 15件)

Web制作者はしっかりと理解しておきたい！ CSSにおけるレイアウトアルゴリズムを解説

2022/04/14 206 users プロパティ CSS ツイート解説 WEB制作者

CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあ... 続きを読む

Webデザインの種明かし、コピペできる最新HTML／CSSスニペット30個まとめ - PhotoshopVIP

2021/09/03 114 users CodePen PhotoshopVIP 種明かしコピペ

この記事では、Webデザインの引き出しを増やす、コピペで使える最新HTML／CSSスニペットをまとめてご紹介します。 Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりとなっています。 https://photoshopvip.net/12989... 続きを読む

Webの進化が止まらない、コピペ可な最新HTMLスニペット40個まとめ - PhotoshopVIP

2021/07/07 17 users snippet PhotoshopVIP 切れ端断片部品

この記事では、Webデザインの進化を体感できる、コピー＆ペーストで実装OKな最新HTML／CSSスニペットをまとめてご紹介します。一般的に「切れ端、断片」といった意味をもつスニペット（英: Snippet）は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。 2020年に話題... 続きを読む

グラスモーフィズム？CSSコピペできる新Webトレンドの参考HTMLスニペット、ツールまとめ - PhotoshopVIP

2021/01/12 14 users Glassmorphism ジェネレーター CSSコピペ

Glassmorphism（グラスモーフィズム）は、昨年末ごろより「ニューモーフィズムの次はこれだ。」と話題になっているデザイン手法です。この記事では、グラスモーフィズムの基本や作成上の注意点、コピペで実装できるジェネレーター、参考HTML/CSSスニペットまでまとめてご紹介します。グラスモーフィズムって何？ 2020... 続きを読む

CSSスニペット：CSSだけでシンプルなLight/Darkモード | かちびと.net

2019/04/18 14 users light net FFFFFF ＢＧ CSS

Result Webアプリやスマホアプリ等でよくあるダークモードをCSSだけで実現しよう、というもの力業というわけでもなく、割と実践的でした。とはいえシンプルな方法なのである程度利用シーンは限られます css :root{/*基本のスタイル*/ --bg: #f8fafc; --panel-bg: #FFFFFF; --panel-border: #CCCCCC; --panel-title: #34... 続きを読む

CSSスニペット：CSSでフォルダツリーを作る | かちびと.net

2019/04/04 13 users フォルダツリー CSS net

Result こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ CMSの管理画面なんかで複雑化したページを階層表示する、とかWebサイトのサイトマップとかいろいろ用途はありそうです css .tree {/*親要素*/ position: relative; background: white; margin-top: 20px; padding: 30px; font-size: .... 続きを読む

CSSスニペット：CSSで要素を斜めに2分割して境界線を透過 | かちびと.net

2018/12/21 14 users 透過 net 境界線要素 relative

Result mask-imageとlinear-gradientを使います。素材次第ではちょっとアーティスティックな合成写真っぽいのが作れそうですね css :root {/*境界線を斜めに*/ --direction: -45deg; } main {/*包括要素*/ position: relative; } div {/*各要素基礎設定*/ position: absolute; top: 0; left: 0; width: 100vw; height: ... 続きを読む

CSSスニペット：アニメーションエフェクト付きのtoggleボタン | かちびと.net

2018/10/04 17 users absolute fff net position Left

Result CSSのみで実装したアニメーションエフェクト付きのtoggleボタンです各ボタンのスタイルはPenをご参照ください css /* Button 1 */ #button-1 .knobs:before {/*左右に移動するボタンのスタイル*/ content: 'YES'; position: absolute; top: 4px; left: 4px; width: 20px; height: 10px; color: #fff; font-size:... 続きを読む

CSSスニペット：画面を斜めに分割して2つの動画を表示する | かちびと.net

2018/09/03 16 users net 画面動画

Result 画面を斜めに分割して動画を2つ同時に再生するサンプルです css body { background-color: black; overflow:hidden; } .parent { position: relative; height: 100vh; width: 100vw; } .video { position: absolute; top: -8px; left: -8px; width: 100%; height: 100vh; background-position: center; backgroun... 続きを読む

CSSスニペット：SVGで作る非長方形なヘッダ画像いろいろ | かちびと.net

2018/07/07 13 users SVG relative DDD margin result

Result インラインに書いたSVGを画像に重ねる背景と色を合わせれば簡単にユニークな形状のヘッダ画像を実装できる css .card { width: 32%; max-width: 100%; margin: 0 0 4rem; background-color: #ddd; } .card .wrap-image { position: relative; } .card .wrap-image img { width: 100%; height: auto; } .card .wr... 続きを読む

(1 - 15 / 15件)