Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

نحن ننصحك بقوة بترقية متصفحك إلى نسخة أحدث مثل أنترنت اكسيلورر ٨ أو فايرفوكس و الذي سيتيح لك تصفح أفضل ليس لموقعنا فقط بل في كل أرجاء الأنترنت..

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

Post Pic

5 أنماط لإقتباسات النصوص بواسطة css

الوسم blockquote يستخدم لعرض النصوص كالمقتطفات و الإقتباسات و العبارات المميزة. سأعرض في هذا الموضوع 5 طرق لإضافة شكل و إخراج مميز .

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


النص هنا

سأعرض هنا  5 أفكار لإعطاء هذا الوسم شكل مميز .

1-إطار واحد

هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل

كود الcss الخاص بذلك


blockquote {
margin: 1em 3em;
color: #4d4d4d;
border-right: 3px solid #4d4d4d;
padding-right: 1em;
}

2- علامة تنصيص

هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل هذا نص توضيحي للشكل   هذا نص توضيحي للشكل هذا نص توضيحي للشكل   هذا نص توضيحي للشكل هذا نص توضيحي للشكل   هذا نص توضيحي للشكل هذا نص توضيحي للشكل   هذا نص توضيحي للشكل هذا نص توضيحي للشكل

طول الصورة 128بكسل و بالتالي يجب ان نتأكد ان يكون طول المستطيل على الاقل 128 بكسل في المتصفحات القياسية يمكنك استخدام الخاصية min-height لتحديد اقل طول ممكن و لكن متصفحات انترنت اكسبلورر الاقدم لا تدعم هذه الخاصية و لكنها تتعامل مع قيمة الطول كاقل طول ممكن و لو زاد النص سيزيد الطول و بالتالي نستخدم * قبل html لان هذا الوسم لا يتعرف عليها إلا متصفح انترنت اكسبلور و تتجاهلله باقي المتصفحات ( لمزيد من المعلومات راجع هذا الموضوع )

الكود


blockquote {
margin: 1em 20px;
padding-right : 130px;
background: transparent url(images/blockquote.png) no-repeat right top ;
min-height:130px;
color:#005cb9;
font-style:italic
}
* html blockquote {
height:130px
}

احفظ الصورةالتالية

blockquote

و ضعهافي مجلد image

3-بين علامتي تنصيص

“نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي”

في هذا المثال سنقوم بإضافة علامتي التنصيص عن طريق css  قبل و بعد النص و ليس يدويا في كل مرة ندخل النص


blockquote {
color: #820041;
font-weight: bold;
font-style: italic;
margin: 1em 3em;
}
blockquote p:before {
content: '"'; }
blockquote p:after {
content: '"'; }

4-صندوق ملون

نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي نص توضيحي

شفرة css


blockquote {
display:block;
background :#f3f3f3;
border:1px solid #aaa;
padding:4px;
margin:1em 10px;
color:#aaa;
font-size:80%;

}

5-أقواس و ألوان

{نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  نص توضيحي  }

كود css


blockquote{
border-right:10px solid #808040;
color:#808040;
background :#dedebe
}

blockquote:before {
content: '{'; }
blockquote:after {
content: '}'; }

هناك أفكار لأشكال أكثر تعقيدا  للإقتباسات لكنني تجنبتها لانها تتطلب وجود وسوم أخرى مثل Div داخل وسم blockquote و بالتالي يتطلب تعديلا على شفرات الxhtml. لكن الأفكار التي عرضتها تتطلب فقط إضافة كود css بدون اي تعديل على شفرة xhtml

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

أوسمة : , , , ,

تعليقات الزوار (2)

[+] أضف تعليقك من فضلك



  1. Abdullah كتب:

    جزاك الله خير على هذا الشرح الرائع!
    استفدت من شكل الإقتباس في رقم 4.. وجدته مناسب جدا لمدونتي وقمت بتطبيقه فورا..

    شكرا جزيلا.. :P