Muhannad Bahurmoz نشر 21 فبراير أرسل تقرير نشر 21 فبراير السلام عليكم ورحمة الله وبركاته, أحاول تطبيق مثل الشكل الذي في الصورة التالية: وهذه النتيجة الذي توصلت إليها: وكما ترون ال border-left يختلف بين الصورتين, كيف يمكنني أن أجعل ال border-left مثل الصورة الأولى باستخدام CSS فقط ؟ علمًا بأن الصورتين لديهم نفس شيفرات HTML, وشكرًا لكم 1 اقتباس
0 Mustafa Suleiman نشر 21 فبراير أرسل تقرير نشر 21 فبراير بشكل بسيط، نقوم بإنشاء عنصر أب كحاوية container ثم بداخله نضع عنصر آخر ليحتوي النص ونضع له إطار من اليسار ثم padding كالتالي: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div class="quote"> <div class="quote_text">"this is important"</div> </div> </body> </html> CSS: .quote{ background-color: rgb(192, 192, 192); padding: 10px; } .quote_text{ border-left: 5px solid purple; padding: 10px; } 1 اقتباس
0 ياسر مسكين نشر 21 فبراير أرسل تقرير نشر 21 فبراير هناك عدة طرق لتحقيق تلك النتيجة باستخدام CSS مثلا هنا قمت باستخدام الخاصية `::before` وتكون بهذا الشكل: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Border Left and Padding Example</title> <link rel="stylesheet" href="styles.css"> <!-- ربط ملف الـ CSS --> </head> <body> <div class="container"> <div class="content"> <p>This is a text inside the container.</p> </div> </div> </body> </html> وهذا ملف ال CSS (styles.css): .container { padding: 20px; /* تعيين التباعد للعنصر الأب */ } .content { position: relative; /* جعل العنصر يحتوي على عناصر متوازية */ } .content::before { content: ''; /* إنشاء عنصر قبل العنصر الفرعي */ position: absolute; /* تحديد الموقع المطلوب */ left: 0; /* تحديد الموضع من اليسار */ top: 0; /* تحديد الموضع من الأعلى */ height: 100%; /* تعيين الارتفاع ليمتد على ارتفاع العنصر الفرعي */ width: 5px; /* تعيين العرض للحد الأيسر */ background-color: #000; /* تعيين لون الحد */ } ففي هذا المثال يتم تعيين `position: relative` على العنصر الفرعي لجعل `::before` يعتمد على موقعه. ثم يتم استخدام `position: absolute` لتحديد موقع الحد الأيسر بالنسبة إلى العنصر الفرعي، وتحديد عرضه ولونه على حسب الرغبة. 1 اقتباس
0 Hossam Mohamed15 نشر 22 فبراير أرسل تقرير نشر 22 فبراير يجب ان تدرك ان ال border يحيط بحدود الشكل، وعند تحليل الصورتين أجد انك طبقت ال border على المستطيل الخارجي الذي يحتوي على النص، ولكن المطلوب هو انشاء border لعنصر داخل هذا المستطيل الخارجي، ولتحقيق هذا عليك انشاء عنصر div داخلي للتوضيح : <div class="outer"> <div class="inner"> <p>This is an Important Note!</p> </div> </div> ومن ثم تطبيق قواعد ال css المناسبة .outer{ background:#eee; padding: 5px 10px; } .inner{ border-left: 3px solid red; padding: 5px; } بعدها يمكنك التلاعب بقيمة ال padding وال border-width كما تريد لتحقيق النتيجة المطلوبة. - 1 اقتباس
0 Najah Alsaker نشر 22 فبراير أرسل تقرير نشر 22 فبراير (معدل) في البداية دعني اوضح لك الكود الذي استخدمته <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <style> .parent{ background-color: rgb(232, 232, 232); width: 40%; } .child{ border-left: 5px solid purple; padding: 10px; } </style> <body> <div class="parent"> <div class="child">This is important Note</div> </div> </body> </html> هذا الكود يقوم باعطاء نفس النتيجة التي ظهرت لديك هذه وكما تلاحظ ان المشكلة لديك في ال border-left لذلك من المنطقي ان نقوم بتعديل هذا الجزء المشكلة هي اننا نريد لهذا الborder ان يبتعد قليلا عن اطار هذا العنصر من الاعلى والاسفل واليسار , لذلك دعنا نضيف هذا الكود الذي يقوم بهذه المهمة padding-top: 10px; padding-bottom: 10px; padding-left: 10px; ليصبح كود ال css النهائي هكذا .parent{ background-color: rgb(232, 232, 232); width: 30%; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; } .child{ border-left: 5px solid purple; padding: 10px; } والنتيجة كالتالي : والان ما ينقصنا هو تغيير نوع الخط , ولتقم بتغييره اتبع الخطوات التالية : قم بالدخول الى google fonts من هنا اختر الخط الذي يناسبك وقم بالضغط عليه ثم اضغط على get font للحصول على المعلومات الللازمة لاضافة هذا الخط لمشروعنا ثم اضغط هنا والان نختار التالي : لنقم بتضمينه داخل ملف ال css قم بنسخ الكود الاول الخاص بالتضمين في بداية ملف ال css اما الكود الثاني ف قم باضافته داخل العنصر child ليقوم بتغيير الخط انا اخترت لك هذا الخط لانني لاحظت انه اكثر خط شبيه للذي تريده ويمكنك اختيار ما تريد من الموقع والان هذا هو الكود النهائي بعد التعديل واضافة الخط <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <style> /* رابط تضمين الخط */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); .parent{ background-color: rgb(232, 232, 232); width: 30%; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; /* تنسيقات الخط */ font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: weight; font-style: normal; } .child{ border-left: 5px solid purple; padding: 10px; } </style> <body> <div class="parent"> <div class="child">This Is Important Note</div> </div> </body> </html> وهذه النتيجة النهائية بالتوفيق لك تم التعديل في 22 فبراير بواسطة Najah Alsaker 1 اقتباس
السؤال
Muhannad Bahurmoz
السلام عليكم ورحمة الله وبركاته,
أحاول تطبيق مثل الشكل الذي في الصورة التالية:
وهذه النتيجة الذي توصلت إليها:
وكما ترون ال border-left يختلف بين الصورتين,
كيف يمكنني أن أجعل ال border-left مثل الصورة الأولى باستخدام CSS فقط ؟
علمًا بأن الصورتين لديهم نفس شيفرات HTML,
وشكرًا لكم
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.