#0003で半透明背景が便利（最近便利なCSSおれおれAdvent Calendar 2023 – 21日目） | Ginpen.com最近便利なCSSおれおれAdvent Calendar 2023 – 21 日目 16 進数の色コードは赤緑青が #RRGGBB の 6 桁と #RGB の 3 桁とあるんだけど、これに不透明度 Alpha を足して 8 桁 #RRGGBBAA と 4 桁 #RGBA というのもあります。 ダイアログの後ろに半透明のバックドロップを置くときに便利です。 例 デモ：https://codepen.io/ginpei/pen/bGZGgOQ
transitionをかけたホバーアクションのopacityがちらつく問題を解消する | AndHA Blog
transitionをかけたホバーアクションのopacityがちらつく問題を解消する 公開日 : 2022.08.22 最終更新日 : 2022.10.05 コーディング こんにちは！AndHAコーディング部です。 突然ですが新人コーダーさん！コーディング勉強中の皆さん！ こんな不具合に遭遇したことありませんか？ 「transitionをかけたホバーアクションのopacityがちらつく！」 新人コーダーの私も、何かと悩まされていました… そこで今回は、この問題をどうにか解消していきたいと思います。 ちらつく問題についてアニメーションがちらつく問題Webサイトの制作をしていると、避けて通れないボタンやリンクなどのパーツ。ホバーしたときの動きを指定することがほとんどですよね。 中でも、「opacity: 0.7」などと透過を指定したうえで、「transition: .3s」などとふわっとアニメ
最近のWebサイトで見かける！ フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ
最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。 一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。 10 Useful CSS Tricks for Front-end Developers by Alex Ivanovs 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タイプライターのようなエフェクト 2. 透過画像用シャドウ 3. カーソルのカスタマイズ 4. attr()でシンプルなツールチップ 5. ピュアCSSによるチェックリスト 6. is()と:where()による要素のスタイル 7. キーフレームを使用したアコーディオン 8. ホバーエフェクトのサイドバー 9
filter: drop-shadow()（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 04日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 04 日目 今日は普通に便利な filter: drop-shadow() です。 box-shadow や text-shadow のように影を落とすことができる CSS の機能ですが、画像の場合透過部分を落としてよしなにやってくれるところが魅力です。 filter – CSS: カスケーディングスタイルシート | MDN デモ：https://codepen.io/ginpei/pen/zYdmMVE 基本的な使い方 box-shadow はプロパティでしたが、drop-shadow() は filter プロパティの値として使える <filter-function> です。
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
CSS で背景画像を透過して見せる方法 - by Takumi Hirashima
CSS で背景画像を透過しているように見せる方法を紹介します。 例えば、子要素に影響を与えずに親要素の背景画像だけを透過表現したい時に便利な方法です。 CSS で背景画像を透過しているように見せる方法 白地で透過 黒地で透過 CSS で背景画像を透過しているように見せる方法 img 要素などの透過は opacity を利用すればよいのですが、背景画像が含まれる要素に opacity を利用すると、子要素も透過されてしまいます。そこで background の blend-mode を利用することで、背景画像だけを透過した感じにすることができます。 白地で透過 背景画像を「白地で透過」させるには、はじめに background-image で背景画像を指定。 続いて background-color で白色を rgba で指定、透過の値を 1 以下に指定して透過させます（サンプルでは0.5を
Angled Background CSS-only "Mixin"
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Clip Pathで画像内の任意の箇所にスポットライトを当てる
Result CSSで任意の箇所にスポットライトを当てる、というもの やってる事は一番下のレイヤーに画像、2つ目のレイヤーに透過オーバーレイ、 3つ目のレイヤーに1つ目の画像と同じ画像を用意し、円状にくり抜いて重ねる、という感じです css.img-wrapper {/*親*/ display: grid; max-width: 600px; margin: 20px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); } .img {/*1つ目のレイヤー*/ width: 100%; grid-area: 1 / 1; } .img--highlight {/*3つ目でくり抜き*/ clip-path: circle(100px at 55% 65%); } .img-layer {/*2つ目のレイヤーの透過オーバーレイ*/ backgrou
CSSスニペット：簡単なコードでマウスホバーした要素以外を透過する | かちびと.net
Result かなり昔にJSによる方法を書きましたがどこちらの方がスマートだったのでメモ ハイライトは要素にユーザーの注視を促す手法として効果的なので今でも健在の手法だと思います cssspan {/*アニメーション*/ padding: 0 1rem; transition: opacity 0.2s; } .sibling-fade:hover span:not(:hover) {/*透過処理*/ opacity: 0.5; }親要素にホバーしたら全体を透過、更に要素にホバーしたもの以外に適応させる これでマウスホバー中のアイテムだけは透過処理範囲から外れるようになります html<div class="sibling-fade"> <span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</spa
画像にマウスホバーでグラデーションのオーバーレイエフェクト
Result たまに見かけるホバーエフェクト。グラデーションのオーバーレイがマウスホバーでスライドインする、みたいなの css.c-preview { background: #000; background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 13%, rgba(0,0,0,1) 32%, rgba(116,132,190,1) 47%, rgba(208,133,109,1) 80%, rgba(69,252,212,1) 94%); background-size: 400% 400%; background-repeat: no-repeat; display: flex; width: 500px; height: 500px; max-width: 100vw; max-height: 100vh;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
