Skip to content

Instantly share code, notes, and snippets.

View feo52's full-sized avatar

feo52

View GitHub Profile
@feo52
feo52 / index.html
Created October 3, 2014 13:22
css hacks for IE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="IE6orLess">IE6orLess</div>
<div class="IE7orLess">IE7orLess</div>
<div class="IE8orLess">IE8orLess</div>
@feo52
feo52 / index.html
Created October 7, 2014 15:10
position:sticky
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.containerL{ background:LightGrey; display:inline-block; width:1100px; height:6em; }
.containerS{ background:LightGrey; display:inline-block; width: 500px; height:6em; margin:0 300px; }
.marginL { background:Gainsboro; display:inline-block; width: 400px; height:2em; float:left; }
.marginS { background:Gainsboro; display:inline-block; width: 100px; height:2em; float:left; }
.stickyL { background:LightPink; display:inline-block; width: 100px; height:2em; float:left; text-align:center; line-height:2em; }
@feo52
feo52 / index.html
Created October 7, 2014 15:20
sticky footer with calc(vh)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{ margin:0; padding:0; }
.contentsItem{ background:LightPink; height:400px; }
.stickyFooter{ background:LimeGreen; height: 2em; }
.above-Footer{
min-height: calc(100vh - 2em);
@feo52
feo52 / index.html
Created October 7, 2014 15:30
sticky footer with calc(vh)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{ margin:0; padding:0; }
.quarterSplit{ background:MintCream; text-align:center; width:23%; margin:0 1%; float:left; }
.howToUseDemo{ background:LightBlue; text-align:center; }
.contentsItem{ background:LightPink; text-align:center; height:400px; line-height:400px; }
.normalFooter{ background:LimeGreen; text-align:center; height: 2em; line-height: 2em; }
@feo52
feo52 / index.html
Created October 11, 2014 16:00
sticky footer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{ margin:0; padding:0; }
html, body { height: 100%; }
.contentsItem{ background:LightPink; height:400px; }
.stickyFooter{ background:LimeGreen; height: 2em; }
.above-Footer{
@feo52
feo52 / index.html
Last active August 29, 2015 14:08
Pure CSS Three Lines Icon & Pure CSS Cross Lines Icon
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<style type="text/css">
.pureCssThreeLinesIcon{ font-size: 32px; }
.pureCssCrossLinesIcon{ font-size: 32px; }
</style>
</head>
@feo52
feo52 / index.html
Last active August 29, 2015 14:08
Pure CSS Three Lines Icon with :checked
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<style type="text/css">
.pureCssThreeLinesIcon{ font-size: 32px; display: inline-block; }
#pureCssThreeLinesSwitch{ display: none; }
</style>
</head>
@feo52
feo52 / index.html
Created January 3, 2016 06:00
Masonry
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.grid {
max-width: 900px; /* 900=(140+40)x5 */
margin: 0 auto;
box-shadow: 0 0 0 1px #eee;
}
@feo52
feo52 / index.html
Created January 31, 2016 04:00
sticky header with stickyfill.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.subject-title { background: LightPink; height: 400px; }
.sticky-header { background: LightBlue; height: 2em; }
.main-contents { background: Gainsboro; height:2000px; }
@feo52
feo52 / index.html
Created January 31, 2016 04:00
sticky header & sticky footer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body { margin:0; padding:0; }
.above-ankle { min-height: calc(100vh - 2em); }
.subject-title { background: LightPink; height: 200px; }
.sticky-header { background: LightBlue; height: 2em; }
.main-contents { background: Gainsboro; height: 600px; }