یک نماد Ladybug با CSS و یک عنصر Div Single ایجاد کنید

ساخت حجم شگفت انگیزی از گرافیک به تنهایی با CSS امکان پذیر است. بیایید یک نماد کفشدوزک زیبا فقط با یک عنصر div ایجاد کنیم!

چگونه با یک دیو خلاق باشیم

قبل از شروع، به مهارت های CSS نیاز دارید. مشکل اصلی با عناصر منفرد در این واقعیت است که ما به تعداد “بلوک های ساختمانی” که می توانیم استفاده کنیم محدود شده ایم. خوشبختانه، چند ترفند وجود دارد:

عناصر شبه

عناصر شبه (همچنین به عنوان محتوای تولید شده) در خود نشانه گذاری سند وجود ندارد (the DOM) اما توسط CSS ایجاد می شوند. آنها به شما این امکان را می دهند که دو عنصر دیگر را به پیش فرض خود اضافه کنید که می توانند (کم و بیش) از ویژگی های مشابه استفاده کنند.

به عنوان مثال، این نشانه گذاری را در نظر بگیرید:

1

<div class="square"></div>

سپس قوانین سبک زیر را اعمال کنید:

1

.square {

2

	position: relative;

3

	background: blue;

4

	width: 50px;

5

	height: 50px;

6

}

7

.square::before {

8

	position: absolute;

9

	left: -50px;	

10

	content: '';

11

	height: 50px;

12

	width: 50px;

13

	display: block;

14

	background: green;

15

}

16

.square::after {

17

	position: absolute;

18

	left: 50px;

19

	content: '';

20

	height: 50px;

21

	width: 50px;

22

	display: block;

23

	background: red;	

24

}

بنابراین می‌رویم: یک div منفرد، اما سه بلوک سازنده:

نکته ای که باید توجه داشته باشید این است که عناصر شبه در بالای عنصر پیش فرض نمایش داده می شوند، مگر اینکه به آنها مقدار کمتری بدهید. z-index ارزش نسبت به والد مرورگرها آنها را به گونه ای تفسیر می کنند که گویی قرار دارند در داخل عنصر پیش فرض اگر بخواهیم عناصر شبه را با نشانه گذاری واقعی نمایش دهیم، کد به شکل زیر خواهد بود:

1

<div class="square">

2

	<div class="before"></div>

3

	<div class="after"></div>

4

</div>

سایه های جعبه

اگر عناصر شبه به تنهایی بلوک های کافی برای ساخت آیکون به شما نمی دهند، می توانید از سایه های جعبه نیز استفاده کنید. این تکنیک به شما این امکان را می دهد که تعداد زیادی را ایجاد کنید کلون ها همانطور که شما می خواهید بیایید به یک مثال با دایره نگاه کنیم:

1

.circle {

2

	position: relative;

3

	background: blue;

4

	width: 50px;

5

	height: 50px;

6

	border-radius:50%;

7

	box-shadow: -110px 0 0 -20px purple,

8

                -60px 0 0 -10px red,

9

                80px 0 0 10px green,

10

                180px 0 0 20px orange;

11

}

همانطور که می بینید، سایه های جعبه به شما این امکان را می دهد که اندازه شکل اولیه خود را کاهش یا افزایش دهید و آن را در جایی که می خواهید قرار دهید.

جزئیات ملک box-shadow: 80px 5px 1px 10px green را می توان به صورت زیر تقسیم کرد:

• 80 پیکسل offset-x این به شما امکان می دهد سایه خود را در امتداد محور x قرار دهید و به عنوان مبدا مرکز شکل اصلی خود را بگیرید
• 5 پیکسل offset-y این به شما امکان می دهد سایه خود را در امتداد محور y قرار دهید و مرکز شکل اصلی خود را به عنوان مبدا انتخاب کنید
• 1 پیکسل blur-radius هر چه این مقدار بزرگتر باشد، تاری بزرگتر است، بنابراین سایه بزرگتر و روشن تر می شود
• 10 پیکسل spread-radius مقادیر مثبت باعث گسترش و بزرگتر شدن سایه می شود، مقادیر منفی باعث کوچک شدن سایه می شود.
• سبز color رنگ شکل تو 🙂

این inset ارزش همچنین به ما امکانات مختلفی می دهد:

1

