demsone’s gists

demsone / flexbox

Created June 17, 2013 00:08

Flexbox - new modal box

	body {
	display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
	display: -moz-box; /* OLD: Firefox (buggy) */
	display: -ms-flexbox; /* MID: IE 10 */
	display: -webkit-flex; /* NEW, Chrome 21+ */
	display: flex; /* NEW: Opera 12.1, Firefox 22+ */

	-webkit-box-align: center; -moz-box-align: center; /* OLD… */
	-ms-flex-align: center; /* You know the drill now… */
	-webkit-align-items: center;

demsone / Hyphen in CSS

Created June 17, 2013 04:24

Hyphen in CSS


	No Hyphen

	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Code

	p {
	text-align: justify;
	-webkit-hyphens: none;
	-moz-hyphens: none;

demsone / Display URLS in a Printed Webpage

Created June 17, 2013 04:25

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 handy when visitors need to access …

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

demsone / Dark Grey Rounded Buttons

Created June 17, 2013 04:26

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 different color ranges.

	.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 bottombottom, 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;

demsone / CSS Tooltip Hovers

Created June 17, 2013 04:26

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.

demsone / Make “Pre” Text Wrap

Created June 17, 2013 04:27

Text in <pre> tags doesn't wrap by default. For example, see the code snippet below! If this is causing layout problems, one solution is to give the pre block an overflow property to hide the excess or cause it to scroll. The other solution is to have it wrap.

	/* Browser specific (not valid) styles to make preformatted text wrap */

	pre {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
	}

demsone / Cross-Browser Minimum Height

Created June 17, 2013 04:28

Developers who have needed to work with min-height know all about the shady support. Many newer browsers can handle this perfectly, however Internet Explorer and older versions of Firefox do have trouble. This set of codes should provide a fix to any related bugs.

	#container {
	min-height: 550px;
	height: auto !important;
	height: 550px;
	}

demsone / Sticky Footer

Created June 17, 2013 04:29

This is actually a lot more useful than it sounds, but appending a fixed footer into your website is quite simple. These footers will scroll with the user and may contain helpful information about your site or unique contact details. Ideally this would only be implemented in cases where it truly adds value to the user interface.

demsone / CSS3 Column Text

Created June 17, 2013 04:30

CSS3 columns would be nice to see in website layouts, but the reality is how we can split up text based on column styles. Use this snippet to place any number of columns inline with your paragraphs, where text will split evenly based on your column number.

	#columns-3 {
	text-align: justify;
	-moz-column-count: 3;
	-moz-column-gap: 12px;
	-moz-column-rule: 1px solid #c4c8cc;
	-webkit-column-count: 3;
	-webkit-column-gap: 12px;
	-webkit-column-rule: 1px solid #c4c8cc;
	}

demsone / Outer CSS3 Shadow

Created June 17, 2013 04:30

In relation to the inner CSS3 shadows I also want to present an outer shadow code snippet. Note the 3rd number in our syntax represents blur distance while the 4th number represents the spread. You can learn more about these values from W3Schools.

	#mydiv {
	-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
	-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
	box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
	}

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

	#footer {
	position: fixed;
	left: 0px;
	bottombottom: 0px;
	height: 30px;
	width: 100%;
	background: #444;
	}

	/* IE 6 */