استفسار عن عمل ديزاين معين

Mohammad Kiblawi · 11 مارس

السلام عليكم ورحمه الله وبركاته وبعد رمضان مبارك عليكم جميعا، لدي استفسار لدي تصميم لsection في الصورة التي في المرفقات، الديزاين مكون من صورة illustration, ligh blue background و صورة zigzag (تبدو كانها شيء ممزق)

المهم اني حاولت ان عمل تصميم الصورة الممزقة باستخدام الpsuedo code و لل parent div خصائص css مثل background-image , background color و لكن لا اعرف كيف ادمج الصورة الممزقة مع صورة الخلفية الزرقاء كما في الصورة الثانية المرفقة، هل احد يعلم ما هي الproperty التي من الممكن ان تجعل الصورة الممزقة تندمج مع الصورة ذات الخلفية الزرقاء؟

حمزة عباد · 12 مارس

وعليكم السلام،

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

محمد عاطف17 · 12 مارس

وعليكم السلام ورحمة اله وبركاته .رمضان مبارك علينا جميعا،

نعم بالفعل توجد طريقتان تمكنك من تنفيذ ذلك .

اول طريقة وهى فى نظرى معقدة بالنسبة لما تريد تنفيذه . وهى استخدام خاصية clip-path فى css وهى تسمح لك بقص الصورة واظهار جزء فقط منها ولكنها تحتاج ان تمرر لها القيم التى تريد ان تقص منها .

clip-path: polygon(99% 0, 98% 18%, 96% 38%, 98% 60%, 97% 82%, 94% 100%, 0 100%, 0% 43%, 0 0);

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png) ;
  mask-image: url(w3logo.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;    
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
<h3>Mask image:</h3>
<img src="w3logo.png" alt="Cinque Terre" width="" height="">
</body>
</html>

وهذا هو الكود الخاص بها يمكنك التعديل عليه و تجربته ولكن سيتوجب عليك تعديل الصورة zigzag حيث يجب ان تجعل الجزء الايمن منها كله بالابيض حتى تعمل معك هذه الطريقة.

Mohammad Kiblawi · 12 مارس

جزاك الله خيرا اخ محمد عاطف

محمد عاطف17 · 12 مارس

بتاريخ 12 دقائق مضت قال Mohammad Kiblawi:

جزاك الله خيرا اخ محمد عاطف

واياكم اللهم امين اخى الغالى

استفسار عن عمل ديزاين معين

السؤال

Mohammad Kiblawi

4 أجوبة على هذا السؤال

Recommended Posts

حمزة عباد

محمد عاطف17

Mohammad Kiblawi

محمد عاطف17

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية