استفسار لمشكلة opacity

#11 يونيو 2013 في 02:05 صاحب الموضوع

شباب انا قبل فترة كبيرة كان عندي استفسار بخصوص هذا السكربت و الحمدالله تعلمته و انا به جيد الأن

لكن عندي مشكلة اولا المشكلة لا تضهر عندما يكون النصر قصيرا ...

شوفو الكود

<style>

 #global{

   height: 300px;

   margin: 0 auto;

   width: 300px;

 }

  #shadow_div{

    background-color: #333333;

    border-radius: 10px;

    height: 300px;

    opacity: 0.5;

    position: relative;

    width: 300px;

}

 #content_div{

    background-color: #FFFFFF;

    border-radius: 5px;

    height: 280px;

    left: 10px;

    position: relative;

    top: -290px;

    width: 280px;

 }

 </style>





<div id="global">

   <div id='shadow_div'></div>

   <div id="content_div">

HERE Write Your content
   

   </div>

 </div>

شوفو لما اقوم بتعيين العمل لا مشاكل مع هذا لكن عندما اعمل اسطر كثيرة مثلا break كثيرة الكلام يطلع من المربع و الي اريده الكلام يبقى داخل المربع ... شوفو المثال ديي و الرجاء تعيينه لفهم مشكلتي ...

<style>

 #global{

   height: 300px;

   margin: 0 auto;

   width: 300px;

 }

  #shadow_div{

    background-color: #333333;

    border-radius: 10px;

    height: 300px;

    opacity: 0.5;

    position: relative;

    width: 300px;

}

 #content_div{

    background-color: #FFFFFF;

    border-radius: 5px;

    height: 280px;

    left: 10px;

    position: relative;

    top: -290px;

    width: 280px;

 }

 </style>





<div id="global">

   <div id='shadow_div'></div>

   <div id="content_div">
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
   

   </div>

 </div>

يعني عندما اكتب كتابة كثيرة البريك BR اي break الكلام يطلع من تضليل الأسود و انا بدي يكون داخل التضليل مهما حصل ...

تم تعديل هذه المشاركة بواسطة هالي الدهوكي في 1 يونيو 2013 في 02:06

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#21 يونيو 2013 في 02:50

السلام عليكم ..

المشكلة انك تحدد الــ Width و الـــheight للــ DIV , اتركه ينمو حسب النص بداخله :

<style>

  #shadow_div{
    background-color: #333333;
    border-radius: 10px;
    opacity: 0.5;

}

 #content_div{
    background-color: #0FFFFF;
    border-radius: 5px;

 }

 </style>

لا إله إلا الله ... محمد رسول الله

لو كانت مشاركتي مفيدة و تريد تشجيعي على المزيد من العطاء , فضلا قم بتقييم المشاركة

المعرًف القديم : houssam11350_11350

من مواضيعي : ArabGenCode : مولد كود و إجراءات مخزنة و واجهات لجداول سيكوال سيرفر

#31 يونيو 2013 في 04:38

اخي العزيز لا زالت المشكلة لم يتم حلها

ممكن تنسخ الكود الثاني الذي اعطيته لك و تعدل به لو سمحت لانه انا عم اضع لل height امية ب امية 100% لكنني لا اريده هكذا و عندما اضعه auto لا يعمل . الرجاء اخي قم برد موضوح للمشكلة و شكرا

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#41 يونيو 2013 في 11:00

لماذا كل هذا التعقيد ! يُمكن إضافة نفس التاثير الذي قمت به بكود أقصر وبطريقة أفضل يوجد لديك حلين : الأول إستخدام إطار والثاني استخدام الظل (افضل استخدام الإطار) :

<style>
    #global
    {
        height: 300px;
        margin: 0 auto;
        width: 300px;
    }

    #content_div
{
        border-radius: 10px;
        padding: 5px;
        border: rgba(50, 50, 50, 0.5) 8px solid;

    }

</style>

<div id="global">
    <div id="content_div">
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
        HERE Write Your content <br> 
    </div>
</div>

هل هذا ما تبحث عنه ؟

