Css
iPhone X的缺口和CSS
苹果公司（Apple）的发布会也开完了，新产品也将登陆了。估计很多开发人员看到iPhoneX的设备是要崩溃了，特别对于前端开发人员更是如此。iPhoneX的屏幕覆盖了整个手机的屏幕，为相机和其他各部件留出了一个空间。结果是屏幕设计出现了一些尴尬的情况。比如将网站限制在一个“安全区域”。而在屏幕上...
CSS3 文本效果
本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景；但它也可用于深色底、浅色字的场景，只要文字不是黑色并且背景不是纯黑或纯白就行【浅色背景深色文本】background:hsl(210,13%,60%);color:hsl(210,13%,30%);text-s...
总结30个CSS3选择器（转载）
或许大家平时总是在用的选择器都是：#id .class 以及标签选择器。可是这些还远远不够，为了在开发中更加得心应手，本文总结了30个CSS3选择器，希望对大家有所帮助。1*：通用选择器*{margin:0;padding:0;}*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margi...
css3--布局正六边形
怎样布局正六边形？-->如果不能直接布局，就只能采用图形的组合。-->既然是正六边形，则：-->AB=2分之根号3乘2倍的边长，也就是对于矩形ABCD来说，AB是BD的根号3倍（也可以用正切算tan30deg）。这样的矩形旋转两次60deg，轨迹就恰好是一个正六边形。-->事实上我们常常是要让它...
纯CSS做3D旋转魔方
昨天偶然看见网友（简单说用CSS做一个魔方旋转的效果）做的一个3D旋转魔方 效果就是本博客右侧公告栏所示在这里把做法展现出来感兴趣的可以试试 做成自己特有的魔方1<!DOCTYPEhtml>2<html>34<head>5<metacharset="utf-...
H5移动前端开发常用高能css3汇总
1.禁止a标签点击高亮,这些都是非官方属性，但实用性超强 html,body{-webkit-touch-callout:none;//禁止或显示系统默认菜单-webkit-user-select:none;//禁止长按复制选择-webkit-tap-highlight-color:rgba(0,0,0,0)...
再探CSS 中 class 命名规范
一直以来我的CSS的class命名都是比较随意，有时采用驼峰式、有时采用下划线，好像没有什么统一的标准，想到什么英文单词就拿过来用，这对于自己瞎写的小项目无伤大雅，遇到冲突的问题可稍加调整改变即可。今天，我学习并掌握了一种新的class命名规范，觉得它更加科学更加稳健。在此总结。class的命名要遵循关注分离、松耦合的...
css3 使用SVG做0.5px 的边框细线
.HalfPixelLine{background:repeat-xtoplefturl("data:image/svg+xml;utf8,<svgxmlns='http://www.w3.org/2000/svg'width='1'height='1'><rectfill='red'x='0'y='...
深入理解CSS过渡transition
通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单，但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识 定义 过渡transition是一个复合属性，包括transition-property、...
css flexbox水平垂直
display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-moz-flex;display:-ms-flexbox;display:flex;/*水平居中*/-webkit-box-align:center;-moz-box-align:cen...
被解放的GPU CSS3动画加速
图形处理器（GraphicsProcessingUnit）专门用来处理在个人电脑、工作站或游戏机上图像运算工作显卡的“心脏”90%以上的新型台式电脑和笔记本型电脑拥有集成图形处理器，但是在性能上往往低于那些独立显卡。按照类型来分，可以分为独立显卡GPU和集成绘图GPU。独立显卡GPU性能最高的一...
转载：CSS计数器的趣味时光之css计算数据
CSS计数器是“啊太好了，竟不知道CSS可以做这啊”这类非常有趣的众多特性之一。简言之，用CSS使你持续某增加某个量，而无需JavaScript。简单计数器我们从这个简单的分页示例开始： 你见到的这些数字不是硬编码在HTML中，它们是以下CSS生成的：1234567891011body...
CSS抗锯齿 font-smoothing 属性介绍
CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。加上之后就顿时感觉页面小清晰了。淘宝也在用哦！它有三个属性： none &n...
转载：CSS3 Flexbox可视化指南
目录引言正文1引入2基础3使用4弹性容器Flexcontainer属性41flex-direction42flex-wrap43flex-flow44justify-content45align-items46align-content47注意事项5弹性子元素Flexitem属性51order52flex-...
经验分享：多屏复杂动画CSS技巧三则
当下CSS3应用已经相当广泛，其中重要成员之一就是CSS3动画。并且，随着CSS动画的逐渐深入与普及，更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动：感谢shirley帮忙录制上面的视频，虽然视频内容是手机上的显示效果，但是，这个“企业新年祝福活动”原本只...
