Pure CSS3 single element Link from TLOZ

Developer
Kevin Gimbel
Size
5,118 Kb
Views
26,312
  1. Pure CSS3 single element Link from TLOZ Previews
  2. Pure CSS3 single element Link from TLOZ HTML Codes
  3. Pure CSS3 single element Link from TLOZ CSS Codes
  4. Pure CSS3 single element Link from TLOZ JS Codes

How do I make an pure css3 single element link from tloz?

I made this to work around with box-shadow single element drawing. Kind of fun and pain at the same time. Anyway, the original "link" DIV is in the upper left corner of Link's head. If you change the background inside the SCSS you'll see.. What is a pure css3 single element link from tloz? How do you make a pure css3 single element link from tloz? This script and codes were developed by Kevin Gimbel on 11 August 2022, Thursday.

Pure CSS3 single element Link from TLOZ Previews
IQ Test

Pure CSS3 single element Link from TLOZ - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 single element Link from TLOZ</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="link"></div>
</div> <div class="credit"> <p>2013 by <a href="http://twitter.com/_kevinatari">Kevin Gimbel</a>. Feel free to create new things based on it or optimize my work. I'd be happy if you link to this Pen as soon as you use the code in any way. Thanks <span class="red">&hearts;</span></p>
</div> <!-- credit --> <script src="js/index.js"></script>
</body>
</html>

Pure CSS3 single element Link from TLOZ - Script Codes CSS Codes

/* Codepen.io credits */
.credit { width: 500px; margin: 50px auto; padding: 10px 20px; background: #f1f1f1; color: #000000; font-size: 0.7em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
}
a { color: #227799; text-decoration: none;
}
a:hover { color: #222222; border: none;
}
.red { color: #7a0208;
}
/* END Codepen.io credits*/
.wrapper { width: 150px; height: 600px; margin: 20px auto;
}
body { background: #222222; font-family: Arial, Helvetica, sans-serif;
}
.link { width: 25px; height: 25px; background: #28381b; box-shadow: -25px 25px 0px #28381b, -50px 50px 0px #28381b, -75px 75px 0px #28381b, -75px 100px 0px #28381b, -100px 125px 0px #28381b, 25px 0px 0px #516c35, 50px 0px 0px #516c35, 75px 0px 0px #516c35, 100px 0px 0px #516c35, 0px 25px 0px #516c35, 25px 25px 0px #58b543, 50px 25px 0px #58b543, 75px 25px 0px #58b543, 100px 25px 0px #58b543, 0px 50px 0px #58b543, 25px 50px 0px #58b543, 50px 50px 0px #58b543, 75px 50px 0px #58b543, 100px 50px 0px #58b543, 125px 50px 0px #58b543, -25px 75px 0px #58b543, 0px 75px 0px #58b543, 25px 75px 0px #58b543, 50px 75px 0px #58b543, 75px 75px 0px #58b543, 100px 75px 0px #58b543, 125px 75px 0px #58b543, 150px 75px 0px #58b543, -50px 100px 0px #58b543, 125px 0px 0px #28381b, 150px 25px 0px #28381b, 175px 50px 0px #28381b, 200px 75px 0px #28381b, 200px 100px 0px #28381b, 225px 125px 0px #28381b, 175px 75px 0px #516c35, 175px 100px 0px #302006, -25px 50px 0px #516c35, -50px 75px 0px #516c35, -75px 100px 0px #516c35, -75px 125px 0px #516c35, -100px 150px 0px #516c35, 125px 25px 0px #516c35, 150px 50px 0px #516c35, 175px 75px 0px #516c35, 200px 125px 0px #516c35, 225px 150px 0px #516c35, -25px 100px 0px #302006, 0px 100px 0px #ffee45, 25px 100px 0px #ffee45, 50px 100px 0px #ffee45, 75px 100px 0px #ffee45, 100px 100px 0px #ffee45, 125px 100px 0px #ffee45, 150px 100px 0px #ffee45, -25px 125px 0px #ffee45, -50px 125px 0px #302006, 0px 125px 0px #ffee45, 25px 125px 0px #ffee45, 50px 125px 0px #ffee45, 75px 125px 0px #ffee45, 100px 125px 0px #bda636, 125px 125px 0px #302006, 150px 125px 0px #ffee45, 175px 125px 0px #ffee45, -75px 150px 0px #302006, -50px 150px 0px #ffee45, -25px 150px 0px #302006, 0px 150px 0px #ffee45, 25px 150px 0px #ffee45, 50px 150px 0px #ffee45, 75px 150px 0px #ffee45, 100px 150px 0px #302006, 125px 150px 0px #bda636, 150px 150px 0px #302006, 175px 150px 0px #ffee45, 200px 150px 0px #302006, -100px 175px 0px #bda636, -75px 175px 0px #302006, -50px 175px 0px #302006, -25px 175px 0px #bda636, 0px 175px 0px #ffee45, 25px 175px 0px #ffee45, 50px 175px 0px #bda636, 75px 175px 0px #302006, 100px 175px 0px #bda636, 125px 175px 0px #bbb082, 150px 175px 0px #302006, 175px 175px 0px #bda636, 200px 175px 0px #302006, 225px 175px 0px #bda636, -75px 200px 0px #302006, -50px 200px 0px #ffee45, -25px 200px 0px #bbb082, 0px 200px 0px #bbb082, 25px 200px 0px #302006, 50px 200px 0px #302006, 75px 200px 0px #b2a671, 100px 200px 0px #bbb082, 125px 200px 0px #bbb082, 150px 200px 0px #bda636, 175px 200px 0px #302006, 200px 200px 0px #ffee45, 225px 200px 0px #302006, -75px 225px 0px #302006, -50px 225px 0px #ffee45, -25px 225px 0px #b2a671, 0px 225px 0px #302006, 25px 225px 0px #302006, 50px 225px 0px #b2a671, 75px 225px 0px #bbb082, 100px 225px 0px #b2a671, 125px 225px 0px #302006, 150px 225px 0px #030200, 175px 225px 0px #302006, 200px 225px 0px #ffee45, -75px 250px 0px #ffee45, -50px 250px 0px #b2a671, -25px 250px 0px white, 0px 250px 0px #031634, 25px 250px 0px #302006, 50px 250px 0px #bbb082, 75px 250px 0px #bbb082, 100px 250px 0px #302006, 125px 250px 0px #031634, 150px 250px 0px white, 175px 250px 0px #302006, 200px 250px 0px #b2a671, -50px 275px 0px #030200, -25px 275px 0px #bbb082, 0px 275px 0px #031634, 25px 275px 0px white, 50px 275px 0px #bbb082, 75px 275px 0px #bbb082, 100px 275px 0px white, 125px 275px 0px #031634, 150px 275px 0px #bbb082, 175px 275px 0px #030200, -50px 300px 0px #030200, -25px 300px 0px #302006, 0px 300px 0px #bbb082, 25px 300px 0px #bbb082, 50px 300px 0px #bbb082, 75px 300px 0px #bbb082, 100px 300px 0px #bbb082, 125px 300px 0px #bbb082, 150px 300px 0px #302006, 175px 300px 0px #030200, -75px 325px 0px #030200, -50px 325px 0px #516c35, -25px 325px 0px #302006, 0px 325px 0px #302006, 25px 325px 0px #b2a671, 50px 325px 0px #b2a671, 75px 325px 0px #b2a671, 100px 325px 0px #b2a671, 125px 325px 0px #302006, 150px 325px 0px #302006, 175px 325px 0px #516c35, 200px 325px 0px #030200, -100px 350px 0px #030200, -75px 350px 0px #516c35, -50px 350px 0px #516c35, -25px 350px 0px #516c35, 0px 350px 0px #28381b, 25px 350px 0px #28381b, 50px 350px 0px #28381b, 75px 350px 0px #28381b, 100px 350px 0px #28381b, 125px 350px 0px #28381b, 150px 350px 0px #516c35, 175px 350px 0px #516c35, 200px 350px 0px #516c35, 225px 350px 0px #030200, -125px 375px 0px #030200, -100px 375px 0px #bbb082, -75px 375px 0px #bbb082, -50px 375px 0px #030200, -25px 375px 0px #302006, 0px 375px 0px #28381b, 25px 375px 0px #28381b, 50px 375px 0px #28381b, 75px 375px 0px #28381b, 100px 375px 0px #28381b, 125px 375px 0px #28381b, 150px 375px 0px #302006, 175px 375px 0px #030200, 200px 375px 0px #bbb082, 225px 375px 0px #bbb082, 250px 375px 0px #030200, -125px 400px 0px #030200, -100px 400px 0px #b2a671, -75px 400px 0px #bbb082, -50px 400px 0px #28381b, -25px 400px 0px #516c35, 0px 400px 0px #302006, 25px 400px 0px #302006, 50px 400px 0px #ffee45, 75px 400px 0px #ffee45, 100px 400px 0px #302006, 125px 400px 0px #302006, 150px 400px 0px #516c35, 175px 400px 0px #28381b, 200px 400px 0px #bbb082, 225px 400px 0px #b2a671, 250px 400px 0px #030200, -100px 425px 0px #030200, -75px 425px 0px #030200, -50px 425px 0px #030200, -25px 425px 0px #516c35, 0px 425px 0px #516c35, 25px 425px 0px #28381b, 50px 425px 0px #ffee45, 75px 425px 0px #ffee45, 100px 425px 0px #28381b, 125px 425px 0px #516c35, 150px 425px 0px #516c35, 175px 425px 0px #030200, 200px 425px 0px #030200, 225px 425px 0px #030200, -50px 450px 0px #030200, -25px 450px 0px #030200, 0px 450px 0px #28381b, 25px 450px 0px #516c35, 50px 450px 0px #516c35, 75px 450px 0px #516c35, 100px 450px 0px #516c35, 125px 450px 0px #28381b, 150px 450px 0px #030200, 175px 450px 0px #030200, -75px 475px 0px #030200, -50px 475px 0px #450512, -25px 475px 0px #150206, 0px 475px 0px #030200, 25px 475px 0px #030200, 50px 475px 0px #030200, 75px 475px 0px #030200, 100px 475px 0px #030200, 125px 475px 0px #030200, 150px 475px 0px #150206, 175px 475px 0px #450512, 200px 475px 0px #030200, -75px 500px 0px #030200, -50px 500px 0px #450512, -25px 500px 0px #450512, 0px 500px 0px #150206, 25px 500px 0px #030200, 100px 500px 0px #030200, 125px 500px 0px #150206, 150px 500px 0px #450512, 175px 500px 0px #450512, 200px 500px 0px #030200, -50px 525px 0px #030200, -25px 525px 0px #030200, 0px 525px 0px #030200, 125px 525px 0px #030200, 150px 525px 0px #030200, 175px 525px 0px #030200;
}

