Felixble Product Flags

Developer
Kevin Gimbel
Size
5,907 Kb
Views
14,168
  1. Felixble Product Flags Previews
  2. Felixble Product Flags HTML Codes
  3. Felixble Product Flags CSS Codes

How do I make an felixble product flags?

Made with two data-attributes and some CSS. (Images via getDigital <3)Article about it: kevingimbel.com/pseudo-product-flags/. What is a felixble product flags? How do you make a felixble product flags? This script and codes were developed by Kevin Gimbel on 06 December 2022, Tuesday.

Felixble Product Flags Previews
IQ Test

Felixble Product Flags - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Felixble Product Flags</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! */ * { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { font: 1rem/1 white Arial, Helvetica, sans-serif; width: 100%; min-height: 100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMzMzMzMzIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM1NTU1NTUiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk5OTk5OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -moz-linear-gradient(135deg, #111111, #333333, #555555, #777777, #999999); background: -webkit-linear-gradient(135deg, #111111, #333333, #555555, #777777, #999999); background: linear-gradient(-45deg, #111111, #333333, #555555, #777777, #999999);
}
article { width: 33.3333%; min-width: 15em; max-width: 20em; color: black; border: 1px solid #ccc; margin: 1.5em; float: left; position: relative; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #f1f1f1;
}
article hgroup h2 { margin: .2em 0; padding: 1.5em .5em 0 .5em;
}
article hgroup img { width: 100%;
}
article p { padding: .5em; font-size: 70%;
}
article a { color: #333;
}
article a:hover { color: grey;
}
.tag { width: auto; height: auto; position: absolute; top: -1em; left: -1px; /* correction because of the border applied to <article> */ background: #8e44ad; padding: .5em;
}
.tag:before { content: attr(data-tagname);
}
.tag:after { content: ""; position: absolute; left: 100%; top: 0; width: 0; height: 0; border-top: 1em solid transparent; border-left: 1em solid #522764; z-index: -1; /* correction because of the border applied to <article> */
}
.tag[data-id="1"] { background: #f1c40f;
}
.tag[data-id="1"]:after { border-left-color: #927608;
}
.tag[data-id="2"] { background: #e74c3c;
}
.tag[data-id="2"]:after { border-left-color: #a82315;
}
.tag[data-id="3"] { background: #2ecc71;
}
.tag[data-id="3"]:after { border-left-color: #1b7943;
}
.tag[data-id="4"] { background: #1abc9c;
}
.tag[data-id="4"]:after { border-left-color: #0e6252;
}
.tag[data-id="5"] { background: #9e9e9e; color: white;
}
.tag[data-id="5"]:after { border-left-color: #6b6b6b;
}
.tag[data-id="5"] ~ p { font-size: 90%;
}
.thanks { position: fixed; bottom: 0; right: 0; font-size: 70%; width: 10em; height: auto; padding: .5em; line-height: 1.2; color: #fff;
}
.thanks a { color: white; background: black; padding: .09em .4em;
}
.thanks a:hover { text-decoration: none;
}
.thanks a span { color: #f1c40f;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="thanks"> Special thanks to <a href="http://getdigital.de"><span>get</span>Digital</a> for the Product Images.
</div>
<article> <div class="tag" data-id="1" data-tagname="STAR WARS"></div> <hgroup> <h2>Awesome Star Wars Cup</h2> <img src="http://www.getdigital.de/web/getdigital/gfx/products/__generated__resized/1100x1100/R2D2_Relief_Mug_Titel.jpg" alt="" /> </hgroup> <p>(img via <a href="http://www.getdigital.de/R2D2-3D-Relief-Becher.html">getDigital.de</a>)</p>
</article>
<article> <div class="tag" data-id="2" data-tagname="STAR TREK"></div> <hgroup> <h2>Star Trek Bottle Opener</h2> <img src="http://www.getdigital.de/web/getdigital/gfx/products/__generated__resized/1100x1100/StarTrekFlaschenoeffnerAction.jpg" alt="" /> </hgroup> <p>(img via <a href="http://www.getdigital.de/Star-Trek-Flaschenoeffner.html">getDigital.de</a>)</p>
</article>
<article> <div class="tag" data-id="3" data-tagname="SUPER LONG TAG NAME"></div> <hgroup> <h2>Companion Cube &hearts;</h2> <img src="http://www.getdigital.de/web/getdigital/gfx/products/__generated__resized/1100x1100/companion_cube.jpg" alt="" /> </hgroup> <p>(img via <a href="http://www.getdigital.de/Pac-Man-Waeme-Becher.html">getDigital.de</a>)</p>
</article>
<article> <div class="tag" data-id="4" data-tagname="RASPBERRY PI"></div> <hgroup> <h2>Raspberry Pi</h2> <img src="http://www.getdigital.de/web/getdigital/gfx/products/__generated__resized/1100x1100/RaspberryPi_titel.jpg" alt="" /> </hgroup> <p>(img via <a href="http://www.getdigital.de/Pac-Man-Waeme-Becher.html">getDigital.de</a>)</p>
</article>
<article> <div class="tag" data-id="4" data-tagname="Nerd KIDZ"></div> <hgroup> <h2>Hello World Baby Body</h2> <img src="http://www.getdigital.de/web/getdigital/gfx/products/__generated__resized/1100x1100/helloworldstrampler.jpg" alt="" /> </hgroup> <p>(img via <a href="http://www.getdigital.de/Hello-World-Baby-Body.html">getDigital.de</a>)</p>
</article>
<article> <div class="tag" data-id="2" data-tagname="have you tried?"></div> <hgroup> <h2>Standard IT Response</h2> <img src="http://www.getdigital.de/web/getdigital/gfx/products/__generated__resized/1100x1100/turningitoff.jpg" alt="" /> </hgroup> <p>(img via <a href="http://www.getdigital.de/Turning-it-off-and-on-again.html">getDigital.de</a>)</p>
</article>
<article> <div class="tag" data-id="5" data-tagname="Now it's your turn!"></div> <hgroup> <h2>Go to the HTML Tab</h2> </hgroup> <p>You can change the Text inside each of the product flags by changing the value of <code>data-tagname</code>. The Color is controlled via <code>data-id</code> and the CSS (see line 81 and folowing).</p>
</article>
<article> <div class="tag" data-id="5" data-tagname="POST OR IT DIDN'T HAPPEN"></div> <hgroup> <h2>Step by Step</h2> </hgroup> <p>I wrote an article on my Blog about the idea behind those product flags, why they're set up with <code>data-attributes</code> and how they work.</p> <p>You can read the aricle <a href="https://kevingimbel.com/pseudo-product-flags">here</a>.</p>
</article>
</body>
</html>

Felixble Product Flags - Script Codes CSS Codes

* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { font: 1rem/1 white Arial, Helvetica, sans-serif; width: 100%; min-height: 100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjMzMzMzMzIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM1NTU1NTUiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk5OTk5OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -moz-linear-gradient(135deg, #111111, #333333, #555555, #777777, #999999); background: -webkit-linear-gradient(135deg, #111111, #333333, #555555, #777777, #999999); background: linear-gradient(-45deg, #111111, #333333, #555555, #777777, #999999);
}
article { width: 33.3333%; min-width: 15em; max-width: 20em; color: black; border: 1px solid #ccc; margin: 1.5em; float: left; position: relative; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #f1f1f1;
}
article hgroup h2 { margin: .2em 0; padding: 1.5em .5em 0 .5em;
}
article hgroup img { width: 100%;
}
article p { padding: .5em; font-size: 70%;
}
article a { color: #333;
}
article a:hover { color: grey;
}
.tag { width: auto; height: auto; position: absolute; top: -1em; left: -1px; /* correction because of the border applied to 
 */ background: #8e44ad; padding: .5em;
}
.tag:before { content: attr(data-tagname);
}
.tag:after { content: ""; position: absolute; left: 100%; top: 0; width: 0; height: 0; border-top: 1em solid transparent; border-left: 1em solid #522764; z-index: -1; /* correction because of the border applied to 
 */
}
.tag[data-id="1"] { background: #f1c40f;
}
.tag[data-id="1"]:after { border-left-color: #927608;
}
.tag[data-id="2"] { background: #e74c3c;
}
.tag[data-id="2"]:after { border-left-color: #a82315;
}
.tag[data-id="3"] { background: #2ecc71;
}
.tag[data-id="3"]:after { border-left-color: #1b7943;
}
.tag[data-id="4"] { background: #1abc9c;
}
.tag[data-id="4"]:after { border-left-color: #0e6252;
}
.tag[data-id="5"] { background: #9e9e9e; color: white;
}
.tag[data-id="5"]:after { border-left-color: #6b6b6b;
}
.tag[data-id="5"] ~ p { font-size: 90%;
}
.thanks { position: fixed; bottom: 0; right: 0; font-size: 70%; width: 10em; height: auto; padding: .5em; line-height: 1.2; color: #fff;
}
.thanks a { color: white; background: black; padding: .09em .4em;
}
.thanks a:hover { text-decoration: none;
}
.thanks a span { color: #f1c40f;
}
Felixble Product Flags - Script Codes
Felixble Product Flags - Script Codes
Home Page Home
Developer Kevin Gimbel
Username kevingimbel
Uploaded December 06, 2022
Rating 3.5
Size 5,907 Kb
Views 14,168
Do you need developer help for Felixble Product Flags?

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!

Kevin Gimbel (kevingimbel) Script Codes
Name
CSS3 only Aperture Science Retro Logo
Custom Rating buttons with Icon Fonts
An Object-Oriented ToDo-List
Nerdli.st
CSS3 only Turret from Portal
CSS3 only Vault-Tec Logo
Pure JavaScript Slider
Register or Sponsor Prototype
Pure CSS3 single element Link from TLOZ
.LANG
Create amazing SEO content 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!