Schatten, der Bildbiegung bildet

verweisen Sie bitte das Bild. Wie im Bild zu sehen, möchte ich das Bild vertikal biegen, indem ich ihm Schatten gebe. versucht viel, aber ich konnte es nicht bekommen.Schatten, der Bildbiegung bildet

<html> 
<head> 
    <title></title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

    <!-- Latest compiled JavaScript --> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<style type="text/css"> 
.main{ 
    background-image: url('http://www.detaildesignonline.com/contentimages/sky1285264350.jpg'); 
    min-height: 600px; 
    border-bottom-style: solid; 
    border-bottom-color: rgba(4,58,106,1); 
    border-bottom-width: 10px; 
} 
.heading{ 
    font-weight: 900; 
    color:#004B81; 
} 
.more{ 
    color:rgba(159,67,66,1); 
} 
.leftForm{ 
    background-color: rgba(224,237,222,1); 
    height: 350px; 
} 
.rightForm{ 
    background-color: rgba(253,253,253,0.7); 
    height: 350px; 
} 

</style> 
</head> 
<body> 
<div style="height:10px; background-color:orange"></div> 
    <div class="row"> 
     <div class="col-sm-1"> 
     </div> 
     <div class="col-sm-10"> 
      <div><img src="http://tollfreecustomercarenumber.com/wp-content/uploads/2015/11/ICICI-bank.jpg" height="100px" width="250px"></div> 
      <div class=""></div> 
     </div> 
     <div class="col-sm-1"></div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-1"> 
     </div> 
     <div class="col-sm-10 main"> 
      <div class="col-sm-1"> 

      </div> 
      <div class="col-sm-11"> 
       <h3 class="heading">We've got all your Forex needs covered!</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae mi et leo tristique <br>tincidunt ac nec est. Aenean volutpat mauris vitae erat ultricies varius.</p> 
       <p><b class="more">What's more? </b><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <br>vitae mi et leo tristique tincidunt ac nec est.</b></p> 
      </div> 
      <div class="col-sm-1"></div> 
      <div class="col-sm-5 leftForm"> 
        <form role="form"> 
        <br> 
        <h3 style="color:rgba(159,67,66,1); margin-top:0px">Sign In</h3> 
         <div class="form-group col-xs-8"> 
         E-Mail ID 
         <input type="email" style="border: 2px solid orange;" class="form-control" id="email"> 
         </div> 
         <div class="form-group col-xs-8"> 
         Password 
         <input type="password" style="border: 2px solid orange;" class="form-control" id="pwd"> 
         </div> 
         <div class="col-xs-12"> 
         <input type="submit" class="btn btn-default" style="background-color:rgba(159,67,66,1); color:white" value="LOG IN"></input><br> 
         <small style="color:rgba(159,67,66,1)"><u><a style="color:rgba(159,67,66,1)" href="#">Forgot Password?</a></u></small> 
         </div>  
        </form> 
       </div> 
       <div class="col-sm-5 rightForm"> 
        <form role="form"> 
        <br> 
        <h3 style="margin-top:0px">Sign Up</h3> 
         <div class="form-group col-xs-8"> 
         *E-Mail ID 
         <input type="email" class="form-control" id="email"> 
         </div> 
         <div class="form-group col-xs-8"> 
         *Password 
         <input type="password" class="form-control" id="pwd"> 
         </div> 
         <div class="form-group col-xs-8"> 
         *Re-enter Password 
         <input type="password" class="form-control" id="pwd"> 
         </div> 
         <div class=" col-xs-12"> 
         <button type="submit" class="btn btn-default" style="background-color:rgba(102,102,102,1); color:white">SIGN UP</button> 
         </div> 
        </form> 
       </div> 
       <div class="col-sm-1"></div> 
       <!-- <p style="height:10px; bottom:0px; background-color:rgba(4,58,106,1)"></p> --> 
       </div> 
     <div class="col-sm-1"></div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-1"> 
     </div> 
     <div class="col-sm-10"> 
     <br> 
      <div style="line-height:23px"><p style="color:rgba(102,102,102,1); font-size:12px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae mi et leo tristique tincidunt ac nec est. Aenean volutpat mauris vitae erat ultricies varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae mi et leo tristique tincidunt ac nec est. Aenean volutpat mauris vitae erat ultricies varius. Aenean volutpat mauris vitae erat ultricies varius. Lorem ipsum dolor sit amet</p></div> 
      <div class=""></div> 
     </div> 
     <div class="col-sm-1"></div> 
    </div>

