CSS Masks

HTML & CSS
1

Hi all

Is it possible to have a mask in CSS

I was wondering if I could use a mask to do something like this.

It would be good if I could do it something like this.


<div class="circle">
  <img src="face.jpg" alt="" />
</div>

If I can’t do it like this, is the only other way to do it in Photoshop and then have a flat square image with the face in the circle inside.

2

Hi, ttmt.

Yes, there are several ways that it can be done. Here’s one…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1193705-CSS-Masks
Thread: CSS Masks
2014.02.06 14:42
ttmt
-->
    <style type="text/css">
*, *:before, *:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.pictureframe {
    width:300px;
    height:300px;
    border-top:12px solid #a76;
    border-right:12px solid #854;
    border-bottom:12px solid #743;
    border-left:12px solid #965;
    background-color:#bb8;
    position:relative;
    margin:0 auto;
}
.pictureframe:before {
    content:"";
    width:200px;
    height:200px;
    border:5px solid #fb0;
    border-radius:50%;
    background:url('http://placehold.it/300x300') no-repeat 50% 50%;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;
    margin-top:-100px;
}
    </style>
</head>
<body>

<div class="pictureframe"></div>

</body>
</html>
3

If your image is part of the content , you could do this:

<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
.blockAround img , .several img   { border-radius:50%; background:  #ccc;    }
.blockAround {background: #bbb;  display: inline-block; position: relative; padding:15px;  }
.blockAround:before { content:''; position: absolute ;   border:4px solid #fff; border-radius:50%;    left:15px; top:15px; bottom:15px; right:15px;  /*optional ring*/}

div:hover:before{ border-color:red; /*hover effect*/}
.several { background: #bbb; }
.several img{margin:15px }

		</style>
	</head>
	<body>
 			<h2>Individual images</h2>
			<div class='blockAround' ><img src="#"   width="150" height="150" /></div>
 			<h2>If you have the same BG color for all image, and dont need a ring</h2>
			<div class='several'>
				<img src="#"  width="150" height="150" />
				<img src="#"  width="150" height="150" />
				<img src="#"  width="150" height="150" />
		    </div>
 	</body>
</html>
4

Ahem, OR you could do something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Picture Mask 3</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1193705-CSS-Masks
Thread: CSS Masks
2014.02.06 14:42
ttmt
-->
    <style type="text/css">
*, *:before, *:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.pictureframe {
    display:table;
    border-left:20px solid #bc997c;
    border-top:20px solid #d4b395;
    border-right:20px solid #906a4c;
    border-bottom:20px solid #70482a;
    border-spacing:8px;
    background-color:#a88060;
    margin:20px auto;
}
.picture {
    border-left:12px solid #906a4c;
    border-top:12px solid #70482a;
    border-right:12px solid #bc997c;
    border-bottom:12px solid #d4b395;
    text-align:center;
    padding:20px;
}
img {
    display:block;
    border-radius:40% 40% 40% 40% / 40% 40% 60% 60%;
    box-shadow:0 0 0 30px #dcbb9d,0 0 0 33px #BC997C;  /* optional border color */
    margin:36px;
}
.nameboard {
    border-left:none;      /* #906a4c; */
    border-top:none;       /* #70482a; */
    border-right:none;     /* #bc997c; */
    border-bottom:none;    /* #dcbb9d; */
    background-color:#a88060;            /* #ffffdd; */
    color:#321;
    font-weight:bold;
    font-style:italic;
    font-size:2em;
    font-family:'Palatino Linotype','Comic Sans MS',fantasy;
    text-align:center;
    padding:8px 0px 0px;
}
span.placque {
    display:inline-block;
    vertical-align:top;
    text-align:center;
    background-color:#ffd488;  /* #ffd653 */
    position:relative;
    padding:2px 20px 6px;
    margin:0 20px;
}
span.placque:before,
span.placque:after {
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background-color:#906a4c;
    position:absolute;
    left:4px;
    top:4px;
}
span.placque:after {
    left:auto;
    right:4px;
}
span.bottomscrews:before,
span.bottomscrews:after {
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background-color:#906a4c;
    position:absolute;
    left:4px;
    bottom:4px;
}
span.bottomscrews:after {
    left:auto;
    right:4px;
}

    </style>
</head>
<body>

<div class="pictureframe">
    <div class="picture">
        <img src="http://www.clermontanimal.net/images/lop_rabbit_easter.jpg" alt="" width="370" height="369">
    </div>
    <div class="nameboard">
        <span class="placque"><span class="bottomscrews">The Apple of Daddy's Eye<br>Gets a Ring!</span></span>
    </div>
</div>

</body>
</html>

:slight_smile:

5

Or chrome/safari only :slight_smile:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{background:#000}
div{
	width:300px;
	height:200px;
	background:url(http://www.pmob.co.uk/temp/images/zimg6.jpg) 50% 50% no-repeat;
	background-size:cover;
	-webkit-mask-box-image: -webkit-radial-gradient(white,transparent 70%);
}
</style>
</head>

<body>
<div></div>
</body>
</html>