wesamdev

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

wesamdev

شرح تنسيق الصور في CSS

تُستخدم الخاصية filter لتطبيق تأثيرات مثل تغيير اللون وتأثير الضبابية على الصور والخلفيات والإطارات.

شرح تنسيق الصور في CSS

المُرشِّحات (Filters)

تُستخدم الخاصية filter لتطبيق تأثيرات مثل تغيير اللون وتأثير الضبابية على الصور والخلفيات والإطارات.

  1. ()blurتُطَبِق تأثير الضبابية على الصورة المُحدَّدة.
  2. (brightness(x تُغيِّر سطوع الصورة.
  3. (contrast(xتُغيِّر تباين الصورة.
  4. (dropshadow(h,v,x,y,zتُطبِّق تأثير الظلال على الصورة.
  5. (gray-scale(xتُحَوِّل ألوان الصورة إلى التدرج الرمادي.
  6. (hue-rotate(xتُدَوِّر القيمة اللونية لجميع ألوان الصورة.
  7. (invert(xتعكس ألوان الصورة،
  8. (opacity(xتُطبِّق تأثير الشفافية على الصورة.
  9. (saturate(xتُغيِّر إشباع الصورة.
  10. (sepia(xتُحَوِّل ألوان الصورة إلى البني الداكن.

يجب استخدام البادئة ‎-webkit لدعم خاصية المُرشِّحات filter في المتصفحات القديمة.

الدالة ()blur 1


  • ملف HTML
  •  <img src="donald-duck.png" alt="donald duck" title="donald duck" />
    

  • ملف CSS
  •  img {
     -webkit-filter: blur(1px);
     filter: blur(1px);
     }
    

    النتيجة


    شرح تنسيق الصور في CSS




    الدالة ()dropshadow 2


    • ملف HTML
    •  <p>
       My shadow wesam elngar.
       </p>
      

    • ملف CSS
     p {
     -webkit-filter: drop-shadow(10px 10px 1px green);
     filter: drop-shadow(10px 10px 1px green);
     }
    


    النتيجة



    شرح تنسيق الصور في CSS



    الدالة ()hue-rotate 3


    • ملف HTML
    •  <img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
      

    • ملف CSS
     img {
     -webkit-filter: hue-rotate(120deg);
     filter: hue-rotate(120deg);
     }
    


    النتيجة


    شرح تنسيق الصور في CSS




    الدالة ()invert 4


    • ملف HTML
    •  <div></div>
      

    • ملف CSS
     div {
     width: 100px;
     height: 100px;
     background-color: white;
     -webkit-filter: invert(100%);
     filter: invert(100%);
     }
    


    النتيجة


    شرح تنسيق الصور في CSS



    إضافة مُرشِّحات متعددة


    يُمكن تطبيق عدد من المُرشِّحات والفصل بينها بفاصلة.

    مثال

    • ملف HTML
    •  <img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />
      

    • ملف CSS
     img {
     -webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
     filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
     }
    


    النتيجة


    شرح تنسيق الصور في CSS



    القواطع والأقنعة (Clipping and Masking)


    تستخدم خواص القطع والأقنعة لجعل أجزاء من العنصر شفافة أو معتمة.

    1. clip-source رابط يُشير لعنصر SVG أو ملف SVG خارجي يحوي تعريف مسار القطع.
    2. basic-shape تُحدد شكل مسار القطع، وتأخذ القيمة ()inset أو ()circle أو ()ellipse أو ()polygon.
    3. clip-geometry-box تأخذ إحدى القيم content-box أو padding-box أو ّ أو margin-box أو fill-box أو stroke-box أو view-box، وتستعمل حواف الصندوق المحدد كمسار للقطع.
    4. mask-reference تُشير إلى الصورة التي ستُستخدم كقناع.
    5. repeat-style تُحدد كيف ستُكرر صورة القناع على المحورين الأفقي والرأسي، وتأخذ القيمة repeat-x أو repeat-y أو repeat أو space أو round أو no-repeat.
    6. mask-mode تأخذ إحدى القيم alpha أو luminance أو auto.
    7. position تُحدد موضع القناع، وتسلك سلوك مشابه لسلوك الخاصية background-position.
    8. geometry-box تُحدد الصندوق الذي سيأخذ شكل القطع، وتأخذ القيمة content-box أو padding-box أو ّ أو margin-box أو fill-box أو stroke-box أو view-box. لمزيد من المعلومات انظر توثيق W3C.
    9. bg-size تُحدد حجم صورة القناع، ولها صياغة مماثلة لصياغة الخاصية background-size.
    10. compositing-operator تُحدد عملية التركيب التي ستُطبَّق على طبقات القناع، وتأخذ إحدى القيم add أو substract أو exclude أو multiply. لمزيد من المعلومات انظر توثيق W3C.


    القطع (Clipping)


    القواطع هي مسارات مُتجِهة، ويكون العنصر خارج هذه المسارات شفافًا، أما الشكل المُحدد بالمسار فيكون معتمًا.


    شرح تنسيق الصور في CSS

    مثال

    clip-path: circle(100px at center)
    

    يكون الجزء المُعتم (المرئي) من العنصر على شكل دائرة مركزها هو نفس مركز العنصر وقطرها 100 بكسل.



    القناع


    تستخدم لتحديد قناع يوضع فوق العنصر ويحدد الأجزاء المرئية والمعتمة منه، وهناك نوعان من الأقنعة، أقنعة الإضاءة (luminance masks) وأقنعة ألفا (alpha masks).



    أقنعة الإضاءة 1



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

    مثال

    mask: url(masks.svg#rectangle) luminance;
    


    شرح تنسيق الصور في CSS




    أقنعة ألفا 1


    ويكون الجزء من العنصر الواقع تحت الجزء الشفاف من القناع مرئيًا بينما يكون باقي العنصر شفافًا.

    تحويل الصورة من معتمة إلى شفافة تدريجيًا


    <style>
     div {
     height: 200px;
     width: 200px;
     background: url('http://lorempixel.com/200/200/nature/1');
     mask-image: linear-gradient(to right, white, transparent);
     }
    </style>
    <div></div>
    

    في هذا المثال، استُخدِم قناع بتدرج خطي ذو لون أبيض في أقصى اليسار ويصبح شفافًا كلما اتجهت لليمين، وتصبح الصورة شفافة في المكان الذي يكون فيه القناع شفافًا.


    شرح تنسيق الصور في CSS

     


    شرح تنسيق الصور في CSS

    يجب استخدام البادئة webkit- لدعم الخاصية mask-image في بعض المتصفحات.

    استخدام الأقنعة لإنشاء ثقب في الصورة


    <style>
     div {
     width: 200px;
     height: 200px;
     background: url(http://lorempixel.com/200/200/abstract/6);
     mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%);
     }
    </style>
    <div></div>
    

    في المثال أعلاه، أُنشِئت دائرة شفافة في منتصف الصورة باستخدام الخاصية linear-gradient، مما يؤدي لإنشاء ثقب شفاف في الصورة.

    الصورة الأصلية


    شرح تنسيق الصور في CSS

    الصورة بعد إنشاء الثقب


    شرح تنسيق الصور في CSS


    استخدام الأقنعة لإنشاء صور بأشكال غير منتظمة


    <style>
     div {
     height: 200px;
     width: 400px;
     background-image: url(http://lorempixel.com/400/200/nature/4);
     mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top
     left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
     mask-size: 75% 25%, 25% 25%, 100% 75%;
     mask-position: bottom left, bottom right, top left;
     mask-repeat: no-repeat;
     }
    </style>
    <div></div>
    

    النتيجة


    شرح تنسيق الصور في CSS


    شرح تنسيق الصور في CSS



    القواطع

    <style>
     div {
     width: 200px;
     height: 200px;
     background: teal;
     clip-path: polygon(0 0, 0 100%, 100% 50%);
     }
    </style>
    <div></div>
    

    المثال أعلاه يوضح كيفية استخدام الخاصية clip-path لقطع الشكل المربع إلى شكل مثلث، يبدأ القطع في الحافة العُليا باتجاه اليسار (عند النقطة 0 0)، ومن ثمة يتجه إلى أسفل اليسار (النقطة 100% 0)، وأخيرًا إلى منتصف الضلع الأيمن (عند النقطة 100% 50%)، وتحدد هذه النقاط الثلاث رؤوس المثلث.

    النتيجة


    شرح تنسيق الصور في CSS



    إنشاء شكل دائري باستخدام القواطع

    <style>
     div {
     width: 200px;
     height: 200px;
     background: teal;
     clip-path: circle(30% at 50% 50%);
     }
    </style>
    <div></div>
    

    المثال أعلاه يوضح كيفية انشاء شكل دائري باستخدام الخاصية clip-path، ويكون الناتج هو شكل دائري نصف قطره 30% من عرض العنصر الأصلي، ومركزه هو نفس مركز العنصر.

    اطلع على تجربة حيًة للمثال أعلاه على JSFiddle.

    الصيغة العامة لرسم الشكل الدائري

    circle(radius at x y)
    



    الخاصية Object-fit

    تُحدد الخاصية object-fit كيف يتناسب العنصر مع صندوق ذو ارتفاع وعرض محددين، وغالبًا ما تستخدم مع الصور والفيديوهات، ويمكن أن تأخذ إحدى القيم التالية:


    FILL 1


    object-fit: fill;
    


    شرح تنسيق الصور في CSS

    تُمدد FILL الصورة لملء صندوق المحتوى بغض النظر عن نسبة العرض إلى الارتفاع الأصلية للصورة.




    CONTAIN 2


    object-fit: contain;
    



    تُحافظ contain على نسبة الإرتفاع إلى العرض الأصلية للصورة عن طريق ملائمتها لأحد بُعدي الصندوق وضبط البعد الآخر بناءً على نسبة الإرتفاع إلى العرض الأصلية.




    COVER 3


    object-fit: cover;
    

    f


    تُمدد cover الصورة لملء صندوق المحتوى، مع الحفاظ على نسبة العرض إلى الارتفاع الأصلية للصورة عن طريق قصها.




    NONE 4


    object-fit: none;
    

    f

    شرح تنسيق الصور في CSS

    تتجاهل none حجم الصندوق وتُحافظ على الحجم الاصلي للصورة.




    SCALE-DOWN5


    object-fit: scale-down;
    

    f

    شرح تنسيق الصور في CSS

    تختار تلقائيًا قيمة object-fit التي تُنتج الصورة الأصغر.



wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا

COMMENTS

BLOGGER
الاسم

اخبار,45,اداة للكمبيوتر,7,اضافات بلوجر,88,افلام اجنبي,9,افلام روسية,32,افلام عربي مترجمة الي الروسية,1,افلام قديمة,2,افلام هندي,8,البرمجة,8,الجديد في التكنولوجيا,46,العاب,9,النمر,7,اليوتيوب,16,اندرويد,15,اندرويد استوديو,3,برامج كمبيوتر,11,بلوجر,8,تركيا,6,تصميم,3,تطبيقات,20,جافاسكريبت,3,حوادث,5,حول العالم,65,حيوانات,25,خلفيات,1,دروس HTML| بالعربية,2,روبوتات,8,روسيا,60,سياحة,4,سيارات,12,سياسة,17,شروحات,34,شريط الاخبار,1,صحتي,2,طائرات,22,فن,35,قناة الوعي نور,4,قناة قعدة تاريخ,8,قوالب بلوجر,3,كتب الكترونية,7,مالتي ميديا,6,متصفح,2,محليات,4,مسلسل لعبة الحبار,1,مسلسلات اجنبية,2,مسلسلات رمضان 2022,1,مسلسلات رمضان 2120,1,مصر والعرب,2,معدات حربية,34,معدات زراعية,6,مقالات,100,مواصلات النقل,1,مواقع للتصميم,14,وثائقي,14,وسوم بلوجر,2,ويندوز,15,Antivirus,3,Button,1,c++,1,css,37,HTML,11,wesam,2,
rtl
item
Wesam: شرح تنسيق الصور في CSS
شرح تنسيق الصور في CSS
تُستخدم الخاصية filter لتطبيق تأثيرات مثل تغيير اللون وتأثير الضبابية على الصور والخلفيات والإطارات.
https://1.bp.blogspot.com/-ES0qp-FfZtU/YMnaVaA9EFI/AAAAAAAAVos/iZWbwCUZRpg3eTRqc_ght1JoHpb0UDtMwCLcBGAsYHQ/s16000/%25D8%25B4%25D8%25B1%25D8%25AD%2B%25D8%25AA%25D9%2586%25D8%25B3%25D9%258A%25D9%2582%2B%25D8%25A7%25D9%2584%25D8%25B5%25D9%2588%25D8%25B1%2B%25D9%2581%25D9%258A%2BCSS0.png
https://1.bp.blogspot.com/-ES0qp-FfZtU/YMnaVaA9EFI/AAAAAAAAVos/iZWbwCUZRpg3eTRqc_ght1JoHpb0UDtMwCLcBGAsYHQ/s72-c/%25D8%25B4%25D8%25B1%25D8%25AD%2B%25D8%25AA%25D9%2586%25D8%25B3%25D9%258A%25D9%2582%2B%25D8%25A7%25D9%2584%25D8%25B5%25D9%2588%25D8%25B1%2B%25D9%2581%25D9%258A%2BCSS0.png
Wesam
https://www.wesamdev.com/2021/06/css_16.html
https://www.wesamdev.com/
https://www.wesamdev.com/
https://www.wesamdev.com/2021/06/css_16.html
true
1297279864306511161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content