Cute Wolverine CSS

Developer
Mark Santiago
Size
5,080 Kb
Views
22,264
  1. Cute Wolverine CSS Previews
  2. Cute Wolverine CSS HTML Codes
  3. Cute Wolverine CSS CSS Codes
  4. Cute Wolverine CSS JS Codes

How do I make an cute wolverine css?

I'm not a designer, or artistic, so all design credit goes to Dennis Salvatier on Dribble. I Just needed something to test myself with css. . What is a cute wolverine css? How do you make a cute wolverine css? This script and codes were developed by Mark Santiago on 02 November 2022, Wednesday.

Cute Wolverine CSS Previews
IQ Test

Cute Wolverine CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cute Wolverine CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Work in Progress... Best viewed in Modern Browsers</h1>
<div class="wolvie-holder"> <div class="head"> <span class="mask-top-orange"></span> <span class="inside-mask"></span> <span class="below-mask"></span> <span class="inside-eye-left"> <span class="left-eyeball"></span> </span> <span class="inside-eye-right two"> <span class="eyeball"></span> </span> </div> <div class="unmasked"> <span class="left-face"></span> <span class="mouth"></span> <span class="tooth"></span> <span class="rosy-cheeks"></span> <span class="right-face"></span> </div> <span class="left-eye"> </span> <span class="left-eye two"></span> <span class="orangespot"></span> <div class="rounder"></div> <div class="rounder right"></div> </div> <script src="js/index.js"></script>
</body>
</html>

Cute Wolverine CSS - Script Codes CSS Codes

