----------------------------------------------------------------------------------------------------------------
COPY AND PASTE CODE
------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#full-border1 {
position:relative;
z-index:10;
padding:20px;
background:#eee;
}
#full-border1:before {
content:"";
display:block;
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:1px solid #000;
}
#full-border2 {
position:relative;
z-index:10;
padding:15px;
border:5px solid #f00;
background:#fff;
}
#full-border2:before {
content:"";
display:block;
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:1px solid #000;
}
#full-border3 {
position:relative;
z-index:10;
padding:20px;
border:5px solid #f00;
background:#ff9600;
}
#full-border3:before {
content:"";
display:block;
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#fff;
}
#full-border4 {
position:relative;
z-index:10;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}
#full-border4:before {
content:"";
display:block;
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}
#full-border4:after {
content:"";
display:block;
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}
#full-border5 {
position:relative;
z-index:10;
padding:40px;
border:5px solid #f00;
background:#ff9600;
}
#full-border5:before {
content:"";
display:block;
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}
#full-border5:after {
content:"";
display:block;
position:absolute;
z-index:-1;
top:25px;
left:25px;
right:25px;
bottom:25px;
border:5px solid #f000ff;
background:#fff;
}
#full-border5 p:first-child {
margin-top:0;
}
#full-border5 p:first-child:before {
content:"";
display:block;
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#7200ff;
}
#two-colour {
position:relative;
padding:10px 10px 11px;
border-bottom:2px solid #ccc;
color:#000;
background:#f0f0f0;
}
#two-colour:before {
content:"";
display:block;
position:absolute;
left:0;
bottom:0;
width:100%;
height:1px;
background:#fefefe;
}
#single-max {
position:relative;
padding:10px 10px 50px;
border-bottom:5px solid #f000ff;
background:#eee;
}
#single-max:after {
content:"";
display:block;
position:absolute;
left:0;
bottom:15px;
width:100%;
border-top:5px solid #ff0000;
border-bottom:5px solid #ffea00;
background:#ff9600;
height:5px;
}
#single-max:before {
content:"";
display:block;
position:absolute;
left:0;
bottom:0;
width:100%;
border-top:5px solid #4aa929;
border-bottom:5px solid #7200ff;
background:#00b4ff;
height: 5px;
}
</style>
</head>
<body>
<div class="examples">
<div class="section">
<div id="full-border1">
A <code>div</code> containing <a href="#non">some content</a>
</div>
<div id="full-border2">
A <code>div</code> containing <a href="#non">some content</a>
</div>
<div id="full-border3">
A <code>div</code> containing <a href="#non">some content</a>
</div>
<div id="full-border4">
A <code>div</code> containing <a href="#non">some content</a>
</div>
<div id="full-border5">
<p>A <code>div</code> with at least one child element provides 7 "borders".</p>
</div>
</div>
</body>
</html>
0 comments:
Post a Comment