| CSS3 Fluid Fluid Fluid Layout - Create a cool fluid header layout on your web page using this snippet... check it out. Example: View Code Demo |
<!doctype html>
<html>
<head>
<title>Pure HTML5 CSS3 Fluid Fluid Fluid Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
/* Begin Pure HTML5 CSS3 Fluid Fluid Fluid Layout */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
/* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Yair Even-Or : http://dropthebit.com/ : Creative Commons License == */
/* general reseting */
body {font:12px arial; background:#473631; color:#FFF; padding:10px;}
*{margin:0; padding:0;}
/* the method */
header {
display:table;
text-align:center;
width:600px;
padding:10px;
margin:0 auto;
box-shadow:0 0 50px #000 inset;
border:1px solid #59443E;
border-top-color:#333;
border-radius:8px;
}
header:before, header:after {
content:'';
display:table-cell;
background:#ba4a3f;
width:50%;
border-radius:5px;
-webkit-transform:scaleY(0.3);
transform:scaleY(0.3);
}
header > h1 {white-space:pre; padding:0 15px;}
</style>
</head>
<body>
<div id="content">
<header><h1 contenteditable>Write something</h1></header>
<br /><br />
<h3 align="center">Pure CSS3 Fluid Fluid Fluid Layout</h3>
<br /><br />
<div id="link" align="center">
[ This code example from ?<a href="http://snapbuilder.com/code_snippets/copy_code_snippet_216.html">Pure HTML5 CSS3 Fluid Fluid Fluid Layout Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|
Scroll