1. ホーム
  2. 質問と答え
  3. ページのリニアグラジエントの繰り返し

ページのリニアグラジエントの繰り返し

2016-08-01 4 views
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 &amp; 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:

Page during sign-in active

Page during sign-up active

出典

2016-08-01 wagnerdelima

+0

コードpleaaaase。 – nicael

+0

問題を視覚化するためのデモを教えていただけますか？ – Paul

+0

コードが投稿されました、皆さん！ – wagnerdelima

答えて

0

私はあなたの幅や高さの場合は、変更することができると思います固定度はうまくいかないでしょう。サイズに比例する必要があります。

これを使用することができます。

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%);

出典

2016-08-01 19:13:13

+0

それはうまくいかなかった。同じ問題が続く。まだ苦労している。 – wagnerdelima

+0

https://jsfiddle.net/21khur1d/あなたはそれのようなものをしたくないですか？あなたがフィドルの幅や高さを変更すると、それは常に望ましいコーナーにあります。 –

+0

問題は、基本的には、ページが読み込まれると、サインアップオプションが有効になり、対角線が完全にトレースされます。ただし、サインアップメニューオプションをクリックすると、再計算されません。あなたのコードはうまくいきませんでした。 – wagnerdelima

関連する問題

 関連する問題