2015年03月16日 by 张 鑫旭 阅读 64319 次
MDN上对<position>
值解释是:一种CSS数据类型,2D坐标空间,用来设置相对盒子的坐标。
我们经常使用的background-position
的值就是<position>
值,最近刚介绍的object-position
的值也是<position>
值。
<position>
值支持1~4个值,可以是具体数值,也可以是百分比,也可以是……
阅读全文…
标签: background, calc, object-position, position, 定位, 百分比
发布在 CSS相关 | 10 条评论 »
2015年03月15日 by 张 鑫旭 阅读 34699 次, 今日 3 次
此效果用的是以前介绍过的两个技术实现,第一个就是CSS3实现纹理图案背景,第二个就是文字遮罩实现。两者合在一起就可以实现彩条文字效果了。
阅读全文…
标签: background, background-clip, background-size, gradient, text-fill-color, 渐变, 遮罩
发布在 CSS相关 | 4 条评论 »
2015年03月15日 by 张 鑫旭 阅读 166264 次, 今日 2 次
现代web显示环境万变,响应式布局(适配移动端)、半响应布局(宽窄屏适配)以及传统流体布局(任意宽度水平自适应)都比较常见,结果,在处理这些有着固定尺寸的元素的时候,就会遇到障碍,例如,一个2:1的视频,永远要等比例充满容器,但是,随着浏览器宽度不一样,容器的长宽比有可能小于2,也有可能大于2. 你说,你能轻松实现小于比例2时候,视频宽度100%;比例大于2的时候,高度100%吗?
显然,很麻烦,最后大多还是使用JS去把控。正是为了应对类似这样的响应式需求,object-fit和object-position才应运而生……
阅读全文…
标签: background, css3, object-fit, object-position, video, 图片剪裁
发布在 CSS相关 | 36 条评论 »
2015年03月11日 by 张 鑫旭 阅读 64799 次
几乎所有的网页头部都有源信息。除了我们常用的定义编码、关键字(name=”keywords”)、描述(name=”description”),还可以定义视区大小,缩放比例等(for 移动端),以及,定义网页的过期时间,Cookie的过期时间等等。
文本要介绍的内容,科科,跟上面都没关系……
阅读全文…
标签: cookie, meta, SEO, 关键字, 锚点跳转
发布在 CSS相关 | 9 条评论 »
2015年03月3日 by 张 鑫旭 阅读 56086 次
年前遇到此现象,在Chrome浏览器下,起初,我还以为是Chrome浏览器的bug.
今日原型重现,在各个现代浏览器下一测,乖乖隆地咚,都是一个尿性,看来是规范使然,不是bug啊!但是,由于现象实在诡异,到目前也想不通是个怎么回事,故在这里演示并询问在座的小伙伴们,为什么会有此现象?
现象描述……
阅读全文…
标签: border, border-collapse, display:table, display:table-cell, opacity
发布在 CSS相关 | 9 条评论 »
2015年02月15日 by 张 鑫旭 阅读 134469 次, 今日 2 次
不知大家有没有相关CSS中height:100%和height:inherit的有什么异同?是否可以替换使用?height:inherit的价值在哪里?
本文就将回答这一系列问题,同样的,有截图,有demo,还有必要的源代码展示,总之希望本文的内容对您的学习有所帮助。
阅读全文…
标签: css相关, height, height:100%, inherit, 绝对定位, 继承
发布在 CSS相关 | 17 条评论 »
2015年02月15日 by 张 鑫旭 阅读 37367 次, 今日 1 次
IE的Matrix矩阵变换,或者zoom缩放会改变元素原本占据的展示尺寸,位置等,与CSS3优雅的transform完全不一样,导致,我们需要对IE做额外的偏移。
但是,我们大多数人的数学都是体育老师交的,计算偏移值什么的,想想就大头娘娘了,难道,就不能跟CSS3 transform一样,就规规矩矩居中放大吗?
童鞋,略施小计,还是有办法滴……
阅读全文…
标签: Matrix, transform, zoom, 垂直居中, 水平居中, 矩阵, 缩放
发布在 CSS相关 | 4 条评论 »
2015年02月12日 by 张 鑫旭 阅读 203997 次, 今日 9 次
好久没写纯粹CSS相关知识的文章了,所谓新颖的CSS3技术之流占据了现在半壁江山。本文内容还是比较传统,立足基础,深入理解。希望可以帮助相关从业者有所成长。如题,本文着重分析流体特性下的自适应布局和BFC特性下的自适应布局,demo、截图以及源代码一个都不少,耐心看完,相信会有一番收获的。
阅读全文…
标签: BFC, display:inline-block, display:table-cell, inline-block, overflow:hidden, table-cell, 布局, 流动性布局, 自适应布局
发布在 CSS相关 | 64 条评论 »
2015年02月5日 by 张 鑫旭 阅读 119721 次, 今日 1 次
本文内容如题,图片动态局部毛玻璃模糊效果的实现,有图有文有码有实战,更有尔康亲临助阵,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: background-attachment, foreignObject, IE滤镜, SVG, webkit, 模糊, 毛玻璃效果, 滤镜, 遮罩, 高斯模糊
发布在 CSS相关, SVG相关 | 10 条评论 »
2015年01月27日 by 张 鑫旭 阅读 123410 次, 今日 4 次
有些空格很特殊,其宽度正好跟中文字符宽度有个特定的比例关系,于是,我们再实现一些布局的时候,就有了更轻松的方法……
本文推陈出新,同样,有截图,有demo, 有源代码展示,总之,希望本文的内容能够对你的学习有所帮助。
阅读全文…
标签: 压缩, 字体, 字符, 对齐, 空格, 转义
发布在 CSS相关 | 40 条评论 »