trumball’s gists

trumball / Polaroid Image Border

Created May 24, 2013 13:13

Polaroid Image Border Applying this basic snippet will allow you to implement .polaroid classes onto your images. This will create the old photo-style effect with a large white border and some slight box shadows. You’ll want to update the width/height values to match that of your image dimensions and website layout.

	img.polaroid {
	background:#000; /Change this to a background image or remove/
	border:solid #fff;
	border-width:6px 6px 20px 6px;
	box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
	-webkit-box-shadow:1px 1px 5px #333;
	-moz-box-shadow:1px 1px 5px #333;
	height:200px; /Set to height of your image or desired div/
	width:200px; /Set to width of your image or desired div/
	}

trumball / Anchor Link Pseudo Classes

Created May 24, 2013 13:14

Anchor Link Pseudo Classes Most CSS developers know about the anchor link styles and :hover effects. But I wanted to include this small code snippet as a reference for newcomers. These are the four default states for an anchor link, and also a few other HTML elements. Keep this handy until you can memorize some of the more obscure ones.

	a:link { color: blue; }
	a:visited { color: purple; }
	a:hover { color: red; }
	a:active { color: yellow; }

trumball / Fancy CSS3 Pull-Quotes

Created May 24, 2013 13:15

Fancy CSS3 Pull-Quotes Pull-quotes are different from blockquotes in that they appear off to the side of your blog or news article. These often reference quoted text from the article, and so they appear slightly different than blockquotes. This default class has some basic properties along with 3 unique font families to choose from.

	.has-pullquote:before {
	/* Reset metrics. */
	padding: 0;
	border: none;

	/* Content */
	content: attr(data-pullquote);

	/* Pull out to the right, modular scale based margins. */
	float: right;

trumball / Fullscreen Backgrounds With CSS3

Created May 24, 2013 13:16

Fullscreen Backgrounds With CSS3 I should note that this code will not work properly in older browsers which do not support CSS3 syntax. However if you’re looking for a quick solution and don’t care about legacy support, this is the best chunk of code you’ll find! Great for adding big photographs into the background of your website while keeping…

	html {
	background: url('images/bg.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}

trumball / Vertically Centered Content

Last active February 4, 2016 16:46

Vertically Centered Content

.element { position: relative; top: 50%; transform: translateY(-50%); }

trumball / Force Vertical Scrollbars

Created May 24, 2013 13:26

Force Vertical Scrollbars When your page content doesn’t fill the entire height of your browser window then you don’t end up getting any scrollbars. However resizing will force them to appear and append an extra 10-15 pixels to the width of your window, pushing over your webpage content. This snippet will ensure your HTML element is always just …

html { height: 101% }

trumball / CSS3 Gradients Template

Created May 24, 2013 13:29

CSS3 Gradients Template CSS3 gradients are another wondrous part of the newer specifications. Many of the vendor prefixes are difficult to memorize, so this code snippet should save you a bit of time on each project.

	#colorbox {
	background: #629721;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
	background-image: -webkit-linear-gradient(top, #83b842, #629721);
	background-image: -moz-linear-gradient(top, #83b842, #629721);
	background-image: -ms-linear-gradient(top, #83b842, #629721);
	background-image: -o-linear-gradient(top, #83b842, #629721);
	background-image: linear-gradient(top, #83b842, #629721);
	}

trumball / Font-Face Template

Created May 24, 2013 13:31

@font-face Template Here is another bit of CSS3 code which isn’t the easiest to memorize. Using @font-face you may embed your own TTF/OTF/SVG/WOFF files into your website and generate custom font families. Use this template as a base example for your own projects in the future.

	@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('webfont.woff') format('woff'), /* Modern Browsers */
	url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
	url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

	body {

trumball / Stitched CSS3 Elements

Created May 24, 2013 13:32

Stitched CSS3 Elements

	p {
	position:relative;
	z-index:1;
	padding: 10px;
	margin: 10px;
	font-size: 21px;
	line-height: 1.3em;
	color: #fff;
	background: #ff0030;
	-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);

trumball / CSS3 Zebra Stripes

Created May 24, 2013 13:33

CSS3 Zebra Stripes Possibly the best item to include zebra stripes is within a table of data. It can be difficult when users are scanning 40 or 50 rows to determine exactly which cell is lined up to which row. By adding zebra stripes on default we can update odd rows with varying background colors.

	tbody tr:nth-child(odd) {
	background-color: #ccc;
	}

Todd Rumball trumball