در حال نمایش 1 نوشته (از کل 1)
  • نویسنده
    نوشته ها
  • #33186

    academyit
    مشارکت کننده

    شاید به عنوان یک طراح وب سایت برای شما هم پیش آمده باشد که بخواهید شکل‌های مختلفی را با CSS ایجاد و به قسمتی از سایت خود اضافه کنید. جالب است بدانید بیش‌تر شکل‌ها در CSS در اصل یک چهار ضلعی هستند، حتی مثلث! چه قابل تشخیص باشد و چه نباشد، بیش‌تر شکل‌ها از چهار ضلع تشکیل شده‌اند که مقدارهای گوناگونی می‌توانند داشته باشند.

    روش‌های مختلفی برای ایجاد شکل‌ها به‌وسیله CSS وجود دارد. پارامترهای گوناگونی که می‌توانند شما را در ساخت شکل دلخواه یاری کنند. مانند:

    – Border-radius
    – Border
    – Transform
    – Clip-path
    – Box-shadow

    Border-radius
    با تنظیم این پارامتر شکل‌هایی مانند دایره یا بیضی به راحتی قابل ساخت هستند. Border Radius در اصل میزان خمیدگی یک گوشه را مشخص می‌سازد. این پارامتر می‌تواند مقداری بر اساس پیکسل یا درصد به خود بگیرد.

    .circle{
    height: 250px;
    width: 250px;
    border-radius:50%;
    background-color:#29DBC7;
    }

    .oval{
    width: 250px;
    height: 150px;
    border-radius:50%;
    background-color:#C70E0E;
    }
    همان‌طور که گفته شد با این پارامتر می‌توانید میزان انحنای گوشه شکل‌ها را مشخص کنید. به مربع زیر دقت کنید:

    .square{
    width: 200px;
    height: 200px;
    border-radius:20%;
    background-color:#A11ED3;
    }
    Border
    با تنظیم مناسب این ویژگی که به خطوط 4 سمت شکل مربوط می‌شود، می‌توانید شکل‌های مختلفی مانند مثلث را به سادگی ایجاد کنید. شکل زیر تنها با استفاده از border و بدون در نظر گرفتن width و height (مقدار صفر) طراحی شده است.

    #square{
    width: 0;
    height: 0;
    border-top:100px solid red;
    border-right:100px solid orange;
    border-bottom:100px solid green;
    border-left:100px solid blue;
    }
    رنگ‌های اختصاص داده شده به شما کمک می‌کنند تا قسمت‌های مختلف را به خوبی تشخیص دهید. حذف هر قسمت به وسیله transparent ، شکل‌ متفاوتی را به شما خواهد داد:
    ادامه مطلب

در حال نمایش 1 نوشته (از کل 1)

کاربر گرامی برای پاسخ به این موضوع اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.