Sign-in UI
CSS3 Media Queries Compatible with Mobile & Desktops
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
/*=====================================================
@media only screen and (max-width : 1200px) {
}
@media only screen and (max-width : 979px) {
}
@media only screen and (max-width : 767px) {
}
@media only screen and (max-width : 480px) {
}
@media only screen and (max-width : 320px) {
}
Viewport
HTML
<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Signin Template</title> <link href="css/login.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <form class="form-signin" role="form"> <h2 class="form-signin-heading">Please sign in</h2> <input type="email" class="form-control" placeholder="Email address" required autofocus> <input type="password" class="form-control" placeholder="Password" required> <label class="checkbox"> <input type="checkbox" value="remember-me"> Remember me </label> <button class="btn" type="submit">Sign in</button> </form> </div> </body> </html>
CSS
@charset "utf-8";
/* CSS Document */
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin input[type="email"], .form-signin input[type="password"] {
margin-top: 20px;
}
.form-signin input:focus {
border-color:#428bca;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #428bca;
box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #67b168;
border-color:#428bca;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #428bca;
box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #428bca;
}
.form-control {
display:block;
width:100%;
*width:93%;
height:34px;
padding:6px 12px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
input, button, select, textarea {
font-family: Arial, Helvetica, sans-serif;
}
.btn {
-moz-user-select: none;
background-image: none;
cursor: pointer;
font-weight: 400;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
white-space: nowrap;
background-color: #428bca;
border-color: #0a4c84;
color: #fff;
display: block;
width: 100%;
border-radius: 6px;
font-size: 18px;
line-height: 1.33;
padding: 10px 16px;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
outline:thin dotted;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px
}
.btn:hover, .btn:focus {
color:#fff;
text-decoration:none;
background-color:#0a4c84;
border-color:#adadad
}
.btn:active, .btn.active {
background-image:none;
outline:0;
-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
box-shadow:inset 0 3px 5px rgba(0,0,0,.125)
}
.radio, .checkbox {
display: block;
margin-top: 10px;
min-height: 20px;
position: relative;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: inherit;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
}
End
CSS3 Media Queries Compatible with Mobile & Desktops
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
/*=====================================================
@media only screen and (max-width : 1200px) {
}
@media only screen and (max-width : 979px) {
}
@media only screen and (max-width : 767px) {
}
@media only screen and (max-width : 480px) {
}
@media only screen and (max-width : 320px) {
}
Viewport
No comments:
Post a Comment