صناديق بأشكال زجاجيه أحترافيه بتقنية CSS3

صناديق بأشكال زجاجيه أحترافيه بتقنية CSS3

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم .
السلام عليكم ورحمة الله وبركاته .
صناديق بأشكال زجاجيه أحترافيه بتقنية CSS3 :
ابتكرتك لكم اليوم صناديق أحترافيه بتقنية CSS3 وهي حقاَ جميلة وبشكل جذاب , يمكن اضافتها داخل المشكارة او خاجرها او في التخطيط او اي مكان يتقبل لغة html الصناديق تصميمها بسيط وغير معقد ولذالك هي جميلة في رائي.

مميزاتها : 

7 الوان للصناديق .
تم أضافة الخط الكوفي لها .
أشكال زجاجيه وجميلة .
خفيفة التصفح ولا تؤثر في سرعة المدونة .

مثال مباشر : من هنا 

طريقة التركيب : 

انسخ والصق هذا الكود فوق ]]></b:skin>

كود :

 holoblogger {
display: block;
padding: 3px;
color: #FFF;
text-align: right;
direction: rtl;
font: 12px 'DroidKufi-Regular',tahoma,arial;
border-radius: 4px;
max-width: 800px;
margin: 5px auto;
}
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}
holoblogger#Blue {
background: #64AEDF url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;
border: 1px solid #4A94C5;
  background-size: cover;
}
holoblogger#red {
background: #C93E3E url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;
border: 1px solid #AA2828;
  background-size: cover;
}
holoblogger#Green {
background: #3EC99D url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;
border: 1px solid #2BA37D;
  background-size: cover;
}
holoblogger#Gray {
background: #AFAFAF url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;
border: 1px solid #999;
  background-size: cover;
}
holoblogger#Black {
background: #222 url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;
border: 1px solid #111;
  background-size: cover;
}
holoblogger#Purple {
background: #9351DB url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;
border: 1px solid #8B24C5;
  background-size: cover;
}
holoblogger#Orange {
background: #E98745 url(https://jetara.googlecode.com/svn/trunk/header-6.png) no-repeat;
border: 1px solid #C06A2F;
  background-size: cover;
} 

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

احمر : 

صورة :

صندوق احمر css3

الكود :

 <holoblogger id='red'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger> 

اسود : 

صورة :

صندوق اسود css3

الكود :

 <holoblogger id='black'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger> 

ازرق : 

صورة :

صندوق ازرق css3

الكود :

 <holoblogger id='blue'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger> 

اخضر : 

صورة :

صندوق أخضر  css3

الكود :

 <holoblogger id='Green'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger> 

بنفسجي : 

صورة :

صندوق بنفسجي css3

الكود :

 <holoblogger id='Purple'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger> 

رمادي: 

صورة :

صندوق رمادي css3

الكود :

 <holoblogger id='Gray'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger> 

برتقالي :

صورة :

صندوق برتقالي css3

الكود :

 <holoblogger id='Orange'><p>جملة بسيطة اذا اردت وضعها هنا فتستطيع وضعها بكل سهوله من خلال كتابتها هنا ويتم ذالك بواسطة محرر القالب الافتراضي والذي يساعدنا في كتابة التدوينات دائما.</p></holoblogger> 

الصناديق من تصميم 7lol blogger

9:59 ص