کانال ما در تلگرام
کارکتر جالب ninja با css

کارکتر NINJA

با یک کارکتر زیبا و جالب با عنوان ninja در خدمت طراحان وب هستیم . از این کارکتر میتوانید در طراحی های فانتزی خود استفاده نمایید. کد فوق کاملا با CSS نوشته شده است و هیچ عکسی در آن به کار نرفته است. همچنین میتوانید با طرح فوق الگئ گرفته و عناصر جالب تری را خلق کنید.

 

 

کد CSS ( معمولا در style.css )

 

#ichizoku{width:99%;margin:auto;} .ninja {     width: 180px;     height: 200px;     position: relative;     margin: 100px 10px;     float: left; } .ninja .n--head {     width: 140px;     height: 140px;     background: #000;     /*border-radius*/     -webkit-border-radius: 100%;     -moz-border-radius: 100%;     border-radius: 100%;     margin: -70px auto;     overflow: hidden; } /* Eyes */ .ninja .n--head .n--eyes {     display: block;     width: 300px;     height: 300px;     background: #000;     border: 40px solid #f0d4a6;     /*border-radius*/     -webkit-border-radius: 100%;     -moz-border-radius: 100%;     border-radius: 100%;     margin: 35% -85%; } .ninja .n--head .n--eyes:before {     content: '';     display: block;     width: 120px;     height: 120px;     background: transparent;     border: 10px solid #000;     position: absolute;     margin: -49% 44%;     /*border-radius*/     -webkit-border-radius: 100%;     -moz-border-radius: 100%;     border-radius: 100%; } .ninja .n--head .n--eyes:after {     content: '';     display: block;     width: 20px;     height: 20px;     background: #000;     position: absolute;     margin: -14% 60%;     /*border-radius*/     -webkit-border-radius: 100%;     -moz-border-radius: 100%;     border-radius: 100%;     /*box-shadow*/     -webkit-box-shadow: 62px 0px 0;     -moz-box-shadow: 62px 0px 0;     box-shadow: 62px 0px 0; } .ninja .n--head .n--ribbon {     position: absolute;     width: 10px;     height: 0;     border-left: 10px solid transparent;     border-right: 10px solid transparent;     border-top: 40px solid #000;     margin: -10px 105px;     /*transform*/     -webkit-transform: rotate(45deg);     -moz-transform: rotate(45deg);     -ms-transform: rotate(45deg);     -o-transform: rotate(45deg);     transform: rotate(45deg); } .ninja .n--head .n--ribbon:after {     content: '';     display: block;     width: 30px;     height: 30px;     background: #fff;     /*border-radius*/     -webkit-border-radius: 20000000%;     -moz-border-radius: 20000000%;     border-radius: 20000000%;     margin: -60px -10px; } .ninja .n--body {     width: 64%;     height: 50%;     background: #000;     margin: 60px auto; } .ninja .n--body:after {     content: '';     display: block;     background: #333;     width: 100%;     height: 10px;     margin-top: 60%;     z-index: 1;     position: relative; } .ninja .n--body .n--weapon {     width: 130px;     height: 10px;     /*border-radius*/     -webkit-border-radius: 100px;     -moz-border-radius: 100px;     border-radius: 100px;     z-index: -1;     /*transform*/     -webkit-transform: rotate(45deg);     -moz-transform: rotate(45deg);     -ms-transform: rotate(45deg);     -o-transform: rotate(45deg);     transform: rotate(45deg);     position: absolute;     border: 1px solid #ccc;     margin: auto -32%; } .ninja .n--arm {     width: 50%;     height: 55%;     background: #000;     /*border-radius*/     -webkit-border-radius: 100px;     -moz-border-radius: 100px;     border-radius: 100px; } .ninja .n--arm:nth-child(2) { margin: 0 -25% } .ninja .n--arm:nth-child(3) { margin: -48% 75% } .ninja .n--leg {     width: 45%;     height: 75%;     float: left;     background: #000;     /*border-radius*/     -webkit-border-radius: 100px;     -moz-border-radius: 100px;     border-radius: 100px;     margin-top: 60px; } .ninja .n--body .n--leg:nth-child(4) { margin-left: 0px } .ninja .n--body .n--leg:nth-child(5) { margin-left: 10% } /* Color the ninja */ .ninja.red .n--weapon {     background: #e74c3c;     border-color: #c0392b; } .ninja.red .n--body:after { background: #e74c3c } .ninja.blue .n--weapon {     background: #3498db;     border-color: #2980b9; } .ninja.blue .n--body:after { background: #3498db } .ninja.green .n--weapon {     background: #2ecc71;     border-color: #27ae60; } .ninja.green .n--body:after { background: #2ecc71 } .ninja.yellow .n--weapon {     background: #f1c40f;     border-color: #f39c12; } .ninja.yellow .n--body:after { background: #f1c40f }

 

 

جایی که میخواهید نینجا نمایش داده بشه اضافه کنید :

<div id="ichizoku">   <div class="ninja red">     <div class="n--head">       <div class="n--ribbon"></div>       <div class="n--eyes"></div>     </div>     <div class="n--body">       <div class="n--weapon"></div>       <div class="n--arm"></div>       <div class="n--arm"></div>          <div class="n--leg"></div>       <div class="n--leg"></div>     </div>    </div>      <div class="ninja blue">     <div class="n--head">       <div class="n--ribbon"></div>       <div class="n--eyes"></div>     </div>     <div class="n--body">       <div class="n--weapon"></div>       <div class="n--arm"></div>       <div class="n--arm"></div>          <div class="n--leg"></div>       <div class="n--leg"></div>     </div>    </div>      <div class="ninja green">     <div class="n--head">       <div class="n--ribbon"></div>       <div class="n--eyes"></div>     </div>     <div class="n--body">       <div class="n--weapon"></div>       <div class="n--arm"></div>       <div class="n--arm"></div>              <div class="n--leg"></div>       <div class="n--leg"></div>     </div>     </div>      <div class="ninja yellow">     <div class="n--head">       <div class="n--ribbon"></div>       <div class="n--eyes"></div>     </div>     <div class="n--body">       <div class="n--weapon"></div>       <div class="n--arm"></div>       <div class="n--arm"></div>          <div class="n--leg"></div>       <div class="n--leg"></div>     </div>     </div> </div>

0
نام:*
ایمیل:


جستجو در سایت
برند مورد علاقه شما
تقویم سایت
<    «  آبان 1399  »    >
شیدسچپج
 12
3456789
10111213141516
17181920212223
24252627282930