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

و

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

نحوه ی ایجاد منو های شیشه ای بوسیله HTML و CSS

به نام خداوند زیبایی ها

قبلا در انجمن تخصصی فناوری اطلاعات ایران در خصوص نکات بسیار مهم در حوزه طراحی وب مقالاتی با عنوان نکات مهم طراحی وب را مشاهده کرده اید. قطعا می دانید که امروزه توجه به شکل ظاهری و کیفیت طراحی یک وب سایت از نظر گرافیکی و کاربر پسند بودن ، مهمترین فاکتور در کیفیت یک وب سایت محسوب می شود. یکی از مواردی که بیشترین توجه را در یک وب سایت به خود اختصاص می دهد منوهای یک وب سایت می باشد. در این میان طراحی یک منوی بسیار زیبا از اهمیت فراوانی برخوردار می باشد ، منوهای شیشه ای که ما آنها را در اصطلاح فنی طراحی وب به عنوان 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

itpro باشید.

نویسنده: امیرحسین میرزایی

#نحوه_ی_ایجاد__transparent_menu #نحوه_ی_ایجاد_opacity_menu #نحوه_ی_ایجاد_منو_های_شیشه_ای #نحوه_ی_ایجاد_glass_menu
1 نظر
Mohammad24

از شما خیلی ممنونم

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

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