تم تعديل هذه المشاركة بواسطة Abd Allatif في 1 يونيو 2013 في 11:01

#51 يونيو 2013 في 13:50

السلام عليكم ..

لا يوجد طريقة محددة لإنجاز تصميم معين , فكل شخص يمكنه إنجاز التصميم المطلوب بطريقة مختلفة .
أنا وضعت Div أساسي و داخله Div للخلفية و داخل الأخير يوجد Div ثالث للمحتويات .

ارجو أن يكون هذا هو المطلوب :

<style>

 #global{
  
   margin: 0 auto;
   width: 300px;
   overflow: auto;
   height:auto;
 }

  #shadow_div{
    background-color: #333333;
    border-radius: 10px;
    opacity: 0.5;
    width: 300px;
	height:auto;
	overflow: auto;
	
}

 #content_div{
    
	background-color: #FFFFFF;
    border-radius: 5px;
	position: relative;
    margin:10px 10px 10px 10px; 
	width:280px;
	height:auto;
	overflow:auto;
	

 }

 </style>


<div id="global">
<div id='shadow_div'>
<div id="content_div">
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 

</div>
</div>
</div>

لا إله إلا الله ... محمد رسول الله

لو كانت مشاركتي مفيدة و تريد تشجيعي على المزيد من العطاء , فضلا قم بتقييم المشاركة

المعرًف القديم : houssam11350_11350

من مواضيعي : ArabGenCode : مولد كود و إجراءات مخزنة و واجهات لجداول سيكوال سيرفر

#61 يونيو 2013 في 16:29

اخي الفكرة هذه ناجحة لكن هناك مشكلة ...

المشكلة هي انه كل الطبقات يطبق معاها الــ opacity

انا الي بدي اياه الحدود السوداء تصير opacity

اما كل ما اكتبه لا يصير مضلل يعني بدي الكتابة تضهر بشكل واضح و بدون تضليل الي اريده فقط هو الديف الخارجي يصير تضليل يعني البوردر border الاسود فقط الي اريده يطبق معاه opacity

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#71 يونيو 2013 في 16:52

هالي الدهوكي كتب:
اخي الفكرة هذه ناجحة لكن هناك مشكلة ...

ردي أم رد اخي حسام ؟

اقتباس
المشكلة هي انه كل الطبقات يطبق معاها الــ opacity
انا الي بدي اياه الحدود السوداء تصير opacity

أرجو التوضيح أكثر :)

#81 يونيو 2013 في 17:32

لماذا تحاول صنع shadow يدوياً بينما box-shadow موجودة؟

جرب هذا الكود اظن أنه يحقق ما تريده:

<style>

 #content_div{

    background-color: #FFFFFF;

    border-radius: 5px;

    height: auto;

    margin: 0 auto;

    width: 300px;

    padding: 20px;

    text-align: center;

    -webkit-box-shadow: 0 5px 6px #999, inset 0 5px 6px #999;
    -moz-box-shadow: 0 5px 6px #999, inset 0 5px 6px #999;
    box-shadow: 0 5px 6px #999, inset 0 5px 6px #999;

 }

 </style>


   <div id="content_div">
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
   

   </div>

Everything will be fine when we TALK LESS, DO MORE

#91 يونيو 2013 في 17:46

اخي العزيز MoHaMMaD Pro فكرتي تختلف عن شادو shadow انا سؤالي اصلا ليس على شادو انا بدي هذه الطريقة لأطبقها على عملي ...

فكرة الأخ حسام جميلة لكن المشكلة في المحتوى يعني الكتابات ايضا يطبق عليها opacity يعني المحتوى ايضا بضلل انا الي اريده فقط البوردر الخارجي out border just

يعني فقط البوردر الخارجي اريده مضلل و الداخلي الي فيه كتابات و صور يعني المحتوى لا اريد ان يطبق به التضليل اي opacity

و اشكر الأخ عبدالطيف على الرد الجميل منه لكن فكرة الأخ حسام ناجحة لكن المشكلة هي كما قلت اريد فقط البوردر border الخارجي يكون opacity يعني طبقة السوداء فقط و ليس كل الطبقات

