إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    طريقة تركيب الكتابة على صورة باستخدام CSS

    في هذا المقال ستتعلم كيف تقوم بتركيب نص على الصورة باستخدام HTML و CSS فقط.


    إرشادات

    الطريقة التي سنعتمدها لنفعل ذلك هي التالية:

    • وضع نص عشوائي في وسم <p>.
    • وضع الصورة التي نريد دمجها مع نص الوسم <p> كخلفية له بواسطة خصائص CSS.
    • وضع بلوك غير مرئي أمام الوسم <p> بواسطة خصائص CSS حتى نجعل النص الموجود على الصورة لا يمكن لمسه و بالتالي تصبح الصورة و الكتابة كأنها فعلاً صورة واحد.
    • وضع الوسم <p> بداخل وسم <section> و جعل الصورة تظهر في الوسط نسبةً له. هذا الأمر سيجعلنا قادرين على إضافة أي عنصر نريد فوق الصورة و التحكم بأماكنهم بشكل مرن للغاية و ستلاحظ أننا سنضيف عنوان فوق الصورة في النهاية.
    • سننفذ التنفيذ على أربع مراحل.

    المرحلة الأولى

    هنا قمنا بإضافة النص الذي سنقوم بتركيبه لاحقاً مع الصورة و لاحظ أن عدد كلماته كبير جداً لكي نضمن أن يغطي كامل الصورة. و بالطبع لا مشكلة إن كان النصر أكبر مما نحتاج, المهم أن لا يكون أقل.

    الكود

    <section>
        <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit mi, suscipit sed sem a, pretium sollicitudin purus. Quisque malesuada aliquam pharetra. Nunc magna est, mollis in iaculis vel, venenatis id nisl. Aenean dapibus est vitae tempor fermentum. Praesent venenatis nulla massa, sed imperdiet dui feugiat ut. Duis vel bibendum augue. Donec pellentesque vel quam in consequat.
           Suspendisse et diam quis leo pharetra fringilla. Quisque tincidunt felis commodo risus tincidunt, et luctus magna consequat. Nulla eu posuere odio. In vestibulum posuere quam, nec ultrices felis convallis id. Vivamus at tempor ligula. Curabitur elementum sit amet diam sit amet consequat. Sed id porttitor lectus. Nullam pretium tellus elit, non mattis erat interdum et. In non purus vitae felis maximus rhoncus. Proin semper mollis dui at pellentesque. Aliquam finibus iaculis odio, ut fringilla ex. Vivamus at pretium mauris, ac porta turpis. Nullam vitae mauris quis orci facilisis pellentesque.
           Nam vitae erat ut leo accumsan hendrerit eu ac lectus. Donec lobortis vehicula ante at consequat. Nam non arcu varius, feugiat nibh a, vehicula nunc. Ut faucibus viverra orci, in posuere lectus maximus sed. Duis lacinia mi nec arcu vehicula volutpat. Duis placerat purus augue, nec tempor diam egestas ut. Duis ultrices, sapien mattis commodo luctus, nisi est sagittis eros, eget tempor nisl sapien mollis massa. Nam ac ipsum semper, interdum nunc eu, accumsan augue. Nulla vestibulum mi urna, id malesuada ex varius in. Curabitur velit ex, posuere at orci sed, euismod cursus urna. Nulla facilisi. Aliquam eget leo ut felis auctor fringilla eget ac arcu. Proin maximus neque eget nibh placerat, sed elementum nisi tempor. Aenean semper mauris id purus auctor semper. Maecenas fringilla, enim ullamcorper tempor auctor, metus diam vestibulum neque, in lacinia arcu nulla at libero. Cras lectus velit, luctus at augue non, bibendum ornare nulla.
           Nulla lacus metus, laoreet nec porttitor at, malesuada eget arcu. Proin efficitur ullamcorper ante a bibendum. Suspendisse dictum gravida rutrum. Mauris auctor orci id pharetra aliquam. Nam sed velit dignissim, porta metus vel, pulvinar odio. Sed id risus non arcu vulputate semper. Fusce ultricies commodo justo congue dignissim. Sed lacinia porttitor dolor, ut lobortis justo finibus ac. Praesent ac ipsum vel metus posuere mattis. Maecenas ac ex velit.
           Suspendisse potenti. Fusce vulputate ac est a eleifend. Morbi ultrices turpis ut mi lacinia mollis. Donec consequat ipsum eu dui tincidunt rutrum. Mauris ut lacinia magna. Praesent tempor ipsum at tristique eleifend. Aliquam nibh nulla, malesuada nec hendrerit quis, pretium eget nisi. Duis fringilla at ipsum in pulvinar. Suspendisse potenti. Donec ullamcorper leo vitae consectetur sollicitudin. Praesent id urna eu ligula finibus placerat et sed dui. Maecenas consectetur, eros vitae dignissim semper, velit tortor consectetur nisl, et eleifend dui lectus et diam. Fusce interdum dapibus cursus. Integer at metus varius, fringilla risus sit amet, laoreet risus. Vivamus consequat leo sed finibus vulputate.
           In hac habitasse platea dictumst. Nam urna ex, malesuada in metus sed, posuere venenatis mi. Duis at eros suscipit, gravida eros nec, aliquet turpis. Aliquam ac odio aliquet, feugiat lectus scelerisque, tempor urna. In fermentum justo quis ante fermentum, non fermentum magna volutpat. Aliquam imperdiet nisl nec condimentum tempor. Sed pretium ultricies est at volutpat. Mauris in venenatis purus. Suspendisse hendrerit tellus non metus aliquam bibendum. Aenean luctus lorem at tincidunt placerat. Morbi lacinia pretium enim eu commodo. Curabitur aliquet mi felis, in efficitur libero tristique id.
           Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi euismod auctor orci, vitae porttitor ligula sodales vel. Pellentesque scelerisque sem a facilisis lobortis. Mauris convallis ornare justo, nec ornare eros mollis vitae. Nullam ornare dolor turpis, ac condimentum ante rutrum nec. Nullam sit amet hendrerit magna, et hendrerit felis. Pellentesque tristique faucibus felis, in efficitur massa gravida eu. Praesent et lectus justo. Aenean malesuada tincidunt nulla, et tristique enim pulvinar eget. Aliquam erat volutpat. Quisque porttitor ipsum ut libero commodo, ac suscipit tellus convallis. Morbi orci tortor, pretium finibus neque eget, hendrerit viverra nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nunc purus, tincidunt at purus eu, maximus commodo tortor.
           Duis venenatis, urna a porta bibendum, mauris dolor sollicitudin neque, et aliquam arcu urna sit amet mauris. Maecenas imperdiet lorem tempor leo lacinia condimentum. Morbi dignissim turpis lacus, vel tempus lorem gravida eget. Mauris sollicitudin mattis lacus at interdum. In a lacus dolor. Duis ultrices libero at quam cursus, nec tempor massa sagittis. Fusce efficitur ultrices consequat. Nam a lacus ut ipsum viverra fermentum vel sit amet libero. Duis ullamcorper dui odio, ut pretium augue congue eget. Donec molestie dui in erat sagittis bibendum. Donec ut elit risus.
           Vivamus laoreet felis diam, et tristique sapien gravida id. Aliquam congue vestibulum pharetra. Pellentesque non ultrices sapien. Maecenas sed lorem urna. Aliquam non facilisis dolor. Nullam pharetra auctor ipsum. Ut pellentesque ipsum ac pulvinar pulvinar. Nam nec ante dapibus, pellentesque mi ut, luctus tellus. Nullam tristique eget nunc vel aliquam. Ut nec purus eros.
           Aliquam varius dolor vel orci ultrices vestibulum. Quisque mauris nisl, hendrerit ut arcu lacinia, ultrices viverra augue. Pellentesque facilisis condimentum justo ut porttitor. Integer placerat, odio laoreet porta tempus, nisl nisi blandit augue, nec pharetra quam orci ac justo. Cras a dignissim nibh. Cras eu pharetra lorem, sit amet volutpat nulla. Sed vitae scelerisque justo. In vulputate eros sed volutpat maximus. Integer accumsan, tellus ut luctus vehicula, justo ante sodales enim, nec lacinia urna quam eu ante. Integer eleifend nulla vel felis ullamcorper, id iaculis magna lacinia.
           Etiam eu est non eros iaculis interdum id et elit. Maecenas ut nibh eu ligula condimentum pretium. Pellentesque auctor dolor justo, et pretium arcu malesuada sit amet. Curabitur augue nunc, fermentum in dictum a, consequat eu purus. Nullam faucibus risus et sagittis laoreet. Vivamus et auctor metus, et rutrum leo. Maecenas et varius est. Pellentesque imperdiet dictum odio feugiat ullamcorper. Sed molestie leo a purus pretium, sed aliquet felis sodales. Quisque sollicitudin arcu eu semper tincidunt. In ultrices ultrices justo, nec aliquet eros lobortis at. Nulla vestibulum mauris ullamcorper, pellentesque lacus nec, congue diam. Duis id posuere. 
        </p>
    </section>
        

    سنحصل على النتيجة التالية عند التشغيل.

    تجربة الكود


    المرحلة الثانية

    هنا قمنا بإضافة الصورة كخلفية للنص و جعلنا محتوى الصفحة يظهر في وسطها.

    الكود

    * {                          /* النجمة تعني أن الخصائص التالية سيتم تطبيقها على جميع عناصر الصفحة */
        margin: 0;               /* لإزالة الفراغ الخارجي الإفتراضي التي يضيفها المتصفح للعناصر بشكل تلقائي */
        padding: 0;              /* لإزالة الفراغ الداخلي الإفتراضي التي يضيفها المتصفح للعناصر بشكل تلقائي */
        box-sizing: border-box;  /* لجعل الفراغ الخارجي و حدود العناصر يتم إحتسابها ضمن المساحة التي نحددها للعناصر */
    }
    
    html {
      height: 100%;  /* body هنا قمنا بتحديد أن محتوى الصفحة سيظهر عليها بالكامل و هذا الأمر مهم من أجل العنصر */
    }
    
    body {
        min-height: 100%;         /* هنا حددنا أن محتوى الصفحة سيظهر على الأقل على كل محتوى الصفحة عمودياً */
        display: flex;            /* flex هنا قمنا بتحديد أن أول شيء نضعه في الصفحة سيتم ترتيبه بأسلوب و خصائص */
        justify-content: center;  /* هنا حددنا أن أول عنصر يضاف في الصفحة سيظهر في وسطها أفقياً */
        align-items: center;      /* هنا حددنا أن أول عنصر يضاف في الصفحة سيظهر في وسطها عمودياً */
        background-color: #000;   /* هنا قمنا بجعل لون خلفية الصفحة أسود */
    }
    
    section {
        height: 400px;       /* هنا قمنا بتحديد أن طول الحاوية التي سنضع فيها الصورة هو 400 بكسل */
        position: relative;  /* أضفنا هذه الخاصية لكي نتمكن من تحديد مكان الصورة التي نضعها بداخله نسبةً لها */
        overflow: hidden;    /* أضفنا هذه الخاصية لإخفاء أي جزء زائد موضوع داخل الوسم حتى لا يظهر خارج حدوده */
    }
    
    p {
        height: 100%;                                   /* الموضوعة فيها section هنا قمنا بتحديد أن طوله 100% لكي يتم عرض الصورة نسبةً لطول الحاوية */
        font-size: 0.9em;                               /* هنا قمنا بتحديد حجم النص الذي سيظهر على الصورة */
        letter-spacing: -0.05em;                        /* هنا قمنا بجعل المسافة بين أحرف كلمات النص أصغر بحيث تظهر الأحرف متلاصقة أفقياً */
        line-height: 0.8em;                             /* هنا قمنا بتحديد المسافة بين أسطر النص بحيث تظهر الأسطر كأنها متلاصقة عمودياً */
        font-family: "Segoe UI", sans-serif;            /* هنا قمنا بتحديد نوع خط النص الذي سيظهر فوق الصورة */
        background: url('/posts/199/scott-adkins.jpg'); /* هنا قمنا بتحديد مسار الصورة التي ستظهر كخلفية للنص */
        background-position: center;                    /* هنا قمنا بجعل الخلفية تظهر في الوسط نسبةً للنص */
        background-size: cover;                         /* هنا قمنا بجعل حجم الصورة يملئ كل المساحة المتاحة */
        background-repeat: no-repeat;                   /* هنا قمنا بجعل الصورة لا تتكرر و هكذا نضمن أنه لن يتم عرضها أكثر من مرة */
    }
        

    سنحصل على النتيجة التالية عند التشغيل.

    تجربة الكود


    ملاحظة

    إلى هنا نكون قد عرضنا الصورة و النص يظهر فوقها و لكن هناك مشكل في هذا التصميم نريدك أن تلاحظها و هي أن النص الذي على الصورة ليس مدموج معها بعد و يمكن تحديده و نسخه أيضاً و هذا شيء لا نريده.


    المرحلة الثالثة

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

    الكود

    p {
        height: 100%;
        font-size: 0.9em;
        letter-spacing: -0.05em;
        line-height: 0.8em;
        font-family: "Segoe UI", sans-serif;
        background: url('/posts/199/scott-adkins.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-clip: text;          /* أضفنا هذه الخاصية لدمج الخلفية مع النص و إظهار النص فقط */
        -webkit-background-clip: text;  /* أضفنا هذه الخاصية لأجل باقي المتصفحات التي لا تعرف الخاصية السابقة */
        color: transparent;             /* أضفنا هذه الخاصية لجعل لون النص شفاف و هذا ضروري للدمج */
    }
    
    p::after {
        content:"";          /* p هنا قمنا بإضافة وسم فارغ في آخر الوسم */ 
        display: block;      /* هنا قمنا بتحديد أنه سيتم عرضه كبلوك */
        height: 100%;        /* هنا جعلنا طوله 100% لكي يظهر بطول الصورة */
        width: 100%;         /* هنا جعلنا عرضه 100% لكي يظهر بعرض الصورة */
        position: absolute;  /* أضفنا له هذه الخاصية لكي نستطيع تحديد مكانه */
        top: 0;              /* هنا قمنا بجعله يظهر في الأعلى */
        left: 0;             /* هنا قمنا بجعله يظهر في الناحية اليسرى */
    }
        

    سنحصل على النتيجة التالية عند التشغيل.

    تجربة الكود


    معلومة

    الخاصية color: transparent; يمكنك كتابتها هكذا color: rgba(0,0,0,0); و بالتالي إن أردت إظهار لون الأحرف أقل سطوعاً يمكنك التلاعب بالرقم الأخير و إعطائه أي قيمة بين 0 و 1. يمكنك على سبيل المثال أن تضعها هكذا: color: rgba(0,0,0,0.4);


    المرحلة الرابع

    هذه خطوة إضافية قمنا فيها بإضافة عنوان فوق الصورة.

    الكود

    <style>
    <!-- خصائص الوسم الجديد -->
    h2 {
       color: whitesmoke;    
       position: absolute;
       bottom: 20px;
       right: 40px;
       font-size: 2em;
       font-family: "Segoe UI", sans-serif;
    }
    </style>
    
    <section>
        <!-- هذا هو الوسم الذي أضفناه -->
        <h2>Scott Adkins</h2>
    </section>
        

    سنحصل على النتيجة التالية عند التشغيل.

    تجربة الكود

    يتضمن: CSS , HTML

    آخر تحديث: 26-4-2022

    الكاتب

    محمد هرموش

    مؤسس و مطور موقع هرمش. مهتم بنشر كل ما أعرفه في مجال البرمجة و الأنظمة و الشبكات.

    موقعي: harmash.com

    تعليقات

    لا يوجد أي تعليق بعد

    أضف تعليق

    يجب تسجيل الدخول حتى تتمكن من إضافة تعليق أو رد.
    إعلان
    دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
    دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
    تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
    دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
    دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
    دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن
      إعلان

      Eqla3Tech.com

      شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

      لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات

      تقييم المقال

      لم تقم بتقييم المقال بعد!

      الدورات

      أدوات مساعدة

      الأقسام

      دورات
      مقالات أسئلة مشاريع كتب