الدكتور نت

الوسم 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
}

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

و ضعهافي مجلد 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: '}'; }