ساخت کاراکتر دختر با html و css

ساخت کاراکتر دختر با html و css

در این نوشته به ساخت یک کاراکتر‌ دختر با کمک html و css می‌پردازیم.

کد:

<!DOCTYPE html>
<html>
	<head>
		<title>Girl With HTML+CSS | By Amirshnll</title>
		<meta http-equiv="refresh" content="1">

		<style type="text/css">
			
			body {
			background:#b4fddd;
			}

			.clearfix {
			clear:both!important;
			}

			.circle {
			background:linear-gradient(to bottom,#2dca81 0%,#b4fddd 70%);
			border-radius:100%;
			height:400px;
			width:400px;
			display:flex;
			margin:130px auto;
			}

			.girl {
			width:100px;
			margin:200px auto;
			}

			.hair,.face,.hair-in-face,.neck,.hair-curve-1,.hair-curve-2,.hair-curve-3,.hair-curve-4,.hair-curve-5,.hair-curve-6,.hair-curve-7,.body,.head-flower {
			position:absolute;
			}

			.hair {
			background:#161817;
			height:170px;
			width:140px;
			border-top-right-radius:50px;
			border-top-left-radius:50px;
			border-bottom-right-radius:55px;
			border-bottom-left-radius:55px;
			top:100px;
			left:0;
			right:0;
			margin:auto;
			}

			.face {
			width:100px;
			height:130px;
			border-radius:100%;
			background-color:#d1b5a9;
			top:120px;
			left:0;
			right:0;
			z-index:1;
			margin:auto;
			}

			.hair-in-face {
			background:#161817;
			height:30px;
			width:80px;
			border-bottom-right-radius:150px;
			border-bottom-left-radius:150px;
			top:125px;
			left:0;
			right:60px;
			z-index:2;
			transform:rotate(330deg);
			margin:auto;
			}

			.hair-curve-1 {
			background-color:#161817;
			width:70px;
			height:50px;
			top:100px;
			left:90px;
			right:0;
			z-index:0;
			border-top-right-radius:55px;
			border-top-left-radius:55px;
			float:right;
			transform:rotate(35deg);
			margin:auto;
			}

			.hair-curve-2 {
			background-color:#161817;
			width:70px;
			height:50px;
			top:85px;
			left:0;
			right:0;
			z-index:0;
			border-top-right-radius:55px;
			border-top-left-radius:55px;
			float:right;
			margin:auto;
			}

			.hair-curve-3 {
			background-color:#161817;
			width:70px;
			height:50px;
			top:100px;
			left:-90px;
			right:0;
			z-index:0;
			border-top-right-radius:55px;
			border-top-left-radius:55px;
			float:right;
			transform:rotate(-35deg);
			margin:auto;
			}

			.hair-curve-4 {
			background-color:#161817;
			width:70px;
			height:50px;
			top:140px;
			left:-120px;
			right:0;
			z-index:0;
			border-top-right-radius:55px;
			border-top-left-radius:55px;
			float:right;
			transform:rotate(-90deg);
			margin:auto;
			}

			.hair-curve-5 {
			background-color:#161817;
			width:70px;
			height:50px;
			top:180px;
			left:-120px;
			right:0;
			z-index:0;
			border-top-right-radius:55px;
			border-top-left-radius:55px;
			float:right;
			transform:rotate(-90deg);
			margin:auto;
			}

			.hair-curve-6 {
			background-color:#161817;
			width:70px;
			height:50px;
			top:140px;
			left:120px;
			right:0;
			z-index:0;
			border-top-right-radius:55px;
			border-top-left-radius:55px;
			float:right;
			transform:rotate(90deg);
			margin:auto;
			}

			.hair-curve-7 {
			background-color:#161817;
			width:70px;
			height:50px;
			top:180px;
			left:120px;
			right:0;
			z-index:0;
			border-top-right-radius:55px;
			border-top-left-radius:55px;
			float:right;
			transform:rotate(90deg);
			margin:auto;
			}

			.eye {
			width:100%;
			margin-top:10px;
			}

			.left-eye {
			border-radius:70px;
			width:25px;
			height:15px;
			background:#fff;
			text-align:center;
			display:inline-block;
			float:left;
			margin-left:15px;
			border-top:2px dotted #150e07;
			}

			.right-eye {
			border-radius:70px;
			width:25px;
			height:15px;
			background:#fff;
			display:inline-block;
			float:right;
			text-align:center;
			margin-right:15px;
			border-top:2px dotted #150e07;
			}

			.eye-dot {
			background-color:#150e07;
			border-radius:100%;
			width:14px;
			height:14px;
			margin:.7px auto;
			}

			.eye-bro {
			width:100%;
			margin-top:30px;
			}

			.left-eye-bro {
			width:30px;
			height:5px;
			background-color:#281914;
			float:left;
			margin-left:15px;
			display:inline-block;
			border-top-left-radius:5px;
			border-top-right-radius:2px;
			}

			.right-eye-bro {
			width:30px;
			height:5px;
			background-color:#281914;
			float:right;
			margin-right:15px;
			border-top-right-radius:5px;
			border-top-left-radius:2px;
			display:inline-block;
			}

			.nose {
			width:7px;
			height:25px;
			background-color:#f1d5c9;
			border-radius:5px;
			margin:auto;
			}

			.lips {
			width:50px;
			border-radius:100%;
			overflow:hidden;
			margin:auto;
			}

			.top-lip {
			width:50px;
			height:10px;
			border:solid 4px #a44e57;
			border-radius:100%;
			margin-top:-15px;
			border-color:transparent transparent #a44e57;
			}

			.bottom-lip {
			width:50px;
			height:10px;
			border:solid 4px #6b2528;
			border-radius:100%;
			border-color:transparent transparent #6b2528;
			}

			.neck {
			background-color:#d1b5a9;
			width:30px;
			height:35px;
			top:240px;
			left:0;
			right:0;
			z-index:2;
			border-bottom-right-radius:100%;
			border-bottom-left-radius:100%;
			margin:auto;
			}

			.body {
			background-color:#174632;
			width:140px;
			height:200px;
			top:260px;
			left:0;
			right:0;
			z-index:1;
			border-top-right-radius:55px;
			border-top-left-radius:55px;
			border-bottom-right-radius:15px;
			border-bottom-left-radius:15px;
			overflow:hidden;
			margin:auto;
			}

			.collar {
			border-bottom-right-radius:55px;
			border-bottom-left-radius:55px;
			background-color:#d1b5a9;
			width:100px;
			height:30px;
			margin:auto;
			}

			.hands {
			z-index:2 !important;
			position:relative;
			}

			.left-hand {
			background-color:#d1b5a9;
			height:150px;
			width:30px;
			border-bottom-right-radius:10px;
			border-bottom-left-radius:10px;
			transform:rotate(-30deg);
			margin-left:20px;
			box-shadow:0 0 2px #0d271c;
			overflow:all;
			z-index:2;
			float: left;
			position: relative;
			}

			.right-hand {
			background-color:#d1b5a9;
			height:150px;
			width:30px;
			right:0;
			border-bottom-right-radius:10px;
			border-bottom-left-radius:10px;
			transform:rotate(10deg);
			margin-right:20px;
			box-shadow:0 0 2px #0d271c;
			overflow:all;
			z-index:2;
			margin-top:10px;
			float: right;
			position: relative;
			}

			.sleeve {
			background-color:#174632;
			height:50px;
			width:100%;
			margin:-5px;
			padding:5px;
			}

			.head-flower {
			top: 120px;
			z-index: 3;
			border-radius: 100%;
			}

			.head-flower div {
			width: 12px;
			height: 12px;
			border-radius: 100%;
			float: left;
			background-color: #e84118;
			}

			.head-flower-1 {
			z-index: 1;
			margin: -6px 13px;
			}

			.head-flower-2 {
			z-index: 2;
			margin: 0 7px;
			}

			.head-flower-3 {
			z-index: 3;
			margin: 0 -8px;
			}

			.head-flower-4 {
			z-index: 3;
			margin: 5px -13px;
			}

			.head-flower-5 {
			z-index: 4;
			background-color: #fbc531 !important;
			margin: 0 -13.5px;
			}

			p {
				font-family: tahoma;
				font-size: 11px;
				letter-spacing: 3px;
				text-align: center;
			}

		</style>
	</head>

	<body>

		<div class="circle">

			<div class="girl">

				<div class="hair"></div>
				<div class="hair-in-face"></div>

				<div class="head-flower">
					<div class="head-flower-1"></div>
					<div class="head-flower-2"></div>
					<div class="head-flower-3"></div>
					<div class="head-flower-4"></div>
					<div class="head-flower-5"></div>
				</div>

				<div class="hair-curve-1"></div>
				<div class="hair-curve-2"></div>
				<div class="hair-curve-3"></div>
				<div class="hair-curve-4"></div>
				<div class="hair-curve-5"></div>
				<div class="hair-curve-6"></div>
				<div class="hair-curve-7"></div>

				<div class="face">
					<div class="eye-bro">
						<div class="left-eye-bro"></div>
						<div class="right-eye-bro"></div>
						<div class="clearfix"></div>
					</div>
					<div class="eye">
						<div class="left-eye">
							<div class="eye-dot"></div>
						</div>
						<div class="right-eye">
							<div class="eye-dot"></div>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="nose"></div>
					<div class="lips">
						<div class="bottom-lip"></div>
						<div class="top-lip"></div>
					</div>
				</div>
				<div class="neck"></div>

				<div class="body">
					<div class="collar"></div>
					<div class="hands">
						<div class="left-hand">
							<div class="sleeve"></div>
						</div>
						<div class="right-hand">
							<div class="sleeve"></div>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="clearfix"></div>
				</div>

			</div>

		</div>

		<p>&copy; 2019 Amir Shokri [Mr.nll].</p>

	</body>
</html>

کلاس‌های استفاده شده در کد بالا به شرح زیر است:

circle
girl
hair
hair-in-face
head-flower
head-flower-1
head-flower-2
head-flower-3
head-flower-4
head-flower-5
hair-curve-1
hair-curve-2
hair-curve-3
hair-curve-4
hair-curve-5
hair-curve-6
hair-curve-7
face
eye-bro
left-eye-bro
right-eye-bro
clearfix
eye
left-eye
eye-dot
right-eye
eye-dot
nose
lips
bottom-lip
top-lip
neck
body
collar
hands
left-hand
sleeve
right-hand
sleeve
clearfix

اگر شکل خاصی مد نظر دارید در بخش نظرات به ما پیشنهاد ترسیم آن با HTML و CSS را بدهید.

برای امتیاز به این نوشته کلیک کنید!

[کل: 2 میانگین: 5]