عند تحسين الصور ، يمكننا اختيار القيام بذلك باستخدام Photoshop ثم تثبيته على صفحة الويب أو يمكننا أيضًا اختيار الخيار B: قم بذلك باستخدام تقنيات HTML و CSS و Javascript المتوفرة.
بعد القفزة ، هناك العديد من التقنيات لتحسين الصور ، كلها تقريبًا مصنوعة باستخدام jQuery كقاعدة رئيسية أو باستخدام CSS3 الاستفادة من أحدث معايير الويب ، على الرغم من أنني أذكرك أنه في هذه الحالة نفقد التوافق مع بعض المتصفحات.
إنهم باللغة الإنجليزية لكنهم تم القبض عليهم وهم على الطاير ، ووعدوا :)
المصدر | الدفع الأول
صورة مدورة لـ CSS3 مع jQuery
تعلم كيفية التفاف علامة الامتداد حول عنصر الصورة للحصول على صور مستديرة سيتم عرضها في جميع المتصفحات الحديثة.
2.
خلفيات وحدود متعددة باستخدام CSS 2.1
تعرف على كيفية استخدام العناصر الزائفة CSS 2.1 لتوفير ما يصل إلى 3 لوحات خلفية ، وصورتي عرض ذات حجم ثابت ، وحدود معقدة متعددة لعنصر HTML واحد.
3.
نصيحة سريعة: حدود متعددة باستخدام CSS بسيط
يظهر لك التسجيل السريع للشاشة كيفية تحقيق حدود متعددة باستخدام CSS بسيط بهذه الطريقة مما يضيف مزيدًا من العمق إلى تصميماتك. نسخة أبسط بكثير من البرنامج التعليمي السابق.
4.
حدود متعددة على العناصر ذات الحجم الديناميكي باستخدام CSS2
الإصدار الثالث من نيكولاس غالاغر يوضح لك ما يجب القيام به إذا لم يكن حجم العنصر.
5.
استمتع بالحدود - مشطوف ، مضغوط ، والمزيد!
تعرف على كيفية تحقيق تأثير مضغوط باستخدام CSS وبعض الحيل البسيطة لنمط الحدود للحصول على تأثيرات متنوعة.
6.
صور بولارويد مع CSS3
تعرف على كيفية استخدام بعض CSS2 و CSS3 الرائع لتحويل قائمة متواضعة من الصور إلى مجموعة كاملة من صور Polaroid.
7.
صورة خلفية كاملة للصفحة الكاملة
تعرف على كيفية إضافة صورة الخلفية باستخدام CSS التي تملأ الصفحة بأكملها بالصورة ، ولا توجد مساحة بيضاء ، وتقاس الصورة حسب الحاجة ، ولا تسبب أشرطة التمرير وغير ذلك الكثير.
8.
CSS3 Box Shadow و Image Hover Effects
اكتشف طريقة جديدة لإضافة تأثيرات الظل المسقط فقط عن طريق تحرير ورقة أنماط.
9.
تأثير التمرير المصغر الرائع مع / jQuery
احصل على تأثير أنيق بأسلوب الفلاش باستخدام CSS و jQuery.
10.
كيفية إنشاء تأثير بسيط لتمرير الصور في CSS
ستتعلم في هذا البرنامج التعليمي كيفية إنشاء تأثير بسيط لتمرير صور CSS باستخدام تصميم HTML و CSS الأساسي.
11.
تعويم
يأخذك Floatutorial عبر أساسيات العناصر العائمة مثل الصور ، الأحرف الاستهلالية ، الأزرار التالية والخلفية ، معارض الصور ، القوائم المضمنة والتخطيطات متعددة الأعمدة. تحقق من 4 برامج تعليمية مخصصة لتعويم الصورة.
12.
تأثيرات تحوم Snazzy باستخدام CSS
في هذا البرنامج التعليمي ، ستنتقل إلى إنشاء تقنيات تحويم مرنة متقدمة باستخدام خصائص CSS2.1.
13.
انقلاب سريع بدون
التحميل المسبق
عند استخدام عمليات تمرير الصور في CSS ، يجب تحميل صورتين أو ثلاث أو أكثر (وغالبًا ما يتم تحميلها مسبقًا للحصول على أفضل النتائج). تعرف على كيفية وضع جميع الحالات في صورة واحدة مما يؤدي إلى إجراء تغييرات ديناميكية بشكل أسرع ولا يتطلب تحميلًا مسبقًا.
14.
زوايا مدورة لـ jQuery
الكثير من تأثيرات jQuery للزوايا الدائرية وأنماط أكثر بكثير.
15.
أسهل تلميح ومعاينة للصورة باستخدام jQuery
اطلع على 3 أمثلة لاستخدام البرنامج النصي لمعاينة jQuery rollover. يمكن تطبيق هذا البرنامج النصي البسيط لأغراض متنوعة.
16.
حجم كبير - خلفية ملء الشاشة /
Slideshow
jQuery البرنامج المساعد
Superzided هو مكون إضافي من jQuery يقوم بتغيير حجم الصور لملء المتصفح مع الحفاظ على نسبة أبعاد الصورة ودورات الصور / الخلفيات عبر عرض الشرائح مع التحولات والتحميل المسبق.
17.
تراكب PNG
هل سبق لك أن واجهت مشكلة إنشاء موقع بالصور التي قدمها العميل ، لتجد لاحقًا بعد قيامهم بتحديث الصور الفوتوغرافية الخاصة بهم عدم الاحتفاظ بالشكل والمظهر الأصلي؟ يتضمن هذا الحل إنشاء تراكب PNG شفاف يمكن استخدامه كقناع / إطار حول JPEG أو GIF العادي. بهذه الطريقة ، يمكن تكوين تثبيت CMS نموذجي بحيث يمكن للمستخدمين تحميل الصور دون الحاجة إلى القلق بشأن استخدام أي برنامج رسومات لتطبيق المرشحات.
18.
بيزوم
Lighweight
مسج
تكبير البرنامج المساعد
BeZoom هو بديل بسيط وخفيف الوزن لـ JQZoom. إنه أخف وزنا وأسهل في الاستخدام.
19.
استخدام jQuery للرسوم المتحركة لصور الخلفية
العب مع jQuery وقم بتغيير موضع صورة الخلفية لإنشاء نوع التأثير الذي تبحث عنه. توجد مقالة جديدة تجيب على السؤال "كيف أتعامل مع الحالات النشطة؟" - معالجة الحالة النشطة لخلفيات jQuery المتحركة.
20.
5 طرق لإضفاء الإثارة على صورك باستخدام CSS
فيما يلي بعض الحيل البسيطة لإضافة بعض النكهة إلى صورك المعتادة. قد يكون استخدام Photoshop لتصميم كل صورة أمرًا مملاً ويصعب الحفاظ عليه على المدى الطويل. ستساعدك تقنيات CSS التالية على تخفيف هذا الألم.
21.
كيفية:
كبير
الصورة الخلفية
تعرف على كيفية إعداد صورة خلفية يمكن تغيير حجمها باستخدام CSS. لديك 3 خيارات للاختيار من بينها.
22.
نمط روابط الصور الخاصة بك
إن السماح للمستخدمين بمعرفة أن قسمًا معينًا من موقعنا على الويب من المفترض أن يتم النقر عليه يتم تحقيقه بشكل أفضل من خلال الماوس فوق التأثير. هذه الأقسام "القابلة للنقر" تتضمن بالتأكيد صور المحتوى. رابط الصورة هو برنامج نصي يمكّنك من تطبيق نمط إضافي على روابط الصور الخاصة بك.
23.
صور خلفية متعددة مع CSS
في بعض الأحيان ، يكون من المنطقي استخدام صور الخلفية بدلاً من إدراجها مباشرةً في الصفحة. وعلى الرغم من أن كل عنصر - مثل علامة الجسم - يمكنه الاحتفاظ بصورة خلفية واحدة فقط ، إلا أنه يمكن تطبيقه على عدة عناصر.
24.
حدود الصورة مع CSS
برنامج تعليمي سهل للغاية يوضح لك كيفية إضافة حدود صلبة للصور باستخدام CSS.
25.
CSS Sprites بدون استخدام صور الخلفية
تعرف على كيفية تطبيق تأثير التمرير بدون معرفة الكثير عن النقوش المتحركة في CSS.
