More than code
Thoughts, stories and ideas

标签:CSS

CSS Tip 系列(四)-木子朗
CSS

CSS Tip 系列(四)

阅读(342)赞(2)

1. 文字描边效果 <p class="outline">Why didn't I know about this sooner?</p> <style> .outline { color: white;...

CSS Tip 系列(三)-木子朗
CSS

CSS Tip 系列(三)

阅读(555)赞(3)

1. 响应式多列布局 https://codepen.io/kevinpowell/pen/zYxogZy .content { columns: 200px; } 2. 使用 box-shadow 实现多边框叠加效果 https://co...

CSS Tip 系列(二)-木子朗
CSS

CSS Tip 系列(二)

阅读(467)赞(1)

1. 基于媒体查询和 Grid 布局 https://codepen.io/kevinpowell/pen/ExaNWyM <div class="card"> <img src="https://i.pravatar.c...

CSS Tip 系列(一)-木子朗
CSS

CSS Tip 系列(一)

阅读(728)赞(2)

程序员 Kevin Powell 每天在 Twitter 的 #CSSTipOfTheDay 话题下,发布一篇 CSS 技巧,这里做整理收藏。 1. 渐变色文字 https://codepen.io/kevinpowell/pen/MWYY...

CSS Grid 网格布局-木子朗
CSS

CSS Grid 网格布局

阅读(895)赞(4)

一、简介 网格布局(Grid)是很强大的 CSS 布局方案。 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。 上图这样的布局,就是 Grid 布局的拿手...

CSS命名规范-BEM-木子朗
CSS

CSS命名规范-BEM

阅读(1608)赞(7)

概要 BEM 分别代表着:Block(块)、Element(元素)、Modifier(修饰符),是一种组件化的 CSS 命名方法和规范,由俄罗斯 Yandex 团队所提出。其目的是将用户界面划分成独立的(模)块,使开发更为简单和快速,利于团...

【转】精读《使用CSS属性选择器》-木子朗
CSS

【转】精读《使用CSS属性选择器》

阅读(1213)赞(3)

1 引言 虽然现在 Css Module 与 Css-in-js 更流行,但使用它们会导致过分依赖 滥用 class 做唯一定位,违背了 Css 选择器的初衷。 本期精读的文章是:attribute-selectors-splicing-h...

深入理解CSS中重要的层叠概念-木子朗
CSS

深入理解CSS中重要的层叠概念

阅读(1883)赞(9)

一、前言 好久没有更新文章了,因为最近996,emmm….. 在css中,层叠概念颇为重要,对相关概念的理解透彻,在发现问题、分析问题、解决问题的过程中会起到至关重要的作用。 下面将梳理一些重要概念: 文档流(Normal Fl...

CSS变量及应用-木子朗
CSS

CSS变量及应用

阅读(1254)赞(2)

一、变量声明 声明变量的时候,变量名前面要加两根连词线(--)。 body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:--foo和--bar。 它们与color、f...

对BFC的理解及应用-木子朗
CSS

对BFC的理解及应用

阅读(1435)赞(0)

一、什么是BFC? 在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的...

React CLI - 快速创建react项目脚手架工具

官 网GitHub