/*wolvie colors*/
h1 { top: 0; color: #333; position: absolute;
}
span { display: block;
}
body { background: #AAE0FA; padding: 100px;
}
.wolvie-holder { width: 300px; height: 200px; position: relative; margin: 0 auto; margin-top: 50px; /* background:red;*/
}
.left-eye, left-eye.two { display: block; height: 185px; width: 130px; border-radius: 48%; background-color: #343943; border-bottom-right-radius: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); position: absolute; left: -90px; z-index: 10; bottom: -8px;
}
.mask-top-orange { background: #febd10; height: 50px; width: 22%; z-index: 0; margin-left: 38%; margin-top: 109px; position: absolute;
}
.orangespot { background: #febd10; width: 63px; height: 50px; margin-left: 91px; z-index: 10000; margin-top: 30px; border-radius: 30%; position: absolute;
}
.left-eye:after, .left-eye.two:after { content: ""; display: block; position: absolute; height: 150px; width: 130px; background: #343943; bottom: 0; -webkit-transform: skew(20deg); transform: skew(20deg); left: 40px; border-bottom-left-radius: 20px; z-index: 10;
}
.head { margin: 0 auto; background: #FAE70B; height: 150px; width: 290px; border-radius: 80px 80px 50px 50px; border: 4px solid #643A28; position: absolute; z-index: 100; top: 55px; left: -25px;
}
.inside-eye-left, .inside-eye-right { background: #343943; width: 170px; height: 110px; display: block; -webkit-transform: skewx(20deg) rotate(1deg); transform: skewx(20deg) rotate(1deg); margin-top: 47px; margin-left: -61px; border-bottom-left-radius: 5px; border-top-left-radius: 60px; z-index: 10;
}
.head:after { height: 50px; width: 500px; content: ""; display: block; position: absolute; z-index: 10; top: 0; left: 0; -webkit-transform: rotate(35deg); transform: rotate(35deg); display: block; border-top-left-radius: 90px; border-bottom-left-radius: 10px;
}
.head:after { content: " "; width: 0; border-left: 135px solid; border-bottom: 20px solid; position: absolute; color: #FAE70B; left: 12px; margin-top: 18px; -webkit-transform: rotate(30deg); transform: rotate(30deg); display: block; z-index: 0; border-top-left-radius: 90px; border-bottom-left-radius: 10px;
}
.two { margin-left: 295px; -webkit-transform: rotatey(180deg); transform: rotatey(180deg); z-index: 10;
}
.rounder { width: 240px; height: 150px; background: #AAE0FA; border-radius: 50%; position: absolute; top: -19px; left: -80px; z-index: 15; -webkit-transform: rotate(30deg); transform: rotate(30deg); overflow: hidden;
}
.rounder.right { margin-left: 30px; width: 240px; height: 155px; background: #AAE0FA; border-radius: 50%; position: absolute; left: 50px; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); overflow: hidden; z-index: 10;
}
.inside-eye-right.two { -webkit-transform: rotatey(180deg) skewx(20deg) rotate(1deg); transform: rotatey(180deg) skewx(20deg) rotate(1deg); margin-top: -110px; margin-left: 178px; background: #343943; z-index: 18;
}
.inside-mask { content: " "; width: 0; border-left: 145px solid; border-bottom: 56px solid; position: absolute; color: #FAE70B; left: 136px; margin-top: 31px; -webkit-transform: rotate(-29deg) rotatey(180deg); transform: rotate(-29deg) rotatey(180deg); display: block; z-index: 1; border-top-left-radius: 80px; border-bottom-left-radius: 8px;
}
.eyeball { content: " "; display: block; /* height:20px; width:20px;*/ border-radius: 50%; height: 1px; width: 1px; border: 10px solid; position: absolute; color: white; background: white; border-radius: 50%; right: 30px; bottom: 20px; z-index: 10; -webkit-transform: skewx(-20deg); transform: skewx(-20deg); /* animation-name: eyes; animation-duration: 200ms; animation-iteration-count: 2; animation-direction: alternate; animation-delay: 2s;*/
}
@-webkit-keyframes eyes { 0%,100% { border-radius: 50%; height: 1px; width: 1px; border: 10px solid; } 45% { border-radius: 50%; } 50% { border-radius: 0; width: 20px; margin-top: 10px; border: 2px; }
}
@keyframes eyes { 0%,100% { border-radius: 50%; height: 1px; width: 1px; border: 10px solid; } 45% { border-radius: 50%; } 50% { border-radius: 0; width: 20px; margin-top: 10px; border: 2px; }
}
.left-eyeball { position: absolute; display: block; border: 10px solid; color: white; border-radius: 50%; background: white; height: 1px; width: 1px; bottom: 20px; right: 30px; -webkit-transform: skewx(-20deg); transform: skewx(-20deg); z-index: 20; -webkit-animation-name: eyes; animation-name: eyes; -webkit-animation-duration: 400ms; animation-duration: 400ms; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}
.unmasked { margin: 0 auto; background: #fad1b0; height: 101px; width: 235px; border-radius: 0px 0px 80px 80px; border-left: 30px solid #343943; border-right: 30px solid #343943; position: relative; z-index: -58; top: 199px; margin-left: -25px;
}
.mouth { width: 46%; position: absolute; bottom: 30%; border: 16PX solid #343943; margin-left: 20%; border-top-color: transparent; border-left-color: transparent; border-radius: 50%; border-right-color: transparent;
}
.mouth:after { content: ""; width: 112%; position: absolute; bottom: -11px; border: 16PX solid #fad1b0; border-left: 23px solid; left: -23px; border-top-color: transparent; border-left-color: transparent; border-radius: 50%; border-right-color: transparent; border-bottom-right-radius: 40%;
}
.tooth { border: 9px solid white; /* border-bottom: 8px solid white; */ position: absolute; border-radius: 50%; margin-left: 62px; margin-top: 47px; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; -webkit-transform: skew(5deg); transform: skew(5deg);
}
.rosy-cheeks, .rosy-cheeks:after { border-width: 10px 13px 10px 13px; border-style: solid; border-color: #F2A47D; position: absolute; border-radius: 50%; margin-top: 15px; margin-left: 20px;
}
.rosy-cheeks:after { content: ""; margin-left: 147px; margin-top: -10px;
}
.right-face { height: 94px; width: 50px; margin-top: 6px; border-radius: 0px 0px 80px 80px; border-left: 30px solid transparent; border-right: 24px solid #f2a47d; border-bottom-color: transparent; border-top-color: transparent; position: absolute; right: 0px; -webkit-transform: rotate(2deg); transform: rotate(2deg);
}

Cute Wolverine CSS - Script Codes JS Codes

// inspired by Lil BFF Wolvie by Dennis Salvatier...
//https://dribbble.com/shots/1587112-Lil-BFF-Wolvie?list=shots&sort=popular&timeframe=now&offset=30
Cute Wolverine CSS - Script Codes
Cute Wolverine CSS - Script Codes
Home Page Home
Developer Mark Santiago
Username msantiago1256
Uploaded November 02, 2022
Rating 3
Size 5,080 Kb
Views 22,264
Do you need developer help for Cute Wolverine CSS?

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!

Mark Santiago (msantiago1256) Script Codes
Name
CSS Nav ideas to show team
Showing the class some basics
Interactive Business Card
Work in progress...
Playing with user.me user generator
Working out an idea for a site design...
Dribbble 2 CSS relaxer
Variation on first rotating frames
Playing with pseudo and animate
Adult Learning, quick intro to JS math...
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!