Pokemon Icon

Developer
Rıza Selçuk Saydam
Size
2,655 Kb
Views
60,720
  1. Pokemon Icon Previews
  2. Pokemon Icon HTML Codes
  3. Pokemon Icon CSS Codes

How do I make an pokemon icon?

What is a pokemon icon? How do you make a pokemon icon? This script and codes were developed by Rıza Selçuk Saydam on 02 August 2022, Tuesday.

Pokemon Icon Previews
IQ Test

Pokemon Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pokemon Icon</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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! */ body{ background-color:#2c2c44; text-align:center; padding:50px 0;	min-width: 800px;	min-height: 400px
}
.pokemon{ width:200px; height:200px; background-color:#302d2d; border-radius:30px; position:relative; font-size:200px; line-height:200px; display:inline-block;
}
.pokemon i:before{ content:""; position:absolute; top:50%; left:50%; height:44px; width:44px; border-radius:44px; background-color:#f6f7f8; z-index:2; margin:-41px 0 0 -41px; border:18px solid #302d2d;
}
.pokemon:before{ content:""; width:200px; height:75px; background-color:#ef4144; display:block; border-radius:30px 30px 0 0; position:absolute; top:0; left:0;
}
.pokemon:after{ content:""; width:200px; height:96px; background-color:#f6f7f8; display:block; border-radius:0 0 30px 30px; position:absolute; bottom:0; left:0; -webkit-box-shadow: inset 0px -20px 0px 0px #e2e3e4; box-shadow: inset 0px -20px 0px 0px #e2e3e4;
}
/* Pikachu */
.pikachu{ width:200px; height:200px; background-color:#ffcd32; border-radius:30px; position:relative; font-size:200px; line-height:200px; display:inline-block; margin-left:30px; -webkit-box-shadow: inset 0px -20px 0px 0px #ffb900; box-shadow: inset 0px -20px 0px 0px #ffb900;
}
.pikachu:before,.pikachu:after{ content:""; position:absolute; top:45px; height:40px; width:40px; background-color:#302d2d; border-radius:20px;
}
.pikachu:before{ left:35px;
}
.pikachu:after{ right:35px;
}
.pikachu span{ position:absolute; top:88px; left:95px; height:5px; width:9px; background-color:#302d2d; border-radius: 5px 5px 5px 5px;
}
.pikachu span:before,
.pikachu span:after{ content:""; position:absolute; top:25px; height:46px; width:46px; background-color:#ef4144; border-radius:23px;
}
.pikachu span:before{ left:25px;
}
.pikachu span:after{ right:25px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="pokemon"><i></i></div>
<!-- <div class="pikachu"><span></span></div> --> <script src='http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script>
</body>
</html>

Pokemon Icon - Script Codes CSS Codes

body{ background-color:#2c2c44; text-align:center; padding:50px 0;	min-width: 800px;	min-height: 400px
}
.pokemon{ width:200px; height:200px; background-color:#302d2d; border-radius:30px; position:relative; font-size:200px; line-height:200px; display:inline-block;
}
.pokemon i:before{ content:""; position:absolute; top:50%; left:50%; height:44px; width:44px; border-radius:44px; background-color:#f6f7f8; z-index:2; margin:-41px 0 0 -41px; border:18px solid #302d2d;
}
.pokemon:before{ content:""; width:200px; height:75px; background-color:#ef4144; display:block; border-radius:30px 30px 0 0; position:absolute; top:0; left:0;
}
.pokemon:after{ content:""; width:200px; height:96px; background-color:#f6f7f8; display:block; border-radius:0 0 30px 30px; position:absolute; bottom:0; left:0; -webkit-box-shadow: inset 0px -20px 0px 0px #e2e3e4; box-shadow: inset 0px -20px 0px 0px #e2e3e4;
}
/* Pikachu */
.pikachu{ width:200px; height:200px; background-color:#ffcd32; border-radius:30px; position:relative; font-size:200px; line-height:200px; display:inline-block; margin-left:30px; -webkit-box-shadow: inset 0px -20px 0px 0px #ffb900; box-shadow: inset 0px -20px 0px 0px #ffb900;
}
.pikachu:before,.pikachu:after{ content:""; position:absolute; top:45px; height:40px; width:40px; background-color:#302d2d; border-radius:20px;
}
.pikachu:before{ left:35px;
}
.pikachu:after{ right:35px;
}
.pikachu span{ position:absolute; top:88px; left:95px; height:5px; width:9px; background-color:#302d2d; border-radius: 5px 5px 5px 5px;
}
.pikachu span:before,
.pikachu span:after{ content:""; position:absolute; top:25px; height:46px; width:46px; background-color:#ef4144; border-radius:23px;
}
.pikachu span:before{ left:25px;
}
.pikachu span:after{ right:25px;
}
Pokemon Icon - Script Codes
Pokemon Icon - Script Codes
Home Page Home
Developer Rıza Selçuk Saydam
Username rss
Uploaded August 02, 2022
Rating 3.5
Size 2,655 Kb
Views 60,720
Do you need developer help for Pokemon Icon?

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!

Rıza Selçuk Saydam (rss) Script Codes
Name
CSS3 Loading Animation
Sticky footer - adjustPusher
Contact Page CSS3 Transation
Flutterby
Loader Animation
Animated Flat Camera Icon
CSS3 Loader Animation - Peeek
Flat iOS 7 Safari Icon
SOCIAL BANG
METU CSS3 Logo
Create amazing web content 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!