Bitte lesen Sie das Bild, das ich möchte es verbiegen vertikal durch Schatten. Bitte erläutern Sie mir auch die Logik.

Quelle

2016-07-10 tryintolearn

Verwenden Sie einfach die perspective property auf der Box-Schatten.

, das ein Beispiel von CSS ist anzufügen:

.main:after{ 
    content: ''; 
    position:absolute; 
    z-index:-1; 
    bottom:0px; 
    width:50%; 
    left:50%; 
    margin-left:-47%; 
    height:30px; 
    box-shadow: 0 16px 30px -5px rgba(0, 0, 0, 1); 
    -webkit-transform: perspective(800px) rotateY(0deg) rotateX(45deg); 
    -moz-transform: perspective(800px) rotateY(0deg) rotateX(45deg); 
    -ms-transform: perspective(800px) rotateY(0deg) rotateX(45deg); 
    -o-transform: perspective(800px) rotateY(0deg) rotateX(45deg); 
    transform: perspective(800px) rotateY(0deg) rotateX(45deg); 
    margin-left:-62%; 
    -webkit-transform: perspective(300px) rotateY(-40deg) rotateX(50deg); 
    -moz-transform: perspective(300px) rotateY(-40deg) rotateX(50deg); 
    transform: perspective(300px) rotateY(-40deg) rotateX(50deg); 
}

Ich denke, es ist Ihre Aufgabe ist es anzupassen.

Quelle

2016-07-10 18:53:14 horcrux

nicht das funktionierte nicht bei allen – tryintolearn

Dies macht einen Schatten Perspektive aber am unteren Rand des 'main' Behälter. Sie müssen es an beiden Seiten anpassen und die Größe des Schattens anpassen. – horcrux

div { 
 
\t width:400px; 
 
\t height:300px; 
 
\t background:#fff; 
 
\t margin:40px auto; 
 
} 
 
img { 
 
    display:block; 
 
    width:400px; 
 
    margin:0 auto; 
 
} 
 

 
.effect{ 
 
    position: relative; 
 
    transform:rotate(90deg); 
 
    top:-280px; 
 
    left:-50px; 
 
    z-index:-1 
 
} 
 
.effect:before 
 
{ 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 15px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width:300px; 
 
    background: #777; 
 
    box-shadow: 0 15px 10px #777; 
 
    transform: rotate(-3deg); 
 
} 
 
.effect2{ 
 
    position: relative; 
 
    transform:rotate(90deg) scaleY(-1);; 
 
    top:-620px; 
 
    left:50px; 
 
    z-index:-1; 
 
    
 
} 
 
.effect2:before 
 
{ 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 15px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width:300px; 
 
    background: #777; 
 
    box-shadow: 0 15px 10px #777; 
 
    transform: rotate(-3deg); 
 
}

<img src="http://politic365.com/wp-content/blogs.dir/1/files/2012/02/laptop_beach_black_man-e1329324187523.jpg"> 
 
<div class="effect"></div> 
 
<div class="effect2"></div>

Quelle

2016-07-10 22:37:03

Bitte fügen Sie eine Erklärung und nicht nur einen Code-Dump in Ihre Antworten ein –

Sie die drehen Wert der Eigenschaft trans in CSS verwenden möchten.

Hier ist eine funktionierende JSFiddle für Ihre Bewertung.

$(document).ready(function() { 
 
    $("p:nth-of-type(2)").css("font-weight", "bold"); 
 
});

html { 
 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    padding-top: 10px; 
 
    margin: 20px; 
 
} 
 
h1 { 
 
    color: #003F87; 
 
} 
 
a { 
 
    color: #800000; 
 
    text-decoration: none; 
 
} 
 
label { 
 
    display: block; 
 
    curser: pointer; 
 
} 
 
#button { 
 
    background-color: #939393; 
 
    color: #fff; 
 
    border: 3px solid #003F87; 
 
    border-radius: 5px; 
 
    font-size: 20px; 
 
} 
 
#button:hover, 
 
#button:active { 
 
    background-color: #003F87; 
 
    border-color: #939393; 
 
    color: #fff; 
 
} 
 
.container { 
 
    width: 920px; 
 
    height: 250px; 
 
    background: white; 
 
} 
 
