Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library


Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Miscellaneous >> CSS3 Fluid Fluid Fluid Layout

Code Snippet </> Info

Snippet Name: CSS3 Fluid Fluid Fluid Layout

Description: Create a cool fluid header layout on your web page using this snippet... check it out.
Example: View Code Demo


Author: Yair Even-Or

Last Modified: 2019-12-09 01:58:59

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor

  About Copying
Copied To Clipboard!

<!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 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 : : 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="">Pure HTML5 CSS3 Fluid Fluid Fluid Layout Code Snippet</a> page. ] </div> </div> </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library