feo52’s gists

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 / 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 / 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 / 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 / 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 / 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 / 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 / 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 / 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 / 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? */