trumball’s gists

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 / 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 / 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 / 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 / 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 / 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 / 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 / CSS Tooltip Hovers

Created May 24, 2013 19:45

CSS Tooltip Hovers There are lots of open source jQuery-based tooltips which you can implement on your websites. But CSS-based tooltips are very rare, and this is one of my favorite snippets. Just copy this over into your stylesheet and using the new HTML5 data-attributes you can setup the tooltip text via data-tooltip.

trumball / Continued List Ordering

Created May 24, 2013 19:43

Continued List Ordering I feel this may not be an extremely popular snippet, but it does have its market among developers. There may be situations where you’ll need to continue a list of items but split into two separate UL elements. Check out the code above for an awesome CSS-only fix.

	ol.chapters {
	list-style: none;
	margin-left: 0;
	}

	ol.chapters > li:before {
	content: counter(chapter) ". ";
	counter-increment: chapter;
	font-weight: bold;
	float: left;

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

	a {
	border-bottom:1px solid #bbb;
	color:#666;
	display:inline-block;
	position:relative;
	text-decoration:none;
	}
	a:hover,
	a:focus {
	color:#36c;

Todd Rumball trumball