كيفية تصميم علم الإمارات - emirates flag يإستخدام Html and Css
كيفية تصميم علم الإمارات بلغتى Html And Css وسوف نتعرف على التصميم خطوة خطوة
| webPrey فى هذا المقال سوف نتعلم كيفية تصميم علم الإمارات العربيه المتحده بال Html & Css وإزاى نعمل أنميشن (animation) فى التصميم وكمان هنتعرف على إزاى تبدأ تصميم صح من غير عشوائية وبنظام سليم .
محتويات المقال
المقدمة
كيف نعد للتصميم
html code
css code
الخلاصة ( هات من الأخر)
هنتعلم مع بعض فى هذا المقال كيفية تصميم علم الإمارات بلغتى Html And Css وسوف نتعرف على التصميم خطوة خطوة وهنبدأ مع بعض وحدة وحدة وكمان الكود هيكون متوفر للى حابب يتعلم منة؟طبعأ علشان تشتغل وتكتب أكواد لازم يكون عندك برنامج لتحرير النصوص مثل Notepad ولكن هذا البرنامج لا يوجد بة أى إمكانيات تساعدك أثناء التكويد.
إشتغل على برنامج Visual Studio Code ولو مش عندك حملة من على الإنترنت .
او ممكن تحمله من الموقع الرسمى من هنا
مميزاته
- برنامج سهل وبسيط.
- بيساعدك على كتابة الكود.
- لو نسيت خاصية وفاكر أول كام حرف منها بيكملهالك.
- بيعمل خط أحمر تحت الكلمة اللى فيها خطأ.
- بينسق الكود ويخلية منظم بحيث يسهل قراءتة.
- وأهم ميزة بالنسبالى وبالنسبة لكل المبرمجين أنة بة نظام ال Dark mood
- ومميزات تانية كتير.
كيف نعد للتصميم
كيف نبدأ عملية الإعداد للتصميم بطريقة صحيحة , فية أكثر من طريقة لتبدأ عملية التصميم الصحيحة .أول طريقة
- إعمل فولدر وسميه بأسم المشروع وليكن سميتة Flag.
- داخل الفولدر دة هتحط الملفات والملحقات اللى هستخدمها فى التصميم بتاعك.
- ودى طريقة عشوائية جداُ وهتسببلك توهان ولغبطة خصوصاً لو إنتة شغال على مشروع كبير.
ثانى طريقة
- إعمل فولدر وسميه بنفس إسم المشروع مثلاً سميتة Flag.
- داخلة أعمل folder للصور ,وأعمل folder لملفات ال Css بمعنى أصح خصص لكل حاجة فولدر خاص بيها.
- ودة هيخلى شغلك مرتب أكتر ومش هتتلغبط ولا هتوه فى حاجة.
لية الطريقة الأولى عشوائية
- مفيش نظام كل الملفات مع بعض فى فولدر واحد الصور مع ملفات ال css مع ملف ال html .
- عامل زى الإنسان العشوائى يصحى من النوم يدور على تليفونة وعلى الساعة بتاعتة وغرفتة مبهدله خالص ومش منظمة.
- تخيل إنك شغال على مشروع كبير وعندك 100صورة و 10ملفات css مثلا مع بعض فى folder واحد ومحتاج ملفة css معين هتعمل إى ؟
- أكيد هتدوخ علشان تلاقية والصور هتتعبك لانها موجودة فى نفس المكان
- وإنتة لية تشوف الصور أصلا وإنتة عايز ملف css , عايز ملف css يبقى أدخل على folder فية ملفات css فقط , عايز صورة يبقى أخش على folder فية صور فقط أظن واضحة جداً .
html code
وهنا هنكتب كود Html لعلم الإمارات والعلم يتكون من أربعة ألوان أخضر , أبيض , أسود , أحمر.إسم ملف ال Html هو emarat.htmlلو حابب تغير الأسم براحتك .
الكود
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>egypt flag</title>
<link rel="stylesheet" href="css/emarat.css">
<!--make elements normal and no problem in deferent browsers-->
<link rel="stylesheet" href="css/normalize.css">
<!-- font awestom library-->
<link rel="stylesheet" href="css/all.min.css">
</head>
<body>
<div class="flag">
<h1> علم الإمارات </h1>
<div class="container">
<span class="one"></span>
<span class="two">
</span>
<span class="three"></span>
</div>
</div>
</body>
</html>
تتبع التصميم
- بنعمل div ك container علشان يمسك التصميم بتاعنا كلة.
- بنعمل heading فية العنوان.
- نعمل div يمسك العلم .
- بنعملspan three كل واحد عبارة عن لون من ألون العلم.
- بنميز كل span ب class علشان نعرف ننسقهم ونديهم كل واحد لون مختلف عن الأخر.
css code
- ملف ال Css يحتوى على التنسيقات والألوان الخاصة بالتصميم .
- إسم ملف ال Css هو emarat.css لو حابب تغير الأسم براحتك .
- خد بالك فية أنيميشن على ال heading .
الكود
body{
background-color: #222222;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.flag{
position: relative;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
width: 80%;
height: 400px;
background-color: #f5f5f5;
position: relative;
}
/*mobile*/
@media (max-width:767px) {
.flag .container {
height: 191px;
}
.flag .container span{
width: 100%;
height: calc(191px/3);
display: block;
}
}
/*small csreen*/
@media (min-width: 768px) {
.flag .container {
width: 750px;
}
}
/*medium screen*/
@media (min-width:992px) {
.flag .container {
width: 970px;
}
}
/*large screen*/
@media (min-width:1200px) {
.flag .container {
width: 1170px;
}
}
.flag span{
width: 100%;
height: calc(401px/3);
display: block;
}
.flag h1{
color: white;
text-align: center;
position: absolute;
top: 75px;
border: 1px solid yellow;
padding: 10px 20px;
border-radius: 6px;
transition: 0.4s;
z-index: 1;
}
.flag h1:hover{
color: black;
border: 1px solid black;
transition-delay: 0.5s;
}
.flag h1::before ,
.flag h1::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 13px;
background-color: yellow;
border-radius: 50%;
transition: 0.4s;
}
.flag h1:before{
right: -35px;
}
.flag h1::after{
left: -35px;
}
.flag h1:hover::before{
z-index: -1;
animation: right-move 0.5s linear forwards;
}
.flag h1:hover::after{
z-index: -1;
animation: left-move 0.5s linear forwards;
}
@keyframes left-move{
50%{
left: 0;
width: 13px;
height: 13px;
}
100%{
left: 0;
border-radius: 0;
width: 50%;
height: 100%;
}
}
@keyframes right-move{
50%{
right: 0;
width: 13px;
height: 13px;
}
100%{
right: 0;
border-radius: 0;
width: 50%;
height: 100%;
}
}
.flag .one{
background-color: #309855;}
.flag .two{
background-color: white;
position: relative;
}
.flag .three{
background-color: black;
}
.flag .three::before{
content: "";
position: absolute;
top: 0;
left: 0;
background-color: #f51127;
width: 25%;
height: 100%;
}
.flag .two img{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transition: 0.3s;
transform: translate(-50%, -50%);
}
.flag .two img:hover{
border: 1px solid red;
border-radius: 6px;
}
شرح بسيط وسريع لكود css
- نضع خلفية للصفحة.
- نحدد نوع الخط.
- نعمل heading فية إسم العلم.
- نعمل animation على ال heading عند عمل hover علية.
- نوسط التصميم فى منتصف الصفحة بال flex.
- نضع الوان العلم كل span هيتلون بلون.
- نعمل ال span الملون باللون الأحمر بال before علشان نخلية عمودى ذى ما إنتة شايف فى التصميم اللى فوق.
الخلاصة ( هات من الأخر)
- تصميم علم الإمارات بسيط جداً وسهل .
- عرفنا إزاى نبدأ التصميم صح إزاى ننظم شغلنا علشان منتلغبطش خصوصاُ لو كان المشروع كبير.
- وإتعرفنا على كود ال Html وكود ال Css .
ملحوظة هامة
لازم تسمى الملفات بنفس الأسماء اللى قولتلك عليها سواء كان ملف ال Html أو ال Css أو الصورة علشان التصميم يشتغل معاك من غير مشاكل .أو ممكن تغير فيهم براحتك بس دة إذا كنت فاهم إنتة بتعمل إى.
وكدة نكون إنتهينا من موضوعنا اليوم أتمنى لو الموضوع أعجبك تدعمنا بلايك ومتابعة والسلام عليكم ورحمة الله وبركاتة .
ومتنساش تتابعنا على صفحتنا على الفيسبوك من هنا