.ball {

2

	position: relative;

3

	background: blue;

4

	width: 50px;

5

	height: 50px;

6

	border-radius: 50%;

7

	box-shadow: inset 20px 0 0 -10px yellow,

8

                inset -20px 0 0 -10px red;

9

}

گرادیان ها

مانند سایه ها، گرادیان های CSS را می توان ترکیب کرد و به طور مستقل قرار داد. استفاده از گرادیان برای ایجاد اشکال کمی پیچیده‌تر از ویژگی‌های قبلی است، بنابراین اجازه دهید روی یک مثال «ساده» تمرکز کنیم.

در این مثال ما چهار دایره مختلف را با استفاده از گرادیان های شعاعی ایجاد می کنیم و آنها را در عنصر والد توزیع می کنیم.

1

.background {

2

    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 10%,transparent 10%,transparent 100%),

3

				radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%,transparent 32%,transparent 100%),

4

				radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 52%,transparent 100%),

5

				radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 60%,transparent 62%,transparent 100%);

6

	background-color: red;

7

	background-repeat: no-repeat;

8

	background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;

9

	background-size: 50px 50px;

10

	width: 100px;

11

	height: 100px;

12

	position: relative;

13

}

برای درک این نسخه ی نمایشی، باید یک شبکه را روی عنصر تصور کنید. هر سلول از شبکه یک گرادیان متفاوت خواهد بود. در این حالت سلول ها 50 پیکسل در 50 پیکسل هستند (background-size: 50px 50px;). من عمدا آنها را در عنصر پخش کرده ام، اما توجه داشته باشید که می توان آنها را نیز روی هم قرار داد. هر سلول را می توان روی یک محور x و y جداگانه قرار داد که منشاء آن در گوشه سمت چپ بالای عنصر پایه است.background-position: 0px 0px, 50px 0px, 50px 50px, 0px 50px;).

ویژگی Gradient به تفصیل: background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1)

• ellipse شکل: می تواند دایره یا بیضی باشد، در این مثال هر دو یک کار را انجام می دهند.
• at center موقعیت: همچنین می تواند به صورت بیان شود background-position(center = 50% 50%).
• rgba(0, 0, 0, 1) 10% رنگ و حد: مقدار حد را افزایش دهید تا دایره بزرگ شود.
• transparent 10% رنگ و حد: این مقدار حد، انتهای رنگ قبلی شما را مشخص می کند. حدی را کمی بالاتر از حد قبلی تعیین کنید تا لبه‌های صاف‌تری داشته باشید.
• transparent 100% رنگ و حد: سپس گرادیان از 10 تا 100 درصد شفاف خواهد بود.

برای کمک به ایجاد گرادیان های CSS، می توانید از یک ژنراتور مانند ویرایشگر گرادیان Collorzilla.

اکنون که نحوه ایجاد حداکثر بلوک های ساختمانی از یک div را دیدیم، بیایید کفشدوزک خود را بسازیم!

نحوه ایجاد یک نماد با یک div

مرحله 1: بدن

در اینجا یک خط HTML از این آموزش آمده است:

1

<div class="ladybug"></div>

برای اینکه نماد ما به راحتی قابل تغییر باشد، از واحدهای اندازه گیری انعطاف پذیر استفاده می کنیم. em و ٪. به لطف این شما قادر خواهید بود به سادگی با تغییر اندازه فونت در عنصر، اندازه را به دلخواه خود تغییر دهید. همه مرورگرهای مدرن از CSS مورد استفاده ما پشتیبانی می کنند، بنابراین به شما اجازه می دهم آن را تغییر دهید پیشوندهای فروشنده بسته به نیاز شما

ما با دادن شکل و رنگ به بدن کفشدوزک خود شروع می کنیم:

1

.ladybug {

2

	position: relative;

3

	font-size: 60px;

4

	width: 1.8em;

5

	height: 2em;

6

	border-radius: 50%;

7

	background-color: #E11;

8

}

حالا بیایید نقاط روی بدن را با استفاده از استفاده کنید radial-gradient ویژگی.

1

.ladybug {

2

	position: relative;

3

	font-size: 60px;

4

	width: 1.8em;

5

	height: 2em;

6

	border-radius: 50%;

7

    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 30%,transparent 33%,transparent 100%),

8

		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 55%,transparent 100%),

9

		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 50%,transparent 55%,transparent 100%),

10

		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%,transparent 43%,transparent 100%),

