?Web开发者需要知道的CSS Tricks

?Web开发者需要知道的CSS Tricks_第1张图片

作为一名Web开发者,CSS是必备技能之一,我一直以为自己对CSS的掌握已经够用了,直到读Lea Verou的《CSS揭秘》时,我发现自己充其量就算个会打CS的选手,书中针对我们常见的网页设计难题从不同的角度提出了多种实用又优雅的解决方案,在这里强烈的推荐给每一位从事前端相关的开发者,相信你一定会有所收获。

为了以后可以更爽的复制粘贴,笔者把自己的收获和工作中常用的一些CSS小样式总结成这份文档,一共包含43个CSS的小样式(持续更新…)。文档还有很多不足的地方,还请各位多多指教,如果觉得对你有一点帮助,欢迎大家一起来完善?~

What's included

边框与背景

  • 半透明边框
  • 多重边框
  • 边框内圆角
  • 背景定位
  • 条纹背景
  • 1px 线/边

常见形状

  • 圆与椭圆
  • 平行四边形
  • 切角效果
  • 简易饼图
  • 提示气泡
  • 其他多边形

视觉效果

  • 常见投影
  • 不规则投影
  • 毛玻璃效果
  • 斑马条纹
  • 文字特效
  • 环形文字
  • 插入换行
  • 图片对比控件

用户体验

  • 选择合适的鼠标光标
  • 扩大可点击区域
  • 自定义复选框
  • 自定义单选框
  • 输入框完美居中
  • 通过阴影弱化背景
  • 通过模糊弱化背景
  • 自定义文字下划线
  • 自定义scroll滚动条

结构布局

  • 全背景等宽内容居中
  • 绝对底部
  • 水平垂直居中
  • 圣杯布局
  • 双飞翼布局
  • 类订单布局
  • Flex 布局

动画过渡

  • 弹跳效果
  • 弹性过度
  • 闪烁效果
  • 打字效果
  • 抖动效果
  • 无缝平滑效果
  • 延轨迹平滑效果

文档中代码支持实时调试预览,若有疑问或者建议请直接在文档下方留言,如果你有更有趣更实用的技巧,欢迎PR~

文档:You-need-to-know-css

Github:LHammer/You-need-to-know-css

你可能感兴趣的:(css,github,html5,chrome,firefox)