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

سؤال css

Mohammed Hhhh

السؤال

كيف اقوم بعمل مثل هذا العنصر و توسيطه في منتصف الشاشه انا حاولت عمله عن طريق ال flex و استطعت توسيط الكلمه الكبيره و لكن الكلمه التي في المنتصف لم استطع و ضعها في المنتصف و حاولت و ضعها في ::before

d.png

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

Recommended Posts

  • 0

بإمكانك عمل مثل هذا الشكل باستخدام تقنية الـ Hero Image

بإضافة ابن للعنصر الاساسي واعطائه الخصائص : 

.son{
    position: absolute;
    right: 50%;
    top: 50%;
	transform: translate(50%, -50%);
}

وتعديل ال position للأب ليصبح relative

.father{
  position: relative;
}

فيصبح الحل لمشكلتك يشبه التلي 

1. إذا لم ترد تعدي ملف ال html واستخدمت  الـ after

.big_scroll {
  position: relative;
  font-size: 120px;
  color: #121420;
  text-shadow: -1px 0 rgb(0, 0, 0), 0 1px rgb(0, 0, 0), 1px 0 rgb(0, 0, 0),
    0 -1px rgb(0, 0, 0);
}
.big_scroll::after {
    content: "Scroll Now";
    display: block;
    position: absolute;
    right: 50%;
    top: 50%;
    font-size: large;
    color: white;
    transform: translate(50%, -50%);
}

2. أو بطريقة اخرى

 <section class="container_scroll">
      <h1 class="big_scroll">
        Scroll Now <span id="middle_text">Scroll Now</span>
      </h1>
      <h1 class="scroll"></h1>
    </section>
.big_scroll {
  position: relative;
  font-size: 120px;
  color: #121420;
  text-shadow: -1px 0 rgb(0, 0, 0), 0 1px rgb(0, 0, 0), 1px 0 rgb(0, 0, 0),
    0 -1px rgb(0, 0, 0);
}
.middle_text {
  position: absolute;
  right: 50%;
  top: 50%;
  font-size: large;
  color: white;
  transform: translate(50%, -50%);
}

 

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...