E-Boy
کاربر فعال انجمن طراحی وب سایت
سلام دوستان .
امروز یه وقت آزاد پیدا کردم و تصمیم گرفتم یه آموزش بنویسم .
قراره نحوه ایجاد عناصر شفاف رو آموزش بدم .
برای ایجاد این افکت در هر نوع مرورگر باید از چند نوع کد استفاده نماییم تا این خاصیت تقریبا در تمام مروگر ها نمایش داده شود .
برای ایجاد این خاصیت در مرورگر های معروف به جز اینترنت اکسپلورر از کد زیر استفاده می کنیم :
این کد در ابتدا برای مرورگر های نسل موزیلا ایجاد شد اما در حال حاضر توسط طیف بزرگی از مروگر ها پشتیبانی می شود و تقریبا در 99 درصد مروگر های معروف به جز اینترنت اکسپلورر باعث ایجاد عناصر شفاف می شود .
در اینجا x می تواند از 0.0 تا 1.0 تغییر کند و اعدادی مانند 0.3 را بپذیرد .
در صورتی که x برابر با 0.3 باشد یعنی این که عنصر مورد نظر ما داری 30 درصد ماتی و 70 درصد شفافیت می باشد :
برای ایجاد این افکت در مرورگر اینترنت اکسلپورر باید از کد اختصاصی این مرورگر که به صورت زیر می باشد استفاده نمایید :
این کد باعث ایجاد شفافیت در مرورگر های اینترنت اکسپلورر ورژن 6.0 به بالا می شود .
در این جا x می تواند مقادیری از 0 تا 100 را در خود جای دهد و درصورتی که x مثلا برابر با 40 باشد عنصر مورد نظر ما با 40 درصد ماتی و 60 درصد شفافیت نمایش داده می شود :
برای ایجاد این افکت در 99 درصد مرورگر های مرود استفاده کاربران اینترنت باید از این دو کد در طراحی خود در کنار یکدیگر استفاده نمایید :
کد دوم یکی از کد های css ورژن 3.0 می باشد و در حال حاضر یکی از کد های غیر استاندارد به حساب می آید و کد اول هم نیز از کد های غیر استاندارد می باشد ولی استفاده از این دو کد برای زیبا تر شدن وب سایت ها پیشنهاد می شود .
در پست بعدی یک نمونه از قبل ایجاد شده را برای شما قرار می دهم تا بیشتر با این روش آشنا شوید .
سوالی بود در خدمتم .
موفق باشید .
منبع آموزش : http://www.w3schools.com/CSS/css_image_transparency.asp
امروز یه وقت آزاد پیدا کردم و تصمیم گرفتم یه آموزش بنویسم .
قراره نحوه ایجاد عناصر شفاف رو آموزش بدم .
برای ایجاد این افکت در هر نوع مرورگر باید از چند نوع کد استفاده نماییم تا این خاصیت تقریبا در تمام مروگر ها نمایش داده شود .
برای ایجاد این خاصیت در مرورگر های معروف به جز اینترنت اکسپلورر از کد زیر استفاده می کنیم :
کد:
opacity: x;
در اینجا x می تواند از 0.0 تا 1.0 تغییر کند و اعدادی مانند 0.3 را بپذیرد .
در صورتی که x برابر با 0.3 باشد یعنی این که عنصر مورد نظر ما داری 30 درصد ماتی و 70 درصد شفافیت می باشد :
کد:
opacity: 0.3;
کد:
filter: alpha(opacity=x);
در این جا x می تواند مقادیری از 0 تا 100 را در خود جای دهد و درصورتی که x مثلا برابر با 40 باشد عنصر مورد نظر ما با 40 درصد ماتی و 60 درصد شفافیت نمایش داده می شود :
کد:
filter: alpha(opacity=40);
کد:
filter: alpha(opacity=50);
opacity: 0.5;
در پست بعدی یک نمونه از قبل ایجاد شده را برای شما قرار می دهم تا بیشتر با این روش آشنا شوید .
سوالی بود در خدمتم .
موفق باشید .
منبع آموزش : http://www.w3schools.com/CSS/css_image_transparency.asp