Vans Logo, single element, no fonts, no psuedos

Developer
Patrick Cox
Size
3,162 Kb
Views
24,288
  1. Vans Logo, single element, no fonts, no psuedos Previews
  2. Vans Logo, single element, no fonts, no psuedos HTML Codes
  3. Vans Logo, single element, no fonts, no psuedos CSS Codes
  4. Vans Logo, single element, no fonts, no psuedos JS Codes

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 Previews
IQ Test

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
Vans Logo, single element, no fonts, no psuedos - Script Codes
Vans Logo, single element, no fonts, no psuedos - Script Codes
Home Page Home
Developer Patrick Cox
Username pcridesagain
Uploaded September 04, 2022
Rating 3.5
Size 3,162 Kb
Views 24,288
Do you need developer help for Vans Logo, single element, no fonts, no psuedos?

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!

Patrick Cox (pcridesagain) Script Codes
Name
A Better Moustache
Responsive Content Experiment
Single Element Pure CSS US Flag
A Pen by Patrick Cox
A Pen by Patrick Cox
IOS web app bookmark reminder bubble
CSS Q-Bert
Sexy Version - iOS web app bookmark reminder bubble
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!