آموزش ایجاد عناصر شفاف در صفحات وب

E-Boy

E-Boy

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

منبع آموزش : http://www.w3schools.com/CSS/css_image_transparency.asp
 
E-Boy

E-Boy

کاربر فعال انجمن طراحی وب سایت
سلام خدمت همه دوستان .
در پست قبل گفته بودم که فایل نمونه رو براتون قرار میدم .
فایل نمونه رو به این پست پیوست کردم .
موفق باشید .
 

پیوست ها

  • Transparent Block.zip
    102.2 کیلوبایت · بازدیدها: 90
M

mamadcss

New Member
با تشکر از آموزش جالبتان .لطف کنید آموزش fade شدن تصویر و ظاهر شدن عکس جدید رو هم بذارید البته نمی دونم میشه چنین کاری کرد؟
 
echessdesign

echessdesign

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

محو شدن یک عکس (غیر تدریجی) توسط CSS:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
	a img {

	}
	a:hover img {
  	 opacity: 0.5;                    /* Firefox, Safari(WebKit), Opera */
 	  -ms-filter: "alpha(opacity=50)"; /* IE 8 */
  	 filter: alpha(opacity=50);       /* IE 4-7 */
	}
</style>
</head>

<body>
	<a href="http://www.echessdesign.com">
		<img src="2%20.jpg" alt="" />
	</a>
</body>

</html>

***

توجه داشته باشید که OnMouseOver جزو رویداد های JS هست:
HTML: 
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

****

محو تدریجی یک عکس با استفاده از JS:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 43</title>
<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">
// Opacity and Fade in script.
// Script copyright (C) 2008 http://www.cryer.co.uk/.
// Script is free to use provided this copyright header is included.
function SetOpacity(object,opacityPct)
{
  // IE.
  object.style.filter = 'alpha(opacity=' + opacityPct + ')';
  // Old mozilla and firefox
  object.style.MozOpacity = opacityPct/100;
  // Everything else.
  object.style.opacity = opacityPct/100;
}
function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
  var element=document.getElementById(id);
  var opacity = element.style.opacity * 100;
  var msNow = (new Date()).getTime();
  opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
  if (opacity<0) 
    SetOpacity(element,0)
  else if (opacity>100)
    SetOpacity(element,100)
  else
  {
    SetOpacity(element,opacity);
    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",1);
  }
}
function FadeIn(id)
{
  var element=document.getElementById(id);
  if (element.timer) window.clearTimeout(element.timer); 
  var startMS = (new Date()).getTime();
  element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",0,100)",1);
}
function FadeOut(id)
{
  var element=document.getElementById(id);
  if (element.timer) window.clearTimeout(element.timer); 
  var startMS = (new Date()).getTime();
  element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",100,0)",1);
}
function FadeInImage(foregroundID,newImage,backgroundID)
{
  var foreground=document.getElementById(foregroundID);
  if (backgroundID)
  {
    var background=document.getElementById(backgroundID);
    if (background)
    {
      background.style.backgroundImage = 'url(' + foreground.src + ')';
      background.style.backgroundRepeat = 'no-repeat';
    }
  }
  SetOpacity(foreground,0);
  foreground.src = newImage;
  if (foreground.timer) window.clearTimeout(foreground.timer); 
  var startMS = (new Date()).getTime();
  foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "',1000," + startMS + ",0,100)",10);
}
</script></head>

<body>


			<img style="opacity: 1;" alt="" src="http://www.cryer.co.uk/resources/javascript/emily01.jpg" id="emily2" height="201" width="201"  onmouseout="FadeOut('emily2')" onmouseover="FadeIn('emily2')" />

</body>

</html>
فایل jquery.min.js ضمیمه شده است.
 

پیوست ها

  • jquery.min.zip
    19.3 کیلوبایت · بازدیدها: 8
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا