Skip to content

Instantly share code, notes, and snippets.

Avatar
🚀

Charlie Park charliepark

🚀
60 followers · 2 following
View GitHub Profile
@charliepark
charliepark / Embossed_Text.css
Created Apr 19, 2010
View Embossed_Text.css
/* Embossed Text Effect Using CSS */
/* Light Text on a Dark Background */
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
/* Dark Text on a Light Background */
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
@charliepark
charliepark / contrasting_text_color.rb
Created Jul 18, 2010
calculate contrast color in Ruby
View contrasting_text_color.rb
def convert_to_brightness_value(background_hex_color)
(background_hex_color.scan(/../).map {|color| color.hex}).sum
end
def contrasting_text_color(background_hex_color)
convert_to_brightness_value(background_hex_color) > 382.5 ? '#000' : '#fff'
end
@charliepark
charliepark / Eric Meyer's Reset, Cleaned Up .css
Created Aug 13, 2010
A cleaned up version of Eric Meyer's CSS reset file.
View Eric Meyer's Reset, Cleaned Up .css
/* Eric Meyer's Reset (http://meyerweb.com/eric/tools/css/reset/) */
/* v1.0 | 20080212 */
/* minified and alphabetized by Charlie Park (http://charliepark.org) */
a, abbr, acronym, address, applet, b, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, font, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}
body{line-height:1}
ol, ul{list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content: '';content: none}
@charliepark
charliepark / curved_speech_bubble_tails.css
Created Jan 8, 2011
Curved Speech Bubble Tails, Using Pure CSS
View curved_speech_bubble_tails.css
/* the "dif" and "dif0" and "dif2" are just alternately-shaped examples, using translucent colors so you can see what's going on */
div.qanda p{background:#e3e3e3;border-radius:10px;-moz-border-radius:10px;font-size:13px;line-height:17px;margin-left:240px;padding:10px;position:relative}
div.qanda p:before{border-top:25px solid #e3e3e3;border-left:50px solid transparent;content:'';display:block;height:0;position:absolute;bottom:-25px;right:-5px;width:0px;z-index:1}
div.qanda p:after{background:#bbb;border-radius:0 0 0 25px;-moz-border-radius:0 0 0 25px;content:'';display:block;height:25px;position:absolute;bottom:-25px;right:-5px;width:25px;z-index:2}
div.qanda p.dif:before{border-top:25px solid rgba(255,0,255,0.5);border-left:50px solid transparent;content:'';display:block;height:0;position:absolute;bottom:-25px;right:-5px;width:0px;z-index:1}
div.qanda p.dif:after{background:rgba(0,255,255,0.5);border-radius:0 0 0 25px;-moz-border-radius:0 0 0 25px;content:'';display:block;height:25px;position:a
@charliepark
charliepark / gist:949606
Created Apr 30, 2011
html for making pngs for background grids
View gist:949606
<html>
<body>
<div style="position:absolute;background:red;padding:40px;top:0;left:0;display:none">
<div style="background:#fff;width:1px;height:20px;position:relative">
<div style="background:#000;height:1px;width:1px;position:absolute;bottom:0;"></div>
</div>
</div>
</body>
</html>
@charliepark
charliepark / Benchmarking Date.today vs. Time.now
Last active Sep 25, 2015
View Benchmarking Date.today vs. Time.now
# NOTE: This is from an older version of Rails / Ruby. The code should still work, but you'll probably find that Date is much faster than Time now.
require 'benchmark'
def bmd
Benchmark.ms { 1000.times { puts Date.today } }
end
def bmt
Benchmark.ms { 1000.times { puts Time.now } }
@charliepark
charliepark / baseline.html
Created May 7, 2011
An experiment with different font sizes and relative positioning, in order to get good baselines. Key takeaway: line-height + margin-bottom of each headline should equal the line-height + margin-bottom of the h1; also, each headline's position:relative;to
View baseline.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<style type="text/css" media="screen">
/* from Eric Meyer: v2.0b1 | 201101 */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{border:0;font:inherit;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
@charliepark
charliepark / tag_index.rb
Created Jun 8, 2011
View tag_index.rb
---
layout: default
---
<h2 class="post_title">{{page.title}}</h2>
<ul>
{% for post in site.posts %}
{% for tag in post.tags %}
{% if tag == page.tag %}
<li class="archive_list">
<time style="color:#666;font-size:11px;" datetime='{{post.date | date: "%Y-%m-%d"}}'>{{post.date | date: "%m/%d/%y"}}</time> <a class="archive_list_article_link" href='{{post.url}}'>{{post.title}}</a>
@charliepark
charliepark / tag_gen.rb
Created Jun 8, 2011
View tag_gen.rb
module Jekyll
class TagIndex < Page
def initialize(site, base, dir, tag)
@site = site
@base = base
@dir = dir
@name = 'index.html'
self.process(@name)
@charliepark
charliepark / scrollToBottom.js
Created Jul 13, 2011
Javascript to include in jQuery in order to scroll to the bottom of the webpage.
View scrollToBottom.js
// include this in your application.js file:
jQuery.fn.scrollToBottom = function(){
var bottom = $(document.body).height();
window.scrollTo(0, bottom);
};
// and invoke it whenever you want, with this: