Scribd
Upload
409 views5 pages

Sharingan en Css

This document contains HTML and CSS code to create a graphic of the Sharingan eye from the anime Naruto. The HTML establishes a container for the eye graphic and the CSS positions and styles multiple div elements to represent different parts of the eye, including the iris, pupils, and curved lines radiating from the pupils. Styles such as position, width, height, background color, border radius, and transforms are used to achieve a realistic representation of the distinctive three-tomoe Sharingan eye.

Uploaded by

Luis Carrillo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
409 views5 pages

Sharingan en Css

This document contains HTML and CSS code to create a graphic of the Sharingan eye from the anime Naruto. The HTML establishes a container for the eye graphic and the CSS positions and styles multiple div elements to represent different parts of the eye, including the iris, pupils, and curved lines radiating from the pupils. Styles such as position, width, height, background color, border radius, and transforms are used to achieve a realistic representation of the distinctive three-tomoe Sharingan eye.

Uploaded by

Luis Carrillo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Sharingan:

Codigo Html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sharingan</title>
<link rel="stylesheet" type="text/css" href="betza.css">
</head>
<body>
<div class="eye">
<div class="eye2">
<div class="eye4"></div>
<div class="eye5"></div>
<div class="eye3"></div>
<div class="aspa"></div>
<div class="aspa2"></div>
<div class="aspa3"></div>
<div class="aspapuntita"></div>
<div class="aspapuntita2"></div>
<div class="aspapuntita3"></div>
</div>
</div>
</body>
</html>
Codigo Css:
.eye{
position: relative;
height: 150px;
width: 150px;
top:30%;
left: 36%;
border-radius: 50%;
background: #B20000;
border:6px solid #000;
}

.eye4{
position: absolute;
width: 65%;
height: 65%;
border-radius: 50%;
top:18%;
left:18%;
background:#710909
}
.eye5{ position: absolute;
width: 70%;
height: 70%;
border-radius: 50%;
top:12%;
left:12%;
background: #B20000;
border:4px solid #710909
}
.eye3{
position: absolute;
width: 15%;
height: 15%;
border-radius: 50%;
top:43%;
left:42%;
background: #000;
}
.aspa{
position: absolute;
width:15%;
height: 15%;
border-radius: 50%;
top:43%;
left:7%;
background: #000;
}
.aspa2{
position: absolute;
width:15%;
height: 15%;
border-radius: 50%;
top:11%;
left:60%;
background: #000;
}
.aspa3{
position: absolute;
width:15%;
height: 15%;
border-radius: 50%;
top:75%;
left:60%;
background: #000;
}
.aspapuntita{
position: absolute;
width: 18%;
height: 12%;
top:41%;
left:2%;
background: transparent;
border-radius: 50%;
border-bottom: 5px solid #000;
-moz-transform: rotate(55deg);
-webkit-transform: rotate(55deg);
-o-transform: rotate(55deg);
-ms-transform: rotate(55deg);
transform: rotate(55deg);
}
.aspapuntita2{

position: absolute;
width: 18%;
height: 12%;
top:10%;
left:61%;
background: transparent;
border-radius: 50%;
border-bottom: 5px solid #000;
-moz-transform: rotate(-195deg);
-webkit-transform: rotate(-195deg);
-o-transform: rotate(-185deg);
-ms-transform: rotate(-195deg);
transform: rotate(-195deg);
}
.aspapuntita3{

position: absolute;
width: 18%;
height: 12%;
top:77%;
left:58%;
background: transparent;
border-radius: 50%;
border-bottom: 5px solid #000;
-moz-transform: rotate(265deg);
-webkit-transform: rotate(265deg);
-o-transform: rotate(265deg);
-ms-transform: rotate(265deg);
transform: rotate(265deg);
}

You might also like