و اعتذر اخي عبدالطيف لانني كنت غير منتبها لردك :)

تم تعديل هذه المشاركة بواسطة هالي الدهوكي في 1 يونيو 2013 في 17:54

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#101 يونيو 2013 في 18:28

حسناً, لتتخلص من وراثة الـ opacity يجب عليك التحويل إلى استخدام rgba في لون الخلفية.

جرب هذه:

<style>

 #global{
  
   margin: 0 auto;
   width: 300px;
   overflow: auto;
   height:auto;
   opacity: 1;
 }

  #shadow_div{
    background-color: rgba(51, 51, 51, 0.5);
    border-radius: 10px;
    width: 300px;
  height:auto;
  overflow: auto;
  
}

 #content_div{
    
  background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
  position: relative;
    margin:10px 10px 10px 10px; 
  width:280px;
  height:auto;
  overflow:auto;
  

 }

 </style>


<div id="global">
<div id='shadow_div'>
<div id="content_div">
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 

</div>
</div>
</div>

Everything will be fine when we TALK LESS, DO MORE

#111 يونيو 2013 في 18:35

السلام عليكم ..

يمكن تجريب أيضا ::

<style>
 #test
 {
  
  border : solid 8px rgba(0,0,0,0.1);
  border-radius: 10px;
 }
 </style>

<div id="test"> 
Hello
</div>
<br>

حيث يتم وضع الــ Opacity على الــ Border مباشرة ... في البارمتر الرابع للــ rgba .. يبدو أن الــ Opacity لا تعمل في IE8 .. و كذلك الــ border-radius

لا إله إلا الله ... محمد رسول الله

لو كانت مشاركتي مفيدة و تريد تشجيعي على المزيد من العطاء , فضلا قم بتقييم المشاركة

المعرًف القديم : houssam11350_11350

من مواضيعي : ArabGenCode : مولد كود و إجراءات مخزنة و واجهات لجداول سيكوال سيرفر

#121 يونيو 2013 في 18:41

houssam11350_11350 كتب:
حيث يتم وضع الــ Opacity على الــ Border مباشرة ... في البارمتر الرابع للــ rgba .. يبدو أن الــ Opacity لا تعمل في IE8 .. و كذلك الــ border-radius

بالنسبة للـ opacity يمكن تطبيقها على هذه الاصدارات من ie باستخدام الخاصية filter, ولكنها سيئة بعض الشيء

Everything will be fine when we TALK LESS, DO MORE

#131 يونيو 2013 في 19:32

اخي اضن ان لا احد منكم فهم المشكلة ايه شوفو نبدأ بمثال جديد ... انسخوا الكود هذا و عينوو حتى اشرح عليه

<style>

 #global{
  
   margin: 0 auto;
   width: 300px;
   overflow: auto;
   height:auto;
   
 }

  #shadow_div{
    background-color: red;
    border-radius: 10px;
    width: 300px;
  height:auto;
  overflow: auto;
    opacity:1;

}

 #content_div{
    
  background-color: blue;
    border-radius: 5px;
  position: relative;
    margin:10px 10px 10px 10px; 
  width:280px;
  height:auto;
  overflow:auto;

 }

 </style>


<div id="global">
<div id='shadow_div'>
<div id="content_div">
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 

</div>
</div>
</div>

شوفو عدنا لونين لون الأحمر و لون الأزرق صح ولا لاء

طيب انا بعدي اعمل تضليل على لون الأحمر بدون ما يتأثر على لون الأزرق يعني لون الأزرق اي شئ اضع بداخله لا يضلل يبقى فقط لون الأحمر مضلل ...

تم تعديل هذه المشاركة بواسطة هالي الدهوكي في 1 يونيو 2013 في 19:49

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#141 يونيو 2013 في 20:18

السلام عليكم ...

المشكلة في الـــتصميم السابق أننا وضعنا أحد الــ Div هو Parent للثاني و عندنا نطبق Opacity على الأب لا يمكن تغيير قيمها في الأبناء لقيمة أكبر من قيمة الأب :

