هذا شعار تم تصميمه بأسلوب رائع ومصمم باستخدام CSS و HTML في ظل خفيف يتغير ليناسب تصميم موقعك. أيضًا في الصفحة التجريبية ، تكون الخطوط متصلة ، نصًا وخط

كود :html
<div class="nazvaniya">
<h1>wesam developer</h1>
<h6>website for webmaster</h6><br/>
<h5>Here is the title</h5><br/><i class="ion-star"></i>
</div>
كود :css
.nazvaniya {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
display: inline-block;
color: #b7b1b1;
margin: 55px 18px;
max-width: 432px;
width: 100%;
text-align: center;
font-size: 36px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.nazvaniya h1,
.nazvaniya h5 {
margin: 0;
text-transform: uppercase;
}
.nazvaniya h1 {
font-family: 'Teko', Arial, sans-serif;
font-weight: 700;
font-size: 65px;
padding: 0;
text-align: center;
margin: 0;
line-height: 30px;
}
.nazvaniya h5 {
background-color: #b3acac;
color: #1f1d1d;
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 23px;
padding: 0px 34px;
position: relative;
}
.nazvaniya h5:before,
.nazvaniya h5:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 2px;
border-width: 9px 5px;
border-style: solid;
opacity: 0.8;
}
.nazvaniya h5:before {
right: 100%;
border-color: #afaeae #afaeae #afaeae transparent;
}
.nazvaniya h5:after {
left: 100%;
border-color: #afaeae transparent #afaeae #afaeae;
}
.nazvaniya h6 {
margin: 0;
display: inline-block;
position: relative;
text-transform: uppercase;
}
.nazvaniya h6:before,
.nazvaniya h6:after {
position: absolute;
height: 2px;
content: '';
width: 38px;
top: 50%;
border-top: 2px solid #afaeae;
border-bottom: 2px solid #afaeae;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.nazvaniya h6:before {
left: -43px;
}
.nazvaniya h6:after {
right: -43px;
}
.nazvaniya i {
font-size: 34px;
line-height: 36px;
}
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS