2009 17 فبراير 2009

Understandng الخاصية قصاصة CSS

لماذا أريد أن أفهم هذا؟ Humm ...!

ومعظم الكتاب يتفقون على أن CSS CSS الملكية كليب هو على الارجح واحدة من أهم خصائص CSS الأمم المتحدة استخداما. كان ذلك صحيحا بالنسبة لي أيضا، وكان في غاية السعادة لتجاهله، حتى بدأت بتعديل الثاني MOOTOOLS مكون المقبض المتزلج (دبوس) (مع مؤشر متوسط) .

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

حسنا! كيف يمكن أن يكون من الصعب؟ ليس كثيرا على الإطلاق ... نعم و لا. بناء الجملة في استخدام الممتلكات كليب المغلق هو مستقيم جدا ولكن المعنى / usuage قليلا croocked. مع الذاكرة مثل الألغام، في كل مرة أجلس لإعادة صياغة سيناريو المتزلج على بلدي ... لدي tokeep مع الإشارة إلى استخدام هذه الخاصية مقطع، لأذكر نفسي المنطق الذي خلقت الكتابة في بلدي .... ومن هنا! يعتقد أن القلم عليه، على امل ان نتذكر انه في المستقبل (وأيضا لصالح أولئك الذين يبدو تحير للملكية كليب CSS)

ماذا CSS كليب تفعل؟

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

باستخدام خاصية CSS كليب، يمكنك إنشاء لقطة باستخدام الشكل المستطيل. مثل الكثير من خصائص CSS الأخرى (مثل الخ هامش الحشو،)، وذلك باستخدام احداثيات يتطلب أربعة إحداثيات أعلى، يمين، أسفل، يسار (TRBL). طبيعة croocked هذه الخاصية تعكس عند القاء نظرة فاحصة على كيفية كليب يحسب المنطقة لقطة، وذلك باستخدام هذه الإحداثيات الأربعة (يرسل الدماغ الى إرم لفترة من الوقت). الآن للتشويش على الجزء السفلي الذي يبدأ من أعلى، والحق يبدأ من اليسار. :) . ترى ماذا قلت؟ .... وبالتالي هذه الوظيفة ...

وهذا يمكن خلط القليل تختفي بسهولة، مع هذا التفسير البصري للممتلكات كليب / المستطيل CSS على النحو التالي!

متطلبات CSS كليب

المهمة بدأنا هو مقطع صورة مصغرة التالية في صورة squarer يبحث (وكذلك صورة واسعة الزاوية)

original_image clip_demo
الأصلي Thumbnal / صورة متطلبات كليب للحاوية فئة Thumbmail

النتائج CSS كليب

clip_results

عرض تجريبي | تحميل sourcefiles


2008 4 سبتمبر 2008

كتل صفحة ثابتة (ويبقى ثابت على نافذة التمرير) باستخدام CSS فقط

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

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

CSS
. ثابت {العرض: كتلة؛ Z-الفهرس: 10؛ اللون: # FFFFFF؛ تجاوز-X: خفي؛ تجاوز ص: خفية؛ الموقف: ixed؛
}
محتويات # {هامش: 100px 150px 160px 0px؛ الحدود: 1px الصلبة # e6e6e6}

# لف-T {الأعلى: 0px؛ خلفية: # 33CC66؛ العرض: 100٪؛ الطول: 55px؛}

# الختامية ل {الأعلى: 80px؛ خلفية: # FF9966؛ الطول: 300px؛ العرض: 150px؛ الحدود: 2px الصلبة # e6e6e6؛}

# الختامية ب {أسفل: 0px؛ خلفية: # 3333CC؛ العرض: 100٪؛ الطول: 55px؛}

# لف-R {الأعلى: 80px؛ الخلفية: # 6666FF؛ الطول: 300px؛ العرض: 140px؛ الحدود: 2px الصلبة # e6e6e6؛ حق: 0؛}

HTML
id="contents"> <div أنت محتويات الصفحة الرئيسية </ div> المصدر:
<div id="wrap-b" class="static">
ثابت المحتوى في أسفل الصفحة
</ div> المصدر:
<div id="wrap-t" class="static">
ثابت المحتوى على أعلى الصفحة
</ div> المصدر:

<div id="wrap-l" class="static">
غادر محتوى ثابت في الصفحة
</ div> المصدر:
<div id="wrap-r" class="static">
ثابت المحتوى على حق الصفحة
</ div> المصدر:

عرض عينة wroking هنا


2008 2 يوليو 2008

نحن نستخدم الموضع المطلق فو: تخطيط CCS بريليانت

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

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

تعلمون ان مشكلة لنا جميعا المطورين المغلق لديها مع تخطيطات التفكك (يتغير محتوى غير متوقعة التي تسبب الأعمدة بأكمله إلى التفاف، عندما نستخدم تخطيطات تعويم) ... حسنا! ويبدو التاريخ!
هذه التقنية تخطيط لا يزال صغيرا جدا، وعليه أن الحضيض من قبل جميع هؤلاء المعلمون المغلق هناك، وقبل أن يصبح معيارا للامم المتحدة مكتوب. انا سعيدة لاستخدامها الآن! ... وأنا بالفعل في منتصف تحويل لي اشكالية في وقت سابق / العائمة من الامم المتحدة وتخطيطات بالضرورة إلى تخطيط يندرج بالفعل ... ويسعدني أن أقول: "نحن بالفعل باستخدام الموضع المطلق فو لهذا الموقع بلوق وكذلك" ... اذهب تحاول ذلك، الآن!

شهرة اريك!


NDK الرئيسية | معربا عن تكنولوجيا المعلومات | الحنك تعرب | Penmenship تعرب | الرهبة تعرب | تعرب عن نفسي