أفضل 10 أمثلة على CSS لتصميمات الطباعة المذهلة

نشرت: 2018-11-13

المحارف تغير التصور أو التصميم الخاص بك. إذا اخترت الخط المناسب مع وزن الخط المثالي ، وارتفاع الخط ، والحجم ، واللون بالإضافة إلى المساحة المتروكة والموضع المثاليين ، فإن هذا يعد بالفعل 50٪ من النجاح.

إذا قمت بتشغيل موقع الويب الخاص بك على WordPress ، فيمكنك استخدام علامة تبويب CSS الإضافية في Live Customizer لإدراج CSS مخصص وتغيير مظهر العناصر المحددة لموضوع WP الخاص بك بما في ذلك الشعار والنصوص في مقالاتك ولون خلفية صفحات النشر الخاصة بك ، إلخ.

لقد جمعت عددًا من مقتطفات أكواد الطباعة التي يمكنك استخدامها كـ CSS مخصص في أداة التخصيص الخاصة بك لتغيير مظهر شعار موقع الويب الخاص بك. في الجداول الموجودة أسفل كل لقطة ، سترى CSS الأصلي ، لكن اللقطات نفسها تظهر أنني قمت بتغيير أحجام الخطوط قليلاً لجعلها تتطابق مع شعاري. لذا استمتع!

المدينة المدفونة

h1 {
اللون: # 231900 ؛
عائلة الخطوط: "Open Sans" ؛
حجم الخط: 94 بكسل ؛
وزن الخط: 800 ؛
تباعد الأحرف: -2 بكسل ؛
ارتفاع الخط: 84 بكسل ؛
الهامش السفلي: 72 بكسل ؛
تحويل النص: الأحرف الكبيرة ؛
}

ص {
اللون: # 231900 ؛
عائلة الخطوط: "Crimson Text" ؛
حجم الخط: 34 بكسل ؛
وزن الخط: 500 ؛
ارتفاع الخط: 48 بكسل ؛
الهامش السفلي: 48 بكسل ؛
أقصى عرض: 650 بكسل ؛
}

أ {
اللون: # 231900 ؛
}

أ: تحوم {

}

كوينزتاون

h1 {
اللون: # 111 ؛
عائلة الخطوط: "قطيفة" ؛
حجم الخط: 60 بكسل ؛
وزن الخط: 900 ؛
ارتفاع الخط: 60 بكسل ؛
الهامش السفلي: 60 بكسل ؛
المساحة المتروكة: 100 بكسل ؛
الموقف: نسبي ؛
}

h1: قبل {
الخلفية: # 111 ؛
المحتوى: ''؛
العرض محجوب؛
الارتفاع: 60 بكسل ؛
اليسار: 0 بكسل ؛
الموقف: مطلق.
أعلى: 10 بكسل ؛
العرض: 6 بكسل ؛
}

ص {
اللون: # 444 ؛
عائلة الخطوط: "Open Sans" ؛
حجم الخط: 18 بكسل ؛
وزن الخط: 500 ؛
ارتفاع الخط: 36 بكسل ؛
مسافة بادئة نصية: 36 بكسل ؛
الهامش الأيسر: 100 بكسل ؛
}

أ {
اللون: # 0abfdc ؛ وزن الخط: عريض ؛
}

أ: تحوم {
اللون: # 111 ؛
}

الظرف - المغلف

h1 {
اللون: #fff ؛
عائلة الخطوط: "Cormorant Garamond" ؛
الحد السفلي: 3 بكسل صلب # e66c7e ؛
حجم الخط: 48 بكسل ؛
وزن الخط: 400 ؛
ارتفاع الخط: 72 بكسل ؛
تباعد الحروف: 35 بكسل ؛
الهامش السفلي: 57 بكسل ؛
محاذاة النص: مركز ؛
مسافة بادئة نصية: 24 بكسل ؛
تحويل النص: الأحرف الكبيرة ؛
}

ص {
اللون: #fff ؛

عائلة الخطوط: "Cormorant Garamond" ؛
حجم الخط: 28 بكسل ؛
نمط الخط: مائل ؛
وزن الخط: 400 ؛
ارتفاع الخط: 48 بكسل ؛
أقصى عرض: 640 بكسل ؛
الهامش: 0 تلقائي 48 بكسل ؛
محاذاة النص: مركز ؛
}

أ {
اللون: # e66c7e ؛ الحد السفلي: 2 بكسل صلب # e66c7e ؛
عائلة الخطوط: "Cormorant Garamond" ؛
حجم الخط: 16 بكسل ؛
وزن الخط: 700 ؛
تباعد الحروف: 3 بكسل ؛
زخرفة النص: لا شيء ؛
تحويل النص: الأحرف الكبيرة ؛
}

أ: تحوم {
اللون: #fff ؛
الحد السفلي: 2px صلب #fff ؛
}

رمل

h1 {
اللون: # 252010 ؛
عائلة الخطوط: "Expletus Sans" ؛
حجم الخط: 48 بكسل ؛
وزن الخط: 400 ؛
ارتفاع الخط: 60 بكسل ؛
الهامش السفلي: 48 بكسل ؛
تباعد الأحرف: -1 بكسل ؛
تحويل النص: لا شيء ؛
}

ص {
اللون: # 40371D ؛
عائلة الخطوط: "Dosis" ؛
حجم الخط: 22 بكسل ؛
وزن الخط: 400 ؛
ارتفاع الخط: 36 بكسل ؛
الهامش السفلي: 36 بكسل ؛
}

أ {
اللون: # 5cd8b6 ؛
}

أ: تحوم {

}

أرديلا

