Flex Box Css

Best resource:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Advertisements

Create an underline using psuedo classes without border-bottom

.paygift-data{
.divider-row-single { //parent class
position: relative;
border-bottom: 0 solid @hr-grey-4;
padding-bottom:15px;
&:after{ //psuedo class
background-color: @hr-grey-4;
content: “”;
position: absolute;
height: 1px;
display: block;
left: -10px;
right: -10px;
margin-top: 15px;
}
}
}

Preloading images before page onload using css and js

css:

body:after
{
content: url(‘../../img/spinner/b.webp’);

}

 

js/ajax:

window.onload = function() {
	setTimeout(function() {
		// XHR to request a JS and a CSS
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.js');
		xhr.send('');
		xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.css');
		xhr.send('');
		// preload image
		new Image().src = "http://domain.tld/preload.png";
	}, 1000);
};