CSS Useful Snippets

margin: 0 auto;

top: 50%;
transform: translateY(-50%);

background-image: url("");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 0;width: 100%;
padding: calc(100% * (9 / 16)) 0 0 0;

position: absolute;
top: 0;
left: 0;
z-index: 1000;
margin: 0;

• A square with a notch at bottom-right

clip-path: polygon(0% 0%, 0% 100%, 77% 100%, 100% 77%, 100% 0%);

• Fluid Width Video

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 -> 9/16*100% */
	padding-top: 25px; /* This creates black bars at the top and the bottom of the video. */
	height: 0;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

• 800 is the original hard-coded width

var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
function scaleView() {
	console.log(iOS)
	var w = (window.innerWidth / 800).toString();
	if (w < 1 && !iOS)
		$('#content').css('transform', 'scale(' + w + ')');
	if (iOS)
		document.getElementById('content').style.webkitTransform = 'scale(' + w + ',' + w + ')';
}

<div style="page-break-after: always;"></div>

• Put @media after standard CSS or it won’t work.

.class{
  font-size:180px;
}

@media screen and (max-width: 350px) {
  .class{
    font-size:120px;
  }
}

KKBOX.isMobile = /(phon|android|iPad|iPod|opera mini|blackberry|IEMobile|nokia|motorola|sonyericsson|samsung|lg-|sie-|tablet)/i.test(navigator.userAgent);
KKBOX.isTablet = /(^.*android((?!Mobile).)*$|iPad|tablet)/i.test(navigator.userAgent);

• Default with color: ....
• Use border-bottom : text-decoration: none; border-bottom: ...
• Use background or background-image :

  text-decoration: none;
  background: -webkit-gradient(linear,left top,left bottom,color-stop(70%,transparent),color-stop(70%,rgba(101,125,225,.4)))