طراحی کابینت با اچ تی ام ال

طراحی کابینت با اچ تی ام ال

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

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

کابینت ها در صنعت طراحی داخلی از اهمیت بالایی برخودار هستند.

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

 

طراحی کابینت با اچ تی ام ال

"طراحی

 

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

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

 

کد ساخت کابینت با HTML

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

توضیحات ساخت کابینت :
  • در این مثال چند بخش داریم :
    • cupboards-top
    • cupboards-main
      • cupboards-handle-right
        • cupboards-handle-point
      • cupboards-handle-left
        • cupboards-handle-point
    • cupboards-bottom
    • cupboards-base
      • cupboards-base-right
      • cupboards-base-left
  • ساختار بالا شامل سه بخش top و main و bottom و base می باشد که معرف آنها هستند.
  • در این مثال از css به صورت inline در کنار فایل html استفاده شده است.
  • بوردرهای بیرونی از رنگ تیره ساخته شده است.
  • بخش بالایی و پایینی کابینت رنگ نارنجی تیره تری دارد و داخل کابینت دارای رنگ نارنجی روشن تری است.
  • برای گرد شدن بخش های مختلف از خاصیت borde-radius در css استفاده شده است.

 

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

موفق باشید.

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

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

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

*

code