آموزش ایجاد ( طراحی ) منوی شیشه ای با HTML و CSS به زبان ساده

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

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران

در این میان طراحی یک منوی بسیار زیبا از اهمیت فراوانی برخوردار می باشد ، منوهای شیشه ای که ما آنها را در اصطلاح فنی طراحی وب به عنوان Glass Menu یا Opacity Menu یا Transparent Menu می شناسیم یکی از جذاب ترین و زیباترین تکنیک های طراحی منو می باشد که امروز قصد داریم در این آموزش نحوه طراحی و ایجاد یک منوی شیشه ای را به شکلی که در تصویر زیر مشاهده می کنید به شما آموزش بدهیم.

Transparent Menu

همان طور که در شکل بالا نیز مشاهده می کنید، رنگ منو، در اصل مشکی می باشد، که با یکسری تغییرات کوچک به صورت شیشه ای نمایش داده شده است و کاربر میتواند تصویری که زیر منو قرار دارد را مشاهده کند.استفاده از این تکنیک می تواند بر روی مخاطب اثر مثبت بگذارد و سایت را از حالت کسل کنندگی و سادگی در بیاورد.همان طور که در کد زیر مشاهده می کنید، در حالت عادی، ما یک تگ div داریم به نام image، و یک div با نام menu ، کافیست تا در فایل html خود این تگ ها را اضافه کنید.(نام تگ ها سلیقه ای میباشد و هر چیزی که از قوانین نام گذاری المان ها در طراحی سایت پیروی کند ، پشتیبانی می شود).

<div id="image">
        <div id="menu">
            <ul>
                <li><a href="#">صفحه ی اصلی</a></li>
                <li><a href="#">اخبار</a></li>
                <li><a href="#">درباره ی ما</a></li>
                <li><a href="#">تماس با ما</a></li>
            </ul>
        </div>
    </div>

بخش اصلی کار کد هایی می باشد که ما در قست css ایجاد کردیم. برای تگ div که نامش را image گذاشته بودیم کد های زیر را در فایل css مینویسیم.

#image{
    position: relative;
    width: 100%;
    height: 525px;
    background-image: url("/URL/");
}

برای بخش Menu نیز از کد های زیر استفاده می کنیم:

#menu {
    position: relative;
    width: 100%;
    height: 100px;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
}

کد فوق در اصل همان کدی می باشد که برای ایجاد منو شیشه ای به آن نیاز داریم، البته کد مد نظر ما فقط بخش background-color می باشد، مابقی به سلیقه ی طراح و برنامه نویس می باشد. دقت شود که در اینجا دو بار از دستور background-color استفاده شده است، یک بار به صورت کد هگزادسیمال:

background-color: #000000;

دستور کد فوق در واقع یک feedback از کد رنگ مورد نظر تهیه می کند و یک بار هم به صورت rgba تعریف شده است.

background-color: rgba(0, 0, 0, 0.7);

کد بالا باعث می شود که منو به صورت شیشه ای نمایش داده شود. همان طور که مشاهده می کنید، تفاوت این کد با کد خط قبلی در یک تابع به نام rgba می باشد که پارامتر های مختلفی میگیرد، به ترتیب از سمت چپ، مقدار پارامتر اول 0 می باشد، نشان ی میزان استفاده از رنگ قرمز، پارامتر دوم عدد 0 می باشد، نشان میزان اسفاده از رنگ سبز و پارامتر سوم عدد 0 می باشد، نشان میزان استفاده از رنگ آبی. تابع rgba در واقع به معنی سه رنگ اصلی Red Green Blue می باشد، و حرف a که در آخر این تابع وجود دارد.

به معنی آلفا می باشد، که در اصل میزان شفافیت رنگ را مشخص میکند، در اینجا مقدار آلفا 0.7 می باشد، درواقع میزان شفافیت رنگ مشکی که در منو به کار برده ایم نمایش می دهد. که یک عددی بین 0 تا 1 میگیرد که هر چی این عدد به 1 نزدیک تر باشد از میزان شفافیت کم میشود و هر چه به 0 نزدیک باشد به میزان شفافیت آن اضافه می شود ، پس با استفاده از تابع rgba توانستیم براحتی یک منو شیشه ای ایجاد کنیم.

نکته ی بسیار مهم در مورد تابع rgba، پشتیبانی شدن آن توسط مرورگر ها می باشد. در اینجا لیستی از مرورگر هایی که از تابع rgba پشتیبانی می کنند، آورده شده است: مرورگر Internet Explorer ورژن 10 به بعد، مرورگر Firefox ورژن 3 به بعد، مرورگر Chrome تمامی ورژن ها، مرورگر Safari تمامی ورژن ها، مرورگر Opera ورژن 10 به بعد.

شاید بسیاری از شما بپرسید که کد رنگ rgba را به چ طریقی می توان بدست آورد، ، یکی از روش های ساده ای که وجود دارد استفاده از نرم افزار فتو شاپ می باشد ، همان طور که در شکل زیر میبینید با مراجعه به ابزار جعبه رنگ و گپی رنگ مورد نظر (#000000) می توانید کد rgb تولید شده را در سایت استفاده کنید.

RGBACOLOR

توسینسو باشید.


نظرات