css-tricks
发表于|更新于
|浏览量:
站在上风的人衣冠要整洁，位在任上的人言行要谨慎，这才是政治家对天下的责任。——德富芦花
分享一个网站，这个网站有很多css小技巧
比如css实现颗粒噪声
又或是对于console的使用指引，例如console.clear()清除控制台
相关推荐
2025-03-19
primer-css
只要条件许可，机会成熟，人人都是想作恶的。——叔本华 介绍 Primer CSS：GitHub 的设计系统最近，我在寻找一个强大的设计系统来提升我的项目 UI 设计时，发现了 GitHub 的设计系统——Primer CSS。今天，我将为大家详细介绍一下这个优秀的项目，帮助你更好地了解和使用它。 什么是 Primer CSS？Primer 是 GitHub 的设计系统，提供了一套完整的 CSS 实现，旨在帮助开发者快速构建一致且美观的用户界面。无论你是开发者还是设计师，Primer CSS 都能为你的项目提供强大的支持。 项目概述Primer CSS 是 GitHub 开发和维护的开源项目，自 2015 年 3 月 19 日创建以来，已经吸引了超过 1.2 万个星标和 1244 个 forks。该项目使用 SCSS 语言编写，遵循 MIT 许可证，确保其免费和开源。 项目特点 一致性：Primer CSS 提供了一套统一的样式和组件，确保你的项目在各个页面和模块之间保持一致。 高效：通过使用 Primer CSS，你可以快速构建和维护用户界面，节省大量的开发时间。 可定制：P...
2024-09-22
position-try
教育的胜利，可以压倒国民性。——爱默生 https://css-tricks.com/almanac/properties/p/position-try-fallbacks/ 今天分享一个position-try的css属性 它就像字面意思是说： 位置-尝试 代表着 它在页面移动时尽可能尝试调整位置 举个栗子： 1234567.target { position: absolute; position-anchor: --my-anchor; position-area: top; position-try-fallbacks: bottom;} 我写下代码： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273<style> /* 定义一个锚点元素 */ .anchor { an...
2025-03-18
文本精准对齐
即使饱含泪水，我仍旧将它们擦干；即使不被信任，我仍旧相信。就是这样，也将是这样。——保罗·科埃略的《阿莱夫》 CSS 如何让文本随背景图等比例缩放？背景在响应式布局中，我们经常需要让文本标注准确地贴合背景图，并且在窗口缩放时，文本应 保持相对位置不变，同时等比例缩放。然而，传统的 position: absolute 方式往往会导致文本发生 偏移，影响对齐。 最佳实践：position + transform在 CSS 中，最简单且稳定的方法是结合： 1234position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); 这能确保文本始终居中，不随容器缩放而偏移。 原理解析 position: absolute 确定参考点 文本相对于 position: relative 的父元素 进行绝对定位。 left: 50%; top: 50% 让文本的左上角 位于背景图 50% 的位置。 transform: translate(-50%, -50%) 精准居中 向左移动自身宽度 50% (t...
2021-12-24
youmightnotneedjquery
你要记得，永远要愉快地多给别人，少从别人那里拿取。——高尔基 最近发现一个网站：youmightnotneedjquery https://youmightnotneedjquery.com/ 直译过来就是你可能并不需要jquery…可以看出是有点恶趣味哈哈 对应的github地址为：https://github.com/HubSpot/YouMightNotNeedjQuery 这个网站它介绍了很多种使用新版IE新特性代替jquery的方法： 例如使用jquery时发送get请求获取json格式的数据 123$.getJSON('/my/url', function(data) {}); 使用IE10+时，不用依赖jquery，直接写 123456789101112131415161718var request = new XMLHttpRequest();request.open('GET', '/my/url', true);request.onload = function() ...
2023-11-15
emberjs
合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。——老子 分享一个js框架 https://emberjs.com/ Ember.js 是一个高效的、经过实战考验的 JavaScript 框架，用于构建现代 Web 应用程序。它包括构建可在任何设备上运行的丰富 UI 所需的一切。 它的语法： 123456789import Route from '@ember/routing/route';export default class IndexRoute extends Route { async model() { return { title: 'Grand Old Mansion' }; }} 对应的页面 1<h1>{{@model.title}}</h1> 使用的是.hbs后缀的模板文件，语法和vue有些异曲同工之妙，是一个很值得学习的库 其emberjs约定大于配...
2024-11-07
typescript-exercises（十二）
人民是土壤，它含有要切事物发展所必需的生命汁液；而个人则是这土壤上的花朵与果实。——别林斯基 题目： 123declare module 'stats' { export function getMaxIndex(input: unknown, comparator: unknown): unknown;} 报错： 123456789101112131415index.ts(3,5): error TS2305: Module '"stats"' has no exported member 'getMaxElement'.index.ts(4,5): error TS2724: Module '"stats"' has no exported member 'getMinIndex'. Did you mean 'getMaxIndex'?index.ts(5,5): error TS23...