OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

CSS的力量:用一个DIV画图


分享到
分类 心得体会   关键字 展示   发布 ourjs  1409126067462
注意 转载须保留原文链接,译文链接,作者译者等信息。  
这些图片都是用一个DIV绘制出来的,其实原理并不复杂。



这些图片都是由CSS绘制出来的,通过background-image叠加实现,

如蘑菇头的实现,通过 radial-gradient 径向渐变 , linear-gradient 线性渐变相互叠加实现,如:

div {
  width: 170px;
  height: 140px;
  background-image: 
        radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%),
        linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%),
        radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%),
        radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
        radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
        linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
        border-radius: 140px 140px 80px 80px;
}

在线演示:在此

同时有前后遮挡关系的通过:before和:after伪元素的background-image来实现。

PS: 此种手法对并不完全支持旧版IE
原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. OurJS-免费开源的博客引擎,论坛系统,网站模板和轻量级的CMS
  2. 痛苦的Java程序员
  3. JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp vs. NPM
  4. JavaScript中的继承,构造函数以及new关键字的作用
  5. 微软Azure云推出基于JSON的NoSQL数据库DocumentDB
  6. TJ Holowaychuk将Express维护权移交给StrongLoop
  7. Google官方支持的NodeJS访问API,提供后台登录授权
  8. 前置逗号是不好的JavaScript代码书写习惯吗?
  9. 有可能将CSS应用到一个字符的一半吗?
  10. Amazon云增长过快,吓坏股东
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. 读懂心理学:网页界面设计实用指南三则
  2. 树莓派的联合创始人访谈 - 我们是怎么让大家都成为DIY黑客的
  3. CSS字体大小: em与px、pt、百分比之间的对比
  4. Readme文档驱动型开发
  5. 皇帝的新衣:Node.js
  6. “设计师思维”正在毁灭我们
  7. 现在,你为什么应该学Node.js
  8. 7件你不知道但可以用CSS做的事
  9. NODEJS是人性化的
  10. 用JavaScript的5个原因

 关键字 - 展示
  1. 在access数据库中用SQL获取所有表名
  2. WeMall微信商城源码活动报名插件代码详情
  3. Wemall外卖版商城系统商城源码更新v1.3版
  4. CSS的力量:用一个DIV画图
  5. Chrome支持ES6字符串模板解析
  6. 不需要密码的登录
  7. 基于 Web 的 Go 语言 IDE
  8. SpiderMonkey的JavaScript引擎[Firefox]性能超越V8[Chrome]
  9. 使用Node编写的Sublime代码格式化工具插件(HTML/CSS/JS)
  10. 读懂心理学:网页界面设计实用指南三则

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号