正在攻克CSS3难题:radial。【已完美攻克】

简介:

前天看到一篇博,叫《我不是一个简单的WEB UI》,写得很好,设计也不错,都让我有联系作者的冲动。其中给出的几个设计对比确实就是设计中精益求精的表现。而实际上还会更细致,比如他的局部对比已经可以看见设计差异化了,这让设计师的工作效果瞬间体现出来,也会伴随着一阵成就感。

但是,还有很多更微妙的变化放在局部是看不出来的,必须当一切调整完,有了足够的量变积累,再前后整体上对比的时候才会发现已然不同,才会跳向质变。而这就非常困难了,因为你必须从局部处理起,又无法立竿见影。厚积薄发,那个厚积是要人命的。

噢,扯哪里去了,我要说的是文中的一张对比图。嗯,这个那个,我给iciba打广告了,这事儿有点意思~~~咦,这文居然是9月3日才发表的,很新啊~~~

anniu.jpg

右边的按钮是不是比左边的靓丽多了去了。我要攻克的就是把这个按钮,CSS3实现。

一直以来我都是用linear线性渐变来处理我们的按钮包括高光,linear线性渐变是非常简单的,效果也不错。问题在于linear没有办法实现右边那种漫射光按钮。radial,我一直知道但是因为一直满足于linear线性渐变就懒得研究。这两天因为重构我们的排行榜加上看见了上面这个按钮,我必须的,必须的攻克,而当我一摸到radial,靠,好烫,居然看不懂,网上也查不到详细资料,一个属性一个属性的试了半天后才找到一些感觉,但是我还是做不出来,还得继续搞。

当我攻克完后,我不但可以把排行榜的这张组合图片删了,而且随后把漫射光通过CSS照进全站后,视觉效果会狠狠上一个档次,这就是我的动力啊,鸡血啊~~~其实下面的效果也是可以用linear实现,因为可以把linear加在border-image上。

rank_title.png


发文一小时后,已完美攻克radial,完全吃透包括椭圆光柱的实现!很兴奋有点憋不住了,立刻全面应用,本周争取抽时间写篇文章全面、隆重、详细介绍Gradient:radial~~~


本文转自爆牙齿博客园博客,原文链接:http://www.cnblogs.com/yuntian/archive/2010/09/07/1820721.html,如需转载请自行联系原作者

相关文章
|
3月前
|
缓存 前端开发 JavaScript
|
2月前
|
前端开发 API 开发者
layui:从崛起到蜕变,前端框架的华丽篇章
layui:从崛起到蜕变,前端框架的华丽篇章
|
4月前
|
前端开发 算法 JavaScript
探索前端性能优化的新思路
在当今快节奏的互联网时代,用户对于网页加载速度和性能表现的要求越来越高。本文将介绍一些创新的前端性能优化策略,包括代码压缩、资源懒加载、使用Web Workers等,并探讨它们对网页性能的提升效果。
15 0
|
8月前
|
缓存 负载均衡 监控
如何攻克项目难点
如何攻克项目难点
|
前端开发 JavaScript
「CSS畅想」有一天,我遇到了一个奇特的路灯,眼里一下子有了光
用技术实现梦想,用梦想打开创意之门。今天分享用技术实现身边物品的快乐,一个用CSS绘制的路灯。
143 1
|
前端开发 JavaScript
热议:CSS为什么这么难学?一定是你的方法不对(上)
大家好,我是零一。前段时间我在知乎刷到这样一个提问:为什么CSS这么难学?
165 0
热议:CSS为什么这么难学?一定是你的方法不对(上)
|
人工智能 城市大脑 达摩院
华先胜:引入并驾驭“混乱”, 才能获得可贵的创新
申请纸质版杂志:https://survey.aliyun.com/apps/zhiliao/xsTiZ4YaM
388 0
|
前端开发 流计算 Web App开发
如何用纯 CSS 创作一盘传统蚊香
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84393147 效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
831 0
|
前端开发 Web App开发 JavaScript
如何用纯 CSS 创作一支诱人的冰棍
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84393564 效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
839 0