اذهب إلى المحتوى
  • 0

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

Ahmed Ebrahim11

السؤال

السلام عليكم 

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

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

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
توضيح السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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;
}

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

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

 

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

  • 0

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

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

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

Screenshot (132).png

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...