妙用 background 实现花式文字效果
本文将讲解如何利用 background 系列属性，巧妙的实现一些花式的文字效果。通过本文，你将可以学到： 通过 与 实现酷炫的文字下划线效果 通过 与 以及 实现文字逐个渐现的效果 起因 写本文的动机是在于，某天，被这样一个标题所吸引 \ \ 10 Masterfully Designed Websites，其中列举了 10 个极具创意的 Web 网站。 其中一个 Red Bull Racing 网站，是介绍关于 F1 红牛车队的主页...
单行文本展示（自动隐藏或缩小）
❓ 在开发h5页面的时候，常常会需要展示各种文案，前端开发会根据UI出的设计图去实现。这里列出的是单行文本的展示，当文本的宽度超出了可视页面宽度的时候，会出现什么情况呢？ 一行只放一种类型的文本，文本会超出元素展示 一行放了多种类型的文本，文本会覆盖其他元素，错乱展示 ❎ 错误展示： ✅ 正确展示： 除了上面列出的2种展示方式，还会有其他的情况么？ 答案肯定是有的。能想到的还有很多，举例说明 超出宽度换行展示，不滚动（没有最大高度） 超...
浮动与BFC容器
浮动布局是面试中的一个考点，且大多数面试官在考你css时，问的最多的知识点就是浮动，所以我们不仅要会用浮动去布置页面，还要深入理解其原因，知其然，又要知其所以然，只有这样，你才能在面试官面前如鱼得水般的谈笑自如。下面我会引导你去理解浮动布局究竟有啥知识点和细节需要去理解和注意。 1\. 实现文字环绕效果和脱离文档流 在以前的网站上，有着这么一种典型布局方式（文字环绕图片），如图： 你写着写着，突然想插入一张图片，然后图片后面继续写字，这...
[Android] Android开发中dip，dpi，density，px等详解
Px （Pixel像素） 也称为图像元素，是作为图像构成的基本单元，单个像素的大小并不固定，跟随屏幕大小和像素数量的关系变化（屏幕越大，像素越低，单个像素越大，反之亦然）。所以在使用像素作为设计单位时，在不同的设备上可能会有缩放或拉伸的情况。 Resolution（分辨率） 是指屏幕的垂直和水平方向的像素数量，如果分辨率是 1920\ 1080 ，那就是垂直方向有 1920 个像素，水平方向有 1080 个像素。 Dpi（...
一文读懂屏幕尺寸、分辨率、PPI、设备独立像素、Retina
这是我参与8月更文挑战的第1天，活动详情查看： 当我们介绍一个设备的屏幕时，我们会怎么描述呢。除了说很大很细腻之外，还有更精确的概念吗。 以上是从苹果官网截取的对iPhone 12 的屏幕描述。可以看到主要有 尺寸、像素分辨率、ppi 这三个词。他们分别是什么含义呢。下面我们一一解读。 屏幕尺寸 屏幕尺寸大小是用户非常关键的一个指标。如上所示，苹果官网在最明显的位置标明了各个机型的屏幕尺寸。屏幕尺寸一般用屏幕对角线的物理长度表示，单位为...
你真的会写侧边栏收起动画吗
业务背景 侧边栏的展开与收起, 是非常常见的前端交互. 下面这段代码是个基础版的demo, 使用html+tailwind编写的 这段代码的视觉效果就是下面这样的. 通过点击左上角的toggle来进行宽度切换. 为了实现toggle的效果, 我们+上一段js代码 总结下, 使用两栏布局, 右侧固定200px, 左侧自适应, 点击toggle可以隐藏和展示右侧区域. 动画如下 问题 功能已经实现, 而且逻辑也非常简单. 但是却存在一个体验...
纯 CSS 实现文字换行环绕效果
⌛ 三年前。。。 🧔♂️ 一同事问我：“你说用 css 能不能直接实现这个效果，不想用 js 写，好麻烦啊” 我回答道：“应该不行吧，好像没什么好用的方法。。。” ✅ 现在，三年之约已到，我终于找到了纯 css 实现的方法 省流，实现代码 起源 前几天在翻 chrome 的博客时偶然看到了这么一个东西 Chrome 110 年初登陆， 属性是一个小而强大的 CSS 功能，它为首字母的位置设置样式。您可以将字母放置在下降或上升状态。该...
全兼容的毛玻璃效果
通过本文，你能了解到： 1. 最基本的使用 CSS 实现磨砂玻璃(毛玻璃)的效果。 2. 在至今不兼容 的 firefox 浏览器，如何利用一些技巧性的操作，巧妙的同样实现毛玻璃效果，让这个效果真正能运用在业务当中。 什么是 CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。 与 非常类似，可以取的值都是一样的，但是一个是作用于整个元素...
CSS 也能实现 if 判断？实现动态高度下的不同样式展现
1. CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容 为了简化实际效果，我们看这么一张示意效果图： 可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。 这个效果在很多场景都会出现，可以算是一个高频场景，那么在今天，我们能否不使用 JavaScript，仅仅凭借 CSS 实现类似于这样的功能呢？ 答案当然是可以，XBoxYan 大佬在 介绍了一种非常巧妙的 借助浮动的解法 ，...