2016年04月27日 by 张 鑫旭 阅读 145485 次, 今日 3 次

writing-mode这个CSS属性,我们是不是很少见到,很少用到!我们往往称不常见的东西为“生僻”,就像是不常见的文字我们叫“生僻字”,因此不常见的CSS属性,我们可以叫做“生僻属性”,writing-mode给我们的感觉就是一个“生僻属性”,很弱,可有可无。
但是,实际上,我们都错了,大错特错,writing-mode很弱?卧槽,别开玩笑了,writing-mode可以说是CSS世界里面最逆天的CSS属性了,直接颠覆CSS世界的众多规则……
本月为4月压轴作品,大量demo,大量脑洞大开的创意处理,希望可以对您的学习有所帮助。
阅读全文…
标签: direction, font-face, margin-end, margin-start, text-indent, writing-mode, 垂直居中
发布在 CSS相关 | 51 条评论 »
2016年04月6日 by 张 鑫旭 阅读 192683 次, 今日 8 次
如果我们想实现点击下载按钮下载一张图片,你会如何实现?
我们可能会想到一个最简单的方法,就是直接按钮a标签链接一张图片。
但是,想法虽好,实际效果却不是我们想要的,因为浏览器可以直接浏览图片,因此,我们点击“下载”链接,并是不下载图片,而是在新窗口直接浏览图片……
阅读全文…
标签: download, html, HTML5, polyfill
发布在 HTML相关 | 68 条评论 »
2016年03月24日 by 张 鑫旭 阅读 46857 次, 今日 4 次
all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction这两个CSS属性。
为什么会有这个CSS属性呢?
我们可能知道,有些CSS属性值基本上所有CSS属性都有,比方说继承inherit!
我们CSS reset输入框的时候,是不是有类似这样的代码…
阅读全文…
标签: all, inherit, initial, unset, 继承
发布在 CSS相关 | 15 条评论 »
2016年03月22日 by 张 鑫旭 阅读 198070 次, 今日 75 次
以20像素为基准进行CSS网页布局,说不定会让一些细节和潜能大放光彩,当然这需要体系的配合,还需要一些完整的解决方案在里面,本文就将分享这一实践心得,保证是其他地方都没有的。外甥点灯笼——照旧(舅),有demo有截图有必要的源代码展示,希望本文的内容能够对您的学习有所帮助!
阅读全文…
标签: font-size, line-height, UI, 图标, 标准, 组件, 规范
发布在 CSS相关 | 33 条评论 »
2016年03月20日 by 张 鑫旭 阅读 64885 次, 今日 3 次
至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的。
为什么呢?是因为direction长得丑吗?
虽然说direction确实其貌不扬,但是CSS并不是一个看脸卖萌的世界。
那是因为兼容性吗?
那更不是了,在那个“美女”确实是美女的年代,包括IE6在内的浏览器,CSS direction就已经被支持……
阅读全文…
标签: direction, text-align, writing-mode
发布在 CSS相关 | 27 条评论 »
2016年03月7日 by 张 鑫旭 阅读 86099 次, 今日 7 次
网站有一些改动的时候,为了让用户熟知新的操作位置,往往会增加一个引导,常见的方式就是使用一个黑色的半透明蒙版,然后需要关注的区域是镂空的。
然后上周五我去微云转悠的时候,也看到了引导层,于是职业病又犯了,去学习下别人是怎么实现的。下面是观测的结果:
为了实现镂空蒙层效果,作者发挥了小时候拼积木的才能,使用两层HTML结构,内层使用5块独立区域拼接形成,至于中间镂空的区域的阴影则是使用的图片实现的。
我们实际上只需要一层标签,一层空标签就可以实现我们的效果,且不需要图片……
阅读全文…
标签: border, border-radius, box-shadow, 伪元素, 遮罩
发布在 CSS相关 | 34 条评论 »
2016年02月29日 by 张 鑫旭 阅读 116077 次, 今日 15 次
SVG文件,尤其从各种变假期导出的SVG,通常包含大量的无用信息,例如编辑器源信息,注释,因此元素,默认或者非最优值,以及其他一些不会影响渲染结果的可以移除或转换的内容。
有没有什么工具可以简化这些信息呢,有,不妨试试本文介绍的svgo.
阅读全文…
标签: SVG, svgo, svgz, 压缩, 工具
发布在 SVG相关 | 24 条评论 »
2016年02月25日 by 张 鑫旭 阅读 53280 次, 今日 3 次
CSS镂空图片,由于颜色是CSS属性值控制,如color或者background-color, 因此可以实现transition过渡效果,同时节约资源。然而有个很严重的问题,就是加载时候,容易出现色块,而本文就将展示如何解决色块的问题,让好的技术更加适用!
有demo有截图有必要的源代码展示,希望本文的内容可以对您的学习有所帮助!
阅读全文…
标签: background-color, color, content, css sprites, SVG Sprite, transition, 背景透明
发布在 CSS相关 | 21 条评论 »
2016年02月4日 by 张 鑫旭 阅读 80224 次, 今日 5 次
<textarea>
元素,俗称“文本域”,或者“多行文本框”,其自带原生的HTML属性rows
表示行的意思,可以改变<textarea>
的可视区域高度,cols
表示列,可以改变<textarea>
的可视区域宽度。
下面问题来了,我想很多小伙伴知道cols
和rows
可以影响文本域的尺寸,那cols
和rows
不同的数值和最终展示的像素尺寸之间有没有什么关系呢?可不可以通过公式计算呢?最终表现是否还受到其他CSS属性的影响呢?
本文就将解答上面的这些疑惑,一起进去看看吧~
阅读全文…
标签: cols, height, rows, textarea, width
发布在 CSS相关 | 16 条评论 »
2016年01月27日 by 张 鑫旭 阅读 38545 次, 今日 2 次
ont属性值除了支持常用的缩写,还支持系统关键字,这种用法在某些场景下非常的有用。本文就带你前去一探究竟。有demo有源代码有截图,希望本文的内容能够对您的学习有所帮助!
阅读全文…
标签: font, font-family, 中文字体, 字体, 设备字体
发布在 CSS相关 | 11 条评论 »