タグ CSSスニペット
人気順 5 users 50 users 100 users 500 users 1000 usersWeb制作者はしっかりと理解しておきたい! CSSにおけるレイアウトアルゴリズムを解説
CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。 ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあ... 続きを読む
Webデザインの種明かし、コピペできる最新HTML/CSSスニペット30個まとめ - PhotoshopVIP
この記事では、Webデザインの引き出しを増やす、コピペで使える最新HTML/CSSスニペットをまとめてご紹介します。 Codepenで話題となっているものを中心に、今後のデザイン制作に活用したいアイデアがずらり揃った今回。新しいウェブデザインの可能性を感じるものばかりとなっています。 https://photoshopvip.net/12989... 続きを読む
Webの進化が止まらない、コピペ可な最新HTMLスニペット40個まとめ - PhotoshopVIP
この記事では、Webデザインの進化を体感できる、コピー&ペーストで実装OKな最新HTML/CSSスニペットをまとめてご紹介します。 一般的に「切れ端、断片」といった意味をもつスニペット(英: Snippet)は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。 2020年に話題... 続きを読む
グラスモーフィズム?CSSコピペできる新Webトレンドの参考HTMLスニペット、ツールまとめ - PhotoshopVIP
Glassmorphism(グラスモーフィズム)は、昨年末ごろより「ニューモーフィズムの次はこれだ。」と話題になっているデザイン手法です。 この記事では、グラスモーフィズムの基本や作成上の注意点、コピペで実装できるジェネレーター、参考HTML/CSSスニペットまでまとめてご紹介します。 グラスモーフィズムって何? 2020... 続きを読む
CSSスニペット:CSSだけでシンプルなLight/Darkモード | かちびと.net
Result Webアプリやスマホアプリ等でよくあるダークモードをCSSだけで実現しよう、というもの 力業というわけでもなく、割と実践的でした。とはいえシンプルな方法なのである程度利用シーンは限られます css :root{/*基本のスタイル*/ --bg: #f8fafc; --panel-bg: #FFFFFF; --panel-border: #CCCCCC; --panel-title: #34... 続きを読む
CSSスニペット:CSSでフォルダツリーを作る | かちびと.net
Result こういうの。まぁ特別なものでもないんですがコードがすっきりしてたのでメモ CMSの管理画面なんかで複雑化したページを階層表示する、とかWebサイトのサイトマップとかいろいろ用途はありそうです css .tree {/*親要素*/ position: relative; background: white; margin-top: 20px; padding: 30px; font-size: .... 続きを読む
CSSスニペット:CSSで要素を斜めに2分割して境界線を透過 | かちびと.net
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
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
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
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... 続きを読む
CSSスニペット:水の波紋っぽいエフェクト | かちびと.net
Result See the Pen CSS ripple effect by kachibito ( @kachibito ) on CodePen . 水上で起こる波紋のようなエフェクトです css html, body {/*bodyの背景を波紋の色に合わせる*/ margin: 0; background: #45c2c5; } .ripple, .ripple:before, .ripp... 続きを読む
CSSスニペット:シャドウもグラデーションにする | かちびと.net
Result See the Pen Simple button with gradient shadow in CSS by kachibito ( @kachibito ) on CodePen . ボタンがグラデーションなのでシャドウもグラデーションにしよう、みたいな提案 疑似要素に、グラデーションとblurを加えてグラデーションな影を生成しています css html, :root {/*C... 続きを読む
CSSスニペット:テーブルのセルが空だった場合にハイライトしたり文字を挿入したり | かちびと.net
Result See the Pen GQKmMW by kachibito ( @kachibito ) on CodePen . 5年前に jQueryでテーブル内で空の要素をハイライトさせる 、という記事を書いたのを偶然確認したのでCSS版みたいなものを書いておきます。 特別なことはしてなくて、今は:emptyを使える時代になった、みたいな内容です。 セル毎に異なるスタイルや文字にしたい場合... 続きを読む
コピペ可ですぐに役立つ!マテリアルデザインを極めるHTML/CSSスニペット30個まとめ - PhotoshopVIP
Googleが2014年に提唱したデザインガイド「 マテリアルデザイン 」。 最近の新しいウェブサイト でも、このマテリアルデザインの考え方や基本原則を取り入れたものが増えています。 今回は、コピー&ペーストで手軽に マテリアルデザインを再現できるHTML/CSSスニペット をまとめています。 対応しているスニペットは、ナビゲーションメニューやドロップシャドウなど特長的な素材から、ボタンやカード型... 続きを読む
覚えておきたい31のCSSスニペット - IDEA*IDEA ~ 百式管理人のライフハックブログ
完全に自分メモ用にエントリー・・・。使えるCSSスニペットいろいろです。よく見るモノもたくさんありますがよくまとまっているのではないでしょうかね。個人的によく使いそうだと思ったモノだけざざっと紹介しておきましょう。selector {filter: alpha(opacity=50); /* internet explorer */-khtml-opacity: 0.5; /* khtml, ol... 続きを読む