css实现白云飘飘背景登录表单页面效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现白云飘飘背景登录表单页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> @charset "utf-8"; /* Reset CSS */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { background: #DCDDDF ; color: #000; font: 14px Arial; margin: 0 auto; padding: 0; position: relative; } h1{ font-size:28px;} h2{ font-size:26px;} h3{ font-size:18px;} h4{ font-size:16px;} h5{ font-size:14px;} h6{ font-size:12px;} h1,h2,h3,h4,h5,h6{ color:#563D64;} small{ font-size:10px;} b, strong{ font-weight:bold;} a{ text-decoration: none; } a:hover{ text-decoration: underline; } .clearfix:after,form:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .container { margin:75px auto 0 auto; position: relative; width: 900px; } #content { background: #f9f9f9; background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%); background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%); background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%); background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%); background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%); /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 ); */ -webkit-box-shadow: 0 1px 0 #fff inset; -moz-box-shadow: 0 1px 0 #fff inset; -ms-box-shadow: 0 1px 0 #fff inset; -o-box-shadow: 0 1px 0 #fff inset; box-shadow: 0 1px 0 #fff inset; border: 1px solid #c4c6ca; margin: 0 auto; padding: 25px 0 0; position: relative; text-align: center; text-shadow: 0 1px 0 #fff; width: 400px; } #content h1 { color: #7E7E7E; font: bold 25px Helvetica, Arial, sans-serif; letter-spacing: -0.05em; line-height: 20px; margin: 10px 0 30px; } #content h1:before, #content h1:after { content: ""; height: 1px; position: absolute; top: 10px; width: 27%; } #content h1:after { background: rgb(126,126,126); background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); right: 0; } #content h1:before { background: rgb(126,126,126); background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); left: 0; } #content:after, #content:before { background: #f9f9f9; background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%); background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%); background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%); background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%); background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%); /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 ); */ border: 1px solid #c4c6ca; content: ""; display: block; height: 100%; left: -1px; position: absolute; width: 100%; } #content:after { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); top: 0; z-index: -1; } #content:before { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); top: 0; z-index: -2; } #content form { margin: 0 20px; position: relative } #content form input[type="text"], #content form input[type="password"] { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset; -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset; -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset; -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset; box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background: #eae7e7 url(//repo.bfw.wiki/bfwrepo/images/login/8bcLQqF.png) no-repeat; border: 1px solid #c8c8c8; color: #777; font: 13px Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 15px 10px 15px 40px; width: 80%; } #content form input[type="text"]:focus, #content form input[type="password"]:focus { -webkit-box-shadow: 0 0 2px #ed1c24 inset; -moz-box-shadow: 0 0 2px #ed1c24 inset; -ms-box-shadow: 0 0 2px #ed1c24 inset; -o-box-shadow: 0 0 2px #ed1c24 inset; box-shadow: 0 0 2px #ed1c24 inset; background-color: #fff; border: 1px solid #ed1c24; outline: none; } #username { background-posi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0