إضافة تأثير Zoom لصور مدونات بلوجر باستخدام CSS

عدد مشاهدات الموضوع:

أهلا بكم زوار مدونة أبواياد , اليوم اقترح علي المهندس محمد جلال أن نطرح الاضافات الخاصة بمنصة بلوجر ببصمة تعليمية , اي اننا سنقوم بشرح آلية عمل الإضافة حتى يتسنى لكم التطوير على هذه الاضافات حسب رغباتكم وانتم على دراية تامة بكيفية عمل كل اضافة على حدة فالامر ليس صعبا كما تعتقدون ...
اليوم سنقوم بطرح مجموعة  من خواص الـ CSS3 وسنطبق عليها تطبيق بسيط خاص بالتاثير على الصور ,سنقوم اولا بطرح الاضافة ثم نقوم بشرحها بالتفصيل وهي عبارة عن تاثير التكبير (Zoom) على الصور يمكنك المعاينة قبل اضافة الكود لقالبك
لاضافة هذه الخاصية لقالبك ما عليك الا التسجيل في بلوجر ثم القالب ثم تحرير HTML ثم نبحث هذا الوسم ]]></b:skin> ونلصق كودCSS التالي فوقه مباشرة
.zoom img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}
.zoom img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}
الان نقوم بحفظ القالب ثم يمكنك استخدام هذه الخاصية داخل اي مشاركة تريدها فقط بوضع الكود التالي في وضع الHTML وتغير URL باي رابط  صورة تريد
<div class="zoom">
<img src="URL" /></div> 
الان ننتقل للجانب التعليمي حيث سنقوم بشرح آلية عمل الكود
طبعا لكتابة أي شي داخل قالبك يجب ان يكتب بلغة HTML وتختلف الاكواد داخل قالبك حسب وظيفة كل كائن(class), وكل كائن لديه مجموعة من الخصائص المنسوبة له لجعل هذا الكائن اكثر جمالية وهذا الخصائص تنسب لهذا الكائن عن طريق الCSS حيث ان كل كائن لديه البلوك (block) الخاص به الذي تكتب داخله صفات هذا الكائن, دعونا نترجم هذا الكلام عن طريق شرح الكود أعلاه.
اولا لدينا الكائن (class) المسمى zoom طبعا كل كائن يكون له وسم بداية ووسم نهاية والclass دائما يكتب داخل الوسم div 
ويكتب الكائن بالصيغة العامة التالية 
<div class="zoom">
ما يوضع داخل هذا البلوك تنسب صفاته تبعا لهذا الكائن
فمثلا لو وضعنا صورة او قطعة هنا تنسب صفاتها لخصائص هذا الكائن
</div> 
  CSS الان سنقوم بإضافة الخصائص لهذا الكائن عن طريق ال
 طبعا ليعلم المتصفح (مترجم الاكواد) أن هذه الخصائص تابعة لهذا الكائن يجب ان نضعها في بلوك بنفس اسم هذا الكائن وهنا الصيغة العامة لآلية كتابة الخصائص لكل كائن على حدة
.zoom img{
 zoom هنا تكتب الخصائص المنسوبة للكائن
}
 بعد المعاينة تلاحظوا أن الصورة تكون خافتة وعندما يمر عليها مؤشر الماوس تظهر بشكل مكبر وتظهر أكثروسنقوم الان بشرح  الخصائص التى أدت أن تظهر الصورة بذلك الوضع 

 CSS3 Transforms

