Html y Css
Tutoriales y soluciones para desarrollo web

Generador de formulario para inicio de sesión centrado bootstrap

Crear un panel con un formulario de forma totalmente centrada en la página. Se emplea bootstrap para el responsive y estilo de los campos.

Iniciar sesión


Color principal

Color secundario

Dirección (en grados)
Color principal

Color secundario

Dirección (en grados)
Color del texto
Shadow



Código Html

                        
<html>
    <head>
    </head>
    <body>
        <div class="back-card">
            <div class="row">
                <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
                    <div class="card-title">Iniciar sesión</div>
                    <div class="card">
                        <div class="form-group">
                            <label>Correo electrónico</label>
                            <input id="poly-width" type="text" value="xxx@gmail.com" class="form-control input-value"/><br/>
                            <label>Contraseña</label>
                            <input id="poly-height" type="password" class="form-control input-value"/><br/>
                            <div style=" text-align: right;">
                            <button id="btn-reset" class="btn btn-default">Aceptar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

        

Código CSS

                .back-card{
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 30px;
	box-sizing: border-box;
	top:0;
	bottom: 0;
	background: -webkit-linear-gradient(30deg, #555555, #CCCCCC);
	background: -moz-linear-gradient(30deg, #555555, #CCCCCC);
	background: -o-linear-gradient(30deg, #555555, #CCCCCC);
	background: linear-gradient(30deg, #555555, #CCCCCC);
}

.back-card.row {
	position:relative;
	top: 50%;
	transform: translateY(-50%);
}

.card {
	background-color:white;
	padding: 40px 60px 40px 60px;
	margin-top: 100px;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-title {
	width:100%;
	height:100px;
	position: absolute;
	margin-left: -15px;
	border-radius: 2px;
	font-size: 30px;
	text-align: center;
	line-height: 100px;
	background-color: yellow;
	color: black;
	-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}