where I keep miscellaneous code snippets

code drop

<!-- to force a mobile view on a responsive site. Place in-between the header tags. -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

/* To correctly size elements with borders and padding */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* to make my fonts prettier */

h1, h2, h3, h4, h5, h6 {
font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";

font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;

text-rendering: optimizeLegibility;
}



/* to make my css3 animations smoother */

transition-duration: 0.4s;
-o-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;



/* to prevent css3 animation jitters */

backface-visibility: hidden;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;



/* performance boost for images and animated or fixed elements */
/* pushes elements to the GPU */

-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);



/* Make an element un-selectable/un-highlightable */

-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;



/* Use this to test out how background images hold their position on page scroll */

background-image:url();
background-repeat:no-repeat;
background-attachment: fixed;



/* Fin. */