Arabic Knowledge blog مدونة المعرفة العربية : Top best pretty beutifual styles stylish for heading h1 h2 h3 h4 blog blogger blogspot? أفضل واجمل الأنماط الانسيابية العناوين

Top best pretty beutifual styles stylish for heading h1 h2 h3 h4 blog blogger blogspot? أفضل واجمل الأنماط الانسيابية العناوين

جميع الأمثلة المذكورة هي تطبق على العناوين h3 فإذا كنت ترغب بكتابة الكود لعنوان أخرى فما عليك سوي بتغير رقم العنوان مثلا h3 الي h2 او h1 او h4. ولتغير الألوان ما عليك سوى البحث عن اللون الذي ترغب فيه واستبداله في الكود.

How to create beautiful pretty heading title style stylish for your website blog? كيف تنشىء عناوين جملية باستخدام css html

كل ما عليك هو اتباع التعاليم التالية ونسخ وتعديل الكود والألوان حسب ذوقك ومزاجك.

style one example مثال واحد على عنوان h3

انسخ الكود

.post h3{
margin-top:10px;
    max-width:95%;
    padding:6px 2px;
color: #000000;
    padding-left:10px;
    margin-bottom:10px;
    font-size:20px;
    font-family:'Oswald',sans-serif;
    background-color:#F8FAFD;
    text-decoration:none;
    border-left:10px solid #05A8FC;
    box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
}
.post h3:hover {
  border-left:10px solid #FC2B2C;
}

كيف تستخدم الكود السابق

تذهب إلى HTML كود

وتضع الكود السابق بين.

تنسخ الكود السابق بدون. Post h3 {

}

كما في الصورة بالأسفل.

margin-top:10px;
    max-width:95%;
    padding:6px 2px;
color: #000000;
    padding-left:10px;
    margin-bottom:10px;
    font-size:20px;
    font-family:'Oswald',sans-serif;
    background-color:#F8FAFD;
    text-decoration:none;
    border-left:10px solid #05A8FC;
    box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
hover 
  border-left:10px solid #FC2B2C;

نمط العنوان على مستوى h3 داخل كود هتمل

وفي حال أردت تطبيق ذلك كقالب على مستوى المدونة انسخ الكود الأول بالكامل واتبع الخطوات التالية.

ادخل الي حساب المدونة
الذهاب إلى لوحة Dashboard blog
الذهاب إلى القوالب theme
اذهب الى خيار تعديل كود HTML
البحث عن </b:skin>
قبل كلمة </b:skin> كم بلصق الكود الأول بالكامل حفظ القالب ثم الذهاب إلى مدونتك الاختبار ومشاهده.

Example 2 for minor heading style

مثال ٢ على عنوان صغير في لغة الهتمل كود النمط css

انسخ كود css

.post h3 {
color:#222222;
border-left:10px solid #222222;
border-right:10px solid #222222;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #222222;
-webkit-box-shadow:0px 0px 13px #222222;
-moz-box-shadow:0px 0px 13px #222222;
}
.post h3:hover {
color:#219DFC;
border-left:10px solid #219DFC;
border-right:10px solid #219DFC;
box-shadow:0px 0px 13px #219DFC;
-webkit-box-shadow:0px 0px 13px #32A4FC;
-moz-box-shadow:0px 0px 13px #32A4FC;
}

Example 3 beauty and pretty heading css

مثال رقم ٣ على نمط عنوان جميل css

انسخ كود css

.post h3{
background: #F9F9F9;
font-family:'Oswald',sans-serif;
font-size: 120%;
padding: 6px 12px;
color: #333;
text-shadow: 1px 1px 1px #AAA;
border-bottom: 4px solid #03DA03;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 1px 1px 2px #AAA;
-moz-box-shadow: 1px 1px 2px #AAA;
box-shadow: 1px 1px 2px #AAA;
margin: 6px 3px;
text-transform: capitalize;
width: 95%;
line-height:1.0em;
}
.post h3:hover {
border-bottom: 4px solid #003F80;
}

Example 4 for beauty & pretty css h1

مثال رقم ٤ عنوان جميل جدا باستخدام css

انسخ كود css

.post h3 {
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
border: 3px solid rgb(251, 10, 38);
padding: 0px 1px 4px 14px;
box-shadow: rgb(251, 10, 38) 3px 3px3px;
color: rgb(251, 10, 38);
font-family:'Oswald',sans-serif;
font-size:120%;
font-weight:400;
margin: 0px 0px 1em;
text-transform: uppercase;
text-shadow: rgb(0, 0, 0) 1px 1px 0px;
}

Example 5 for beauty pretty heading Style

مثال ٥ لعناوين جميلة قالب css الأنماط الانسيابية

انسخ كود css لعناوين جميلة heading h1 h2 h3 h4

.post h3 {
border:3px dashed #000000;
border-bottom:5px solid #000000;
padding: 0px 1px 4px 14px;
box-shadow: rgb(251, 10, 38) 3px 3px 3px;
color: rgb(251, 10, 38);
font-family:'Oswald',sans-serif;
font-size:120%;
font-weight:400;
margin: 0px 0px 1em;
text-transform: uppercase;
text-shadow: rgb(0, 0, 0) 1px 1px 0px;
}

Example 6 pretty stylish h2

مثال ٦ لعناوين جميلة جدا h2 css

.post h3 {
background:#333;
margin:5px 4px 5px 0;
padding:9px 0 9px 10px;
border:0;
color:white;
font-size:120%;
line-height:16px;
font-family:'Oswald',sans-serif;
text-decoration:none;
text-transform:uppercase;
box-shadow:4px 4px 0px rgba(33,33,33,0.45);
}

Example 7 pretty beutifual styles stylish h1

مثال ٧ لعناوين جميلة ب css h1 h2 h3 h4

انسخ كود كيف تنشى عناوين جميلة ب css

.post h3 {
padding:5px;
border:5px outset #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}

Ex 8 pretty beutifual styles h1 h2 h3 h4

مثال على عناوين جميلة HTML css h1 h2

انسخ كود عناوين جميلة ب css HTML وطبق التعليمات في بداية المقال

.post h3 {
padding:5px;
border:5px dashed #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}

Ex 9 top beutifual css style heading h1

مثال ٩ لعناوين جميلة قالب أنماط انسيابية h1 h2 h3 h4

انسخ كود الأنماط الانسيابية المتتالية CSS html h1 h2 h3 h4 لعناوين جميلة لمدونتك

.post h3 {
padding:5px;
border:5px dotted rgb(251, 10, 38);
color:#000000;
font:140% 'Oswald',Sans-Serif;
}

Ex 10 top pretty beutifual heading h3

مثال ١٠ عناوين جميلة لمدونتك باستخدام css Html

انسخ الكود عناوين جميلة لمدونتك باستخدام css HTML h1 h2 h3 h4. Heading

.post h3 {
padding:5px;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
color:#333333;
font:140% 'Oswald',Sans-Serif;
text-transform: uppercase;
}