随笔分类 - CSS3
摘要:@use 'sass:math'; @use 'sass:string'; html { background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); height: 100%; width: 100%; over
阅读全文
摘要:PreProcessor Using Scss Install: pnpm add sass -D Code: // filename: src/views/404.vue <template> <div title="404">404</div> <p>Page Not Found</p> </t
阅读全文
摘要:<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Animation for auto height</title> <style> .btn { position: relative; border: no
阅读全文
摘要:预处理器介绍 预处理器基本介绍 Sass 快速入门 预处理器基本介绍 平时在工作的时候,经常会面临这样的情况:需要书写很多的样式代码,特别是面对比较大的项目的时候,代码量会急剧提升,普通的CSS书写方式不方便维护以及扩展还有复用。 通过 CSS 预处理技术就可以解决上述的问题。基于预处理技术的语言,
阅读全文
摘要:In this lesson, you'll learn how to implement smooth state transitions in your web applications using the browser's built-in View Transitions API. We'
阅读全文
摘要:Identifying the containing block The process for identifying the containing block depends entirely on the value of the element's position property: If
阅读全文
摘要:/* initial: default value of the css property, you don't need to remember what's the default value of each css property, just use initial should do th
阅读全文
摘要:https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Houdini</title> <
阅读全文
摘要:<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>CSS avatar scale</title> <style> .avatar { width: 150px; height: 150px; backgro
阅读全文
摘要:@use 'sass:math'; .menu-item { opacity: 0; transition: 0.5s; } $r: 120px; $n: 6; $step: 360deg / $n; for $i from 1 through $n { .board:hover .menu-ite
阅读全文
摘要:<style> dt { position: sticky; top: 0; } </style> <body> <dl> <dt>A</dt> <dd>Adrew W.K</dd> <dd>Adapter</dd> <dt>B</dt> <dd>Border</dd> <dd>Beef</dd>
阅读全文
摘要:$breakpoints: ( 'phone': (320px, 480px), 'pad': (481px, 768px), 'notebook': (769px, 1024px), 'desktop': (1025px, 1200px), 'tv': 1201px, ) @mixin respo
阅读全文
摘要:/* View Transitions */ /* STEP 1 */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1s; } /* STEP 2 */ @keyframes fade-
阅读全文
摘要:max-content https://developer.mozilla.org/en-US/docs/Web/CSS/max-content The max-content sizing keyword represents the maximum intrinsic size of the c
阅读全文
摘要:Video: https://www.youtube.com/watch?v=PkFuytYVqI8&list=WL&index=67 body └─ article.feature ├─ section.article-hero │ ├─ h2 │ └─ img │ ├─ section.arti
阅读全文
摘要:Video: https://www.youtube.com/watch?v=zqjKE_zcWzE&list=WL&index=68&t=14s code: https://github.com/Alliemack77/scroll-animations-with-css-only /* Cust
阅读全文
摘要:button:focus-visible, input:focus-visible, a:focus-visible { border-color: #1e88e5; box-shadow: 0 0 3px 2px rgba(30, 135,229,0.5); }
阅读全文
摘要:.balanced-text h2 { color: yellow; text-wrap: balance; } .unbalanced-text h2 { color: rgb(252, 1, 218); }
阅读全文
摘要:ul li { border: 2px solid gray; border-radius: 8px; padding: 1rem; margin: 1rem; } // old way ul li input:checked { accent-color: #f806e4; } // new wa
阅读全文
摘要:The cards on the DJI site have an effect where the hovered card expands and the other cards shrink: In order to emulate this effect we'll use Flexbox.
阅读全文