.shadow { 
 
    position: absolute; 
 
} 
 
.shadow:before, 
 
.shadow:after { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 0; 
 
    left: 15px; 
 
    width: 200px; 
 
    top: 12px; 
 
    background: #939393; 
 
    -webkit-box-shadow: -15px 7px 15px #939393; 
 
    -moz-box-shadow: -15px 7px 15px #939393; 
 
    box-shadow: -15px 7px 15px #939393; 
 
    -webkit-transform: rotate(-3deg); 
 
    -moz-transform: rotate(-3deg); 
 
    transform: rotate(-3deg); 
 
} 
 
.shadow:after { 
 
    -webkit-box-shadow: 15px 7px 15px #939393; 
 
    -moz-box-shadow: 15px 7px 15px #939393; 
 
    box-shadow: 15px 7px 15px #939393; 
 
    -webkit-transform: rotate(3deg); 
 
    -moz-transform: rotate(3deg); 
 
    transform: rotate(3deg); 
 
    right: 15px; 
 
    left: auto; 
 
} 
 
.wrapper { 
 
    position: absolute; 
 
    width: 900px; 
 
    padding: 10px; 
 
    height: 650px; 
 
    z-index: 2; 
 
    background-color: #fff; 
 
    background-image: url('http://www.pd4pic.com/images/business-man-man-tie-suit-business-silhouette-1.png'), url('http://www.detaildesignonline.com/contentimages/sky1285264350.jpg'); 
 
    background-size: 30% 90%, 100% 100%; 
 
    background-repeat: no-repeat, no-repeat; 
 
    background-position: bottom right, center; 
 
} 
 
.content { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
    margin-top: 20px; 
 
    padding-top: 10px; 
 
    height: 500px; 
 
} 
 
.top { 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 
.primary, 
 
.secondary { 
 
    width: 350px; 
 
    display: inline; 
 
    height: 300px; 
 
    padding-left: 50px; 
 
    padding-top: 25px; 
 
    line-height: 23px; 
 
} 
 
.primary { 
 
    float: left; 
 
    background-color: rgba(11, 181, 255, .3); 
 
} 
 
.secondary { 
 
    float: right; 
 
    background-color: rgba(255, 255, 255, .4); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container shadow"></div> 
 
<div class="wrapper"> 
 
    <div class="content"> 
 
    <div class="top"> 
 
     <h1> 
 
     We've got all your Forex needs covered! 
 
     </h1> 
 
     <p> 
 
     Presenting [email protected], an easy to use and secure portal that takes care of all 
 
     <br>your Forex requirements, whether its tranferring of funds, buying of a Travel 
 
     <br>Card, Travel Insurace or currency. 
 
     </p> 
 
     <p> 
 
     <a href="#">What's More? </a> Customers having an account in any private or nationalized 
 
     <br>bank are welcomed to enjoy our services. 
 
     </p> 
 
    </div> 
 
    <br> 
 
    <form name="register" method="post" action="/signin" novalidate=""> 
 
     <div class="primary"> 
 
     <h2>Sign In</h2> 
 
     <div> 
 
      <label for="email">E-Mail Id</label> 
 
      <input name="email" id="email" type="text" required> 
 
     </div> 
 
     <div> 
 
      <label for="password">Password</label> 
 
      <input name="password" id="signin-password" type="text" required> 
 
     </div> 
 
     <div> 
 
      <br> 
 
      <button id="button">LOGIN</button> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    <form name="register" method="post" action="/signup" novalidate=""> 
 
     <div class="secondary"> 
 
     <h2>Sign Up</h2> 
 
     <div> 
 
      <label for="signup-email">*E-Mail Id</label> 
 
      <input name="signup-email" id="signup-email" type="text" required> 
 
     </div> 
 
     <div> 
 
      <label for="signup-password">*Password</label> 
 
      <input name="signup-password" id="signup-password" type="text" required> 
 
     </div> 
 
     <div> 
 
      <label for="signup-password-confirm">*Re-Enter Password</label> 
 
      <input name="signup-password-confirm" id="signup-password-confirm" type="text" required> 
 
     </div> 
 
     <br> 
 
     <button id="button">SIGN UP</button> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

Quelle

2016-07-11 02:43:52

Schatten, der Bildbiegung bildet

Antwort

Verwandte Themen