السلام عليكــم ورحمـة الله وبركاتــه ،،
كيف لي بعمل طبقة أو div بحيث يكون شفافاً ( شفافية مثلاً مائلة للسواد )
كما في windows 7
تحياتي ,,,
كيف أعمل Layer أو أسود شفاف ...
يمكنك عمل ذلك من خلال استخدام خليفة شفافة من نوع png وقم بتحديد الشفافية المناسبة
قمت بتطبق تلك الفكرة من قبل وتلك النتيجة
حسب ما فهمت أنه لا يمكن عن طريق html
وانما فقط عن طريق التعامل مع الصور أي بالمختصر بالفوتوشوب
وصور بامتداد Png أو Gif
هل هذا صحيح !! ... أرجو تصحيحي ان كنت مخطأً ...
تحياتي ,,,
تم تعديل هذه المشاركة بواسطة homano في 3 نوفمبر 2009 في 03:31
لا ليس صحيح
يمكنك عمل لير بأي لون ثم قم بإختيار الشفافيه التي تريد
مثال :
<style>
#this_div{
width: 200px;
height: 200px;
background-color: #6374AB;
opacity: .5;/*لكل المتصفحات إلا المشلول منها */
filter: alpha(opacity=50);/*للمشلول ie7*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/*للمشلول ie8*/
}
</style>
<div id="this_div"> bastr3 </div>CMS Sfhati , Website Generator
نظام إدارة المحتوى صفحتي ... جربه الآن
أحسنت بارك الله فيك أخي bastr3
تحياتي ,,,
أعتذر ولكن المثال لا يعمل على كل المتصفحات لذلك لا أعتبرة مثالا جيدا :)
CMS Sfhati , Website Generator
نظام إدارة المحتوى صفحتي ... جربه الآن
تحياتي لك أخي bastr3 ,,,
فعلاً هو لايعمل على كل المتصفحات .
homano كتب:تحياتي لك أخي bastr3 ,,,فعلاً هو لايعمل على كل المتصفحات .
أعتقد أنه يعمل على كل المتصفحات الرئيسية ....
لكن من بعد إذن أستاذنا bastr3 , جرب الكود التالي :
<style>
#this_div{
width: 200px;
height: 200px;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
</style>
<div id="this_div"> bastr3 </div></span>دمتم بوافر الصحة والعافية
تم تعديل هذه المشاركة بواسطة karakas في 8 نوفمبر 2009 في 10:30
مرحباً AROON ,,,
جربت الكود التالي الذي اقترحته على مثالي المرفق:
filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;
لم يعمل على الفايرفوكس .
فالمشكلة في موافقية أخرى وليست في موافقية الشفافية على ما أظن.
تحياتي ,,,
الآن ان شاء الله يعمل على أغلب المتصفحات
تحياتي للجميع ,,,
<html>
<head>
<title>Pop-up Link with Description</title>
<style type="text/css">
.transparent {
filter:alpha(opacity=90);
background-color:green;
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
display:none;
width:170;
height:100;
position:absolute;
color: white;
border: 1 green solid;
}
</style>
<script>
// this function shows the pop-up when user moves the mouse over the link
function Show(event)
{
x = event.clientX + document.body.scrollLeft; // get the mouse left position
y = event.clientY + document.body.scrollTop + 35; // get the mouse top position
Popup.style.display="block"; // display the pop-up
Popup.style.left = x; // set the pop-up's left
Popup.style.top = y; // set the pop-up's top
}
// this function hides the pop-up when user moves the mouse out of the link
function Hide()
{
Popup.style.display="none"; // hide the pop-up
}
</script>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<a href="" onMouseOut="Hide()" onMouseOver="Show(event)" onMouseMove="Show(event)">Move the mouse over here</a><br>
<br>
Move your move over the link above<br>
and the pop-up appears. And the pop-up<br>
follows your mouse as long as your mouse<br>
is still over the link.
<div id="Popup" class="transparent">
<div style="background-color: #003366"><b>Title goes here</b></div>
<div></b>Description goes here</div>
</div>
</body>
</html>تم تعديل هذه المشاركة بواسطة homano في 10 نوفمبر 2009 في 00:57