11

		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%,transparent 43%,transparent 100%),

12

		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 45%,transparent 50%,transparent 100%),

13

		radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 45%,transparent 50%,transparent 100%);	background-color: #E11;

14

	background-repeat: no-repeat;

15

	background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;

16

	background-size: 0.5em 0.5em;

17

}

کار عالی – ما در حال حاضر با بدن به پایان رسیدیم.

گام 2: سر

این قسمت سریع ترین است. یک نیم دایره سیاه می کشیم و آن را بالای بدن قرار می دهیم. برای این کار از عنصر شبه استفاده می کنیم ::before.

1

.ladybug::before {

2

	content: '';

3

	position: absolute;

4

	display: block;

5

	height: 0.5em;

6

	width: 1.2em;

7

	top: -0.24em;

8

	background: black;

9

	left: 0.3em;

10

	border-radius: 50% 50% 0% 0% / 100% 100% 0 0;

11

}

مرحله 3: چشمها

در اینجا چشم ها را با استفاده از عنصر شبه ایجاد می کنیم ::after و CSS box-shadow ویژگی. ما با ایجاد دایره اصلی خود (مردمک) شروع می کنیم، سپس این عنصر را “کلون” می کنیم تا سفیدی چشم، طرح کلی و چشم دیگر را ایجاد کنیم.

1

.ladybug::after {

2

	content: '';

3

	position: absolute;

4

	display: block;

5

	height: 0.1em;

6

	width: 0.1em;

7

	background: black;

8

	top: -0.1em;

9

	left: 0.5em;

10

	border-radius: 50%;

11

	box-shadow: 0 0 0 0.1em white,0em 0 0 0.13em black,0.7em 0 0 0 black,0.7em 0 0 0.1em white,0.7em 0 0 0.13em black;

12

}

مرحله 4: پاها

شما باید فکر کنید “ما یک عنصر باقی مانده داریم”. نگران نباشید، ما از همان سایه جعبه ای که برای چشم استفاده می شود، دوباره استفاده خواهیم کرد.

1

	.ladybug::after {

2

	content: '';

3

	position: absolute;

4

	display: block;

5

	height: 0.1em;

6

	width: 0.1em;

7

	background: black;

8

	top: -0.1em;

9

	left: 0.5em;

10

	border-radius: 50%;

11

	box-shadow: 0 0 0 0.1em white,0em 0 0 0.13em black,0.7em 0 0 0 black,0.7em 0 0 0.1em white,0.7em 0 0 0.13em black,1.2em 0.5em 0 0.02em black,1.35em 1.1em 0 0.02em black,1.2em 1.65em 0 0.02em black,-0.5em 0.5em 0 0.02em black,-0.65em 1.1em 0 0.02em black,-0.5em 1.65em 0 0.02em black;

12

}

نماد کفشدوزک ما بالاخره به پایان رسید!

مرحله 5: پاداش!

ما در واقع کاملاً تمام نشده ایم. در اینجا کد جایزه CSS برای متحرک سازی کفشدوزک ما در حالت شناور آمده است:

1

	@keyframes ladybug

2

	{

3

	0%   {

4

		background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;

5

	}

6

7

	50% {

8

		background-position: 0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em,0.66em 0.8em;

9

	}

10

11

	100%   {

12

		background-position: 0.66em 0.2em,0.3em 0.6em,1em 0.6em,0.9em 1.1em,0.4em 1.1em,1.1em 1.5em,0.2em 1.5em;

13

	}

14

	}

15

16

.ladybug:hover {

17

	animation: ladybug 1s;

18

}

ما با تعریف برخی از فریم های کلیدی که نام می بریم شروع می کنیم ladybug. سپس آن فریم های کلیدی را در حالت شناور نماد ما فعال می کنیم. فریم های کلیدی هر کدام موقعیت پس زمینه خال های کفشدوزک ما را تغییر می دهند

نتیجه نهایی

در اینجا یادآور چیزی است که ما ایجاد کرده ایم:

نتیجه

امیدوارم از طریق این آموزش پتانسیل CSS و آنچه را که با یک عنصر HTML ممکن است به شما نشان داده باشم. همیشه عاقلانه است که پشتیبانی مرورگر از ویژگی های CSS مورد بحث در این آموزش را در نظر بگیرید، و مطمئن شوید که آنها به خوبی کاهش می یابند.

الهام بیشتر