locked
How to make this style? RRS feed

All replies

  • User-832373396 posted

    Hi,

    I suggest you could refer to my demo below;

    Key points:

    1:box-shadow:0 3px 3px rgba(21,62,78,0.8);  /*display shadow*/
    2:border-radius:50%;  /* show that the circular */
    3::before{} /* By pseudo-element*/

    Here is my screenshot:

    StyleSheet1.css:

    body {
    	/*background: url('http://www.w3cplus.com/demo/css3/minimal-login-ui/bg.jpg') no-repeat center fixed;*/
    	background-size: 100% 100%; /*if you want a background image*/
    }
     
    .content {
    	width: 600px;
    	height: 420px;
        padding-top:73px;
    	margin: 50px auto;
        background-image:-*-linear-gradient(top,rgb(255,255,255),rgb(242,242,242)); 
      box-shadow:0 3px 3px rgba(21,62,78,0.8); /*display shadow*/
    }
     
    .img-form {
      width:400px;
      height:177px;
      margin:70px auto 0;
      /*padding-top:73px;*/
      ; /*This is do for ':before' */
      /*background: url("http://www.w3cplus.com/demo/css3/minimal-login-ui/profilepicture.jpg") no-repeat ;*/
        /*box-shadow:0 3px 3px rgba(21,62,78,0.8);*/
    }
     
    .img-form:before {
      content:"";
      ;/*Absolute positioning relative to ‘img-form’*/
      top:-50px;
      left:-20px;
      width:102px;
      height:102px;
      border-radius:50%;
      padding:2px;
      border:1px solid rgb(216,216,219);
      background:#fff url("http://www.w3cplus.com/demo/css3/minimal-login-ui/profilepicture.jpg") no-repeat 2px 2px; 
    }
     
    .img-form:after {
      content:"word word word word word word"; /*some words will be display*/
      ;  /*Absolute positioning relative to ‘img-form’*/
      color:rgb(153,153,153);
      font-weight:bold;
      bottom:-60px;
       
      background-color:rgb(255,255,255);
      /*width:400px;*/ 
      width:300px;
      
      height:100px;
      margin:0 50px;
      line-height:100px;
      text-align: center;
      box-shadow:0 3px 3px rgba(21,62,78,0.8);  /* display shadow  */
    }img {
        width:100%;
        height:200px;
    
    }

    Html code:

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        
        <title>Demo</title>
        <link href="~/Content/StyleSheet1.css" rel="stylesheet" />
    </head>
    
    <body>
        <section class="demo">
            <div class="content">
                <form action="" method="post" class="img-form">
                    <img src="http://www.w3cplus.com/demo/css3/minimal-login-ui/profilepicture.jpg" />
                  </form>
            </div>
        </section>
    </body>
    </html>

    Hope it is useful to you.If you have any question and confusion about the problem. Please don't hesitate to let me know.

    Best regards,
    Angelina

     

    Sunday, January 8, 2017 11:31 AM