Skip to content

Instantly share code, notes, and snippets.

View don1138's full-sized avatar
🐝

Don Schnitzius don1138

🐝
View GitHub Profile
@don1138
don1138 / box-sizing.css
Created June 11, 2013 21:29
CSS Box Sizing
/* apply a natural box layout model to all elements */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@don1138
don1138 / clearfix.css
Last active August 7, 2016 21:58
CSS Clearfix
/* CLEARFIX */
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
@don1138
don1138 / transparency.css
Created June 11, 2013 21:43
CSS Cross-Browser Transparency
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
@don1138
don1138 / blockquote.css
Created June 11, 2013 21:43
CSS Blockquote Template
/* CSS Blockquote Template */
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
@don1138
don1138 / media-queries.css
Created June 11, 2013 21:44
CSS Media Queries
/* General Media Queries */
/* 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) {
@don1138
don1138 / font-stacks.css
Last active January 30, 2024 09:03
CSS Modern Font Stacks
/* Modern Font Stacks */
/* System */
font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
/* System (Bootstrap 5.2.0) */
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
@don1138
don1138 / fullscreen-bg.css
Created June 11, 2013 21:47
CSS3 Fullscreen Background
/* Fullscreen Backgrounds With CSS3 */
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;
}
@don1138
don1138 / vertical-center.css
Created June 11, 2013 21:48
CSS Vertically Centered Content
/* Vertically Centered Content */
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
@don1138
don1138 / ampersand.css
Created June 11, 2013 21:49
CSS Fancy Ampersand
/* Fancy Ampersand */
.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}
@don1138
don1138 / triangular-bullets.css
Created June 11, 2013 21:49
CSS Triangular List Bullets
/* Triangular List Bullets */
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li:before {
content: "";
border-color: transparent #111;