Skip to content

Instantly share code, notes, and snippets.

View leemark's full-sized avatar
:atom:
building

Mark Lee leemark

:atom:
building
55 followers · 55 following
View GitHub Profile
@leemark
leemark / style.css
Created October 31, 2013 06:06
A Pen by Mark Lee.
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{
@leemark
leemark / A-super-simple-geolocation-example.markdown
Created October 28, 2013 01:22
A Pen by Mark Lee.
@leemark
leemark / index.html
Last active December 21, 2015 05:09
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/
<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 / mediaqueries.css
Created April 12, 2013 03:29
super-simple media query example stylesheet
@media screen and (max-width: 599px) {
body {
background: #BADA55;
}
}
@leemark
leemark / index.html
Created March 28, 2013 04:32
x-webkit-speech example
<input type="text" x-webkit-speech />
@leemark
leemark / style.css
Last active December 15, 2015 11:19
Zoom on hover
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 / mediaqueries.html
Last active December 15, 2015 09:59
Some example media queries.
<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 / linktarget.html
Last active December 15, 2015 08:19
Style in-page link targets using :target. http://codepen.io/leemark/pen/ncLFr
<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 / form.html
Last active December 15, 2015 01:58
Some example form code - html5 input types, validation, etc.
<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 / Location-and-path-of-the-ISS.markdown
Created March 11, 2015 03:22
Location and path of the ISS