تم النشر فى :26 - 12 - 2016 |
| | | البيانات | عدد المساهمات : | 779 | السٌّمعَة : | 3 | تاريخ الميلاد : | 11/09/1998 | تاريخ التسجيل : | 11/08/2016 | العمر : | 26 | العمل/الترفيه : | عسكري |
|
|
موضوع: [css] صناديق ملاحظات جديده مثل الموجود في انكور [css] صناديق ملاحظات جديده مثل الموجود في انكور [css] صناديق ملاحظات جديده مثل الموجود في انكور
للمشاهدة
للتركيب
اولا ع الكود التالي في ورقة الـ css - الكود:
-
.note { position: relative; width: 70%; padding: 1.2em 1.5em; margin: 2em auto; color: #fff; background: #343436; overflow: hidden; text-align: right; font-size: 14px; } .note.black { background: #343436; } .note.blue { background: #3498DB; } .note.red { background: #ea6153; } .note.purple { background: #9B59B6; } .note.yellow { background: #F1C40F; } .note.turquoise { background: #1ABC9C; } .note.red:before { border-color: #fff #fff #ea6153 #ea6153; background: #ea6153; } .note.blue:before { border-color: #fff #fff #3498DB #3498DB; background: #3498DB; } .note.purple:before { border-color: #fff #fff #9B59B6 #9B59B6; background: #9B59B6; } .note.yellow:before { border-color: #fff #fff #F1C40F #F1C40F; background: #F1C40F; } .note.turquoise:before { border-color: #fff #fff #1ABC9C #1ABC9C; background: #1ABC9C; } .note:before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 16px 16px 0; border-style: solid; border-color: #fff #fff #343436 #27ae60; background: #27ae60; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2); display: block; width: 0 }
والان اختار اللون الذي يناسبك وضعه في المكان الذي تريدهالاسود كود بلغة HTML: - الكود:
-
<div class='note black'>النص المراد ظهورة</div> الازرق كود بلغة HTML: - الكود:
-
<div class='note blue'>النص المراد ظهورة</div> الاحمر كود بلغة HTML: - الكود:
-
<div class='note red'>النص المراد ظهورة</div> النيلي كود بلغة HTML: - الكود:
-
<div class='note purple'>النص المراد ظهورة</div> الاصفر كود بلغة HTML: - الكود:
-
<div class='note yellow'>النص المراد ظهورة</div> تركوازي كود بلغة HTML: - الكود:
-
<div class='note turquoise'>النص المراد ظهورة</div> الموضوع الاصلي شركة انكور التطويرية |
|
السبت مارس 11, 2017 7:49 pm | المشاركة رقم: # |
المعلومات | الكاتب: | | اللقب: | عضو فعال | الرتبه: | | الصورة الرمزية | | البيانات | عدد المساهمات : | 3211 | السٌّمعَة : | 3 | تاريخ التسجيل : | 15/02/2017 |
الإتصالات | الحالة: | | وسائل الإتصال: | |
| موضوع: رد: [css] صناديق ملاحظات جديده مثل الموجود في انكور بارك الله فيك على هذا الجهد
والتميز في مواضيعك المفيدة والقيمة
|
| |