ساخت مسواک با html و css

ساخت مسواک با html و css

یکی از تکنیک های جدید وب این است که به جای استفاده از تصاویر از svg یا المان هایی که با css ساخته می شود استفاده کنید تا حجم لود صفحات پایین بیاید.

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

مسواک در مراقبت از دندان ها و نزد دندانپزشک ها اهمیت بالایی دارد.

با ما همراه باشید.

 

ساخت مسواک با html

ساخت مسواک با html

در این آموزش قصد داریم یک مسواک‌‍ساده به شکل بالا را با کمک html و css بسازیم.

بدون حاشیه سراغ ادامه ی این آموزش می رویم.

 

کد ساخت مسواک با HTML

برای ساخت‌مسواک با کمک html و css از کد زیر استفاده کنید:

توضیحات ساخت کابینت :
  • در این مثال چند بخش داریم :
    • toothbrush-dough
    • toothbrush-brushs
      • toothbrush-brushs-item
    • toothbrush-base
  • ساختار بالا شامل سه بخش dough و brushs و base می باشد که معرف آنها هستند.
  • در این مثال از css به صورت inline در کنار فایل html استفاده شده است.
  • بدنه ی مسواک سبز زنگ، برس های مسواک به صورت یکی در میان با کمک nth-child در css تیره و روشن است.
  • خمیر دندان به رنگ آبی فیروزه ای است و دو طرف آن گرد یا curve شده است.
  • برای گرد شدن بخش های مختلف از خاصیت borde-radius در css استفاده شده است.

 

اگر مثال های دیگری مد نظر دارید از بخش تماس با ما این مثال ها را به ما پیشنهاد دهید.

موفق باشید.

برای امتیاز به این نوشته کلیک کنید!
[کل: ۰ میانگین: ۰]
با دوستانتان به اشتراک بگذارید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code