كيفية وضع شعار لموقعك باستخدام لغة Css
اليوم ستعرف كيفية عمل شعار (LOGO) لموقعك باستخدام لغة البرمجة
css
السلام عليكم , في الدرس السابق عن استخدام فلتر لصور مدونتك باستخدام css
الموضوع حاز علي مشاهدات جيدة وهوافضل موضوع هذا الأسبوع لذلك قررنا ان نضع درس جديد وهو عن كيفية عمل شعار لموقعك باستخدام css
الطريقة مقدمة من موقع littlesnippets لذلك سنتجه مباشرة الي
لعمل لوجو مثل الموجود في الاعلي كل ماعليك هو نسخ هذا الكود ووضعه مثلا في التخطيط عن طريق اضافة أداة ثم اضافة html /javascript
او في المواضيع عن طريق وضع الاكواد في ال( html) وليس (التأليف)
الطريقة مقدمة من موقع 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>
<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>
<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 او في عالم المواقع عموما لاتتردد في كتابته في التعليقات
تعليقات
إرسال تعليق