Pens from Justin Klemm https://codepen.io/justinklemm/ en nospam@codepen.io Copyright 2024 2019-02-04T17:08:30-07:00 Nested iFrame Example https://codepen.io/justinklemm/pen/NogQMq https://codepen.io/justinklemm/pen/NogQMq Justin Klemm

See the Code - See it Full Page - See Details

]]>
Nested iFrame Example 2019-02-04T17:08:30-07:00
Regex for validating CSS IDs https://codepen.io/justinklemm/pen/wvKgOW https://codepen.io/justinklemm/pen/wvKgOW Justin Klemm

See the Code - See it Full Page - See Details

]]>
Regex for validating CSS IDs 2014-03-27T17:04:14-07:00
Responsive Photo Gallery https://codepen.io/justinklemm/pen/DqVpmq https://codepen.io/justinklemm/pen/DqVpmq Justin Klemm

See the Code - See it Full Page - See Details

Straight forward JS and very simple HTML/CSS to create a beautiful photo gallery. Photos are scaled and organized in rows so that the entire viewing frame is seamlessly filled up. The gallery is full responsive and will adjust accordingly when the screen size is changed. The size of the photos can be (roughly) adjusted via the variable at the top of the JS.

]]>
Responsive Photo Gallery 2013-09-19T05:01:14-07:00
NYC Sushi Voting https://codepen.io/justinklemm/pen/AzwdVM https://codepen.io/justinklemm/pen/AzwdVM Justin Klemm

See the Code - See it Full Page - See Details

Design and markup for a simple sushi voting app. This was for a quick experiment using Meteor Jaavscript Framework. You can find the live version at http://sushi.meteor.com/

]]>
NYC Sushi Voting 2013-06-20T14:00:39-07:00
Hipster Blurs (SVG) https://codepen.io/justinklemm/pen/kGmWQg https://codepen.io/justinklemm/pen/kGmWQg Justin Klemm

See the Code - See it Full Page - See Details

This example uses SVG and a blurring effect to achieve the popular look of having a blurred background photo with sharp text overlaid.

]]>
Hipster Blurs (SVG) 2013-06-18T19:41:29-07:00
Hipster Blurs (Webkit) https://codepen.io/justinklemm/pen/AGmWyR https://codepen.io/justinklemm/pen/AGmWyR Justin Klemm

See the Code - See it Full Page - See Details

This example uses the "-webkit-filter: blur()" property to achieve the popular look of having a blurred background photo with sharp text overlaid.

]]>
Hipster Blurs (Webkit) 2013-06-18T19:42:20-07:00
Accessing the Device Camera https://codepen.io/justinklemm/pen/AevjdZ https://codepen.io/justinklemm/pen/AevjdZ Justin Klemm

See the Code - See it Full Page - See Details

Implementation of Matt West's excellent "Accessing the Device Camera with getUserMedia" article found at http://blog.teamtreehouse.com/accessing-the-device-camera-with-getusermedia

]]>
Accessing the Device Camera 2013-06-05T18:43:28-07:00
Responsive Shopping Cart https://codepen.io/justinklemm/pen/kyMjjv https://codepen.io/justinklemm/pen/kyMjjv Justin Klemm

See the Code - See it Full Page - See Details

Built for the Rodeo Season #2, Week #3 Challenge: "A Shopping Cart" All functionality and calculations are implemented via Javascript. There are responsive breakpoints at 650px and 350px (though you can't view the latter in Chrome because it won't scale down below 400px). Breakpoints are based on logical UI decisions, not particular device specifications.

]]>
Responsive Shopping Cart 2013-09-19T05:00:49-07:00