Pure CSS3 single element Link from TLOZ - Script Codes JS Codes

/*
Pure CSS3 single element Link from TLOZ
I made this to work around with box-shadow single element drawing. Kind of fun and pain at the same time. Anyway, the original "link" DIV is in the upper left corner of link's head. If you change the background inside the SCSS you'll see.
Colorsets:
http://www.colourlovers.com/palette/1782412/Hero_In_Green
http://www.colourlovers.com/palette/1765681/Link_Hero_of_Time
http://www.colourlovers.com/palette/515562/t_a_l_k_._t_o_._m_e
Inspired by:
http://doll-haus.deviantart.com/art/Pixel-Link-167513168
*/
Pure CSS3 single element Link from TLOZ - Script Codes
Pure CSS3 single element Link from TLOZ - Script Codes
Home Page Home
Developer Kevin Gimbel
Username kevingimbel
Uploaded August 11, 2022
Rating 3.5
Size 5,118 Kb
Views 26,312
Do you need developer help for Pure CSS3 single element Link from TLOZ?

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
.LANG
ViewSwitcher
Slide Menu
An Object-Oriented ToDo-List
Alternative Image Classes in Markdown
Pinterest Thumb
CSS3 only Turret from Portal
CSS3 only Aperture Science Retro Logo
A Pen by Kevin Gimbel
Custom Rating buttons with Icon Fonts
Create amazing blog posts 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!