در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش گام به گام CSS3 بخش سوم: رنگ ها و سایه ها

با قسمت سوم از آموزش CSS3 در خدمت شما عزیزان هستم، در این قسمت می خواهیم به اجزای جدید خاصیت رنگ ها بپردازیم، اگر به یاد داشته باشید برای تعیین رنگ می توانستیم از نام رنگ، کد rgb و کد hex استفاده کنیم. خب در CSS3 با یک ویرایش از کد rgb و حالت جدید hsl همراه هستیم.

Rgba: در قسمتی در آموزش گام به گام CSS با مبحث opacity همراه بودیم، در آنجا بحث کردیم که می توان همراه با تعیین رنگ، غلظت المنت مورد نظر را تعیین کرد. این حالت با خاصیت RGBA مقدار دهی می شود. همانطور که می دانید R نشانه رنگ قرمز، G نشانه رنگ سبز، B نشانه رنگ آبی و a نشانه غلظت رنگ است. خب به بحث اصلی برگردیم.

مقادیر rba می تواند بین 0 تا 255 باشد و غلظت یک المنت می تواند از بین 0.1 تا 1 باشد.

    body
        {
           background-color: rgba(255, 130, 200, 0.5);
        }

HSL: حالت جدید رنگ دهی به المنت ها HSL می باشد که مخفف کلمات hue , Saturation , Lightness است. مقدار دهی این خاصیت کمی پیچیده است. خب عضو اولیه این حالت hue است، این واحد مقدار دهی براساس درجه است. که از 0 تا 360 درجه مقداردهی می شود. مقدار 0 یا 360 درجه نشانه رنگ قرمز، 120 نشانه رنگ سبز، 240 هم نشانه رنگ آبی است.

عضو دوم نشانه درصد نزدیکی رنگ به حالت سیاه و سفید و یا رنگ اصلی خود است. این مقدار با درصد اندازه گیری می شود.

عضو سوم نشانه مقدار روشنایی رنگ است. مقدار 0 سیاه و مقدار 100 سفید است. این مقدار با درصد اندازه گیری می شود.

body
        {
            background-color: hsl(180, 100%, 20%);
        }

HSLA: همان حالت قبلی است البته با یک عضو جدید، این عضو همان opacity یا غلظت رنگ است. این مقدار هم بین 0.1 تا 1 می باشد.

body
        {
            background-color: hsl(180, 100%, 20%, 0.5);
        }  

سایه ها در متون: سایه به اجزای صفحه ما زیبایی خاصی می بخشند. خیلی راحت می توان برای المنت های صفحه وب سایه تعیین کرد. برای تعیین سایه می توانید گزینه های مختلفی را فعال کنید، اما تعیین عرض و ارتفاع سایه در اولویت اول و میزان شفافیت و رنگ سایه در اولویت دوم قرار دارد. خب برای تعیین سایه می توانید از خاصیت text-shadow استفاده کنید. دو مقدار اولیه این خاصیت برای تعیین عرض و ارتفاع مقداردهی می شود.

    h1
        {
            text-align: center;
            text-shadow: 2px 2px;
        }

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

    h1
        {
            text-align: center;
            text-shadow: 2px 2px 4px #aaeeaa;
        }

چند سایه: می توانید بجای تعیین یک سایه، چند سایه را برای یک المنت در نظر بگیرید. برای این کار کافی است بین سایه ها از کاما استفاده کنید. به مثال زیر توجه کنید:

h1 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

سایه برای جعبه ها و عکس ها: علاوه بر متون بلاک ها و تصاویر نیز می توانند سایه داشته باشند، برای اینکار بجای text-shadow باید از box-shadowاستفاده بکنید. به مثال زیر توجه نمایید:

div {
    box-shadow: 10px 10px 5px grey;
}

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

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#دوره_مقدماتی_css3 #آموزش_css3 #‌آشنایی_با_کاربردهای_css3 #طراحی_وب_با_css3
عنوان
1 آموزش گام به گام CSS3 بخش اول: مقدمات، مرورگر ها و گوشه های گرد رایگان
2 آموزش گام به گام CSS3 بخش دوم: حاشیه های تصویری و پشت زمینه رایگان
3 آموزش گام به گام CSS3 بخش سوم: رنگ ها و سایه ها رایگان
زمان و قیمت کل 0″ 0
1 نظر
vahidkazem

تشکر

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....