تصميم شكل تيرمنال لينكس بالكود - Linux Terminal UI Design

تصميم تيرمنال لينكس الشهيرة عن طريق اللغات HTML و CSS و SVG. الـ HTML هى لغة العلامات الأساسية أو لغة تحديد العناصر حيث تقوم بتحديد ما هو الشئ الموجود فى صفحة الويب.

أما الـ CSS فهى لغة التنسيق حيث تقوم بتنسيق وترتيب كل شئ فى صفحة الويب من ألوان وحركات وخصائص. أما الـ SVG هى لغة رسم الصور الخطية عن طريق الكود. أى أنك تكتب كود الصورة وليس ترسمها بالقلم. الميزة فى هذه الطريقة فى إنشاء الصور هى أنها لا تفقد جودتها إبداً مهما كبرتها أو صغرتها لأنها عبارة عن أشكال هندسيه متداخلة.

نبدأ بالكود المصدرى للتصميم :

<!Doctype html>
<html>
<head>
<title>Linux Terminal UI Design - SRCtube</title>
<style>
.terminal { 
width:700px; 
height:500px; 
border: 2px solid grey; 
border-radius:5px; 
background-color:black; 
}
.ribbon { 
width:700px; 
height:30px; 
border: 1px solid grey; 
border-radius:3px; 
background-color:grey;
padding-top:5px; 
padding-bottom:5px; 
}
.circle { 
float:left;
width:20px; 
}
.terminal-title { 
color:white; 
padding-left:65px; 
}
.terminal-content { 
width:700px; 
color:white; 
padding-left:3px; 
padding-top:0px; 
float:left; 
margin-top:-110px; 
}
</style>
</head>
<body>
<div class='terminal'>
<div class='ribbon'>
<div class='circle' ><svg><circle cx="10" cy="10" r="5" fill="red" /></svg></div>
<div class='circle' ><svg><circle cx="10" cy="10" r="5" fill="yellow" /></svg></div>
<div class='circle' ><svg><circle cx="10" cy="10" r="5" fill="black" /></svg></div>
<div class='terminal-title' >SRCtube@Linux:~</div>
</div>
<div class='terminal-content'>SRCtube@Linux:~$ |</div>
</div>

شكل التصميم النهائى للتيرمنال :


تصميم شكل تيرمنال لينكس بالكود - CSS, HTML and SVG design linux terminal UI

- احصل على الكود المصدرى على جت هب كود تصميم التيرمنال.

اقرأ أيضاً:

أتمنى ان يكون الموضوع قد أفادكم. إن أردت أن تصل لنا بسرعة أكتب فى جوجل "موقع أبانوب حنا للبرمجيات". لا تنسى أن تتابعنا على صفحة الفيسبوك لمزيد من المعلومات ومعرفة الموضوعات التى ننشرها حديثاً إن شاء الله.
تعليقات الفيسبوك
0 تعليقات جوجل

0 تعليقات:

إرسال تعليق