locked
How to make this style? RRS feed

 > 

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    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