البرنامج المستخدم : محرر أكواد
الصعوبة : سهل - متوسط
مثال حي : CSS3 Logo
ربما يظهر الموضوع بتنسيق ضعيف هنا ، الرجاء الإطلاع علي الموضوع من المصدر إن أردت الحصول علي التنسيق الكامل .
بسم الله الرحمن الرحيم ، اليوم ان شاء الله راح نصمم معكم شعار بسيط وجميل ، بدون الإستعانة بأية برامج تصميم ، فقط ، العملاقة CSS مع لمسات CSS3 لنجعله أشبه بتصميم ببرنامج تصميم مثل الفوتوشوب
ماذا سنستخدم ؟
لكي لا نعقد شرحنا ونجعله أسهل بكثير لك ولتتعلم عناصر الدرس المستخدمة قبل الدخول في الدرس . سنعرض لك الخواص التي سنستخدمها في CSS لكي تفهم .
اللغات والخواص المستخدمة :
CSS3
@font-face : سنستخدم الخاصية الرائعة @font-face لنقوم بإستخدام خطوط خارجية من عندنا
يمكنك تحميل الخطوط المستخدمة من هنا :
إضغط هنا لتحميل الخطوط
Text Shadow : سنستخدم خاصية text-shadow لكي نقوم بإعطاء ظل بسيط للنص بشكل بسيط وجميل .
الخطوة الأولي : أساس الصفحة والشعار (HTML)
سنقوم في البداية بوضع h1 وبداخله اثنين span
السبب في ذلك ، اننا سنقوم بجعل جزء من النص خفيف (light) وجزء منه ثقيل (Bold)
سنضع ARAB في span لحالها ، وسنعطيه الكلاس fir وسنضع WEB في Span أخري ونعطيها الكلاس sec
كالتالي :
وطبعاً لا ننسي الDoctype والترميز وعنوان الصفحة
رمز Code:
CSS3 Logo
ARBWEB
ربط HTML مع CSS
سنقوم الآن بإستدعاء ملف الCSS عبر ملف الHTML الخاص بنا . سننشأ ملف جديد وسنسميه مثلاً style.css
وسنستدعي هذا الملف داخل ملف الHTML كالتالي :
رمز Code:
CSS3 Logo
ARBWEB
تنسيق وتصميم الشعار (CSS)
الآن داخل ملف الstyle.css
سنقوم بتنسيق الشعار لكي يظهر بصورة جيدة وجميلة جداً ، وكأنه مصمم ببرنامج مثل الفوتوشوب .
في البداية سنستخدم font-face لكي نستدعي ملفات الخطوط .
سنضع التالي :
رمز Code:
@font-face{
font-family: "logo-light";
src:url(Sansation_Light.ttf);
}
@font-face{
font-family: "logo-bold";
src:url(Sansation_Regular.ttf);
}
ملاحظة : لاتنس فك الضغط عن ملف الخطوط وإرفاقه مع ملفات الHTML-CSS
في البداية وضعنا @font-face لكي نقوم بإستدعاء ملفات الخطوط . إستدعينا في البداية الخط الأول ، وهو الخط الخفيف (Light) وأعطيناه الإسم logo-light
واستدعينا الbold واعطيناه الإسم logo-bold
إستخدمنا src و url لكي نستدعي الملفات ونحدد مسارها .
الآن ماذا لو أردنا إستخدام هذه الخطوط الجميلة ؟
فقط نقوم بوضع التالي :
رمز Code:
font-family:"logo-light";
أرأيتم سهولة إستخدام الخطوط الخارجية مع font-face ؟
الآن سنقوم بإعطاء الخواص الأساسية للh1 الخاص بالشعار .
H1 CSS
سنقوم بوضع بعض الخواص المعروفة التي يعرفها الجميع في CSS للعنصر h1
طبعاً أعطينا الh1 الكلاس لوجو ، إذن سنضع h1 ثم نقطة ثم إسم الكلاس وهو logo
سنضع بعض الخواص لتكبير النص وجعله في منتصف الصفحة وسنقوم بإعطاء النص لون رصاصي غامق :
رمز Code:
h1.logo{
font-size:80px;
text-align:center;
color:#383838;
}
H1 TEXT-SHADOW
سنقوم بإعطاء ظل بسيط للشعار الخاص بنا ، وسنجعل الblur الخاص به صفر ، لكي يصبح النص الخاص بنا وكأنه ثلاثي أبعاد
الsyntax الخاص بالtext-shadow هو :
أول شئ نضع الx-cooridinate المتعلقة بالإحداثيات وتكون بالبكسل
ثاني شئ الy-cooridinate
ثالث شئ هو الblur وممكن نسميه الثقل ، لما يزيد ، تجد الظل خفيف ، وعندما يصبح صغر تجد الظل قوي وكأنه متجمد
آخر شئ نضع اللون الخاص بالظل .
سنضع التالي كخاصية من خواص الh1 :
رمز Code:
text-shadow: 3px 1px 0px #808080;
إذن الblur صفر واللون مائل لللون الرصاصي .
سيصبح الh1 كالتالي :
رمز Code:
h1.logo{
font-size:80px;
text-align:center;
text-shadow: 3px 1px 0px #808080;
color:#383838;
}
الآن سنعمل لكي نجعل كلمة arb بالخط الخفيف light وكلمة web بالخط الثقيل bold
سنضع التالي :
رمز Code:
span.fir{
font-family: "logo-light";
}
span.sec{
font-family: "logo-bold";
}
طبعاً نحن عرفنا هذه الخطوط عبر font-face في بداية كود الCSS
سيكون ملف style.css كالتالي :
رمز Code:
@font-face{
font-family: "logo-light";
src:url(Sansation_Light.ttf);
}
@font-face{
font-family: "logo-bold";
src:url(Sansation_Regular.ttf);
}
h1.logo{
font-size:80px;
text-align:center;
text-shadow: 3px 1px 0px #808080;
color:#383838;
}
span.fir{
font-family: "logo-light";
}
span.sec{
font-family: "logo-bold";
}
وسيكون ملف الHTML كالتالي :
رمز Code:
CSS3 Logo
ARBWEB
سنحصل علي نفس النتيجة : الموجودة في المثال الحي في بداية الموضوع
الخاتمة
لم نقم بإستخدام تقنيات قوية في لغة CSS بل إستخدمنا أبسط الأشياء مثل font-face و text-shadow لكي نبسط الدرس ونجعل النتيجة بسيطة وجميلة
وتذكر انه يمكننا إستخدام التدرج اللوني و و و ، فCSS3 وCSS بشكل عام ، أكبر من ذلك بكثير
أتمني ان يكون أعجبكم الدرس .
والسلام عليكم ورحمة الله وبركاته .
المصدر :
عرب ويب | تطوير المواقع » تصميم شعار بسيط ورائع فقط عبر CSS3 !
