Vans Logo, single element, no fonts, no psuedos
How do I make an vans logo, single element, no fonts, no psuedos?
My experiment with multiple background gradients. No fonts, no psuedo elements, just one element with bg's and junk. Still figuring out a better "S"... any tips would be greatly appreciated.. What is a vans logo, single element, no fonts, no psuedos? How do you make a vans logo, single element, no fonts, no psuedos? This script and codes were developed by Patrick Cox on 04 September 2022, Sunday.
Vans Logo, single element, no fonts, no psuedos - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vans Logo, single element, no fonts, no psuedos</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ /* useless style junk to pretty it up a bit */
*{ box-sixing: border-box;
}
html{ box-shadow: inset 0 0 300px rgba(0,0,0,0.4); height: 100%;
}
body{ background: #e1e1e1; height: 100%; margin: 0 auto; padding: 3%; width: 80%;
}
/* begin, shall we */
#vans{ box-shadow: inset 0 0 15px rgba(0,0,0,0.2), 0 7px 20px rgba(0,0,0,0.4); height: 256px; margin: 0 auto; position: relative; width: 600px; background: /* s */ radial-gradient(center, ellipse cover, rgba(106,0,0,1) 0%,rgba(106,0,0,1) 55%,rgba(106,0,0,0) 55%), linear-gradient(233deg, transparent 40%, #6a0000 40%, #6a0000 60%, transparent 60%), linear-gradient(233deg, transparent 40%, #6a0000 40%, #6a0000 60%, transparent 60%), radial-gradient(center, ellipse cover, rgba(256,256,256,1) 0%,rgba(256,256,256,1) 55%,rgba(256,256,256,0) 55%), radial-gradient(center, ellipse cover, rgba(106,0,0,1) 0%,rgba(106,0,0,1) 55%,rgba(106,0,0,0) 55%), radial-gradient(center, ellipse cover, rgba(256,256,256,1) 0%,rgba(256,256,256,1) 55%,rgba(256,256,256,0) 55%), /* v */ linear-gradient(15deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%), linear-gradient(-15deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%), linear-gradient(-15deg, transparent 10%, #fff 10%, #fff 90%, transparent 90%), /* a */ linear-gradient(-15deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%), linear-gradient(15deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%), linear-gradient(top, transparent 45%, #fff 45%, #fff 60%, transparent 60%), /* n */ linear-gradient(0deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%), linear-gradient(27deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%), linear-gradient(0deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%), /* div */ #6a0000; background-position: /* s */ 475px 173px, 436px 126px, 487px 107px, 420px 121px, 475px 100px, 420px 52px, /* v */ 0px 10px, 70px 10px, 145px 10px, /* a */ 120px 70px, 168px 70px, 220px 100px, /* n */ 178px 70px, 265px 70px, 270px 70px; /* div */ background-repeat: no-repeat; background-size: /* s */ 40px 40px, 66px 80px, 66px 80px, 150px 145px, 40px 40px, 150px 145px, /* v */ 188px 236px, 188px 236px, 456px 40px, /* a */ 188px 176px, 188px 176px, 50px 195px, /* n */ 268px 176px, 188px 176px, 268px 176px, /* div */ 656px 256px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="vans"></div> <script src="js/index.js"></script>
</body>
</html>
Vans Logo, single element, no fonts, no psuedos - Script Codes CSS Codes
/* useless style junk to pretty it up a bit */
*{ box-sixing: border-box;
}
html{ box-shadow: inset 0 0 300px rgba(0,0,0,0.4); height: 100%;
}
body{ background: #e1e1e1; height: 100%; margin: 0 auto; padding: 3%; width: 80%;
}
/* begin, shall we */
#vans{ box-shadow: inset 0 0 15px rgba(0,0,0,0.2), 0 7px 20px rgba(0,0,0,0.4); height: 256px; margin: 0 auto; position: relative; width: 600px; background: /* s */ radial-gradient(center, ellipse cover, rgba(106,0,0,1) 0%,rgba(106,0,0,1) 55%,rgba(106,0,0,0) 55%), linear-gradient(233deg, transparent 40%, #6a0000 40%, #6a0000 60%, transparent 60%), linear-gradient(233deg, transparent 40%, #6a0000 40%, #6a0000 60%, transparent 60%), radial-gradient(center, ellipse cover, rgba(256,256,256,1) 0%,rgba(256,256,256,1) 55%,rgba(256,256,256,0) 55%), radial-gradient(center, ellipse cover, rgba(106,0,0,1) 0%,rgba(106,0,0,1) 55%,rgba(106,0,0,0) 55%), radial-gradient(center, ellipse cover, rgba(256,256,256,1) 0%,rgba(256,256,256,1) 55%,rgba(256,256,256,0) 55%), /* v */ linear-gradient(15deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%), linear-gradient(-15deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%), linear-gradient(-15deg, transparent 10%, #fff 10%, #fff 90%, transparent 90%), /* a */ linear-gradient(-15deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%), linear-gradient(15deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%), linear-gradient(top, transparent 45%, #fff 45%, #fff 60%, transparent 60%), /* n */ linear-gradient(0deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%), linear-gradient(27deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%), linear-gradient(0deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%), /* div */ #6a0000; background-position: /* s */ 475px 173px, 436px 126px, 487px 107px, 420px 121px, 475px 100px, 420px 52px, /* v */ 0px 10px, 70px 10px, 145px 10px, /* a */ 120px 70px, 168px 70px, 220px 100px, /* n */ 178px 70px, 265px 70px, 270px 70px; /* div */ background-repeat: no-repeat; background-size: /* s */ 40px 40px, 66px 80px, 66px 80px, 150px 145px, 40px 40px, 150px 145px, /* v */ 188px 236px, 188px 236px, 456px 40px, /* a */ 188px 176px, 188px 176px, 50px 195px, /* n */ 268px 176px, 188px 176px, 268px 176px, /* div */ 656px 256px;
}
Vans Logo, single element, no fonts, no psuedos - Script Codes JS Codes
// background gradient experiment - vnas logo by patrick cox/@pcridesagain
// still working on the "S" need to clean that sucker up
// I have only tested in chrome
//Inspired by @TimPietrusky's Element Logo - https://codepen.io/TimPietrusky/pen/oqCHG

Developer | Patrick Cox |
Username | pcridesagain |
Uploaded | September 04, 2022 |
Rating | 3.5 |
Size | 3,162 Kb |
Views | 24,276 |
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 |
A Pen by Patrick Cox | 3,176 Kb |
IOS web app bookmark reminder bubble | 2,576 Kb |
A Better Moustache | 3,139 Kb |
Sexy Version - iOS web app bookmark reminder bubble | 2,880 Kb |
CSS Q-Bert | 4,926 Kb |
Responsive Content Experiment | 4,586 Kb |
A Pen by Patrick Cox | 2,899 Kb |
Single Element Pure CSS US Flag | 1,875 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 |
Sass Get Function | Lukewatts | 2,155 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
Vue.js Starter | Andymerskin | 1,268 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Resizable SASS Icons | Marianarlt | 7,611 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!