随笔分类 - CSS3
摘要：Layout: This step invovles determining the geometry of the page. The browser calculates where each element will be on the screen, considering factors
阅读全文
摘要：.card { width: min(700px, 90%, 70vw); // take the one currently is the min height: max(300px, 90%, 40vh); // take the one currently is the max font-si
阅读全文
摘要：Refer to https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4 he lvh, svh, and dvh units in CSS are used to specify heights relative to the vie
阅读全文
摘要：<style> @media print { .no-print { display: none !important; } } </style> <div class="overlay--container no-print" >...</div>
阅读全文
摘要：The gap property in CSS is a shorthand for row-gap and column-gap, specifying the size of gutters, which is the space between rows and columns within
阅读全文
摘要：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries Use the container-type property a value of size, inline-size, or normal. These
阅读全文
摘要：Tailwind CSS v2.1 introduces a new just-in-time compiler for Tailwind that generates your styles on-demand as you author your templates, instead of ge
阅读全文
摘要：Z-index cannot be added to static position DOM element. All the DOM element by default is static position. So if you have to add z-index, you can add
阅读全文
摘要：Install npm install tailwaindcss postcss-cli autoperfixer Config a empty tailwind config file npx tailwind init Conig postcss module.exports = { plugi
阅读全文
摘要：Install Purgecss to remove unused CSS npm install @fullhuman/postcss-purgecss --save-dev Edit postcss.config.js: module.exports = { plugins: [ require
阅读全文
摘要：A strange bug that one toastr showing on the screen... it should happen that when I click the toastr, it should be dismissed. But it doesn't.... I was
阅读全文
摘要：Ref: http://blogs.quovantis.com/browser-specific-hacks-for-frontend-developers/ Internet Explorer Css hacks :root .selector { Property: Value\9; color
阅读全文
摘要：From to HTML: <header class="header item"> <em><strong>LOGO</strong></em> <a href="#about">About</a> <a href="#portfolio">Portfolio</a> <a href="https
阅读全文
摘要：html: <body class="container"> <header class="header item"> header </header> <nav class="nav item">nav</nav> <div id="app" class="content item"> conte
阅读全文
摘要：1. Grid: by default showing content in Y axis (column), Flex: by default showing content in X axis. Exp: If you want to style a header.. you can use f
阅读全文
摘要：For example, a checkbox mark, if we show / hide by: transform: scale(0); by default it shows up from center, we want it from "bottom left", we can do:
阅读全文
摘要：For a radio button control, when hide selected status, we can use: .input__control::before { content: ""; width: 0.5em; height: 0.5em; // box-shadow w
阅读全文
摘要：box-shadow works better than background-color on printable version: .input__control { display: grid; place-content: center; width: 1em; height: 1em; b
阅读全文
摘要：Best way to do is using grid: .input__control { display: grid; place-content: center; width: 1em; height: 1em; border: 0.1em solid var(--color-default
阅读全文
摘要：<div class="form-group"> <label class="form-control radio"> <span class="form-control__input radio__input"> <input type="radio" name="radio" /> <span
阅读全文
