القائمة الرئيسية

الصفحات

تعديل المشاركة

كيفية وضع شعار لموقعك باستخدام لغة Css

Ehab Zayn
(0)

كيفية وضع شعار لموقعك باستخدام لغة Css

اليوم ستعرف كيفية عمل شعار (LOGO) لموقعك باستخدام لغة البرمجة 
css


السلام عليكم , في الدرس السابق عن استخدام فلتر لصور مدونتك باستخدام css
الموضوع حاز علي مشاهدات جيدة وهوافضل موضوع هذا الأسبوع لذلك قررنا ان نضع درس جديد وهو عن كيفية عمل شعار لموقعك باستخدام css 
الطريقة مقدمة من موقع littlesnippets لذلك سنتجه مباشرة الي

 الشرح 


لعمل لوجو مثل الموجود في الاعلي  كل ماعليك هو نسخ هذا الكود ووضعه مثلا في التخطيط عن طريق اضافة أداة ثم اضافة html /javascript 
او في المواضيع عن طريق وضع الاكواد في ال( html) وليس (التأليف) 

<div class="snip1222">
<div class="square">
<div></div>
</div>
<h1>Arabko</h1>
<h5>SEO</h5>
</div>
<style>
.snip1222 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
color: #bdbdbd;
margin: 0px 15px 60px;
max-width: 310px;
width: 100%;
text-align: center;
font-size: 16px;
}
.snip1222 * {
-webkit-box-sizing: padding-box;
box-sizing: padding-box;
}
.snip1222 h1,
.snip1222 h5 {
margin: 0;
line-height: 1.1em;
}
.snip1222 h1 {
font-family: 'Lora', Arial, sans-serif;
font-size: 3.2em;
}
.snip1222 h5 {
line-height: 0.5em;
font-weight: 400;
}
.snip1222 .square {
height: 97.5px;
width: 97.5px;
overflow: hidden;
position: absolute;
top: 60%;
left: 50%;
content: '';
-webkit-transform: rotate(45deg) translate(-50%, -50%);
transform: rotate(45deg) translate(-50%, -50%);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.snip1222 .square:before,
.snip1222 .square:after,
.snip1222 .square div:before,
.snip1222 .square div:after {
background-color: #bdbdbd;
position: absolute;
content: "";
display: block;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.snip1222 .square:before,
.snip1222 .square:after {
height: 4px;
width: 40%;
}
.snip1222 .square div:before,
.snip1222 .square div:after {
width: 4px;
height: 40%;
}
.snip1222 .square:before,
.snip1222 .square div:before {
left: 0;
top: 0;
}
.snip1222 .square:after,
.snip1222 .square div:after {
bottom: 0;
right: 0;
}
</style>

ومثلا نحن وضعناها في صفحة من صفحاتنا انظر كيف ظهرت 

 واللوجو الاخر هو كما بالصورة 

 كل ماعليك هو وضه هذا الكود كما قلنا في الاعلي في
التخطيط عن طريق اضافة أداة ثم اضافة html /javascript 
او في المواضيع عن طريق وضع الاكواد في ال( html) وليس (التأليف) 
<div class="snip1338">
  <h5>Neque porro quisquam</h5>
  <h1><i class="ion-android-star-outline"></i>Arabko</h1>
  <h6>Est. 1958</h6>
</div>
<style>
.snip1338 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  color: #bdbdbd;
  margin: 50px 25px;
  max-width: 285px;
  width: 100%;
  text-align: center;
  font-size: 16px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.snip1338 h1,
.snip1338 h5 {
  margin: 0;
  text-transform: uppercase;
}
.snip1338 h1 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.7em;
  line-height: 50px;
  position: relative;
  padding-left: 56px;
  border: 5px solid #bdbdbd;
}
.snip1338 h5,
.snip1338 h6 {
  margin: 7px 0 7px 56px;
}
.snip1338 h5 {
  font-weight: 500;
  font-size: 0.6em;
}
.snip1338 h6 {
  display: inline-block;
  position: relative;
}
.snip1338 i {
  position: absolute;
  line-height: 50px;
  width: 50px;
  left: 0;
  border-right: 5px solid #bdbdbd;
  font-size: 1.1em;
}
</style>

وانتهي درس اليوم وانصحكم بتصفح موقع littlesnippet ستجدوا اضافات رائعة جدا وبالطبع يمكنكم التعديل عليها اذا كانت لديك خبرة في ال css 
واذا واجهتك اي مشكلة في هذا الموضوع او مشكلة عامة في موقعك قم بكتابتها في صفحة الاستشارة المجانية او في اي موضوع وسيقوم بالرد عليك من احد فريق الموقع او مني شخصيا, او اذا كنت تريد شرح معين عن شي في بلوجر أو في SEO او في عالم المواقع عموما لاتتردد في كتابته في التعليقات

أخر المواضيع من قسم : شروحات

تعليقات

إرسال تعليق