CSS Shadow Palette Generator
:root { --shadow-color: 286deg 36% 56%; --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34), 0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34), 1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34); --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36), 0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36), 2.1px 4.1px 5.2px -1.7px hsl(var(--shadow
Conditional Border Radius In CSS
A while ago, I was inspecting facebook.com home page feed to learn and see how they build things out. I’m always curious to see how people write CSS. I noticed a very, very interesting border-radius value for the card component in the main feed. I shared the following tweet about this little discovery. Then, I received this reply from Miriam Suzanne: is it always 8px? That math looks like a toggle
清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
#IE11 で #CSS グリッドは難しくない | Sler系SEの技術ブログ
今回、この記事でAutoPrefixerは利用しません。 IE11は[x]でrepeatを指定できます minmax()は、IE11で利用できますが、auto-fitとauto-fillは利用できません。 fit-content()も、IE11で利用できませんが代替の手段があります。 グリッドの列/行にminmax(min-content, max-content)を適用し、子要素にmax-width: [value]を設定します。 IE11以外のブラウザでは、fit-contentの代わりにautoを指定しても同じです。 ちなみに、IE11のautoの動きは他のブラウザと異なります。 IE11で他のブラウザのautoを再現しようと試みましたが、minmax(min-content, 1fr)は、横幅がコンテンツの量に対応せず、 minmax(min-content, 100%)、minm
@scroll-timelineを使ってCSSのみでスクロールアニメーションを実現する | フロントエンドBlog | ミツエーリンクス
2021年1月20日 @scroll-timelineを使ってCSSのみでスクロールアニメーションを実現する UI開発者 板垣 本記事では、現在CSS Working GroupでEditor's Draftとして公開されているScroll-linked animationの仕様書を基に、@scroll-timelineの機能および使い方について解説します。 そもそもScroll-linked animationとは Scroll-linked animation※1とはスクロールのオフセット値に関連付けたアニメーションを作成する機能の総称です。 CSSおよびJavaScript（Web Animations API拡張）で利用可能であり、これを活用することで、スクロールをしたらフワッと要素が浮き出る効果や、画面に視差効果を持たすことが今より簡単に実現できるようになります。 次の節からは、
/trunk/Source/WebCore/css/html.css – WebKit
Fix styling of th elements when explicitly specifiying text-align:inherit https://bugs.webkit.org/show_bug.cgi?id=138577 Patch by Ryan Reno <rreno@apple.com> on 2022-06-16 Reviewed by Tim Nguyen. <th> elements were being incorrectly centered when specifying text-align: inherit. This fixes that bug by adding a new internal CSS value for use in the UA stylesheet. This also removes a non-inherited
html.css - mozsearch
src: url("data:font/woff2;base64,d09GMgABAAAAAAScAAsAAAAACfAAAARNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAhBIRCAqGMIRJATYCJAMsCxgABCAFhF4HaBsuCMgehXEsLOlXaXd7sgbPQ172fjLwdhYFM92mABaiTuRVdO5/mx9I5UJiJom3phLRQw/TSF2M/vo25+pNyWkNws81NrUDAAf0QOdfcf7nmPEyBPZtCbbZEDuosskKZG922ZhBenh05qcSXktf6s3Oy9dAkWsyDzMoM5QTKcwKNjFayUPSREGFhUMrdE8MJsH052qGcYNO3pbEaYIBoDTItIKGAqhDdKHRD0kkKg6QGSCWEfueTNr3P6OvYaIbDH/8ULEAbjQ
Source/core/css/html.css - chromium/blink - Git at Google
* Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc. All rights reserved.
CSSのCascadingに追加されようとしているLayerという概念 - araya's reservoir
2021 年 1 月に CSS Cascading and Inheritance Level 5 の First Public Working Draft が公開された。 CSS Cascading and Inheritance はその名の通り、CSS の Cascade や継承などについての仕様を定義しているもので、つい先日 Level3 が晴れて W3C Recommendation となった。 CSS Cascading and Inheritance Level 3 is a W3C Recommendation そして、新たに First Public Working Draft が公開された Level5 では、今までの Cascading に、新たにLayerという概念の導入が検討されている。 本記事では CSS の Cascading についておさらいし、新しい概念であ
CSS Grid full-bleed layout tutorial • Josh W. Comeau
It doesn't seem like it would be so tricky, right? But this was an era before flexbox existed; our tools for the job were tables and floats, and neither were really up to this task. It was technically possible, but some shenanigans were required. Once flexbox achieved mainstream browser support, this layout went from "holy grail" to "fountain drink"; it was everywhere, because it offered a great u
Cascading Style Sheets, Level 2
前 次 目次 特性 索引 標準情報(TR) TR X 0032:2000 CSS2 目 次 まえがき 序文 1 概要 1.0 適用範囲 1.1 規定の読み方 1.2 規定の構成 1.3 規約 1.3.1 文書言語の要素及び属性 1.3.2 CSS特性定義 値 初期値 適用対象 継承 パーセント値 メディアグループ 1.3.3 簡略記述特性 1.3.4 備考及び例 1.3.5 画像及び長記述 1.4 貢献者 1.5 著作権表示 2 CSS2への導入 2.1 HTMLのためのCSS2概説 2.2 XMLのためのCSS2概説 2.3 CSS2処理モデル 2.3.1 描画面 2.3.2 CSS2アドレス付けモデル 2.4 CSS設計原則 3 適合性(要件及び勧告) 3.1 定義 3.2 適合性 3.3 エラー条件 3.4 text/css内容型 4 CSS2の構文及び基本データ型 4.1 構文
Why CSS Logical Properties Aren’t Ready for Use!
The new CSS logical properties module is one of the most important developments to have come to CSS in recent years. This module enables us to support all the directions that human languages are written in with the same CSS definitions. At the end of 2018, I published the “New CSS Logical Properties!” article. At that time, I was sure that in 2019 we would start using this new feature. But I was w
Fluid-responsive font-size calculator
Generated CSS: What are fluid-responsive fonts / fluid typography? Also known as: Responsive typography (excellent article), Flexible Type, Fluid Type, Viewport Sized Typography, Fluid Typography, and even Responsive Display Text. They all leverage the viewport width, and / or height, to smoothly scale the font-size rather than switch at specific breakpoints. Some versions address the whole page,
content-visibility: the new CSS property that boosts your rendering performance | Articles | web.dev
The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance. content-visibility enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility proper
When Sass And New CSS Features Collide | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways. So this is going to be a post about the issues I’ve encountered,
CSS fix for 100vh in mobile WebKit - Matt Smith
Not long ago there was some buzz around how WebKit handles 100vh in CSS, essentially ignoring the bottom edge of the browser viewport. Some have suggested not using 100vh, others have come up with different alternatives to work around the problem. In fact, this issue goes further back a few years when Nicolas Hoizey filed a bug with WebKit on the subject (the short of it: WebKit says this is “inte
min(), max(), and clamp() CSS Functions
CSS Comparison Functions (min(), max(), clamp()) become supported in Firefox on 8 April 2020, which means that they are now supported in all major browsers. Those CSS functions will provide us with ways to have dynamic layouts and more flexible design components. They can be used for container sizes, font-size, padding. and a lot more. Even more, web designers might need to think differently while
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Microsoft、折りたたみ式・2画面デバイス向けの新しいJavaScript/CSS機能を発表／「Edge 86」以降、または“Surface Duo”エミュレーターでプレビューテスト可能
1-Line Layouts
Custom Cascades
