Skip to content

Instantly share code, notes, and snippets.

View feo52's full-sized avatar

feo52

View GitHub Profile
@feo52
feo52 / index.html
Last active February 13, 2016 15:00
Pure CSS Slider
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<style>
.sliderFrame {
display: inline-block;
width: 160px; /* Overwrite */
height: 120px; /* Overwrite */
@feo52
feo52 / index.html
Last active July 8, 2017 15:20
Pure CSS Tab
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pure CSS Tab with :checked</title>
<link rel="stylesheet" href="style.css">
<style>
body{ margin:0; padding:0; }
.tab-caption:nth-of-type(1) { background-color: #FFAAAA; }
@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? */
@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 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 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
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
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 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: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; }