بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم .
السلام عليكم ورحمة الله وبركاته .
صناديق بأشكال زجاجيه أحترافيه بتقنية CSS3 :
ابتكرتك لكم اليوم صناديق أحترافيه بتقنية CSS3 وهي حقاَ جميلة وبشكل جذاب , يمكن اضافتها داخل المشكارة او خاجرها او في التخطيط او اي مكان يتقبل لغة html الصناديق تصميمها بسيط وغير معقد ولذالك هي جميلة في رائي.
مميزاتها :
- 7 الوان للصناديق .
- تم أضافة الخط الكوفي لها .
- أشكال زجاجيه وجميلة .
- خفيفة التصفح ولا تؤثر في سرعة المدونة .
مثال مباشر : من هنا
طريقة التركيب :
- انسخ والصق هذا الكود فوق ]]></b:skin>
كود :
/* this boxs by : http://www.7lolblogger.com */
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;
}
احمر :
صورة : |
| صندوق احمر 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>
اتمنى ان تنال اعجابكم.....كلمة شكر تكفي
