LESS MIXINS for Highlighting Images
How do I make an less mixins for highlighting images?
Easy to use LESS mixins to create pure css arrows and other shapes. Main drawback is no use of box-shadow for a bit of depth due to the triangle potion being constructed with the border property.. What is a less mixins for highlighting images? How do you make a less mixins for highlighting images? This script and codes were developed by Jay Karlsven on 14 October 2022, Friday.
LESS MIXINS for Highlighting Images Previews
LESS MIXINS for Highlighting Images - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>LESS MIXINS for Highlighting Images</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="title"> <h1>LESS Mixins for Image Highlighting</h1>
</div>
<div id="car-image"> <img src="https://s3.amazonaws.com/jpk-image-hosting/car-dash.jpg" alt="" />
</div>
<div id="arrow-1" class="transparent"></div>
<div id="arrow-1-label" class="transparent"><p>Self-Affirmation Mirror</p></div>
<div id="extended-arrow-1" class="transparent"></div>
<div id="extended-arrow-1-label" class="transparent"><p>Drunk Auto-Pilot</p></div>
<div id="circle-highlight" class="transparent"></div>
<div id="circle-highlight-label" class="transparent"><p>Drugs/money/guns Container</p></div>
<div id="box-line" class="transparent"></div>
<div id="box-line-label" class="transparent"><p>Side Curtain Party Balloons</p></div>
<div id="instructions"> <dl> <dt>.arrow(@weight, @length, @rotation, @color);</dt> <dt>A simple straight arrow mixin</dt> <dd> Parameters and default values: <ol> <li>@weight: 4px (the stroke weight of the line)</li> <li>@length: 100px (the length of the line)</li> <li>@rotation: 0deg (the direction of the arrow)</li> <li>@color: orange (self-explanatory)</li> </ol> </dd> <dt>.arrow-extended(@weight, @length, @rotation, @ext-angle, @ext-length, @color);</dt> <dt>An arrow with an added line to make more complex paths</dt> <dd> Parameters and default values: <ol> <li>@weight: 4px (the stroke weight of the line)</li> <li>@length: 100px (the length of the line)</li> <li>@rotation: 0deg (the direction of the arrow)</li> <li>@ext-angle: 90deg (the direction the extra line will extend... values closer to right angles work better)</li> <li>@ext-lenght: 100px (the length of the additional line)</li> <li>@color: orange (self-explanatory)</li> </ol> </dd> <dt>.circle-line(@weight, @diameter, @length, @rotation, @color);</dt> <dt>A line with a circle at the end for highlighting an area</dt> <dd> Parameters and default values: <ol> <li>@weight: 4px (the stroke weight of the line)</li> <li>@diameter: 20px (the size of the circle)</li> <li>@length: 100px (the lenght of the line)</li> <li>@rotation: 0deg (the direction of the line)</li> <li>@color: orange (self-explanatory)</li> </ol> </dd> <dt>.circle-line-extended(@weight, @diameter, @length, @rotation, @ext-angle, @ext-length, @color);</dt> <dt>A circle-line with an additional line for complex paths</dt> <dd> Parameters and default values: <ol> <li>@weight: 4px (the stroke weight of the line)</li> <li>@diameter: 20px (the size of the circle)</li> <li>@length: 100px (the length of the line)</li> <li>@rotation: 0deg (the direction of the line)</li> <li>@ext-angle: 90deg (the direction of the additional line)</li> <li>@ext-length: 100px (the length of the addtional line)</li> <li>@color: orange (self-explanatory)</li> </ol> </dd> <dt>.box-line(@weight, @length, @box-width, @box-height, @rotation, @color);</dt> <dt>A line with a box on the end for highlighting an area.</dt> <dd> Parameters and default values: <ol> <li>@weight: 4px (the stroke weight of the line)</li> <li>@length: 100px (the length of the line)</li> <li>@box-width: 20px (the width of the box)</li> <li>@box-height: 20px (the height of the box)</li> <li>@rotation: 0deg (the direction of the line)</li> <li>@color: orange (self-explanatory)</li> </ol> </dd> <dt>.box-line-extended(@weight, @length, @box-width, @box-height, @rotation, @ext-angle, @ext-length, @color);</dt> <dt>A box line with an additional line for complex paths</dt> <dd> Parameters and default values: <ol> <li>@weight: 4px (the stroke weight of the line)</li> <li>@length: 100px (the length of the line)</li> <li>@box-width: 20px (the width of the box)</li> <li>@box-height: 20px (the height of the box)</li> <li>@rotation: 0deg (the direction of the line)</li> <li>@ext-angle: 90deg (the direction of the additional line)</li> <li>@ext-length: 100px (the length of the additional line)</li> <li>@color: orange (self-explanatory)</li> </ol> </dd> </dl> <p>Additionally, add ".active" to any of these classes for a flashing animation on the line.</p> <h2>Image Labels</h2> <p>This mixin allows the easy addition of a text label to any image or div. The HTML:</p> <pre> <div id="labeled-img"> <img src="#" alt="" /> <p>HELLO LABEL WORLD!</p> </div> </pre> <p>Apply one of the following mixins to #labeled-img in your LESS. Any direct child img of the containing div (#labeled-img in this case) will have a width of 100% applied, and any direct child p will have appropriate positioning based on the arguments passed to the mixin.</p> <div id="bottom-labeled-image"> <img src="https://s3.amazonaws.com/jpk-image-hosting/car-dash.jpg" alt="" /> <p>My Bottom Label</p> </div> <div id="top-labeled-image"> <p>My Top Label</p> <img src="https://s3.amazonaws.com/jpk-image-hosting/car-dash.jpg" alt="" /> </div> <div id="left-labeled-image"> <p>My Left Label</p> <img src="https://s3.amazonaws.com/jpk-image-hosting/car-dash.jpg" alt="" /> </div> <div id="right-labeled-image"> <p>My Right Label</p> <img src="https://s3.amazonaws.com/jpk-image-hosting/car-dash.jpg" alt="" /> </div>
</div>
<div id="instr-arrow-1"></div>
<div id="instr-arrow-2"></div>
<div id="instr-circle-1"></div>
<div id="instr-circle-2"></div>
<div id="instr-box-1"></div>
<div id="instr-box-2"></div>
<div id="instr-arrow-3" class="active"></div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
LESS MIXINS for Highlighting Images - Script Codes CSS Codes
@-webkit-keyframes colorswap { to { background-color: #FF4500; }
}
@keyframes colorswap { to { background-color: #FF4500; }
}
@-webkit-keyframes borderswap { to { border-color: #FF4500; }
}
@keyframes borderswap { to { border-color: #FF4500; }
}
@-webkit-keyframes borderswap-left { to { border-left-color: #FF4500; }
}
@keyframes borderswap-left { to { border-left-color: #FF4500; }
}
#arrow-1 { position: absolute; -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; height: 4px; width: 280px; background-color: #00DFFC; top: 110px; left: 683px;
}
#arrow-1:after { content: ""; position: absolute; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid #00DFFC; right: -12px; top: -6px;
}
#arrow-1.active { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#arrow-1.active:after { -webkit-animation: borderswap-left 0.3s infinite alternate; animation: borderswap-left 0.3s infinite alternate;
}
#arrow-1-label { position: absolute; top: 84px; left: 690px; font-weight: bold;
}
#extended-arrow-1 { position: absolute; -webkit-transform: rotate(270deg); transform: rotate(270deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; height: 4px; width: 60px; background-color: #00DFFC; top: 370px; left: 480px;
}
#extended-arrow-1:after { content: ""; position: absolute; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid #00DFFC; right: -12px; top: -6px;
}
#extended-arrow-1.active { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#extended-arrow-1.active:after { -webkit-animation: borderswap-left 0.3s infinite alternate; animation: borderswap-left 0.3s infinite alternate;
}
#extended-arrow-1:before { content: ""; position: absolute; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 2px 2px; transform-origin: 2px 2px; height: 4px; width: 200px; background-color: #00DFFC; left: 0; top: 0;
}
#extended-arrow-1.active:before { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#extended-arrow-1-label { position: absolute; top: 344px; left: 690px; font-weight: bold;
}
#title { text-align: center;
}
#car-image img { border: 2px solid black; width: 600px; margin: 0 40px 40px;
}
#circle-highlight { position: absolute; -webkit-transform: rotate(120deg); transform: rotate(120deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; height: 4px; width: 100px; background-color: #00DFFC; top: 170px; left: 325px;
}
#circle-highlight:after { content: ""; position: absolute; border: 4px solid #00DFFC; height: 30px; width: 30px; border-radius: 50%; right: -34px; top: -16px;
}
#circle-highlight.active { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#circle-highlight.active:after { -webkit-animation: borderswap 0.3s infinite alternate; animation: borderswap 0.3s infinite alternate;
}
#circle-highlight:before { content: ""; position: absolute; -webkit-transform: rotate(240deg); transform: rotate(240deg); -webkit-transform-origin: 2px 2px; transform-origin: 2px 2px; height: 4px; width: 363px; background-color: #00DFFC; left: 0; top: 0;
}
#circle-highlight.active:before { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#circle-highlight-label { position: absolute; top: 146px; left: 690px; font-weight: bold;
}
#box-line { position: absolute; -webkit-transform: rotate(270deg); transform: rotate(270deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; height: 4px; width: 270px; background-color: #00DFFC; top: 415px; left: 106px;
}
#box-line:after { content: ""; position: absolute; border: 4px solid #00DFFC; height: 40px; width: 30px; right: -34px; top: -22px;
}
#box-line.active { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#box-line.active:after { -webkit-animation: borderswap 0.3s infinite alternate; animation: borderswap 0.3s infinite alternate;
}
#box-line:before { content: ""; position: absolute; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 2px 2px; transform-origin: 2px 2px; height: 4px; width: 575px; background-color: #00DFFC; left: 0; top: 0;
}
#box-line.active:before { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#box-line-label { position: absolute; top: 389px; left: 690px; font-weight: bold;
}
.transparent { opacity: 0;
}
#instructions { margin: 20px 40px; min-width: 800px;
}
#instructions dt { font-weight: bold; margin-bottom: 5px;
}
#instructions dd ol { margin-top: 0;
}
#instr-arrow-1 { position: absolute; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; height: 4px; width: 100px; background-color: orange; top: 600px; left: 600px;
}
#instr-arrow-1:after { content: ""; position: absolute; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid orange; right: -12px; top: -6px;
}
#instr-arrow-1.active { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#instr-arrow-1.active:after { -webkit-animation: borderswap-left 0.3s infinite alternate; animation: borderswap-left 0.3s infinite alternate;
}
#instr-arrow-2 { position: absolute; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; height: 4px; width: 100px; background-color: orange; top: 750px; left: 905px;
}
#instr-arrow-2:after { content: ""; position: absolute; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid orange; right: -12px; top: -6px;
}
#instr-arrow-2.active { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#instr-arrow-2.active:after { -webkit-animation: borderswap-left 0.3s infinite alternate; animation: borderswap-left 0.3s infinite alternate;
}
#instr-arrow-2:before { content: ""; position: absolute; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 2px 2px; transform-origin: 2px 2px; height: 4px; width: 100px; background-color: orange; left: 0; top: 0;
}
#instr-arrow-2.active:before { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#instr-circle-1 { position: absolute; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; height: 4px; width: 100px; background-color: orange; top: 950px; left: 600px;
}
#instr-circle-1:after { content: ""; position: absolute; border: 4px solid orange; height: 20px; width: 20px; border-radius: 50%; right: -24px; top: -11px;
}
#instr-circle-1.active { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#instr-circle-1.active:after { -webkit-animation: borderswap 0.3s infinite alternate; animation: borderswap 0.3s infinite alternate;
}
#instr-circle-2 { position: absolute; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; height: 4px; width: 100px; background-color: orange; top: 1100px; left: 740px;
}
#instr-circle-2:after { content: ""; position: absolute; border: 4px solid orange; height: 20px; width: 20px; border-radius: 50%; right: -24px; top: -11px;
}
#instr-circle-2.active { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#instr-circle-2.active:after { -webkit-animation: borderswap 0.3s infinite alternate; animation: borderswap 0.3s infinite alternate;
}
#instr-circle-2:before { content: ""; position: absolute; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 2px 2px; transform-origin: 2px 2px; height: 4px; width: 100px; background-color: orange; left: 0; top: 0;
}
#instr-circle-2.active:before { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#instr-box-1 { position: absolute; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; height: 4px; width: 100px; background-color: orange; top: 1350px; left: 620px;
}
#instr-box-1:after { content: ""; position: absolute; border: 4px solid orange; height: 20px; width: 20px; right: -24px; top: -12px;
}
#instr-box-1.active { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#instr-box-1.active:after { -webkit-animation: borderswap 0.3s infinite alternate; animation: borderswap 0.3s infinite alternate;
}
#instr-box-2 { position: absolute; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; height: 4px; width: 100px; background-color: orange; top: 1510px; left: 740px;
}
#instr-box-2:after { content: ""; position: absolute; border: 4px solid orange; height: 20px; width: 20px; right: -24px; top: -12px;
}
#instr-box-2.active { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#instr-box-2.active:after { -webkit-animation: borderswap 0.3s infinite alternate; animation: borderswap 0.3s infinite alternate;
}
#instr-box-2:before { content: ""; position: absolute; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 2px 2px; transform-origin: 2px 2px; height: 4px; width: 100px; background-color: orange; left: 0; top: 0;
}
#instr-box-2.active:before { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#instr-arrow-3 { position: absolute; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; height: 8px; width: 100px; background-color: orange; top: 1684px; left: 683px;
}
#instr-arrow-3:after { content: ""; position: absolute; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 28px solid orange; right: -24px; top: -12px;
}
#instr-arrow-3.active { -webkit-animation: colorswap 0.3s infinite alternate; animation: colorswap 0.3s infinite alternate;
}
#instr-arrow-3.active:after { -webkit-animation: borderswap-left 0.3s infinite alternate; animation: borderswap-left 0.3s infinite alternate;
}
#bottom-labeled-image { position: relative; width: 300px; margin-top: 32px; float: left; clear: left;
}
#bottom-labeled-image > img { width: 100%;
}
#bottom-labeled-image > p { font-weight: bold; font-size: 1.2em; margin: 0; box-sizing: border-box; width: 100%; text-align: center; padding: 10px 5px 0;
}
#top-labeled-image { position: relative; width: 300px; margin-left: 30px; float: left;
}
#top-labeled-image > img { width: 100%;
}
#top-labeled-image > p { font-weight: bold; font-size: 1.2em; margin: 0; box-sizing: border-box; width: 100%; text-align: center; padding: 0 5px 10px;
}
#left-labeled-image { position: relative; width: 300px; margin-top: 32px; margin-left: 175px; float: left;
}
#left-labeled-image > img { width: 100%;
}
#left-labeled-image > p { font-weight: bold; font-size: 1.2em; margin: 0; box-sizing: border-box; width: 150px; position: absolute; left: -160px; top: 48%; text-align: right;
}
#right-labeled-image { position: relative; width: 300px; margin-top: 32px; margin-left: 30px; float: left;
}
#right-labeled-image > img { width: 100%;
}
#right-labeled-image > p { font-weight: bold; font-size: 1.2em; margin: 0; box-sizing: border-box; width: 150px; position: absolute; right: -160px; top: 48%;
}
LESS MIXINS for Highlighting Images - Script Codes JS Codes
var tl = new TimelineMax();
tl.fromTo($("#arrow-1-label"), 0.5, {x:20,opacity:0}, {x:0,opacity:1,ease:Circ.easeOut}) .fromTo($("#arrow-1"), 0.5, {scaleX:0,opacity:0}, {scaleX:1,opacity:1,ease:Circ.easeOut,onComplete:flashOn, onCompleteParams:["#arrow-1"]}) .addCallback(flashOff, "+=2", [$("#arrow-1")]) .fromTo($("#circle-highlight-label"), 0.5, {x:20,opacity:0}, {x:0,opacity:1,ease:Circ.easeOut,delay:1}) .fromTo($("#circle-highlight"), 0.5, {scale:0,opacity:0,transformOrigin:"top left"}, {scale:1,opacity:1,ease:Circ.easeOut,onComplete:flashOn, onCompleteParams:["#circle-highlight"]}) .addCallback(flashOff, "+=2", [$("#circle-highlight")]) .fromTo($("#extended-arrow-1-label"), 0.5, {x:20,opacity:0}, {x:0,opacity:1,ease:Circ.easeOut,delay:1}) .fromTo($("#extended-arrow-1"), 0.5, {scaleX:0,opacity:0}, {scaleX:1,opacity:1,ease:Circ.easeOut,onComplete:flashOn,onCompleteParams:["#extended-arrow-1"]}) .addCallback(flashOff, "+=2", [$("#extended-arrow-1")]) .fromTo($("#box-line-label"), 0.5, {x:20,opacity:0}, {x:0,opacity:1,ease:Circ.easeOut,delay:1}) .fromTo($("#box-line"), 0.5, {scale:0,opacity:0,transformOrigin:"top left"}, {scale:1,opacity:1,ease:Circ.easeOut,onComplete:flashOn,onCompleteParams:["#box-line"]}) .addCallback(flashOff, "+=2", [$("#box-line")]);
// $("#arrow-1-label").on("click", function() { $("#arrow-1").toggleClass("active");});
// $("#extended-arrow-1-label").on("click", function() { $("#extended-arrow-1").toggleClass("active");});
// $("#circle-highlight-label").on("click", function() { $("#circle-highlight").toggleClass("active");});
// $("#box-line-label").on("click", function() { $("#box-line").toggleClass("active");});
function flashOn(p_id) { $(p_id).addClass("active");
}
function flashOff(p_id) { $(p_id).removeClass("active");
}
| Developer | Jay Karlsven |
| Username | JayV30 |
| Uploaded | October 14, 2022 |
| Rating | 3 |
| Size | 6,114 Kb |
| Views | 22,264 |
Do you need developer help for LESS MIXINS for Highlighting Images?
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!
Jay Karlsven (JayV30) Script Codes
| Name | Size |
| Rotating Gradient Overlay | 3,022 Kb |
| SVG Animated Text Stroke | 3,635 Kb |
| Profile CSS | 2,423 Kb |
| A Pen by Jay Karlsven | 4,499 Kb |
Create amazing Facebook ads 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!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Stan Williams | Stanssongs | 6,706 Kb |
| Large canvas mousemove experiment | Jibbon | 2,885 Kb |
| Background-blend-mode Test | 0x04 | 4,744 Kb |
| IE11 Test | Boostnewmedia | 4,998 Kb |
| Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
| Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
| Animating characters with jQuery | 042 | 2,776 Kb |
| Scroll Arrow | Robooneus | 4,437 Kb |
| Ipad Mini Showcase | Hornebom | 10,479 Kb |
| A Pen by Mike Otis | Mikeotis | 3,185 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!