اقتباس
The maximum opacity an element can have is the opacity of its parent(s). So if the containing element has a lowered opacity, then the text inside cannot be any more opaque than the container.

رابط . (الله أعلم) .

الحل هو الحصول على شكل مشابه مع التخلص من علاقة الاب و الابن ... عن طريق absolute position ...

<style>

 #global{
  
   margin: 0 auto;
   width: 300px;
   overflow: auto;
   height:auto;
   
 }

  #shadow_div{
    background-color: red;
    border-radius: 10px;
	position: absolute;
    width: 300px;
  height:auto;
  overflow: auto;
    opacity:0.3;

}

 #content_div{
    
  background-color: blue;
  border-radius: 5px;
  position: absolute;
  margin:10px 10px 10px 10px; 
  width:280px;
  height:auto;
  overflow:auto;
  opacity:1;
  

 }

 </style>


<div id="global">
<div id='shadow_div'> <br>  <br>  <br> </div>
<div id="content_div">
HERE Write Your content <br> 
HERE Write Your content <br> 

</div>
</div>

المشكلة هي عندما تزيد اسطر الاول يجب زيادة الاسطر في الثاني عن طريق <br> حتى يكون الأول كأنه يحتوي الثاني ..

لا إله إلا الله ... محمد رسول الله

لو كانت مشاركتي مفيدة و تريد تشجيعي على المزيد من العطاء , فضلا قم بتقييم المشاركة

المعرًف القديم : houssam11350_11350

من مواضيعي : ArabGenCode : مولد كود و إجراءات مخزنة و واجهات لجداول سيكوال سيرفر

#151 يونيو 2013 في 20:39

و انا اريد حل لهذه المشكلة ...

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#161 يونيو 2013 في 20:41

هل جربت الكود الذي وضعته لك؟ إنه بالضبط كما تريده!!

الـ opacity مفعل فقط على الـ shadow-div, يمكنك التحكم بقيمة الـ opacity من خلال البارامتر الرابع في rgba وهي في الكود الذي وضعته لك مضبوطة إلى 0.5

Everything will be fine when we TALK LESS, DO MORE

#171 يونيو 2013 في 21:31

MoHaMMaD Pro كتب:

حسناً, لتتخلص من وراثة الـ opacity يجب عليك التحويل إلى استخدام rgba في لون الخلفية.

جرب هذه:

<style>

 #global{
  
   margin: 0 auto;
   width: 300px;
   overflow: auto;
   height:auto;
   opacity: 1;
 }

  #shadow_div{
    background-color: rgba(51, 51, 51, 0.5);
    border-radius: 10px;
    width: 300px;
  height:auto;
  overflow: auto;
  
}

 #content_div{
    
  background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
  position: relative;
    margin:10px 10px 10px 10px; 
  width:280px;
  height:auto;
  overflow:auto;
  

 }

 </style>


<div id="global">
<div id='shadow_div'>
<div id="content_div">
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 

</div>
</div>
</div>

اخي بصراحة لم اجرب هذا الكود و انا الان جربته و نجحت الفكرة و انا كان بدي نفس هذه الطريقة يعني الان تم الحل و المشكلة تم حلها

لكن هل يمكنك ان تقول لي ما الفرق بين RGN و الطريقة الأخرى الذي ادلناها لك ... تحياتي

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#181 يونيو 2013 في 22:27

اقتباس
لكن هل يمكنك ان تقول لي ما الفرق بين RGB و الطريقة الأخرى الذي ادلناها لك

rgba تًوفر قيمة رابعة عند تحديد اللون هي قيمة المحطة alpha (الشفافية) وتتراوح قيمتها بين 0 و 1 يمكنك الرجوع الى الصفحة التالية لمزيد من المعلومات http://www.css3.info/preview/rgba/

#192 يونيو 2013 في 04:00

السلام عليكم

بالنسبة للتحكم في حجم العناصر تلقائياً مع زيادة المحتويات استخدم الخصائص min-width و min-height وطرق العرض كـ inline و inline-block وغيرها على حسب الحاجة .

