• 0

كيفية إضافة طبقة سوداء overlay بشكل شبه منحرف في css + مشكلة في إنزلاق النصوص

السلام عليكم 

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

قمت بارقاق صوره النموذج الاصليه ضمن الصور 

1-المشكله هو نص الفقره قمت بزياده العرض له ولكن عند تصغير حجم الاشه تحدث مشكله حيث تظهر كانها تاكل النص .

2- اللوجو في اليسار اريده ان يظهر بجانب الكتابه

3- ايضا" اللون المائل الذي له شفافيه كيف اقوم به.

تركيبة الـ HTML : 

<section class="phara">
        <div class="container">
            <div class="row ">
                <div class="col-md-12 ml-auto">
                    <h5>
                        Diagoona HTML Template
                    </h5>
                    <p class="aa">
                        Diagoona is provided by TemplateMo website. You are allowed to use this template for your
                        websites.
                        You are NOT allowed to redistribute this template ZIP file for a
                        download purpose on any
                        template
                        collection website.
                    </p>
                    <p class="bb">
                        Diagoona is Bootstrap v4.4.1 layout. This BG is 50% transparent. You can set the background
                        images auto play settings (true or false in line number 33) in templatemo-script.js file in js
                        folder.
                    </p>
                    <button type="button" name="button"> Continue... </button>
                </div>
            </div>
        </div>
    </section>

التنسيقات الخاصة بالعنصر : 

section.phara .container {
    width: auto;
    padding: 0 0px;
    margin: 0 0px;
}

section.phara .container .row {
    margin-left: 72%;
    color: #fff;
}

section.phara .container .row h5 {
    padding-bottom: 40px;
    font-size: 25px;
    line-height: 30px;
    font-weight: 400;
}

section.phara .container .row p.aa {
    font-size: 18px;
    font-weight: 300;
    line-height: 35px;
    padding-bottom: 50px;
    border-bottom: 1px solid #fff;
    width: auto;
}

section.phara .container .row p.bb {
    font-size: 18px;
    font-weight: 300;
    line-height: 35px;
    padding-top: 50px;
    width: auto;
}

section.phara .container .row button {
    background-color: #fff;
    outline-style: none;
    border-radius: 5px;
    border: none;
    width: 110px;
    height: 45px;
    margin-top: 35px;
}

section.phara .container .row button:hover {
    background-color: rgb(50, 204, 255);
    transition: all 1.5s ease;
}

مرفق ملف المشروع : templete 1.zip . 

بعض الصور الموضحة للمشاكل : 

Screenshot (131).pngScreenshot (134).pngScreenshot (133).png

 

 مثال عن الطبقة السوداء المطلوبة :

Screenshot (132).png

 

تمّ تعديل بواسطة Adnane Kadri
توضيح السؤال
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يحدث هذا لأنك تعطي عنصري الفقرتين عرضا أكبر من عرض الشاشة المتبقي : 600 بكسل . و هذا في ملف style.css , لاحظ : 

section.phara .container .row p.aa {
    font-size: 18px;
    font-weight: 300;
    line-height: 35px;
    padding-bottom: 50px;
    border-bottom: 1px solid #fff;
    width: auto; /*هنا*/
}

section.phara .container .row p.bb {
    font-size: 18px;
    font-weight: 300;
    line-height: 35px;
    padding-top: 50px;
    width: auto; /*هنا*/
}

للعنصرين : 

<section class="phara">
        <div class="container">
            <div class="row ">
                <div class="col-md-12 ml-auto">
                    <h5>
                        Diagoona HTML Template
                    </h5>
                    <p class="aa">
                        ...
                    </p>
                    <p class="bb">
                       ...
                    </p>
                    <button type="button" name="button"> Continue... </button>
                </div>
            </div>
        </div>
    </section>

و لإصلاح ذلك لن نحتاج إلا لإسناد قيمتين مناسبتين أكثر أو يفضل عرضا افتراضيا للخاصية width : 

width: auto;

أما عن إضافة الطبقة السوداء فيمكنك إنشاء عنصر بالصف overlay يوضع أسفل عنصر الـ footer : 

<footer>
        <div class="copyright">
            <p>Copyright 2020 Diagoona Co. | Design: TemplateMo</p>

        </div>
</footer>
<div class="overlay"></div>

و ليحمل التنسيقات التالية : 

/* إضافة طبقة سوداء شفافة ثابتة و مربعة ذات طول كامل و نصف عرض*/
.overlay{
    position: fixed;
    height: 100vh;
    width: 57vw;
    background-color: rgba(0,0,0,0.16);
    top: 0px;
    right:0px;
    z-index: -99; /* لضمان بقاء باقي العناصر قابلة للوصول */
}

/* إضافة مثلث جانبي بنفس طول مربع الطبقة السابقة وبنفس درجة الشفافية */
.overlay::before{
    content: '';
    position: absolute;
    top: 0px;
    left: -150px;
    height: 100%;
    border-bottom: 100vh solid rgba(0,0,0,0.16);
    border-left: 150px solid transparent;
}

و لتوضيح منطق العملية لاحظ كيفية تداخل التركيبتين :

-------------    -  
|           |    |\
|  المربع   |  + | \
|           |    | م\
|           |    | ثلث\
-------------    ------

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

حسنا" فهمت شكرا" لك استاذ ولكني اريدها كعرض الفقره الاصليه 

اذا وضعت عرض افتراضي تبقي في عرض بسيط كنت اريدها كما بالصوره هل من طريقه؟

واسف لكثره الاسئله

Screenshot (132).png

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن