Re: How to make this style?

View Complete Thread

Shortcuts

AngelinaJoli...

Contributor

5290 Points

2307 Posts

Re: How to make this style?

Jan 08, 2017 11:31 AM|AngelinaJolie|LINK

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;*/
  position:relative; /*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:"";
  position:absolute;/*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*/
  position:absolute;  /*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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.