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

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

Mohammad Kiblawi

السؤال

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

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

 

image.png

image.png

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

Recommended Posts

  • 0

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

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

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

  • 0

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

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

اول طريقة وهى فى نظرى معقدة بالنسبة لما تريد تنفيذه . وهى استخدام خاصية 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  سيتم دمج الصورتين واظهار المكان فى الصورة الاصلية الذى بالاسود واخفاء الجزء الذى بالابيض وهذه الصورة توضح ما اقصد.

image.thumb.png.e96634022037db11d42266afd82c8542.png

<!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 حيث يجب ان تجعل الجزء الايمن منها كله بالابيض حتى تعمل معك هذه الطريقة.

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...