قبل ان ابدا !

كل فترة ينشر موضوع على اريبيا ومواقع التواصل الاجتماعي يشتكي من ضعف المحتوى العرربي دعونا نتوقف عن الكلام والمواعظ والتدمر فل نبدا بتطوير الويب العربي ولو بقليل :)

اعلم ان الامر لا يعود لك بالمال اعتبرها صدقة جارية لو كل اسبوع نشرت مقالة من هذا النوع هذا يعادل الكثير مع الزمن.

مترجم #1 - سوف اترجم بها بعض المواضع في مجال تصميم وتطوير الويب

بسم الله الرحمن الرحيم لنبدأ:


10 تأثيرات سهلة لتمرير الماوس على الصور

في الماضي كان من الصعب عمل تأثير على صورة باستخدام css فقط،

واليوم مع التطور الذي حل على اللغة أصبح من السهل فعل هذا الامر.

اليوم سوف نتطرق الى هذا الامر مع 10 تأثيرات رائعة وسهلة التطبيق

مع كل مثال يمكنك ان تأخذ كود HTML CSS وتجربته مباشرة وأيضا في نهاية الدرس سوف نرفق لكم الأمثلة للتحميل.

نظرة سريعة للنتائج:

قبل ان نبدأ دعونا نلقي نظرة على النتيجة النهائية لهذا الدرس

للمعاينة:

http://syriandigitalsoft.com/examples/ImageHovers/1/zoomandpan.html

صورة

http://goo.gl/M433zz

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

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #333;
}

.pic {
  border: 10px solid #fff;
  float: right;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;
  -webkit-box-shadow: 5px 5px 5px #111;
  box-shadow: 5px 5px 5px #111;  
}

تقريبا هذه هي الاعدادات الأساسية: box-sizing يسمح لنا بمعالجة نموذج الصندوق، وكلاس pic تعطينا بعط التجميل على الصور.

Zoom and Pan التكبير والعوم:

في المجموعة الأولى سنقوم بعمل تأثير الزوم والازاحة على الصور.

للمعاينة: http://syriandigitalsoft.com/examples/ImageHovers/1/zoomandpan.html

صورة http://goo.gl/aLqEyK

Grow:

صورة عن النتيجة http://goo.gl/iIEMM9 لنبدأ، نحن سوف نجعل المستخدم يمرر الفئرة على الصورة، والصورة سوف تتوسع دون ان تخرج من حدودها مما يأدي الى التكبير وهذا هو كود HTML

HTML

<div class="grow pic">
  <img src="http://lorempixel.com/400/400/cats/3/" alt="portrait">
</div>

كما تلاحظون قمنا بإعطاء الصورة كلاس grow وأيضا كلاس pic من خلال كلاس grow سوف نقوم بعمل التأثير الخاص بهذه الصورة ولاحظ أيضا قمنا باستخدام صورة بمقاس 400px * 400px يمكنك الحصول على صور مثلها وبالحجم الذي تريده من هذا الموقع Lorem Pixel "رابط الموقع : lorempixel.com" والان دعونا نرى كود css.

CSS

/*GROW*/
.grow img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.grow img:hover {
  width: 400px;
  height: 400px;
}

ما فعلناه هنا اننا قمنا بجعل حجم الصورة 300px وعندما يقوم المستخدم بتمرير الفائرة على الصورة يصبح الحجم 400px وهذا ما يؤدي الى تأثير التكبير.

Shrink:

صورة عن النتيجة http://goo.gl/T7e8tH

لقد رئينا كيف كام التأثير السابق Grow، هذه الطريقة تشبه تماما الطريقة هذه فقط هذه المرة عليك ان تبدأ بحجم 400px ويتقلص الى 300px.

HTML

<div class="shrink pic">
  <img src="http://lorempixel.com/400/400/city/9/" alt="city">
</div>

CSS