وبالنسبة لخاصية الـشفافية الـ opacity يتم تطبيقها على العنصر ومحتوياته من صور ونصوص وخلافه , إذا أردت عدم تطبيق الشفافية على المحتويات إستخدم الخلفية الشفافة بإستخدام rgba كما تم شرحه لك في الأعلى إما على العنصر ككل أو تطبيقها على الإطار مباشراً , هذه الطريقة لا تعمل مع متصفحات IE تحت الإصدار التاسع ويمكن إستخدام filter , وكحل أخر إستخدام صور png شفافة بالدرجة التي تريدها بحجم 1px x 1px مع تكرارها كخلفية شفافة , وهناك أيضاً بعض المتصفحات القديمة لا تدعم الشفافية في صور png ولكن توجد بعض التطبيقات لدعمها يمكن متابعة الإطلاع على الرابط التالي .

وهذا مثال على إستخدام الصور الشفافة :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
<style>
*{padding:0;margin:0;}
body{
    text-align:center;
    padding:10px;
    background: url(images/bg.jpg) no-repeat center center fixed;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/bg.jpg',
    sizingMethod='scale');
}
#shadow_div{
    display: inline-block;
    background: url(images/bg_50.png) repeat;
    border-radius: 10px;
    padding: 10px;
}

#content_div{
    background-color: #FFF;
    border-radius: 5px;
    min-width: 100px;
    min-height: 100px;
    padding: 10px;
}
</style>
<body>
    <div id='shadow_div'>
        <div id="content_div">
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
            HERE Write Your content <br>
        </div>
    </div>
</body>
</html>

* ملاحظة: لا تنسى استخدم -o- و -moz- و -webkit- لدعم الإصدارات القديمة للمتصفحات .

- وأيضاً هناك بعض الحلول لدعم إنحناء الإطارت ليعمل على الإصدارات القديمة للمتصفح IE يمكنك الإطلاع على الرابط التالي .

والتالي رابط تنزيل التطبيق السابق متضمناً الصور المستخدمة

opacity.zip

تم تعديل هذه المشاركة بواسطة ahmedsaoud31 في 2 يونيو 2013 في 04:11

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#203 يونيو 2013 في 02:26

اخي العزيز احمد سعود طبعا اشكرك جزيلا للدخول و التعليق على الموضوع :) الفكرة الذي اديتني لها كانت ممتازة فعلا لكن المشكلة هي سرعة العرض

يعني الطريقة الي هي بدون صور افضل لي بصراحة, و الأخ mohamed PRO افادني بهذه الطريقة الذي قدمها لي الطريقة هذه اسرع في العرض و بدون مشاكل تعمل معي ..

و مرة اخرى جزيل الشكر لك يا احمد سعود على تعليقك الجميل :) تحياتي الك ^_^ see you

MoHaMMaD Pro كتب:

<style>

 #global{
  
   margin: 0 auto;
   width: 300px;
   overflow: auto;
   height:auto;
   opacity: 1;
 }

  #shadow_div{
    background-color: rgba(51, 51, 51, 0.5);
    border-radius: 10px;
    width: 300px;
  height:auto;
  overflow: auto;
  
}

 #content_div{
    
  background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
  position: relative;
    margin:10px 10px 10px 10px; 
  width:280px;
  height:auto;
  overflow:auto;
  

 }

 </style>


<div id="global">
<div id='shadow_div'>
<div id="content_div">
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 
HERE Write Your content <br> 

</div>
</div>
</div>

Professional Technology Information

HTML , CSS , PHP , JQuery , Action Script

Photographic Designer & websites Designer : Dinamic Sites & photographic Sites & Flash Sites

IF YOU WANT SEE MY WORKS

VISIT THIS LINK

Prince Designs

#213 يونيو 2013 في 08:11

السلام عليكم

الصورة لا تصل لحجم 1KB , وهذا يعني أن الفارق الزمني لا يكاد يذكر , والطريقة هذه التي وضعتها لدعم نطاق عريض من المتصفحات ولكن إن كان هذا الأمر لا يهمك فبالطبع إستخدام rgba أفضل لأن جميع المتصفحات بأخر إصداراتها تدعمها .

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

استفسار لمشكلة opacity

مواضيع مشابهة