ホームページ > 記事 > ウェブフロントエンド > CSS3_html/css_WEB-ITnose を使用して美しいログイン ボックスを作成する方法
CSS3_html/css_WEB-ITnose を使用して美しいログイン ボックスを作成する方法
- WBOYオリジナル
- 2016-06-21 08:48:371291ブラウズ
デモ
美しいログイン ボックス
初心者として、私は個人的に次の点に問題があると感じています。 1.外枠、アカウントバー、パスワードバー、ボタン) 2. アカウントバー、パスワードバーのレイアウト 3. ボタンの色のグラデーション ここにいくつかのアイデアがありますので、提供していただければ幸いですより多くの初心者を助けるための簡潔なもの。
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轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow 値: シャドウ タイプ: このパラメーターは、値が設定されていない場合はオプションの値です。デフォルトの投影方法は外側のシャドウです。その固有の値が「inset」の場合、外側のシャドウは内側のシャドウに変わります。つまり、シャドウ タイプが「inset」に設定されている場合、投影は内側のシャドウになります。内側の影; X-offset : は、影の水平オフセットを指します。値が正の場合、影はオブジェクトの右側にあります。値が負の場合、影はオブジェクトの左側にあります。Y-offset: は、正の場合は正または負の値になります。それ以外の場合、その値が負の場合、影はオブジェクトの上部にあります。 シャドウのぼかし半径: このパラメータはオプションです。ただし、値が 0 の場合は、影にブラー効果がないことを意味します。シャドウ拡張半径: このパラメータは次のとおりです。オプションで、値は正または負の値を指定できます。値が正の場合、影全体が拡張され、それ以外の場合、影の色: このパラメータは小さくなります。色が設定されていない場合、ブラウザはデフォルトの色を使用しますが、特に Webkit カーネル下の Safari および Chrome ブラウザではデフォルトの色が異なるため、使用しないことをお勧めします。このパラメータを省略するには、
アカウント列、パスワード列のレイアウト:
ユーザー列、パスワード列
アカウント列、パスワード列の影は上記の背景ボックスと同じですが、この 2 つの入力に注目すると、主にアカウント列とパスワード列全体の背景色を変更する方法が難しくなります。アカウント欄とパスワード欄の前にある小さなアイコンはフォーカスしても消えないので、spanタグを使って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>
フォーカス効果を実現するには、入力のサイズを div.text と同じサイズに調整する必要があります。このとき、span タグは常に入力の前のスペースを占めます。 アイコンの位置を調整した後、position:absolute を使用して入力に移動します。右側に注目すると、プレースホルダーと入力内容が表示され、入力全体がアカウント列とパスワード列で埋められます。具体的な 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;} ボタンの色のグラデーション:
ボタン
ボタン:hover
button:active
ここでは、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>：用百分比指定起止色位置。この色の選択は比較的面倒なプロセスです。ボタンジェネレーターを使用し、作成後にコードをコピーするだけの、より便利な方法をお勧めします。次に、ホバー スタイルとアクティブ スタイルを追加すると、ボタンが完成します。ボタンの 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);}参考までに、デモ全体の CSS リンクを示します: CSS。