Archive for the ‘CSS’ Category

إنشاء محتويات عائمة في ووردبرس

2010/05/04
يتيح ووردبرس لمستخدميه إمكانية كتابة تعليمات CSS في محتوى التدوينات و الصفحات و الصناديق الجانبية، و هذه ميزة رائعة فهي تمكن المستخدم من القيام بالكثير من التعديلات في مدونته.
لا أريد أن أطيل، سأتحدث عن كيفية إنشاء صندوق عائم في المدونة كالذي أضفته اليوم على اليسار و هو يحوي روابط كصور تقود إلى حساباتي في فلكر و تويتر و خلاصات المدونة بالإضافة إلى الابتسامة التي تؤدي إلي هذه التدوينة.
لإنشاء محتوى عائم في الصفحة نستخدم تعليمة position في CSS بالإضافة لـ left, right, top, bottom تأخذ الخاصية position القيم relative, absolute, fixed ، لجعل المحتوى في موضع مطلق بالنسبة للصفحة ثم نتحكم بهذا الموضع نستخدم absolute و لجعل المحتوى مثبت نستخدم fixed ثم نحدد المكان بالضبط من خلال left, right, top, bottom

مثال:

<div style="position:absolute;top:10px;right:10px;">
Hello
</div>

مثال 2:
<div style="position:fixed;top:300px;left:0;color:white;
width:100px;height:100px;background-color:red;">
Hello 2
</div>

نكتب هذه التعليمات في صندوق من نوع نص في لوحة تحكم ووردبرس، يمكن القيام بالكثير من الأشياء المشابهة، يمكن مثلا إنشاء شيء مشابه يظهر في تدوينة معينة فقط (قد أكتب تفصيلات أكثر لاحقا) كتبت الآن موجزا سريعا.

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

Advertisements

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

2008/02/21

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

الأولى : تقوم على وجود جدول مقسم إلى خلايا بحيث يوجد في الخلايا المحيطية صور صغيرة هي عبارة عن تقطيعات لصورة أو مقاطع بعرض أو ارتفاع 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 تستخدمه.