如何用CSS3制作一个漂亮的登录框_html/css_WEB-ITnose

DEMO

漂亮的登录框

作为一个新手,个人觉得难点在:1.阴影的使用(外框,账户栏,密码栏,button)2.账户栏,密码栏的布局3.button颜色渐变下面给出一些思路,也希望大家提供一些简洁的方法帮助更多的新手。


HTML 代码如下:

<body>    
Login to love.ly

背景框样式:

背景

  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:   ??||}也就是:E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}换句说:对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

box-shadow取值:阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为“inset”时,其投影就是内阴影;X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部;阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。


账户栏,密码栏的布局:

用户栏、密码栏

账户栏,密码栏的阴影同上面的背景框的做法,就不多解释了,难点主要在如何在focus这两个input的时候如何改变整个账户栏,密码栏背景颜色。因为我们在focus的时候账户栏,密码栏中前面的小图标不能消失,所以我们用一个span标签将icon放置到input标签前面。HTML代码如下:

  • 为了达到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颜色渐变:

    button

    button:hover

    button:active

    我们需要先将将button的样式做出来,这里介绍一下CSS3的背景渐变属性linear-gradient语法:

    :linear-gradient([ ,]? [, ]+);:[ left | right ]? [ top | bottom ]? || ? [  |  ]?

    取值:

    left:设置左边为渐变起点的横坐标值。right:设置右边为渐变起点的横坐标值。top:设置顶部为渐变起点的纵坐标值。bottom:设置底部为渐变起点的纵坐标值。 :用角度值指定渐变的方向(或角度)。 :指定渐变的起止颜色。 :指定颜色。请参阅颜色值 :用长度值指定起止色位置。不允许负值 :用百分比指定起止色位置。

    这个取色是一个比较繁琐的过程,这里可以给大家推荐一款比较讨巧的方法,使用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);}

    为了方便大家这里把整个DEMO的CSS链接给出:CSS。

    郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

    郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

    留言与评论(共有 0 条评论)
    昵称:
    匿名发表
       
    验证码: