0
선형 그라디언트를 사용하여 CSS로 만든 대각선이있는 페이지가 있습니다.페이지의 반복 선형 그라데이션
background: -webkit-linear-gradient(-63.5deg, #999cdb 50%, #f6bdbd 50%);
이렇게하면 오른쪽 위 모퉁이에서 왼쪽 하단 모서리까지 대각선이됩니다. 문제는 사용자가 내 로그인/가입 양식을 클릭하면 모델의 높이가 변경된다는 것입니다. 따라서 대각선은 위치를 다시 계산하지 않습니다. 선형 그래디언트가 반복되고 그저 추한 것입니다.
누구나 포지셔닝을 다시 계산하는 방법을 알고 있습니까? 나는 많은 것을 시도하고 성공하지 못했습니다. 감사. 여기
는 HTML 코드입니다 :<!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>
그리고 여기에 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:
코드 pleaaaase을. – nicael
문제를 시각화하기 위해 데모를 제공 할 수 있습니까? – Paul
코드 게시 됨, 여러분! – wagnerdelima