Skip to content

Instantly share code, notes, and snippets.

Avatar

Mark Lee leemark

View GitHub Profile
@leemark
leemark / form.html
Last active Dec 15, 2015
Some example form code - html5 input types, validation, etc.
View form.html
<form>
<!-- email input type, required - the form won't submit if empty -->
<input type="email" id="youremail" placeholder="you@example.com" required />
<label for="youremail">your email</label>
<!-- url input type, optional - form will submit if empty, but if you do enter a value it needs to conform to URL type validation -->
<input type="url" id="yourwebsite" placeholder="http://example.com" />
<label for="yourwebsite">your website</label>
@leemark
leemark / full-viewport-animated-background.html
Last active Jan 16, 2020
Full-screen animated gif background
View full-viewport-animated-background.html
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>horse</title>
<link href='http://fonts.googleapis.com/css?family=Spirax' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Sallie Gardner at a Gallop</h1>
</body>
@leemark
leemark / linktarget.html
Last active Dec 15, 2015
Style in-page link targets using :target. http://codepen.io/leemark/pen/ncLFr
View linktarget.html
<div class="container" id="main">
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="#lorem">Lorem ipsum dolor sit amet.</a></li>
<li><a href="#invenitatis">In venenatis auctor eros sed rhoncus.</a></li>
<li><a href="#utinorci">Ut in orci enim.</a></li>
<li><a href="#donecdiam">Donec diam dolor.</a></li>
<li><a href="#donectortor">Donec tortor mi.</a></li>
</ul>
@leemark
leemark / mediaqueries.html
Last active Dec 15, 2015
Some example media queries.
View mediaqueries.html
<ul>
<li data-email="jim@example.com">Jim</li>
<li data-email="julie@example.com">Julie</li>
<li data-email="jay@example.com">Jay</li>
<li data-email="jennie@example.com">Jennie</li>
</ul>
@leemark
leemark / style.css
Last active Dec 15, 2015
Zoom on hover
View style.css
div{
margin: 45px;
/** prevent screen flash on child element :hover state transform **/
-webkit-transform: translate3D(0, 0, 0)
}
img {
/** basic styles **/
max-width: 200px;
margin: 1px;
@leemark
leemark / index.html
Created Mar 28, 2013
x-webkit-speech example
View index.html
<input type="text" x-webkit-speech />
@leemark
leemark / mediaqueries.css
Created Apr 12, 2013
super-simple media query example stylesheet
View mediaqueries.css
@media screen and (max-width: 599px) {
body {
background: #BADA55;
}
}
@leemark
leemark / index.html
Last active Dec 21, 2015
A CodePen by leemark. Simple image crossfade slideshow - CSS animation - A simple CSS animation, with a staggered start time for each image. A nice little algorithm for calculating the animation timing percentages can be found at: http://css3.bradshawenterprises.com/cfimg/
View index.html
<ul>
<li><img width="495" height="370" title="" alt="css3" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAARgAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABAMDAwMDBAMDBAYEAwQGBwUEBAUHCAYGBwYGCAoICQkJCQgKCgwMDAwMCgwMDQ0MDBERERERFBQUFBQUFBQUFAEEBQUIBwgPCgoPFA4ODhQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgBcgHvAwERAAIRAQMRAf/EALQAAAMBAQADAQAAAAAAAAAAAAIDBAEABQYHCAEBAQEBAQEBAQAAAAAAAAAAAAECAwQFBgcQAAICAQIEBAEHCAYEDAYDAAABAgMRIQQxQRMFUWESBnGBkdHSkxQHoSIyklQVVRax8WKCoiPB4VKU8EJywjNzo8O0NUUIQ4MkRCVlJkYXEQEBAQACAQIFAgUCBgMAAAAAARECEgMhBFGRUhMFMRRBYbHRFSIy8HGh4fFCgSMG/9oADAMBAAIRAxEAPwD8xYMvotwRW4A7AV2AmO9I0xvpCtSyRWuIMd6AO9AGqBFx3oKmO6b8CpjPR5AEoEUXoIrukFY6is4HpGowx1cjbmzpLkgY7pFTHdIg7pBWdLyBjHSVMd0AmO6L5lMd0QY7okMd0GFx3QGrjegExvQBjuh5Ax3QBjeh5BMd93BjntyauB6Go0xnSCYzpeRV6s6WoMZ0sAxnTBgXWEwPTKmMdZUwPoCM9BRnoAz0hHekDseAGYAzBUdgDmkBmAjgMA8nhnme7G4IY3AaxvpBjvSDG+gGN9HAhglDHIauO9A1cF6BpjlAJglEK30Ab6BpjvRyCY3pgaqgrVAo70II7pmmLGOo1rGO6XkDHKoGN6XkVMZ0vIqY7o+QGqkLjuiExzoKY7oAd0CDeh5
@leemark
leemark / style.css
Created Oct 31, 2013
A Pen by Mark Lee.
View style.css
body{
min-height: 100vh;
min-width: 100vw;
background-color: #000;
background-image:url('http://imgur.com/Mcj5wR3.jpg');
background-size: cover;
background-repeat: no-repeat;
animation: slides 120s infinite;
}
@keyframes slides{