Dynamic Logo Creation

Developer
Pete Nawara
Size
5,961 Kb
Views
24,288
  1. Dynamic Logo Creation Previews
  2. Dynamic Logo Creation HTML Codes
  3. Dynamic Logo Creation CSS Codes
  4. Dynamic Logo Creation JS Codes

How do I make an dynamic logo creation?

Create a dynamic team logo on the fly based on form inputs.. What is a dynamic logo creation? How do you make a dynamic logo creation? This script and codes were developed by Pete Nawara on 10 September 2022, Saturday.

Dynamic Logo Creation Previews
IQ Test

Dynamic Logo Creation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic Logo Creation</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Electrolize);
* { box-sizing: border-box; user-select: none;
}
body { width: 800px; margin: 0 auto; font-family: "Open Sans", sans-serif; background: #eee url(https://subtlepatterns.com/patterns/greyzz.png);
}
body form .teamname { display: inline-block; width: 398px;
}
body form label { display: block; margin-bottom: 5px;
}
body form input[type=text] { padding: 10px; margin-bottom: 20px; width: 378px;
}
body form .colorset { width: 378px; background: ghostwhite; margin: 10px 20px 10px 0px; position: relative; padding-top: 15px; display: inline-block;
}
body form .colorset .title { font-size: 14px; position: absolute; top: -1px; background: ghostwhite; padding: 0px 5px; line-height: 5px;
}
body form .colorset .color { text-indent: -1000em; width: 48px; height: 48px; background: #eee; display: inline-block; position: relative; margin: 4px; cursor: pointer;
}
body form .colorset .color:hover { opacity: .9;
}
body form .colorset .color:after { content: ""; display: block; border: 2px solid transparent; width: 52px; height: 52px; position: absolute; top: -4px; left: -4px;
}
body form .colorset .color.selected:after { border: 2px solid #0099ff;
}
body form .colorset .color.black { background: black;
}
body form .colorset .color.maroon { background: maroon;
}
body form .colorset .color.darkcyan { background: darkcyan;
}
body form .colorset .color.deeppink { background: deeppink;
}
body form .colorset .color.orangered { background: orangered;
}
body form .colorset .color.darkorange { background: darkorange;
}
body form .colorset .color.gold { background: gold;
}
body form .colorset .color.yellow { background: yellow;
}
body form .colorset .color.lightgreen { background: lightgreen;
}
body form .colorset .color.darkgreen { background: darkgreen;
}
body form .colorset .color.skyblue { background: skyblue;
}
body form .colorset .color.midnightblue { background: midnightblue;
}
body form .colorset .color.dodgerblue { background: dodgerblue;
}
body form .colorset .color.indigo { background: indigo;
}
body form .colorset .color.ivory { background: ivory;
}
body form .colorset .color.purple { background: purple;
}
body form .colorset .color.firebrick { background: firebrick;
}
body form .colorset .color.aquamarine { background: aquamarine;
}
body form .colorset .color.lemonchiffon { background: lemonchiffon;
}
body form .colorset .color.lightsalmon { background: lightsalmon;
}
body form .colorset .color.violet { background: violet;
}
body form .colorset .color.thistle { background: thistle;
}
body form .colorset .color.lightsteelblue { background: lightsteelblue;
}
body form .colorset .color.paleturquoise { background: paleturquoise;
}
body form .colorset#secondary .color { border: 1px solid #ccc;
}
body form .colorset#secondary .color:after { top: -5px; left: -5px;
}
body form button { background: linear-gradient(to bottom, white 50%, #eee 95%); border: 1px solid #333; color: black; padding: 10px 40px; margin: 20px 0; width: 100%;
}
body .examplebox { display: inline-block; width: 398px;
}
body .example { padding: 20px 0; width: 378px; position: relative;
}
body .example .colorlogo { width: 48px; height: 48px; background: black; display: inline-block; text-align: center; font-size: 44px; position: absolute; top: 8px;
}
body .example .colorlogo .letter { text-transform: uppercase; font-family: "Electrolize", tahoma; position: relative; top: -8px; left: 0px; color: aquamarine;
}
body .example .thethe { margin-left: 60px; color: black; font-size: 18px;
}
body .example .name { font-size: 18px; text-transform: capitalize;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Create Team</h1>
<form> <div class="teamname"> <label>Team Name</label> <input id="teamName" type="text" placeholder="Make it a good one." /> </div> <div class="examplebox"> <label>Example</label> <div class="example"> <div class="colorlogo"><span class="letter">R</span></div> <span class="thethe">The</span> <span class="name">Examples</span> </div> </div> <label>Choose Your Team Colors</label> <fieldset id="primary" class="colorset"> <div class="title">Primary Color</div> <div id="black" class="black color selected">Black</div> <div id="maroon" class="maroon color">Maroon</div> <div id="red" class="orangered color">Red</div> <div id="orange" class="darkorange color">Orange</div> <div id="darkcyan" class="darkcyan color">Dark Cyan</div> <div id="deeppink" class="deeppink color">Deep Pink</div> <div id="dodgerblue" class="dodgerblue color">Dodger Blue</div> <div id="green" class="darkgreen color">Green</div> <div id="purple" class="purple color">Purple</div> <div id="blue" class="midnightblue color">Blue</div> <div id="violet" class="indigo color">Violet</div> <div id="firebrick" class="firebrick color">firebrick</div> </fieldset> <fieldset id="secondary" class="colorset"> <div class="title">Secondary Color</div> <div id="aquamarine" class="aquamarine color selected">aquamarine</div> <div id="lemonchiffon" class="lemonchiffon color">lemonchiffon</div> <div id="lightsalmon" class="lightsalmon color">lightsalmon</div> <div id="violet" class="violet color">violet</div> <div id="gold" class="gold color">Light Orange</div> <div id="yellow" class="yellow color">Yellow</div> <div id="lightgreen" class="lightgreen color">Lime Green</div> <div id="thistle" class="thistle color">Green</div> <div id="skyBlue" class="skyblue color">Sky Blue</div> <div id="lightsteelblue" class="lightsteelblue color">lightsteelblue</div> <div id="paleturquoise" class="paleturquoise color">Violet</div> <div id="white" class="ivory color">White</div> </fieldset> <!--<button>Create Team</button>-->
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dynamic Logo Creation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Electrolize);
* { box-sizing: border-box; user-select: none;
}
body { width: 800px; margin: 0 auto; font-family: "Open Sans", sans-serif; background: #eee url(https://subtlepatterns.com/patterns/greyzz.png);
}
body form .teamname { display: inline-block; width: 398px;
}
body form label { display: block; margin-bottom: 5px;
}
body form input[type=text] { padding: 10px; margin-bottom: 20px; width: 378px;
}
body form .colorset { width: 378px; background: ghostwhite; margin: 10px 20px 10px 0px; position: relative; padding-top: 15px; display: inline-block;
}
body form .colorset .title { font-size: 14px; position: absolute; top: -1px; background: ghostwhite; padding: 0px 5px; line-height: 5px;
}
body form .colorset .color { text-indent: -1000em; width: 48px; height: 48px; background: #eee; display: inline-block; position: relative; margin: 4px; cursor: pointer;
}
body form .colorset .color:hover { opacity: .9;
}
body form .colorset .color:after { content: ""; display: block; border: 2px solid transparent; width: 52px; height: 52px; position: absolute; top: -4px; left: -4px;
}
body form .colorset .color.selected:after { border: 2px solid #0099ff;
}
body form .colorset .color.black { background: black;
}
body form .colorset .color.maroon { background: maroon;
}
body form .colorset .color.darkcyan { background: darkcyan;
}
body form .colorset .color.deeppink { background: deeppink;
}
body form .colorset .color.orangered { background: orangered;
}
body form .colorset .color.darkorange { background: darkorange;
}
body form .colorset .color.gold { background: gold;
}
body form .colorset .color.yellow { background: yellow;
}
body form .colorset .color.lightgreen { background: lightgreen;
}
body form .colorset .color.darkgreen { background: darkgreen;
}
body form .colorset .color.skyblue { background: skyblue;
}
body form .colorset .color.midnightblue { background: midnightblue;
}
body form .colorset .color.dodgerblue { background: dodgerblue;
}
body form .colorset .color.indigo { background: indigo;
}
body form .colorset .color.ivory { background: ivory;
}
body form .colorset .color.purple { background: purple;
}
body form .colorset .color.firebrick { background: firebrick;
}
body form .colorset .color.aquamarine { background: aquamarine;
}
body form .colorset .color.lemonchiffon { background: lemonchiffon;
}
body form .colorset .color.lightsalmon { background: lightsalmon;
}
body form .colorset .color.violet { background: violet;
}
body form .colorset .color.thistle { background: thistle;
}
body form .colorset .color.lightsteelblue { background: lightsteelblue;
}
body form .colorset .color.paleturquoise { background: paleturquoise;
}
body form .colorset#secondary .color { border: 1px solid #ccc;
}
body form .colorset#secondary .color:after { top: -5px; left: -5px;
}
body form button { background: linear-gradient(to bottom, white 50%, #eee 95%); border: 1px solid #333; color: black; padding: 10px 40px; margin: 20px 0; width: 100%;
}
body .examplebox { display: inline-block; width: 398px;
}
body .example { padding: 20px 0; width: 378px; position: relative;
}
body .example .colorlogo { width: 48px; height: 48px; background: black; display: inline-block; text-align: center; font-size: 44px; position: absolute; top: 8px;
}
body .example .colorlogo .letter { text-transform: uppercase; font-family: "Electrolize", tahoma; position: relative; top: -8px; left: 0px; color: aquamarine;
}
body .example .thethe { margin-left: 60px; color: black; font-size: 18px;
}
body .example .name { font-size: 18px; text-transform: capitalize;
}

Dynamic Logo Creation - Script Codes JS Codes

/* Next up: pick some good colors */
// Team Initial Reader
$("#teamName").bind("keyup paste mousemove", function() { var char = this.value.charAt(0); // Use vanilla JavaScript to get the first character of the text field $(".letter").text(char); // Asign the first character of the text field to the colorlogo letter if( !$(this).val() ) { $(".letter").html("R"); $(".name").html("Examples"); }
});
//Team Name Reader
$('#teamName').keyup(function () { $('.name').text($(this).val());
});
// Button Selection
$("#primary .color").click(function () { $(this).parent().children(".color").removeClass("selected"); $(this).toggleClass("selected"); var color = ($(this).attr('class').split(' ')[0]); $(".colorlogo").css("background", color);
});
$("#secondary .color").click(function () { $(this).parent().children(".color").removeClass("selected"); $(this).toggleClass("selected"); // Color Reader var color = ($(this).attr('class').split(' ')[0]); $(".letter").css("color", color);
});
Dynamic Logo Creation - Script Codes
Dynamic Logo Creation - Script Codes
Home Page Home
Developer Pete Nawara
Username petebot
Uploaded September 10, 2022
Rating 3
Size 5,961 Kb
Views 24,288
Do you need developer help for Dynamic Logo Creation?

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!

Pete Nawara (petebot) Script Codes
Name
ScrollMagic playpen
Mr. Blinky
CSS Modal
Text Shadow
Notifications
Card flip
Ridonk Expando
Toggle Time
The Team
Woman in Vintage Sunglasses
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!