Skip to content

Instantly share code, notes, and snippets.

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

Mark Lee leemark

:atom:
building
52 followers · 55 following
View GitHub Profile
@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 / index.html
Created March 28, 2013 04:32
x-webkit-speech example
<input type="text" x-webkit-speech />
@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
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 / A-super-simple-geolocation-example.markdown
Created October 28, 2013 01:22
A Pen by Mark Lee.
@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 / jsbin.UmUSAJa.html
Created November 26, 2013 02:01
JavaScript convert string to number: parseInt vs. parseFloat vs. unary operator
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="JavaScript convert string to number: parseInt vs. parseFloat vs. unary op" /><meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</body>
</html>
@leemark
leemark / Fibonacci-circles.markdown
Created December 19, 2013 06:42
A Pen by Mark Lee.
@leemark
leemark / change-color-on-scroll.markdown
Created January 12, 2014 16:38
A Pen by Mark Lee.
@leemark
leemark / some positive bot-thoughts, tracery json
Created June 12, 2016 00:40
{
"origin": ["#positives# :)"],
"positives" : ["You are the hero of your own story. If you don't like your story, change it! ",
"Life is not about the end result, it's about the journey. Build. Create. Enjoy.",
"The worst-case scenario is never as bad, or as likely, as you think.",
"Struggle, turmoil, and failure all dissolve as soon as they are in the past. They're gone.",
"Challenges are the universe's way of indicating that your goals are worth pursuing.",
"Your time is limited, so don't waste it living someone else's life, pursuing someone else's dream.",
"Don't let other people's noise drown out your own voice.",
"Fear is just a feeling, embrace the feeling, experience it, accept it, then push through it. ",