陰影製作圖像彎曲

請參閱圖像。如圖所示，我想通過給它的陰影垂直彎曲圖像。嘗試了很多，但無法得到它。陰影製作圖像彎曲

<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>

請參考我想通過陰影垂直彎曲它的形象。請解釋我的邏輯。

來源

2016-07-10 tryintolearn

只需在箱形陰影上使用perspective property即可。

這是CSS的例子追加：

.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); 
}

我認爲這是你的工作，以適應它。

來源

2016-07-10 18:53:14 horcrux

沒有在所有 – tryintolearn

這本沒有工作做一個透視陰影，但在'main'容器的底部。你需要在兩邊調整它並調整陰影大小。 – 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>

來源

2016-07-10 22:37:03

請在答案中包含一個解釋，而不僅僅是代碼轉儲 –

您將要使用的旋轉的價值CSS變換屬性。

這裏是一個工作JSFiddle爲您的審查。

$(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>

來源

2016-07-11 02:43:52

陰影製作圖像彎曲

回答

相關問題