/*SHRINK*/
.shrink img {
  height: 400px;
  width: 400px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.shrink img:hover {
  width: 300px;
  height: 300px;
}

Side Pan:

صورة للنتيجة http://goo.gl/6VnqVz

في هذا التأثير تبقى الصورة بنفس الحجم في جميع الجهات، ولاكن سوف يزاح أحد الجوانب الى الداخل وعند تمرير الفأرة على الصورة سوف تزاح الى الجانب الاخر، كما ترون في المثال لدينا. HTML

<div class="sidepan pic">
  <img src="http://lorempixel.com/600/300/sports/8" alt="kick">
</div>

نحن هنا نستخدم برض 600px ولاكن الطول فقط 300px لان التكبير سوف يكون جانبي لا نحتاج أي ارتفاع إضافي لسحب التأثير.

CSS

/*SIDEPAN*/
.sidepan img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.sidepan img:hover {
  margin-left: -200px;
}

في تأثير Pan نحن لا نقوم بتغير حجم الصورة كما فعلنا في المرة المسابقة، ولاكن بدلا من ذألك قمنا باستخدام margin لسحب الصورة الى اليسار، ان اردت الصورة ان تتحرك الى اليمين استخدم قيمة موجبة +200px او استخدم margin-right.

Vertical Pan:

صورة لمعاينة النتيجة http://goo.gl/BN8EnB

في هذا التأثير سوف اجعل الرجل وكأنه يتسلق جبل شاق التأثير سوف يقوم برفع الصورة من الأسفل الى الأعلى ويمكننا ان نفعل العكس بطريقة سهلة جدا. HTML

<div class="vertpan pic">
  <img src="http://lorempixel.com/300/600/sports/5" alt="climb">
</div>

CSS

/*VERTPAN*/
.vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.vertpan img:hover {
  margin-top: -200px;
}

نفس الامر كما في المرة الماضية ولاكن هذه المرة نقوم باستخدام margin-top بدلا من margin-left، ان أردنا ان نجعل التأثير من الأعلى الى الأسفل كل ما علينا هو تبديل قيم margin-top كي تصبح في الأعلى -200px وفي الأسفل 0px.

Fun with Transforms

في المجموعة الثانية من التأثيرات وهو أكثر متعة من التأثير السابق، سوف نبدأ مع ميلان بسيط وبعدها الى تأثيرات رائعة ومثيرة للاهتمام.

للمعاينة: http://goo.gl/KcbXpa

صورة للمعاينة: http://goo.gl/O7IQ29

Tilt:

صورة للمعاينة: http://goo.gl/eoKkuw

التأثير الأول في هذه المجموعة سهل جدا، كل ما علينا القيام به هو تدوير الصورة قليلا عندما يقوم المستخدم بتمرير الفأرة على الصورة.

HTML

<div class="tilt pic">
  <img src="http://lorempixel.com/300/300/transport/5" alt="car">
</div>

CSS

/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

كما ترون كل ما علينا هو تدوير الصورة عشر درجات، سهل ورائع! , لاحظ هذه المرة نحن نستهدف الكلاس وليس الصورة.

Morph:

صورة لمعاينة النتيجية: http://goo.gl/5d14br

ما يحدث هنا انه عندما يقوم المستخدم بتمرير الفأرة فإن الصورة تبدأ في الدوران، ونقل الشكل من المربع الى الدائرة، والنتيجة أكثر من رائعة.

HTML

<div class="morph pic">
  <img src="http://lorempixel.com/300/300/nature/5" alt="beach">
</div>

CSS

/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

ما فعلناه هنا هو: عندما يضع المستخدم الفأرة على الصورة نضيف له كلاس morph وبه درجة تدوير 360 درجة ونجعل border-radius 50% لانه نصف قطرها وهذا الامر يادي الى دائرة.

Focus:

صورة لمعاينة النتيجة: http://goo.gl/Yn2KEd

هنا سوف نقوم باستخدام border-radius لأفاف تدوير الصورة وايضا سوف نستخدم border-box وهذا الامر سوف ينشئ لنا تأثير التركيز.

HTML

<div class="focus pic">
     <img src="http://lorempixel.com/300/300/sports/1" alt="cricket">
</div>

CSS

/*FOCUS*/
.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

ما فعلناه هنا انه لدينا الحدود 10px بالون الابيض وعند مرور الفأرة على الصورة حولناه الحدود الى 70px بالون الاسود وايضا نجعل نصف قطرها 50% كما فعلنا في المثال الماضي.

Webkit Filters

هذه هي المجموعة الاخيرة من التأثيرات, وهذه التأثير لا يتوافق على جميع المتصفحات حتى تاريخ هذه المقالة ان لم تكن تستخدم متصفح سفاري او كروم فلن يعمل معك هذا التأثير.

على الرغم من القيود المؤسفة، ندعوك لتجربة تأثرات الفلاتر filters فيه رائعة جدا! وهنا يوجد معاينة لثلاثة ثأثيرات من المفضلة. للمعاينة: http://goo.gl/3K0MWz

Blur:

صورة لمعاينة النتيجة: http://goo.gl/xEQqYE

التأثير الأول وهو عم Blur "التغبيش" ببساطة، منذ فترة طويلة ونحن نحاول عمل التغبيش بواسطة css، والان اصبح من الممكن عمل هذا الامر بسطر واحد من كود CSS.

HTML

<div class="blur pic">
  <img src="http://lorempixel.com/300/300/transport/2" alt="plane">
</div>

CSS

/*BLUR*/
.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.blur img:hover {
  -webkit-filter: blur(5px);
}

كما ترون، نحن استخدام الخاصية webkit-filter ثم قمنا بتعين التغبيش Blur 5px، هذا كل ما في الامر.

B&W:

صورة لمعاينة النتيجة: http://goo.gl/1ro3mF

والان في هذا التأثير سوف نجعل الصورة في اللون الابيض والاسود عندما يقوم المستخدم بتمرير الماوس على الصورة.

HTML

<div class="bw pic">
  <img src="http://lorempixel.com/300/300/nature/2" alt="sea">
</div>

CSS

/*B&W*/
.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.bw:hover {
  -webkit-filter: grayscale(100%);
}

اننا هنا نقوم بجعل اللون الرمادي grayscale 100% اذا كنت ترغب بلون اقل قم بتغير الرقم 100 الى رقم اقل.

Brighten:

صورة للمعاينة: http://goo.gl/cZ6Jde

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

HTML

<div class="bw pic">
  <img src="http://lorempixel.com/300/300/nature/2" alt="sea">
</div>

CSS

.brighten img {
  -webkit-filter: brightness(16%);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.brighten img:hover {
  -webkit-filter: brightness(100%);
}

هنا درجة الإضاءة الخاصة بالصورة 16% وعندما يقوم المستخدم بتمرير الماوس سوف تصبح درجة الإضاءة 100% وهي الدرجة الطبيعية للصورة، يمكنك تغير درجة الإضاءة كما تريد.

في النهاية اتمنا ان تكون هذه المقالة قد راقت لكم، جميع هذه الاكواد يمكنك ان تقوم بنسخها وستخدمها في مشروعك مباشرتا او يمكنك تحميل الكود كامل من الرابط في الاسفل :) .

رابط التحميل والمصدر: http://designshack.net/articles/css/joshuajohnson-2

هل سوف تساهم ام تكتفي بالتدمر ؟!