trumball’s gists

trumball / Dark Grey Rounded Buttons

Created May 24, 2013 20:31

Dark Grey Rounded Buttons As another helpful template for web developers I have included this simplistic CSS3 buttons class. I am using the class name .graybtn which is appropriate for the colors, but this isn’t to say you couldn’t change the styles to match your own website. Check out the hex values inside a color wheel to match similar hues in…

	.graybtn {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
	background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
	background-color:#ffffff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;

trumball / Display URLS In A Printed Webpage

Created May 24, 2013 20:36

Display URLS In A Printed Webpage If you run a news website or resource with lots of print material, this is possibly one of the greatest snippets you’ll ever find. Anchor links in your webpage will look and display exactly as normal. However when printed your users will be able to see the link text along with the full hyperlinked URL. This is h…

	@media print {
	a:after {
	content: " [" attr(href) "] ";
	}
	}

trumball / Disable Mobile Webkit Highlights

Created May 24, 2013 20:37

Disable Mobile Webkit Highlights Depending on your experience working in mobile this snippet may not appear very helpful. But when accessing mobile websites in Safari and other Webkit-based engines, you’ll notice a grey box surrounds elements as you tap them. Just append these styles into your website and it should remove all native mobile brows…

	body {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

trumball / CSS3 Polka-Dot Pattern

Created May 24, 2013 20:38

CSS3 Polka-Dot Pattern I was a bit taken back when initially finding this snippet online. But it is a really interesting method for generating CSS3-only BG patterns on the fly. I have targeted the body element as default but you could apply this onto any container div in your webpage.

	body {
	background: radial-gradient(circle, white 10%, transparent 10%),
	radial-gradient(circle, white 10%, black 10%) 50px 50px;
	background-size: 100px 100px;
	}

trumball / CSS3 Checkered Pattern

Created May 24, 2013 20:39

CSS3 Checkered Pattern Similar to the polka-dots above we can also create a full seamless checkerboard pattern. This method requires a bit more syntax to get working, but it looks flawless in all CSS3-supported browsers. Also you can change the color values from white and black to match that of your own website color scheme.

	body {
	background-color: white;
	background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
	linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
	background-size: 100px 100px;
	background-position: 0 0, 50px 50px;
	}

trumball / Github Fork Ribbon

Created May 24, 2013 20:46

Github Fork Ribbon As a big user on Github this basic code snippet blew my mind. You can quickly generate Github corner ribbons in your webpage using CSS3 transform properties. This is perfect for open source plugins or code packs which have a popular following on Github. Also great for hosted HTML/CSS/JS demos if you have an active Github repo.

	.ribbon {
	background-color: #a00;
	overflow: hidden;
	/* top left corner */
	position: absolute;
	left: -3em;
	top: 2.5em;
	/* 45 deg ccw rotation */
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);

trumball / Condensed CSS Font Properties

Created May 24, 2013 20:47

Condensed CSS Font Properties The main reason web developers don’t always use this condensed font property is because not every setting is needed. But having an understanding of this shorthand may save you a lot of time and space in your stylesheets. Keep this snippet handy just in case you ever want to shorten the formatting of your font styles.

	p {
	font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
	}

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 / Glowing Anchor Links

Created May 24, 2013 20:49

Glowing Anchor Links CSS3 text shadows offer a unique method of styling your webpage typography. And more specifically this snippet is an excellent resource for custom creative links with glowing hover effects. I doubt this effect can be pulled off elegantly in the majority of websites, but if you have the patience to get it looking nice you are…

	a {
	color: #00e;
	}
	a:visited {
	color: #551a8b;
	}
	a:hover {
	color: #06e;
	}
	a:focus {

trumball / Featured CSS3 Display Banner

Created May 24, 2013 20:49

Featured CSS3 Display Banner Generally you would need to setup a background image to duplicate this effect in other browsers. But in CSS3-supported engines we can generate dynamic banners which hang off the edge of your content wrappers, all without images! These may look good attached onto e-commerce products, image thumbnails, video previews, …

	.featureBanner {
	position: relative;
	margin: 20px
	}
	.featureBanner:before {
	content: "Featured";
	position: absolute;
	top: 5px;
	left: -8px;
	padding-right: 10px;

Todd Rumball trumball