css
8篇文章 · 0订阅
  • 教你使用CSS3实现新拟态UI
    新拟态的英文名称是“Neumorphism”，是New+Skeuomorphism的组合词，同时也叫“Soft UI”。简单讲，新拟态是一种图形样式，其原理是通过模拟真实物体来为界面的UI元素赋予真实感。 在今年上半年，新拟态的UI设计风靡一时，它被誉为2020年最火的UI设计…
    CSS
    教你使用CSS3实现新拟态UI
  • 自适应布局方案
    rem（font size of the root element）是指相对于根元素<html>来做计算的字体大小单位。 e.g. 设置html { font-size: 75px }时，其他元素1rem = 75px，4rem = 300px vw是基于viewpo…
    CSS
    自适应布局方案
  • 「一劳永逸」48张小图带你领略flex布局之美
    48张图带你从0到1掌握flex布局方式。 需要本文的Xmind导图的话，移步公众号--前端UpUp,回复flex关键字即可。 从上面图来看，我们将flex布局分为两部分讲，轴和容器。 打个预防针，flex布局涉及到12个CSS属性，父容器,子容器各6个。 接下来先梳理常见的属…
    flexbox CSS
    「一劳永逸」48张小图带你领略flex布局之美
  • 最强大的 CSS 布局 —— Grid 布局
    Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案！！
    CSS
  • 何谓高质感，FWidget
    FWidget 是由【阿里巴巴-飞猪-FliggyMobile技术团队】 开发的系列组件库， FWidget 始终奉行 "用心提供精致的组件，助您构建精美的应用" 的信念，力图为开发者们提供一套精致易用的组件库，帮助开发者们更易构建出精彩绝伦的应用。 迄今为止， FWidget…
    Flutter
    何谓高质感，FWidget
  • 十分钟实现灭霸打响指灰飞烟灭的效果
    看过复仇者联盟的都知道，灭霸作为计划生育政策的坚定支持者和执行者，一个响指清除了宇宙中二分之一的生命。电影中被清除的生命灰飞烟灭的镜头很是酷炫，所以在复联4上映后，那个不存在的网站google，推出了一个彩蛋，如果在搜索框搜索灭霸，会出现一个手套的按钮，点击后会让网页搜索结果消…
    前端 Canvas
  • viewport和1px | 工具人: 这是1px，设计师： 不，这不是
    目前多端运行的项目越来越多，设计师对于UI的要求也越来越高。 请原谅工具人吧。 在高清屏下，很多设计稿上的参数就不能像web一样直接拿来用了，不管是H5页面还是RN应用，都需要进行下适配。例如，同样是1px，移动端的1px 就会显得很粗。 那么为什么会产生这个问题呢？主要是跟一…
    JavaScript
  • 移动端1px解决方案
    移动端web项目越来越多，设计师对于UI的要求也越来越高，比如1px 的边框。在高清屏下，移动端的1px 会很粗。 比如，这个是假的1像素 那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为100%的情况下，…
    CSS
    移动端1px解决方案