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:00
position:sticky
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.containerL{ background:LightGrey; display:inline-block; width:45%; height:800px; float:left; }
.containerS{ background:LightGrey; display:inline-block; width:45%; height:400px; float:right; margin:200px 0; }
.marginL { background:Gainsboro; display:inline-block; width:10%; height:352px; }
.marginS { background:Gainsboro; display:inline-block; width:10%; height:152px; }
.stickyT { background:LightPink; display:inline-block; width:33%; height: 32px; float:left; text-align:center; line-height:32px; }
@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
Last active July 9, 2017 11:00
Pure CSS Three Lines Menu with :checked
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pure CSS Three Lines Menu with :checked</title>
<link rel="stylesheet" href="style.css">
<style>
#nav-switch + .nav-window > .nav-sensor { border-radius: 20%; } /* for Chrome bug? */
</style>
@feo52
feo52 / index.html
Last active July 16, 2017 15:00
Pure CSS Modal Window with :checked
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>Pure CSS Modal Window with :checked</title>
<link rel="stylesheet" href="style.css">
<style>
body{ margin:0; padding:0; }
.modalWindow { opacity: 0; visibility: hidden; } /* for Chrome bug? */