html怎么做小米logo,CSS3:一个标签画LOGO——小米
一个标签做小米Logo
这两天在米家入手了一特贵的周边,一时兴起想用css制作一下它的logo
至于为什么不用ps?因为我
话不多说,先上原图
HTML代码:
先简单分析一波,这个图片可分为三个部分,M的外面+M里面的竖+一个大写的I
可以看到有一小段圆角,这个时候就要用到border-radius
再回忆一下border-radius的用法及参数
border-radius属性其实可以分为四个其他的属性:
border-radius-top-left /*左上角*/
border-radius-top-right /*右上角*/
border-radius-bottom-right /*右下角*/
border-radius-bottom-left /*左下角*/
//提示:按顺时针方式
小米LOGO的圆角在右上角,那就设置border-radius-top-right为适当的值就OK,在那之前记得把设置border-bottom:none,不能设置透明色
如果设置透明色就会出现这样的效果
显然我们想要的不是这样的,为什么会出现这样的效果呢?
我们来看一下边框到底是怎样的
`border-right: 30px solid red;`
`border-left: 30px solid green;`
`border-top: 30px solid blue;`
`border-bottom: 30px solid teal;`
它的效果图是这样的(反相了)
虽然配色有点辣眼睛,但是可以看出边框的交界是一个斜角,所以把底边设置透明就会出现两个小角角,
设置为none就会变成一个直的脚了,但是设置为none对浏览器IE6,IE7不兼容,所以最好设置为border-bottom:0
代码如下:
.M {
width: 80px;
height: 80px;
border-radius: 0 45px 0 0;
border-top: 30px solid white;
border-right: 30px solid white;
border-left: 30px solid white;
border-bottom-width: 0;
}
此时的效果是这样的,
很好,完成了一大半,剩下的就是两条竖线了,这时有两种方法:
再创建两个div或者其他的标签来设置样式
利用CSS3中的伪元素来制作
由于创建另外的标签来制作基本上人人都会,就在此跳过,我们用伪元素来做,那么,什么是伪元素呢?
你一定知道伪类样式,比如hover,在做效果的时候经常用到,而hover是不会改变元素本身的样式的,鼠标移开后元素又恢复成原来的样子,这就给人一个假象,元素样式改变了,其实并没有,那伪元素也是一样,我们可以添加额外元素而不扰乱文档本身,这就是“伪元素”。伪元素:before和:after二者的作用为在元素之前或之后插入某些内容。(伪元素和伪类样式不一样,要注意用两个冒号连接)
此时,在M的外框里加入伪元素,代码如下:
.M::before {
content: "";
display: inline-block;
position: relative;
left: 25px;
top: 25px;
height: 55px;
width: 30px;
background-color: white;
}
此时的效果图如下:
此时已经完成一大半,还差个I,话不多说,搞起!
创建一个after伪元素并且调整样式:
.M::after{
content: " ";
display: inline-block;
position: relative;
left: 110px;
top: -30px;
height: 110px;
width: 30px;
background-color: white;
}
设置了这个I的伪元素后发现前面的before伪元素的位置也发生了变化,
调整后代码如下:
.M::before {
content: "";
display: inline-block;
position: relative;
left: 25px;
top: -30px;
height: 55px;
width: 30px;
background-color: white;
}
此时,小米的logo就完成了,效果图当当当当~:
最终图如下:
html怎么做小米logo,CSS3:一个标签画LOGO——小米相关推荐
- 一个帮忙画logo的网站,这个我没试过,不过我觉得淘宝更便宜一些吧
https://www.fiverr.com/categories/graphics-design/creative-logo-design?source=hplo_subcat_first_step ...
- 小米平板1 android5,小米平板5即将到来?对小米平板前几代做了一下总结
原标题:小米平板5即将到来?对小米平板前几代做了一下总结 关于小米平板 5 的到来,网上已经有很多配置上的推测了,这里总结一下之前小米发布的几代平板吧. 小米平板一代上市于 2014 年,搭载少见的英 ...
- 【项目经验】如果想在mapper.xml文件中的一个标签中写多条sql语句,则需要在jdbc的配置文件中稍做配置
如果想在mapper.xml文件中的一个标签中写多条sql语句,则需要在jdbc的配置文件中稍做配置: url=jdbc:mysql://127.0.0.1:3306/airipo?useUnicod ...
- 只用一个div画一个小米logo
小米发布了新logo 前段时间小米宣布了他们的新logo,但是细心的网友发现.小米的官网logo是这样实现的: 挺有趣的,我自己也实现一个试试 外边框使用border-box实现圆角(真logo是R角 ...
- 前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
- 网站优化三大标签以及logo优化常用方法
网站优化的三大标签 SEO是由英文Search Engine Optimization缩写而来, 中文意译为"搜索引擎优化"!SEO是指通过对网站进行站内优化.网站结构调整.网站内 ...
- 小米网络推广连夜更换品牌LOGO——科技越是进化就越接近生命的形态
小米抓住三月的尾巴在春季新品发布会上宣布正式启用全新LOGO,据说全新的小米LOGO是由国际著名设计师原研哉设计师修修改改历时三年时间完成的,宣称在全新设计理念中为小米品牌视觉融入东方哲学思考&quo ...
- abaqus画一个球 python_简单几步,100行代码用Python画一个蝙蝠侠的logo
蝙蝠侠作为DC漫画的核心人物之一,一直都受到广大粉丝的喜爱,而笔者作为DC的铁杆粉丝,自然也是老爷(粉丝对蝙蝠侠的昵称)的支持者.今天,笔者就用Python来画一个蝙蝠侠的logo,大概就是下图这个样 ...
- 【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录 页面展示 技术要点 代码实现 html代码 CSS代码 用到的图片 页面展示 本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...
最新文章
- 不错!基于Springboot 2.0 + LayUI开发的物流管理系统(已开源)
- python代码图片-python实现图片上添加图片
- Flask框架(flask中的数据库SQLAlchemy(python3),配置、模型类、创建表)
- 容器源码分析之TreeSet(五)
- [转]Installing Memcached on Windows
- iOS 自定义控件 progressView(环形进度条)
- For in + 定时器
- 【Ajax技术】JQuery的应用与高级调试技巧
- 征集大家的网站如何防范DDOS攻击解决方案
- Deep Convolutional Network Cascade for Facial Point Detection论文算法解析
- 关于Eclipse配置Tomcat8的问题
- 申报表计算机代码是什么,金税盘的维护费在申报表上面有一个要填写减免性质代码怎么填啊 ?那个代码是什么呢?...
- spring-boot集成kafka(包含zookeeper和kafka的下载介绍)
- 数学建模论文题目优选专业题目128个
- 华东师范大学计算机考研有多难,「华东师范大学考研详解」报录比70:1的专业,热度高到“爆炸”!...
- Java编程 猜字游戏
- 数商云大宗商品交易平台案例:打造B2B大宗电商供应链服务系统,落地产业互联网
- 挂名公司法人、董事、监事、高管的风险
- 理想主义者与现实主义者的差别
- java中 continue outer, break inner 简解