Skip to content

Instantly share code, notes, and snippets.

@maolion

maolion/gist:aebd6a323fffd8fb74a5

Created November 12, 2014 08:10
Show Gist options
  • Save maolion/aebd6a323fffd8fb74a5 to your computer and use it in GitHub Desktop.
Save maolion/aebd6a323fffd8fb74a5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if gt IE 8]><!--> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#wrapper{
width:500px;
height:200px;
position:relative;
top:100px;
left:100px;
}
#wrapper .circle{
position:absolute;
width:100px;
height:100px;
left:-30px;
top:-30px;
z-index:1;
overflow:hidden;
}
#wrapper .circle span{
display:block;
width:100%;
height:100%;
line-height:100px;
font-size:40px;
text-align:center;
color:#fff;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#wrapper .circle b{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border-radius:50px;
background:blue;
z-index:-1;
font-size:0;
}
#wrapper .other{
width:100%;
height:100%;
background:#ccc;
}
/* < IE9*/
html.lt-ie9 #wrapper .circle b{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:transparent;
z-index:-1;
font-size:233px;
color:blue;
font-family:Arial;
margin-top:-100px;
margin-left:-20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="circle">
<span>HI'</span>
<b class="mask">●</b>
</div>
<div class="other"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment