إطار مظلل بلا صور

من خلال مشاهداتي لأساليب التصميم المختلفة المتبعة لإنشاء إطار حول صندوق أو صورة لاحظت أن يتم استخدام طريقتين فقط.

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

الثانية : هي وجود صورة كخلفية بشكل كامل و بهذا فهي معدّة سلفا لطول و عرض محددين.

لا أعلم إن كنت حتى الآن عرفت عن أي شيء أتكلم ، انظر هذه الصورة و ستعرف عما أتكلم.

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

الطريقة التي خطرت لي هي كالتالي :
div ضمن div ضمن div ضمن … عدد معين منهم و كل واحدة تملك إطار Border لونه أقل من الآخر و بعرض 3 بكسل مثلا ، ستشكل بمجموعها إطار يكافئ الحالات السابقة إلا أنه بدون استخدام صور و ملائم في أي مكان.
إليكم الكود :

CSS

.pict{
width: 100px;
height: 100px;
padding: 0;
background-color: #FFFFFF;
}
.pict div{
border: 3px solid #FEFEFE;
padding: 0;
}
.pict div div{
border: 3px solid #FCFCFC;
padding: 0;
}
.pict div div div{
border: 3px solid #F9F9F9;
padding: 0;
}
.pict div div div div{
border: 3px solid #F5F5F5;
padding: 0px;
}
.pict div div div div div{
border: 3px solid #F0F0F0;
padding: 5px;
}
.pict div div div div div *{
border:0;
padding: 1px;
}

مثال :

مرحبا ، هذه تجربة لصندوق بطول 125 و عرض 125 !

اضغط هنا لتحصل على ملف مضغوط يحوي كود css مع صفحة html تستخدمه.

Advertisements

الأوسمة: , , , ,

7 تعليقات to “إطار مظلل بلا صور”

  1. rania Says:

    hi salam
    كيفك

  2. سلام Says:

    أهلين رانيا

  3. علوش Says:

    يا زلمة اجيت لعلق طلعلي جمع رقمين، ضليت دقيقة لعرفت الناتج

    يا سيدي ولو إني ما فهمت شي، بس روعة، لأ يعني أكيد لازم يكون روعة، لأنو كل انسان بيفهم بالبرمجة عنجد هذا ثروة وطنية…

    يسلمو كتير.

  4. Hisham Says:

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

  5. محمد Says:

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

  6. أحمد نذير بكداش Says:

    شكرا أخي, لأن هل أيام عم طور وعدل في القالب الذيب استخدمه فقد أحناج لهذا

    شكرا

  7. slim Says:

    أخويه ممكن تشرح طريقة اذا مررت المؤشر على كلمة تحاظ بمستطيل مثل ما موجود بالموقع مثال على الجوانب التي هنا

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: