这次给大家带来怎样用CSS3制作登录框,用CSS3制作登录框的注意事项有哪些,下面就是实战案例,一起来看一下。
作为一个新手,个人觉得难点在: 1.阴影的使用(外框,账户栏,密码栏,button) 2.账户栏,密码栏的布局 3.button颜色渐变 下面给出一些思路,也希望大家提供一些简洁的方法帮助更多的新手。
HTML 代码如下:
<body>
<div class="wrapper">
<div class="header">Login to <span>love.ly</span></div>
<form action="" method="post">
<ul>
<li>
<div class="text">
<span class="yonghu"></span><input type="text" placeholder="IconDeposit">
</div>
</li>
<li>
<div class="password">
<span class="mima"></span><input type="password" placeholder="">
</div>
</li>
<li class="remember">
<input type="checkbox">Remember Me </li>
<li>
<a href="">Forgot username or password?</a>
</li>
<li>
<input type="button" value="Login">
</li>
</ul>
</form>
<div class="footer">
<p>Love.ly Personal Blog .PSD Template <a href="">Copyright 2012 Matt Gentile</a></p>
<p><a href="">Love.ly Home</a> | <a href="">Bolg </a> | <a href="">Work</a> | <a href="">Terms of Use</a> | <a href="">Contact Me</a></p>
</div>
</div></body>
form{ background: #cccccc; width: 260px; height: 260px; margin: 35px auto; padding: 30px; box-shadow:0px 1px 2px 1px #aaaaaa,
inset 0px 1px 1px rgba(255,255,255,0.7); border-radius: 3px;
}
box-shadow语法:
E {box-shadow: <length> <length> <length>?<length>?||<color>}
也就是:E {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 换句说: 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
![](http://freedede.oss-cn-hangzhou.aliyuncs.com/2020/9/Mr2U3i.png?x-oss-process=style/syzhong)
box-shadow取值: 阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为“inset”时,其投影就是内阴影; X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边; Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部; 阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊; 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小 阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。
账户栏,密码栏的布局:
![](http://freedede.oss-cn-hangzhou.aliyuncs.com/2020/9/iUZVJz.png?x-oss-process=style/syzhong)
账户栏,密码栏的阴影同上面的背景框的做法,就不多解释了,难点主要在如何在focus这两个input的时候如何改变整个账户栏,密码栏背景颜色。因为我们在focus的时候账户栏,密码栏中前面的小图标不能消失,所以我们用一个span标签将icon放置到input标签前面。HTML代码如下:
<li> <div class="text">
<span class="yonghu"></span><input type="text" placeholder="IconDeposit">
</div></li><li> <div class="password">
<span class="mima"></span><input type="password" placeholder="">
</div></li>
为了达到focus的效果我们需要把input的大小调整到和div.text同样大小,这时我们发现span标签会一直占据input前面的空间,这时我们需要span使用position:absolute使其脱离文档流,调整好icon的位置后,对input使用padding-left使placeholder,以及我们focus时输入的内容右移,然后整个input就充满了账户栏,密码栏。具体的CSS样式如下:
ul li div{ width: 260px; height: 40px; background: #e1dcd8; color: rgb(98,94,91); box-shadow: inset 0px 2px 5px #aaaaaa; border-radius: 5px; position: relative;
}ul li .yonghu{ font-family: iconfont; position: absolute; top: 12px; left: 10px;
}ul li .mima{ font-family: iconfont; position: absolute; top: 12px; left: 10px;
}ul li div input{ height: 40px; width: 190px; padding: 0 35px; border: none; background: #e1dcd8; color: rgb(98,94,91); box-shadow: 0px 1px 1px rgba(255,255,255,0.7),
inset 0px 2px 5px #aaaaaa; border-radius: 5px;
}ul li input:focus{ outline: none; background: #f5f2ef;
}
我们需要先将将button的样式做出来,这里介绍一下CSS3的背景渐变属性linear-gradient: 语法:
<linear-gradient>:linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);<point>:[ left | right ]? [ top | bottom ]? || <angle>?<color-stop>:<color> [ <length> | <percentage> ]?
取值:
left:设置左边为渐变起点的横坐标值。 right:设置右边为渐变起点的横坐标值。 top:设置顶部为渐变起点的纵坐标值。 bottom:设置底部为渐变起点的纵坐标值。 <angle>:用角度值指定渐变的方向(或角度)。 <color-stop>:指定渐变的起止颜色。 <color>:指定颜色。请参阅颜色值 <length>:用长度值指定起止色位置。不允许负值 <percentage>:用百分比指定起止色位置。
这个取色是一个比较繁琐的过程,这里可以给大家推荐一款比较讨巧的方法,使用button生成器,制作好以后把代码复制过来就好了。然后加上hover,active样式我们的button就完成了。 下面是button的CSS样式:
ul li input[type*="button"]{ width: 100%; height: 40px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #ffffff; background: -moz-linear-gradient(
top,
#94aa64 0%,
#7a924a 50%,
#607738); background: -webkit-gradient(
linear, left top, left bottom,
from(#94aa64), color-stop(0.50, #7a924a), to(#607738)); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #7d8862; -moz-box-shadow: 0px 1px 0px rgba(170,170,170,1),
inset 0px 1px 1px rgba(255,255,255,0.7); -webkit-box-shadow: 0px 1px 0px rgba(170,170,170,1),
inset 0px 1px 1px rgba(255,255,255,0.7); box-shadow: 0px 1px 0px rgba(170,170,170,1),
inset 0px 1px 1px rgba(255,255,255,0.7); text-shadow: 0px -1px 0px rgba(000,000,000,0.3), 0px 0px 0px rgba(255,255,255,0);
}ul li input[type*="button"]:hover{ opacity: 0.8;
}ul li input[type*="button"]:active{ width: 100%; height: 40px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #ffffff; background: -moz-linear-gradient(
top,
#607738 0%,
#7a924a 50%,
#94aa64 ); background: -webkit-gradient(
linear, left top, left bottom,
from(#607738), color-stop(0.50, #7a924a), to(#94aa64)); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #7d8862; -moz-box-shadow: 0px -1px 0px rgba(170,170,170,1),
inset 0px -1px 1px rgba(255,255,255,0.7); -webkit-box-shadow: 0px -1px 0px rgba(170,170,170,1),
inset 0px -1px 1px rgba(255,255,255,0.7); box-shadow: 0px -1px 0px rgba(170,170,170,1),
inset 0px -1px 1px rgba(255,255,255,0.7); text-shadow: 0px 1px 0px rgba(000,000,000,0.3), 0px 0px 0px rgba(255,255,255,0);
}
相信看了本文案例你已经掌握了方法,更多精彩请关注爱上源码网其它相关文章!
相关阅读:
JS的闭包与定时器
JS的时间对象与引用类型
以上就是怎样用CSS3制作登录框的详细内容,更多请关注爱上源码网其它相关文章!
微信
分享
相关标签:CSS3 样式表 css
本文原创发布爱上源码网,转载请注明出处,感谢您的尊重!
- 上一篇:JavaScript数组-字符串-数学函数
- 下一篇:深入分析JS函数
相关文章
相关视频
- 奇妙的 CSS shapes(CSS图形)
- IE、火狐、谷歌浏览器下兼容统一select样式
- 神奇的 conic-gradient 圆锥渐变
- 利用html实现一个三级菜单
- 怎样用CSS3制作登录框
- CSS3简介
- CSS3 RGBA颜色
- css3 linear-gradient线性渐变
- css3 radial-gradient()向渐变
- CSS3 text-shadow文字阴影
本文有爱上源码下载完入驻作者发布,如果对您版权造成侵害,可以联系本站站长管理进行维权删除,本站收到维权24小时内进行处理,谢谢您关注23ym.cn!
本站分享大量程序员技术文章以及对编程开发的初级入门教程,包括图文讲解笔记和高清视频下载~ |