h1 {color: # d54d7b؛ عائلة الخطوط: "Great Vibes" ، مخطوطة ؛ حجم الخط: 165 بكسل ؛ ارتفاع الخط: 160 بكسل ؛ وزن الخط: عادي ؛ الهامش السفلي: 0 بكسل ؛ أعلى الهامش: 40 بكسل ؛ محاذاة النص: مركز ؛ ظل النص: 0 1px 1px #fff ؛ }


ص {اللون: # 7a7c7f ؛ حجم الخط: 29 بكسل ؛ عائلة الخطوط: "Libre Baskerville"، serif؛ ارتفاع الخط: 45 بكسل ؛ محاذاة النص: مركز ؛ ظل النص: 0 1px 1px #fff ؛ أعلى الحشو: 20 بكسل ؛ }


p.byline {font-style: italic؛ اللون: # B6B6B6 ؛ حجم الخط: 24 بكسل ؛ أعلى الهامش: 20 بكسل ؛ محاذاة النص: مركز ؛ ظل النص: 0 1px 1px #fff ؛ }

الطاووس

h1 {color: # CEF0D4 ؛ عائلة الخطوط: "Rouge Script" ، مخطوطة ؛ حجم الخط: 130 بكسل ؛ وزن الخط: عادي ؛ ارتفاع الخط: 48 بكسل ؛ الهامش: 0 0 50 بكسل ؛ محاذاة النص: مركز ؛ ظل النص: 1px 1px 2px # 082b34 ؛ }


h2 {color: # a7e8f8؛ عائلة الخطوط: 'Julius Sans One'، sans-serif؛ حجم الخط: 22 بكسل ؛ وزن الخط: عريض ؛ ارتفاع الخط: 32 بكسل ؛ الهامش: 0 0 24px ؛ ظل النص: 1px 1px 1px # 082b34 ؛ }


ص {اللون: #FFFFFF ؛ عائلة الخطوط: 'Carme'، sans-serif؛ حجم الخط: 16 بكسل ؛ ارتفاع الخط: 24 بكسل ؛ الهامش: 0 0 24px ؛ }


أ {اللون: # CEF0D4 ؛ زخرفة النص: تسطير ؛ }


أ: تحوم {color: # a7e8f8؛ زخرفة النص: تسطير ؛ }

عريض

h1 {color: # 111؛ عائلة الخطوط: 'Helvetica Neue'، sans-serif؛ حجم الخط: 275 بكسل ؛ وزن الخط: عريض ؛ تباعد الأحرف: -1 بكسل ؛ ارتفاع الخط: 1 ؛ محاذاة النص: مركز ؛ }


h2 {color: # 111؛ عائلة الخطوط: "Open Sans"، sans-serif؛ حجم الخط: 30 بكسل ؛ وزن الخط: 300 ؛ ارتفاع الخط: 32 بكسل ؛ الهامش: 0 0 72 بكسل ؛ محاذاة النص: مركز ؛ }


ص {اللون: # 685206 ؛ عائلة الخطوط: 'Helvetica Neue'، sans-serif؛ حجم الخط: 14 بكسل ؛ ارتفاع الخط: 24 بكسل ؛ الهامش: 0 0 24px ؛ محاذاة النص: ضبط ؛ تبرير النص: بين الكلمات ؛ }

الحقيقة

h1 {color: # b48608؛ عائلة الخطوط: "Droid serif" ، serif ؛ حجم الخط: 36 بكسل ؛ وزن الخط: 400 ؛ نمط الخط: مائل ؛ ارتفاع الخط: 44 بكسل ؛ الهامش: 0 0 12 بكسل ؛ محاذاة النص: مركز ؛ }


ص {اللون: #eee؛ عائلة الخطوط: 'Droid Sans'، sans-serif؛ حجم الخط: 15 بكسل ؛ وزن الخط: 400 ؛ ارتفاع الخط: 24 بكسل ؛ الهامش: 0 0 14px ؛ }


أ {color: # b48608؛ زخرفة النص: لا شيء ؛ الحد السفلي: 1 بكسل صلب # 4c3a07 ؛ }


أ: تحوم {color: #fff؛ الخلفية: # b48608 ؛ }


.date {border-top: 1px solid #fff؛ الموقف: نسبي ؛ أعلى: 20 بكسل ؛ الهامش السفلي: 30 بكسل ؛ }


.date span {color: # 000؛ زخرفة النص: لا شيء ؛ نمط الخط: مائل ؛ حجم الخط: 13 بكسل ؛ محاذاة النص: مركز ؛ الحشو: 2 بكسل 5 بكسل ؛ الخلفية: #fff ؛ العرض: 120 بكسل ؛ الهامش: 0 تلقائي ؛ العرض محجوب؛ الموقف: نسبي ؛ أعلى: -10 بكسل ؛ عائلة الخطوط: "Droid serif" ، serif ؛ }


a.btn {font-family: 'Droid serif'، serif؛ الخلفية: # b48608 ؛ الحشو: 4 بكسل 7 بكسل ؛ اللون: # 000 ؛ زخرفة النص: لا شيء ؛ الهامش: 0 تلقائي ؛ العرض: 100٪؛ العرض: 120 بكسل ؛ الهامش: 0 تلقائي ؛ العرض محجوب؛ محاذاة النص: مركز ؛ نمط الخط: مائل ؛ }


a.btn: تحوم {color: # 000؛ الخلفية: #fff ؛ }


.left {float: left؛ الهامش: 0 5٪ 30px 0 ؛ العرض: 30٪؛ }


.right {float: right؛ الهامش: 0 0 30px 0 ؛ العرض: 30٪؛ }

لا تتذوقني يا أخي

h1 {color: #ffffff؛ عائلة الخطوط: "Raleway"، sans-serif؛ حجم الخط: 62 بكسل ؛ وزن الخط: 800 ؛ ارتفاع الخط: 72 بكسل ؛ الهامش: 0 0 24px ؛ محاذاة النص: مركز ؛ تحويل النص: الأحرف الكبيرة ؛ }


h2 {color: #ffffff؛ عائلة الخطوط: "Raleway"، sans-serif؛ حجم الخط: 30 بكسل ؛ وزن الخط: 800 ؛ ارتفاع الخط: 36 بكسل ؛ الهامش: 0 0 24px ؛ محاذاة النص: مركز ؛ }


ص {اللون: # f8f8f8 ؛ عائلة الخطوط: "Raleway"، sans-serif؛ حجم الخط: 18 بكسل ؛ وزن الخط: 500 ؛ ارتفاع الخط: 32 بكسل ؛ الهامش: 0 0 24px ؛ }


أ {color: # c8c8c8؛ زخرفة النص: تسطير ؛ }


أ: تحوم {color: # 1c1c1c؛ زخرفة النص: تسطير ؛ }

حديث بلا

h1 {color: # 111؛ عائلة الخطوط: "Open Sans Condensed"، sans-serif؛ حجم الخط: 64 بكسل ؛ وزن الخط: 700 ؛ ارتفاع الخط: 64 بكسل ؛ الهامش: 0 0 0 ؛ الحشو: 20 بكسل 30 بكسل ؛ محاذاة النص: مركز ؛ تحويل النص: الأحرف الكبيرة ؛ }


h2 {color: # 111؛ عائلة الخطوط: "Open Sans Condensed"، sans-serif؛ حجم الخط: 48 بكسل ؛ وزن الخط: 700 ؛ ارتفاع الخط: 48 بكسل ؛ الهامش: 0 0 24px ؛ الحشو: 0 30 بكسل ؛ محاذاة النص: مركز ؛ تحويل النص: الأحرف الكبيرة ؛ }


ص {اللون: # 111 ؛ عائلة الخطوط: "Open Sans"، sans-serif؛ حجم الخط: 16 بكسل ؛ ارتفاع الخط: 28 بكسل ؛ الهامش: 0 0 48px ؛ }


أ {اللون: # 990000 ؛ زخرفة النص: لا شيء ؛ }


a: التمرير فوق {text-decoration: underline}


.date {color: # 111؛ العرض محجوب؛ عائلة الخطوط: "Open Sans"، sans-serif؛ حجم الخط: 16 بكسل ؛ الموقف: نسبي ؛ محاذاة النص: مركز ؛ مؤشر z: 1 ؛ }


.date: before {border-top: 1px solid # 111؛ المحتوى: ""؛ الموقف: مطلق. أعلى: 12 بكسل ؛ اليسار: 0؛ العرض: 100٪؛ مؤشر z: -1 ؛ }


. المؤلف {color: # 111؛ العرض محجوب؛ عائلة الخطوط: "Open Sans"، sans-serif؛ حجم الخط: 16 بكسل ؛ الحشو السفلي: 38 بكسل ؛ الموقف: نسبي ؛ محاذاة النص: مركز ؛ مؤشر z: 1 ؛ }


.author: before {border-top: 1px solid # 111؛ المحتوى: ""؛ الموقف: مطلق. أعلى: 12 بكسل ؛ اليسار: 0؛ العرض: 100٪؛ مؤشر z: -1 ؛ }


.date span ،

.author span {background: #fdfdfd؛ الحشو: 0 10 بكسل ؛ تحويل النص: الأحرف الكبيرة ؛ }


.line {border-top: 1px solid # 111؛ العرض محجوب؛ أعلى الهامش: 60 بكسل ؛ أعلى الحشو: 50 بكسل ؛ الموقف: نسبي ؛ }


.read-more {-moz-border-radius: 50٪ ؛ -موز-الانتقال: كل 0.2 ثانية سهولة في الخروج ؛ نصف قطر مجموعة الويب الحدودية: 50٪ ؛ - الانتقال إلى مجموعة الويب: سهولة الدخول والخروج كلها 0.2 ثانية ؛ الخلفية: # 111 ؛ نصف قطر الحدود: 50٪ ؛ الحدود: 10 بكسل صلب #fdfdfd ؛ اللون: #fff ؛ العرض محجوب؛ عائلة الخطوط: "Open Sans"، sans-serif؛ حجم الخط: 14 بكسل ؛ الارتفاع: 80 بكسل ؛ ارتفاع الخط: 80 بكسل ؛ الهامش: -40 بكسل 0 0 -40 بكسل ؛ الموقف: مطلق. أسفل: 0 بكسل ؛ اليسار: 50٪؛ محاذاة النص: مركز ؛ تحويل النص: الأحرف الكبيرة ؛ العرض: 80 بكسل ؛ }


.read-more: مرر {background: # 990000؛ زخرفة النص: لا شيء ؛ }

اتمنى ان تعجبك المجموعة

ميلاني هـ.