Shop Talk logo made in CSS
How do I make an shop talk logo made in css?
A CSS only version of the Shop Talk logo complete with a data URI texture. Added some JS, just to show the difference when scaling up.. What is a shop talk logo made in css? How do you make a shop talk logo made in css? This script and codes were developed by Hugo DarbyBrown on 19 June 2022, Sunday.
Shop Talk logo made in CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shop Talk logo made in CSS </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Doppio+One|Yanone+Kaffeesatz:400,700'> <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! */ *, *:after, *:before { box-sizing: border-box;
}
html { background: #000; color: #000; font-size: 6px;
}
#logo-size { width: 200px; margin-left: -100px; margin-top: -20px; left: 50%; position: absolute;
}
input[type='range'] { appearance: none !important; background: #444; height: 15px;
}
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; background: #f26906; height: 30px; width: 15px; border: 2px solid #000;
}
.logo { background: #f26906; border: 0.4rem solid #000; border-radius: 50%; box-shadow: 0 0 0 0.8rem #f26906; height: 23rem; margin: 5rem auto; transform: rotate(-8deg); width: 23rem;
}
.logo p { color: #000; font-weight: bold; font-family: 'Doppio One', sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: 0.2rem; margin: -0.6rem 0 0 9rem; text-transform: uppercase; transform: scale(1.3, 1); transform: rotate(-7deg);
}
.title { background: #f26906; border-top: 0.8rem solid #f26906; border-bottom: 0.8rem solid #f26906; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 6rem; font-weight: 700; line-height: 1; margin-left: -5.8rem; margin-top: 4rem; text-align: center; text-transform: uppercase; transform: skew(-8deg, -8deg); width: 33rem;
}
h1 { border-top: 0.4rem solid #000; border-bottom: 0.4rem solid #000; margin: 0 -40px; padding: 0; transform: scale(0.8, 1);
}
.spanner { background: #f26906; border: 0.4rem solid #000; height: 1rem; margin-top: 2rem; margin-left: 7rem; position: absolute; transform: rotate(-8deg); width: 6rem;
}
.spanner:before { background: #000; border-radius: 50%; content: ' '; height: 1.8rem; margin-left: -0.9rem; margin-top: -0.8rem; position: absolute; width: 1.8rem;
}
.spanner:after { border-radius: 50%; background: #000; content: ' '; height: 1.8rem; margin-left: 5rem; margin-top: -0.8rem; position: absolute; width: 1.8rem;
}
#spanner-opening { background: #f26906; height: 0.8rem; left: 6.4rem; margin-top: 2.5rem; position: absolute; transform: rotate(-8deg); width: 1.1rem; z-index: 5;
}
#spanner-end { background: #f26906; height: 0.8rem; margin-top: 1.60rem; margin-left: 12.8rem; position: absolute; text-align: center; width: 0.8rem; z-index: 9;
}
#spanner-end:before, #spanner-end:after { background: #f26906; content: ""; height: 0.8rem; left: 0; position: absolute; top: 0; width: 0.8rem;
}
#spanner-end:before { transform: rotate(30deg);
}
#spanner-end:after { transform: rotate(60deg);
}
.texture { position: relative; z-index: 1;
}
.texture:before { bottom: 0; content: ""; left: 0; opacity: 0.8; position: absolute; right: 0; top: 0; z-index: -1; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUU4M0I1RjJBMzYxMTFFMjk0NTRCQzUzNjI1MDQ3NEQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUU4M0I1RjFBMzYxMTFFMjk0NTRCQzUzNjI1MDQ3NEQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0iOEQyOTkzNUREMjU5RUVENjNCQTIxRDQxNkY5NzE1NjAiIHN0UmVmOmRvY3VtZW50SUQ9IjhEMjk5MzVERDI1OUVFRDYzQkEyMUQ0MTZGOTcxNTYwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Y3oDSAAADrtJREFUeNrtXemSVrcRpco/Yjv2QFhMWJyYxcCw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);
}
.img-container { text-align: center; width: 100%;
}
img { margin-top: 30px; width: 200;
}
h3 { color: #f26906; font-size: 40px; text-align: center; margin-bottom: 30px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="logo texture"> <div id="spanner-opening"></div> <div id="spanner-end"></div> <div class="spanner"> </div> <div class="title texture"> <h1> Shop Talk</h1> </div> <p>Show</p>
</div>
<h3>CSS Only</h3>
<input id="logo-size" class="texture" type="range" min="30" value="60" max="170">
<div class="img-container"> <img src="http://s.cdpn.io/31787/shoptalk.png" alt="" /> <h3>Original Image</h3> <input id="image-size" class="texture" type="range" min="100" value="200" max="550">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Shop Talk logo made in CSS - Script Codes CSS Codes
*, *:after, *:before { box-sizing: border-box;
}
html { background: #000; color: #000; font-size: 6px;
}
#logo-size { width: 200px; margin-left: -100px; margin-top: -20px; left: 50%; position: absolute;
}
input[type='range'] { appearance: none !important; background: #444; height: 15px;
}
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; background: #f26906; height: 30px; width: 15px; border: 2px solid #000;
}
.logo { background: #f26906; border: 0.4rem solid #000; border-radius: 50%; box-shadow: 0 0 0 0.8rem #f26906; height: 23rem; margin: 5rem auto; transform: rotate(-8deg); width: 23rem;
}
.logo p { color: #000; font-weight: bold; font-family: 'Doppio One', sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: 0.2rem; margin: -0.6rem 0 0 9rem; text-transform: uppercase; transform: scale(1.3, 1); transform: rotate(-7deg);
}
.title { background: #f26906; border-top: 0.8rem solid #f26906; border-bottom: 0.8rem solid #f26906; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 6rem; font-weight: 700; line-height: 1; margin-left: -5.8rem; margin-top: 4rem; text-align: center; text-transform: uppercase; transform: skew(-8deg, -8deg); width: 33rem;
}
h1 { border-top: 0.4rem solid #000; border-bottom: 0.4rem solid #000; margin: 0 -40px; padding: 0; transform: scale(0.8, 1);
}
.spanner { background: #f26906; border: 0.4rem solid #000; height: 1rem; margin-top: 2rem; margin-left: 7rem; position: absolute; transform: rotate(-8deg); width: 6rem;
}
.spanner:before { background: #000; border-radius: 50%; content: ' '; height: 1.8rem; margin-left: -0.9rem; margin-top: -0.8rem; position: absolute; width: 1.8rem;
}
.spanner:after { border-radius: 50%; background: #000; content: ' '; height: 1.8rem; margin-left: 5rem; margin-top: -0.8rem; position: absolute; width: 1.8rem;
}
#spanner-opening { background: #f26906; height: 0.8rem; left: 6.4rem; margin-top: 2.5rem; position: absolute; transform: rotate(-8deg); width: 1.1rem; z-index: 5;
}
#spanner-end { background: #f26906; height: 0.8rem; margin-top: 1.60rem; margin-left: 12.8rem; position: absolute; text-align: center; width: 0.8rem; z-index: 9;
}
#spanner-end:before, #spanner-end:after { background: #f26906; content: ""; height: 0.8rem; left: 0; position: absolute; top: 0; width: 0.8rem;
}
#spanner-end:before { transform: rotate(30deg);
}
#spanner-end:after { transform: rotate(60deg);
}
.texture { position: relative; z-index: 1;
}
.texture:before { bottom: 0; content: ""; left: 0; opacity: 0.8; position: absolute; right: 0; top: 0; z-index: -1; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUU4M0I1RjJBMzYxMTFFMjk0NTRCQzUzNjI1MDQ3NEQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUU4M0I1RjFBMzYxMTFFMjk0NTRCQzUzNjI1MDQ3NEQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0iOEQyOTkzNUREMjU5RUVENjNCQTIxRDQxNkY5NzE1NjAiIHN0UmVmOmRvY3VtZW50SUQ9IjhEMjk5MzVERDI1OUVFRDYzQkEyMUQ0MTZGOTcxNTYwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Y3oDSAAADrtJREFUeNrtXemSVrcRpco/Yjv2QFhMWJyYxcCw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);
}
.img-container { text-align: center; width: 100%;
}
img { margin-top: 30px; width: 200;
}
h3 { color: #f26906; font-size: 40px; text-align: center; margin-bottom: 30px;
}
Shop Talk logo made in CSS - Script Codes JS Codes
// JS only used to demonstrate that simply changing the base font value will increase the size of the logo
//author Hugo Darby Brown - Twitter @darbybrown
$('#logo-size').change(function () { var fontsize = $(this).val()/10 + "px"; $('html').css("font-size", fontsize );
});
$('#image-size').change(function () { var Width = $(this).val() + "px"; $('img').css("width", Width );
});
Developer | Hugo DarbyBrown |
Username | hugo |
Uploaded | June 19, 2022 |
Rating | 4.5 |
Size | 19,368 Kb |
Views | 68,816 |
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!
Name | Size |
YAUI v2 | 11,912 Kb |
SCSS version of Meta Fizzy | 13,492 Kb |
Animated Atom Logo | 5,901 Kb |
A.X.E - LumberJack single page Site | 3,665 Kb |
Animated Submit Button | 5,860 Kb |
80s Retro spinning cube | 3,011 Kb |
Social-Media Card | 6,177 Kb |
Slide Icon Menu | 4,910 Kb |
Mixer MKII | 9,722 Kb |
DNA Double Helix | 5,112 Kb |
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!
Name | Username | Size |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
Tic Tac Toe | Volv | 4,862 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
Canvas snow | Win7killer | 2,572 Kb |
React TODO | Enieste | 3,320 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
Whyutils | LeYvan | 3,752 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
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!