Experiment - SCSS SVG Background Image with Variables

Developer
Chris Holder
Size
3,270 Kb
Views
58,667

How do I make an experiment - scss svg background image with variables?

Working through some solutions to make these work, especially the hover transition in example #1. Any input/suggestions welcome.. What is a experiment - scss svg background image with variables? How do you make a experiment - scss svg background image with variables? This script and codes were developed by Chris Holder on 20 June 2022, Monday.

Experiment - SCSS SVG Background Image with Variables Previews
IQ Test

Experiment - SCSS SVG Background Image with Variables - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Experiment - SCSS SVG Background Image with Variables</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ [class*="ex-"] { width: 100%; height: 400px; border: 1px solid #ccc; margin: 10px 0;
}
/*
// SVG
// Kinda Works! But needs to be much much smoother.
*/
.ex-1, p { transition: all 1s ease-in-out;
}
.ex-1 { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px"><rect fill="#3498db" width="7.5" height="7.5"/><rect fill="white" x="7.5" width="7.5" height="7.5"/><rect fill="white" y="7.5" width="7.5" height="7.5"/><rect fill="#b6daf2" x="7.5" y="7.5" width="7.5" height="7.5"/></svg>');
}
.ex-1 p { background: #e74c3c; width: 50%; margin: 150px auto; padding: 20px 0; text-align: center; color: white; font-family: sans-serif; font-size: 13px; font-weight: bold; box-shadow: 4px 4px 0 0 #c0392b;
}
.ex-1:hover { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="152px" height="152px"><rect fill="#2ecc71" width="76" height="76"/><rect fill="white" x="76" width="76" height="76"/><rect fill="white" y="76" width="76" height="76"/><rect fill="#a8ebc4" x="76" y="76" width="76" height="76"/></svg>');
}
.ex-1:hover p { background: #9b59b6; box-shadow: 4px 4px 0 0 #8e44ad;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="examples"> <div class="ex-1"><p>HOVER ME</p></div>
</div>
</body>
</html>

Experiment - SCSS SVG Background Image with Variables - Script Codes CSS Codes

[class*="ex-"] { width: 100%; height: 400px; border: 1px solid #ccc; margin: 10px 0;
}
/*
// SVG
// Kinda Works! But needs to be much much smoother.
*/
.ex-1, p { transition: all 1s ease-in-out;
}
.ex-1 { background: url('data:image/svg+xml;utf8,');
}
.ex-1 p { background: #e74c3c; width: 50%; margin: 150px auto; padding: 20px 0; text-align: center; color: white; font-family: sans-serif; font-size: 13px; font-weight: bold; box-shadow: 4px 4px 0 0 #c0392b;
}
.ex-1:hover { background: url('data:image/svg+xml;utf8,');
}
.ex-1:hover p { background: #9b59b6; box-shadow: 4px 4px 0 0 #8e44ad;
}
Experiment - SCSS SVG Background Image with Variables - Script Codes
Experiment - SCSS SVG Background Image with Variables - Script Codes
Home Page Home
Developer Chris Holder
Username see8ch
Uploaded June 20, 2022
Rating 3
Size 3,270 Kb
Views 58,667
Do you need developer help for Experiment - SCSS SVG Background Image with Variables?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Holder (see8ch) Script Codes
Name
One from many.
GSchool Workshop Demo - Winter 2015
Readable typography mixin - auto line height
Contact Form Template
DevCamp 2014 - Denver Public Library
Code Motel Logo
GSchool Workshop Demo - Winter 2015
My Logo
A Pen by Chris Holder
Northerli Logo
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!