Useful CSS Stuff

CSS only Rollers. Tiny repeated SVG inline CSS.

.psc-rollers-horizontal{
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg width="9.5201mm" height="45.916mm" version="1.1" viewBox="0 0 9.5201 45.916" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient33" x1="330.51" x2="346.39" y1="19.993" y2="19.993" gradientTransform="scale(.40373 2.4769)" gradientUnits="userSpaceOnUse"><stop stop-color="%235a5a5a" offset="0"/><stop stop-color="%23fff" offset=".48578"/><stop stop-color="%235a5a5a" offset="1"/></linearGradient></defs><g transform="translate(-132.03 -46.269)"><rect x="135.8" y="48.147" width="1.6738" height="42.069" rx=".83739" ry=".50933"/><rect x="133.46" y="49.546" width="6.3606" height="39.279" rx=".83739" ry="2.1832" fill="url(%23linearGradient33)" stroke="%23505050" stroke-linecap="round" stroke-linejoin="round" stroke-width=".05"/></g><rect x="-1.4211e-14" width="9.5201" height="2.2318" rx="0" ry="0" fill="%23505050" stroke-width=".3206"/><rect x="-1.4211e-14" y="43.684" width="9.5201" height="2.2318" rx="0" ry="0" fill="%23505050" stroke-width=".3206"/></svg>');
	background-repeat: repeat-x;
	background-size: contain;
}

.psc-rollers-vertical{
	background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg width="45.916mm" height="9.5201mm" version="1.1" viewBox="0 0 45.916 9.5201" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient33" x1="330.51" x2="346.39" y1="19.993" y2="19.993" gradientTransform="scale(.40373 2.4769)" gradientUnits="userSpaceOnUse"><stop stop-color="%235a5a5a" offset="0"/><stop stop-color="%23fff" offset=".48578"/><stop stop-color="%235a5a5a" offset="1"/></linearGradient></defs><g transform="rotate(90 112.11 -19.925)"><rect x="135.8" y="48.147" width="1.6738" height="42.069" rx=".83739" ry=".50933"/><rect x="133.46" y="49.546" width="6.3606" height="39.279" rx=".83739" ry="2.1832" fill="url(%23linearGradient33)" stroke="%23505050" stroke-linecap="round" stroke-linejoin="round" stroke-width=".05"/></g><rect transform="rotate(90)" y="-45.916" width="9.5201" height="2.2318" rx="0" ry="0" fill="%23505050" stroke-width=".3206"/><rect transform="rotate(90)" y="-2.2318" width="9.5201" height="2.2318" rx="0" ry="0" fill="%23505050" stroke-width=".3206"/></svg>');
	background-repeat: repeat-y;
	background-size: contain;
}

26 Likes