حيث  تتيح هذه الخاصية على الاقل تغير شي من الامور الاتية (شكل العنصر او حجمه او موضعه).
ويتبع لهذه الخاصية مجموعة من الدوال لتحدد ماذا ستفعل بالظبط ,هنا استخدمنا الدالة scale حيث تقوم بتغير حجم العنصر بالزيادة او النقصان وذلك يرجع للبعد السيني (X-axis) و البعد الصادي (Y-axis) المعطى لها  ;(transform:scale(0.8
الان سنشرح الدوال التابعة للخاصيةTransforms طبعا هناك دوال ثنائية الاتجاه (2D) وهذا ما سنتطرق له هنا وهناك دوال ثلاثية الاتجاه(3D) لنفس الخاصية .

The translate() Method

الدالة ()translate وظيفتها تغيير موضع العنصر(مثلا الصورة كما في المثال أعلاه) من موضعه الحالي لموضع آخر اعتمادا على البعد السيني (X-axis) و البعد الصادي (Y-axis) المعطى لها 
(transform: translate(50px,100px



The rotate() Method

الدالة ()rotate تجعل العنصر يدور باتجه عقارب الساعة حسب الزاوية المعطى له ,كما يمكن لهذه الدالة ادارة العنصر عكس اتجاه الساعة اذا كانت قيمة الزاوية سالبة.


The scale() Method

الدالة ()scale هي الدالة المستخدة في التطبيق أعلاه,كما لاحظت ان هذه الدالة تعمل على زيادة حجم العنصر او نقصانه تبعا للقيمة المعطى لها على محور السينات  (X-axis) ومحور الصادات (Y-axis).


The skew() Method

الدالة ()skew تجعل العنصر يلتف بزاوية محددة حسب الزاوية المعطى له مع محور السينات(X-axis) وكذبك الزاوية المعطى له مع محور الصادات(Y-axis).




هذه هي الدوال الاربعة التابعةة للخاصية Transforms يمكنك الان استخدام ما يناسبك في تطبيق جديد مختلف لما ذكر أعلاه.
وقد لاحظت في الكود أعلاه ان هناك بادئة او مقدمة اما الخاصية Transforms مثل (-webkit- ,-o- , -moz) هذه المقدمات تستخدم مع الخصائص المطورة حديثة في الCSS3 وهي كتعريف الدالة لكل متصفح(مترجم الاكواد) عى حدى
                                                 -webkit- بائدة للمتصفح Chrome
                                                 -moz- بائدة للمتصفح Firefox
                                                 -o- بائدة للمتصفح Opera
                                                 -ms-بادئة للمتصصفح Internet Explorer

ايضا استخدمنا الخاصية transition-duration

وهي خاصية لتحديد كم ثانية(S) او ميلي من الثانية (ms) يحتاج العنصر ليكمل ثاتير الانتقال فعند الانتقال من وضعية السكون للعنصر(الصورة) الى وضعية لمس مؤشر الماوس للعنصر كم يحتاج المتصفح من الوقت لتنفيذ الثاتير على العنصر.

اخيرا استخدمت الخاصية CSS3 opacity

وهي خاصية التعتيم او مدى ظهور العنصر حيث انكم لاحظتم ان الصورة في المعاينة اعلاه قد كانت خافتة بعض الشي وعند مرور مؤشر الماوس عليها ظهرت بوضوحها الطبيعي لاننا استخدمنا خاصية  opacity وهي تكون بنسبة مئوية opacity:0.7 .

 هكذا انتهينا من شرح الكود أعلاه أتمنى ان تكونو قد استفدتم ولو بعض الشي فهناك المزيد في انتظاركم فتابعونا وأتمنى ان تطبقو دوال الخاصية Transforms وشاركونا ابدعاتكم يمكنك استبدال الدالة scale بالدوال الاخرى ومشاركتنا تطبيقاتكم كما يمكنك الاستعانة ب jsfiddl عبر الرابط التالي http://jsfiddle.net/RB8de . في آمان الله
المصادر
http://www.w3schools.com/css/css3_2dtransforms.asp
http://www.w3schools.com/cssref/css3_pr_transition-duration.asp
http://www.w3schools.com/cssref/css3_pr_opacity.asp
http://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit

هناك 9 تعليقات:

  1. غير معرف4:44 ص

    ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥

    جزاكم الله خيراً ،، ووفقكمـ ..

    ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥

    ردحذف
  2. انا عندي مشكلة مع القالب الجديد
    اسم الموضوعات كبير قوي عاوز الحل ضروري

    ردحذف
    الردود
    1. وانا اسامي القوائم المنسدله صغيره خالص

      حذف
  3. مشكور اخي عبدالله أبودقة على الشرح الرائع

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

    ردحذف
  5. @Ayoub Etmaiti
    شكرا استاذ ايوب هذابعض ما لديكم واتمنى ان يستفيد الجميع

    ردحذف
  6. thanks brother
    http://geek--space.blogspot.com/

    ردحذف
  7. غير معرف10:32 ص

    شكرا على موضوع :)
    http://bixelio.blogspot.com/

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية