0
Ich habe eine Seite mit einer Diagonale mit CSS, mit linearen Gradienten.Wiederholten linearen Gradienten auf Seite
background: -webkit-linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);
Das wird eine diagonale Linie von der rechten oberen Ecke bis zur linken unteren Ecke machen. Das Problem ist, dass, wenn der Benutzer auf mein Anmelde-/Anmeldeformular klickt, das Modell seine Höhe ändert. Und so berechnet die Diagonale ihre Positionierung nicht neu. Der lineare Gradient wiederholt sich und das ist nur hässlich.
Hat jemand eine Idee, wie man seine Positionierung neu berechnen lassen? Ich habe viel versucht und es ist mir nicht gelungen. Vielen Dank. Hier
ist der HTML-Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sweety & Co. Pro</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>-->
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../static/css/style_pages.css">
<link rel="stylesheet" href="../static/css/sign-in-up.css">
<style>
#body {
display: block;
padding: 1%;
margin-bottom: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div id="con">
<div id="header">
<a href="#"><img src="../static/img/logo.svg" width="314" height="81"> </a>
</div>
<div id="body">
<div class="wrapper">
<div class="">
<ul class="tab-group">
<!--<li style="z-index: 7;"><span class="underline"><a href="#"><span>link</span></a> </span> </li>-->
<li class="tab active"><a id="asignin" href="#login"><span>SIGN IN</span></a></li>
<li class="tab"><a id="asignup" href="#signup"><span>SIGN UP</span></a></li>
</ul>
</div>
<div class="tab-content">
<div id="login">
<form>
<div class="container">
<div class="inputfield">
<input type="email" id="email-login" required>
<label for="email-login">Email</label>
</div>
<div class="inputfield">
<input type="password" id="password-login" required>
<label for="password-login">Password</label>
</div>
<div class="inputfield ">
<input class='toggle' type="checkbox" name='check-4'>
<p style="display: inline; margin-left: 5px" > <b>Keep me Signed in</b></p>
</div>
<div class="inputfield">
<!--<button type="button" class="btn btn-primary btn-lg btn-block">SIGN IN</button>-->
<!--<a role="button" type="submit">SIGN IN</a>-->
<input type="submit" value="SIGN IN">
</div>
</div>
</form>
</div>
<div id="signup">
<div class="splash">
<h2>Get your time and money on track</h2>
<h1>$9.90 </h1><h2>/month</h2>
</div>
<form>
<div class="container">
<div class="inputfield halfwidth">
<input type="text" id="firstname" required>
<label for="firstname">First Name</label>
</div>
<div class="inputfield halfwidth">
<input type="text" id="lastname" required>
<label for="lastname">Last Name</label>
</div>
<div class="inputfield">
<input type="email" id="email" required>
<label for="email">Email</label>
</div>
<div class="inputfield halfwidth">
<input type="password" id="password" required>
<label for="Password">Password</label>
</div>
<div class="inputfield halfwidth">
<input type="password" id="re-password" required>
<label for="Re-Password">Re-Password</label>
</div>
<div class="inputfield halfwidth">
<div class="select-wrapper select--white">
<select name="demo">
<option value="freelancer" selected>freelancer</option>
<option value="small">small company (1-10)</option>
<option value="medium">medium company (11-50)</option>
</select>
</div>
</div>
<div class="inputfield halfwidth">
<div class="controls">
<input class='toggle' type="checkbox" name='check-4'>
</div>
<div id="terms"> <p>Accept <a href="#terms">terms</a> and conditions.</p>
</div>
</div>
</div>
</form>
<div id="basebtpay">
<div id="btpay"><img src="../static/img/paypal.png"></div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<img src="../static/img/sco.svg" width="129" height="79">
</div>
</div>
<script src="../static/js/index.js"></script>
</body>
</html>
Und hier ist die CSS:
html{
height: 100%;
}
body {
/*height: 100%;*/
font-size: 62.5%;
margin:0;
padding:0;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
-o-text-size-adjust: none;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
background-repeat: no-repeat;
background-attachment: fixed;
}
body {
}
h1, h2, h3, h4, h5, h6 { /*reset for mobile browsers */
-webkit-font-smoothing: antialiased !important;
}
body {
position: relative;
background: #B3DCEC;
/*background: -moz-linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);*/
/*background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, #999cdb), color-stop(50%, #f6bdbd),);*/
/*background: -webkit-linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);*/
/*background: -o-linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);*/
/*background: -ms-linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);*/
background: -webkit-linear-gradient(top left, #999cdb 50%, #f6bdbd 50%);
background: -moz-linear-gradient(top left, #999cdb 50%, #f6bdbd 50%);
background: -o-linear-gradient(top left, #999cdb 50%, #f6bdbd 50%);
background: linear-gradient(to bottom right, #999cdb 50%, #f6bdbd 50%);
/*background: linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);*/
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#999cdb', endColorstr='#f6bdbd', GradientType=1);
font-family: 'Montserrat';
font-size: 1.4rem; /* =14px */
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:20px;
}
#body {
display: block;
padding: 5%;
margin-bottom: 200px;
padding-bottom: 150px;
}
#footer {
position: relative;
text-align: center;
bottom: 0;
display: block;
width: 100%;
background: none;
color: #003;
margin-top: 30px;
height: 100px;
}
#footer img {
width: 100%;
padding-top: 20px;
display: inline-block;
}
p {font-family: 'Montserrat'; font-size: 1.4rem;
color:#fff;}
a { color:#9A9ADD;
text-decoration:underline;}
.clear {clear:both;}
.inspiration {
color: rgba(255, 255, 255, .8);
font-size: 18px;
font-weight: 500;
padding-bottom: 32px;
text-align: center;
}
.inspiration a {color: rgba(255, 255, 255, .8);}
.inspiration a:hover {color: rgba(255, 255, 255, .5);}
.inspiration a:active {color: rgba(255, 255, 255, .3);}
.splash-left h1 {
letter-spacing: -1rem;
font-family: 'montserrat';
font-weight: bold;
color: #fff;
line-height: 9rem;
font-size: 11.4rem;
}
.splash-left {
margin: 5%;
display: inline-block;
padding-bottom: 0%;
position: relative;
width: 30%;
}
.splash {
padding: 50px;
font-family: 'Source Sans Pro';
font-weight: bold;
color: #fff;
padding-bottom: 2%;
margin: auto;
position: relative;
width: 600px;
}
.wrapper {
background: #282731;
border-radius: 1px;
box-sizing: border-box;
-webkit-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
-moz-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
margin: auto;
position: relative;
max-width: 600px;
width: 100%;
}
h1 {
font-family: 'Montserrat';
font-size: 12.4rem;
line-height: 100%;
margin: initial;
letter-spacing: -1rem;
font-weight: 800;
}
h2 {
font-family: 'Montserrat';
font-weight: 700;
font-size: 3.0rem;
line-height: 100%;
letter-spacing: -0.2rem;
margin: initial;
}
h3 {
color: rgba(0, 0, 0, .6);
font-size: 1em;
font-weight: 400;
}
.textform {
border: solid 0px;
width: 245px;
height: 30px;
border-radius: 3px;
padding-left: 10px;
margin-right: 20px;
margin-bottom: 20px; }
form {}
.button {
background: #999CDB;
border: none;
color: #fafafa;
cursor: pointer;
font-size: 13px;
font-weight: 400;
border-radius: 40px;
margin-top: 5%;
padding: 16px;
display: inline-block;
width: initial;
text-decoration: none;
}
.button:hover {
background: #fff;
border: none;
color: rgb(40, 39, 49);
cursor: pointer;
font-size: 13px;
font-weight: 400;
border-radius: 40px;
margin-top: 5%;
padding: 16px;
display: inline-block;
width: initial;
text-decoration:none;
}
#btpay {
position: relative;
margin-top: 10px;
border-radius: 25px;
background: #FFC520;
padding: 5px;
width: 250px;
margin: auto;
text-align: center;
font-size: 14px;
cursor: pointer;
}
#basebtpay {
background-color:#353442;
padding:20px;}
.button:focus {
border: none;
color: rgba(0,0,0,.6);
outline: none;
}
.button:hover {
border: none;
color: rgba(0,0,0,.6);
}
.button:active {color: rgba(0,0,0,.8);}
.container {
box-sizing: border-box;
font-size: 0;
padding: 16px 48px 32px;
position: relative;
max-width: 100%;
width: 100%;
}
.photo {
background-image: url(https://pmcdeadline2.files.wordpress.com/2015/01/margot-robbie-good-photo.jpg?w=340&h=299&crop=1);
background-size: cover;
border-radius: 120px;
border: solid #FFF 8px;
height: 120px;
margin: auto;
margin-top: -85px;
text-align: center;
width: 120px;
}
.inputfield {
display: inline-block;
position: relative;
width: 100%;
}
.inputfield.halfwidth {width: 50%;}
input {
border: none;
border-bottom: solid 1px #F6BDBD;
box-sizing: border-box;
color: #F6BDBD;
font-size: 20px;
font-weight: 500;
line-height: 2;
background-color: #282731;
margin: 24px 0;
padding-right: 8px;
width: 100%;
}
input:focus {
border-bottom: solid 1px #F6BDBD;
outline: none;
}
label {
color: #F6BDBD;
font-size: 16px;
font-weight: 500;
left: 0px;
position: absolute;
text-transform: uppercase;
top: 32px;
transition: ease all .4s;
}
input:valid + label {
color: #9E9E9E;
font-size: 14px;
font-weight: 400;
top: 8px;
}
input:focus + label,
input:active + label {
color: #fff;
font-size: 14px;
font-weight: 500;
top: 8px;
}
#terms {
position: absolute;
margin-left: 67px;
margin-top: -24px; }
#terms p {
font-size:12px; }
/*FANCY CHECKER*/
div.controls {
border: 0px;
padding: 0px;
top: 10px;
position: relative;
margin-bottom: 0px;
}
div.controls h1 {
font-size: 18px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
display: inline-block;
position: absolute;
left: 10px;
top: -10px;
padding: 0 10px;
color: #fafafa;
background-color: #54bded;
}
input[type='radio'],
input[type='checkbox'] {
display: none;
cursor: pointer;
}
input[type='radio']:focus, input[type='radio']:active,
input[type='checkbox']:focus,
input[type='checkbox']:active {
outline: none;
}
input[type='radio'] + label,
input[type='checkbox'] + label {
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 25px;
margin-right: 10px;
color: #0b4c6a;
}
input[type='radio'] + label:before, input[type='radio'] + label:after,
input[type='checkbox'] + label:before,
input[type='checkbox'] + label:after {
content: '';
font-family: helvetica;
display: inline-block;
width: 18px;
height: 18px;
left: 0;
bottom: 0;
text-align: center;
position: absolute;
}
input[type='radio'] + label:before,
input[type='checkbox'] + label:before {
background-color: #fafafa;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input[type='radio'] + label:after,
input[type='checkbox'] + label:after {
color: #fff;
}
input[type='radio']:checked + label:before,
input[type='checkbox']:checked + label:before {
-moz-box-shadow: inset 0 0 0 10px #158EC6;
-webkit-box-shadow: inset 0 0 0 10px #158EC6;
box-shadow: inset 0 0 0 10px #158EC6;
}
/*Radio Specific styles*/
input[type='radio'] + label:before {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
input[type='radio'] + label:hover:after, input[type='radio']:checked + label:after {
content: '\2022';
position: absolute;
top: 0px;
font-size: 19px;
line-height: 15px;
}
input[type='radio'] + label:hover:after {
color: #c7c7c7;
}
input[type='radio']:checked + label:after, input[type='radio']:checked + label:hover:after {
color: #fff;
}
/*Checkbox Specific styles*/
input[type='checkbox'] + label:before {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
input[type='checkbox'] + label:hover:after, input[type='checkbox']:checked + label:after {
content: "\2713";
line-height: 18px;
font-size: 14px;
}
input[type='checkbox'] + label:hover:after {
color: #c7c7c7;
}
input[type='checkbox']:checked + label:after, input[type='checkbox']:checked + label:hover:after {
color: #fff;
}
/*Toggle Specific styles*/
input[type='checkbox'].toggle {
border: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0px;
appearance: none;
width: 55px;
height: 28px;
background-color: #fafafa;
position: relative;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
@inlcude box-shadow(none);
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
input[type='checkbox'].toggle:hover:after {
background-color: #c7c7c7;
}
input[type='checkbox'].toggle:after {
content: '';
display: inline-block;
position: absolute;
width: 24px;
height: 24px;
background-color: #aeaeae;
top: 2px;
left: 2px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
input[type='checkbox']:checked.toggle {
-moz-box-shadow: inset 0 0 0 15px #158EC6;
-webkit-box-shadow: inset 0 0 0 15px #F6BDBD;
box-shadow: inset 0 0 0 15px #F6BDBD;
}
input[type='checkbox']:checked.toggle:after {
left: 29px;
background-color: #282731;
}
/*CUSTOM SELECT*/
*, *:after, *:before {
box-sizing: border-box;
}
.position-center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.position-center .select-wrapper {
margin: 0 20px;
}
/*******************************
Styles to copy
*******************************/
/*
* Basic resets for select element
*/
.select-wrapper select {
width: auto;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border: none;
outline: none;
border-radius: 0;
/*IOS*/
}
.select-wrapper select::-ms-expand {
display: none;
/*IE10*/
}
/*
* Global styles
*/
.select-wrapper {
display: inline-block;
position: relative;
}
.select-wrapper:after {
content: '';
position: absolute;
height: 100%;
right: 0;
top: 0;
pointer-events: none;
background-position: left center;
}
.select-wrapper:before {
content: '';
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 1;
pointer-events: none;
text-align: center;
z-index: 2;
}
/*******************************
White theme
*******************************/
.select--white {
/*
* Customize options
*/
/*
* Hover styles
*/
/*
* Select element
*/
}
.select--white:after, .select--white select {
color: black;
background-color: #fff;
-webkit-transition: 100ms all cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: 100ms all cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.select--white:after {
width: 35px;
border: 1px solid #000;
border-radius: 0 20px 20px 0;
border-left: 0;
}
.select--white:before {
color: black;
right: 20px;
font-size: 15px !important;
font-family:Arial, Helvetica, sans-serif;
content: '\2193';
}
.select--white:hover:after, .select--white:hover select {
background-color: #e6e6e6;
}
.select--white select {
padding: 10px 20px;
font-size: 12px;
padding-right: 75px;
border: 1px solid #000;
border-radius: 20px;
color: black;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
.inputfield.halfwidth {width: 100% !important;}
.wrapper {
background: #282731;
border-radius: 1px;
box-sizing: border-box;
-webkit-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
-moz-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
margin-right:0px;
position: relative;
max-width: 450px;
width: 100%;
}
}
@media only screen and (max-width : 321px) {
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (max-width : 768px) {
.box {
width: 94% !important;
min-width: 270px !important;
border: solid 12px;
border-color: white;
margin-right: 2%;
float: left;
padding: 20px;
min-height: 180px !important;
margin-top: 4%;
font-size: 16px;
line-height: 15px;
cursor: pointer;
}
#hello h1 {color:#222;
font-size: 6rem !important;
letter-spacing: -.5rem;
line-height: 5rem;
}
.hello-boy {display:none !important; }
.button {
background: #999CDB;
border: none;
color: #fafafa;
cursor: pointer;
font-size: 13px;
font-weight: 400;
border-radius: 40px;
margin:0px;
margin-top: 5%;
padding: 16px;
display: inline-block;
width: initial;
text-decoration: none;
}
.button:hover {
background: #fff;
border: none;
color: rgb(40, 39, 49);
cursor: pointer;
font-size: 13px;
font-weight: 400;
border-radius: 40px;
margin:0px;
margin-top: 5%;
padding: 16px;
display: inline-block;
width: initial;
text-decoration:none;
}
#body {
padding: 13%;
}
.splash-left {
margin: 5%;
display: inline-block;
padding-bottom: 0%;
position: relative;
width: 90%;
}
.hello-boy {display:none;}
.splash-left h1 {
letter-spacing: -.5rem;
font-family: 'montserrat';
font-weight: bold;
margin-left: 0px;
color: #fff;
max-width: 100%;
width: 200px;
font-size: 9rem;
line-height: 7rem;
}
.inputfield.halfwidth {width: 100% !important;}
.splash {
font-family: 'Source Sans Pro';
font-weight: bold;
color: #fff;
padding-bottom: 5%;
margin: 0px;
position: relative;
width: 300px;
}
.wrapper {
background: #282731;
border-radius: 1px;
box-sizing: border-box;
-webkit-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
-moz-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59);
position: relative;
max-width: 450px;
width: 100%;
}
h1 {
font-family:'Montserrat';
font-size: 8.4rem;
line-height: 100%;
margin: initial;
}
h2 {
font-family: 'Montserrat';
font-size: 2rem;
line-height: 100%;
margin: initial;
margin-top: 20px;
letter-spacing: -1px;
}
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.inputfield.halfwidth {width: 100% !important;}
.hello-boy {display:none !important; }
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.inputfield.halfwidth {width: 100% !important;}
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width: 321px) and (max-width: 1024px) {
#menu {display:none;} }
@media only screen and (min-width: 321px) and (max-width: 1600px) {
.box {
width: 30% !important;
min-width: 160px;
border: solid 12px;
border-color: white;
margin-right: 2%;
float: left;
padding: 20px;
height: 180px !important;
margin-top: 4%;
display: inline-block;
font-size: 16px;
line-height: 15px;
cursor: pointer;
}
}
Images:
-Code pleaaaase:
diese verwendet werden. – nicael
Können Sie uns eine Demo zur Verfügung stellen, um das Problem zu visualisieren? – Paul
Code geschrieben, Leute! – wagnerdelima