Skip to content

Instantly share code, notes, and snippets.

View trumball's full-sized avatar

Todd Rumball trumball

1 follower · 0 following
  • London Ontario, Canada
View GitHub Profile
@trumball
trumball / Pure CSS Background Noise
Created May 24, 2013 19:42
Pure CSS Background Noise Designers have seen this effect added into websites for a long time, although they generally use repeating tile images with alpha-transparency. However we can embed Base64 code into CSS to generate brand new images. This is the case as in the snippet above which generates a small noise texture above the body background,…
body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCb
@trumball
trumball / validate emails using a regular expression
Created September 26, 2013 18:21
HTML5 allows, among other things, to validate emails using a regular expression pattern. Here is a ready to use input field with the regexp pattern to validate an email address.
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
@trumball
trumball / Country drop down list.html
Created September 26, 2013 18:25
Country drop down list
<select>
<option value=" " selected>(please select a country)</option>
<option value="--">none</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
@trumball
trumball / Paper Page Curl Effect
Created May 24, 2013 20:48
Paper Page Curl Effect This page curl effect can be applied to almost any container which holds website content. Immediately I thought about image media and quoted text, but really this could be anything at all. Check out the snippet’s live demo page for a better grasp of how these page curls function.
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
ul.box li {
@trumball
trumball / General Media Queries
Created May 24, 2013 13:09
General Media Queries This is an excellent template which you can find on CSS-Tricks for other bits and pieces of media queries. However I’ve copied their example in full which includes tons of real mobile devices. These codes will even target retina-based devices using min-device-pixel-ratio.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
@trumball
trumball / swatch-template.html
Created April 19, 2016 14:49
Swatches Template
<script id="swatch-template" type="text/template">
{{#swatches}}
<div class="col-lg-2">
<div class="swatch color-{{.}}">
<div class="chip"></div>
<div class="info">
<span>{{.}}</span>
<small></small>
</div>
</div>
@trumball
trumball / Vertically Centered Content
Last active February 4, 2016 16:46
Vertically Centered Content
.element { position: relative; top: 50%; transform: translateY(-50%); }
@trumball
trumball / console-log.js
Created October 21, 2013 14:07
older browsers (thanks again Microsoft) will crash if you use console.log in your code and not have the developer tools open at the same time. Luckily its an easy fix. Simple use the below code snippet at the top of your code and good old IE should leave you alone: http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it
if(!window.console){ window.console = {log: function(){} }; }
console.log('Testing console');
@trumball
trumball / message.css
Created October 5, 2013 14:33
plugin to make it easy to add flash messages for user feedback
#status-area .flash_message {
padding: 5px;
color: green;
}
@trumball
trumball / Downloadable files.html
Created September 26, 2013 18:27
Downloadable files HTML5 allows you to force download of files using the download attribute. Here is a standard link to a downloadable file.
<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>