文章关键字 ‘图片’

借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海

2017年09月19日,星期二

iPhone X造型上有个显著的特质,就是有个明显的刘海。

然后,也出现了一些酷酷的交互,例如页面滚动的时候,列表会自动绕着iPhone X的刘海排列。看微博评论,好像觉得这个效果实现很难,实际上,CSS3里面针对这种特定形状环绕的效果已经支持很久了,CSS3 Shapes和CSS3 Regions都是可以实现的,本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。

阅读全文…

CSS百分比padding实现比例固定图片自适应布局

2017年08月17日,星期四

对于绝大多数都布局,我们并不要求非要比例固定,但是有一种情况例外,那就是图片,因为图片原始尺寸它是固定的。在传统的固定宽度的布局下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现的宽度很可能是不确定的……

阅读全文…

小tips: CSS或JS实现gif动态图片的停止与播放

2015年12月5日,星期六

如题,本文介绍如何使用CSS或者JS等前端方法实现代码控制gif图片的暂停或者播放。一如既往,有demo有截图还有必要的源代码展示,更关键的是,本文gif比较多……

阅读全文…

响应式图片srcset全新释义sizes属性w描述符

2014年10月19日,星期日

srcset为响应式图片属性,12年就出来了,不过今年4月份还是5月份的出了新的规范,与之前的srcset完成独立的表意,同时新增了新的属性sizes, 用来实现更好的响应式布局,同时赋予了w描述符新的含义。本文就是介绍这些全新的规范含义,较深入。丰富的demo、截图以及源代码展示,相信会对您的学习有所帮助的!

阅读全文…

小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

2013年11月21日,星期四

前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等。其中,“毛玻璃”一次梆梆出世,一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之,国内有之,国外也有之……

虽然本文标题也有“毛玻璃”二字,sorry,是“三字”。但是,并不是介绍如何实现毛玻璃效果的,而是介绍毛玻璃效果实现的基础——模糊。哈哈,恕我取巧,借用“毛玻璃”之词,沾沾喜气,散发芳气;蜂飞蝶舞,围观博主。

本文很单纯,就是图片模糊效果的实现。demo、源代码、截图、拓展以及御用模特应有尽有,希望本文的内容能够对您的学习有所帮助!

阅读全文…

前端设计必会技能-gif动画图片制作

2013年01月15日,星期二

gif动画图片是web制作中非常常用的,可以说是前端必会技能。本文就介绍了如何在Adobe flash以及Adobe photoshop中制作gif动画图片。很多截图,希望本文的内容能够对您的学习有所帮助。

阅读全文…

渐进式jpeg(progressive jpeg)图片及其相关

2013年01月7日,星期一

网络上那些色色的照片都是.jpg格式的(“色色”指的是色彩斑斓的意思)。
不知诸位有没有注意到,这些jpg格式的图片在呈现的时候,有两种方式,一种是自上而下扫描式的,还有一种就是先是全部的模糊图片,然后逐渐清晰(就像GIF格式的交错显示),例如下面的示意……

阅读全文…

使用SVG实现gradient背景渐变

2011年09月23日,星期五

现在现代浏览器都对CSS3的渐变支持良好,加上IE的渐变滤镜,可以在不使用图片的情况下实现各个浏览器的两色渐变效果。这里,再简单介绍下如何使用svg实现元素背景的垂直渐变,水平渐变,斜向渐变,或是径向渐变,以及更加复杂的多层渐变。

耳熟能详的唠叨:本文提供demo页面,丰富的截图以及必要的源代码展示。希望本文的内容可以对您的学习有所帮助。

阅读全文…

基于canvas画布的两个炫酷效果展示

2011年05月17日,星期二

HTML5 canvas这个玩意用通俗的话来讲就是一块用来画画的布,不过这不是普通的布,这是个类似于神笔马良的那个神笔一样神奇的东西,可以画出很多精湛美妙的东西。本文就展示两个基于canvas的炫酷效果,可以让我们对canvas的潜力有个比较直观的认识。一如既往,有demo页面,有效果截图,相关源代码展示。本文甚至还有video视频展示,总之,希望本文的内容能够对您 学习有所帮助。

阅读全文…

页面可用性之img标签longdesc属性与HTML5

2011年04月8日,星期五

国外就页面可用性方面的讨论是很多也是很深的,貌似关注longdesc属性的前端相关人员还是很多的,相关的讨论也较多。相比国内,就淡得多。其实自己之前对该属性也是七窍只通六窍——一窍不通。所以,不想班门弄斧,本文就简单介绍下longdesc属性相关的一些内容,一些深入的可用性方面的东西自己确实业余的很,就不提及了。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…