Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!

Nasıl yapılır ? Örnekteki gibi bir bar nasıl yapabilirim?

Garfield

xFanatik
Aktif Lisans
SMS onaylı
Kullanıcı
Katılım
4 Nis 2020
Mesajlar
2,348
Çözümler
104

Ekli dosyalar

  • 01.jpg
    01.jpg
    154.3 KB · Görüntüleme: 41
  • 02.jpg
    02.jpg
    24.1 KB · Görüntüleme: 33

Nasıl yapılır ? Örnekteki gibi bir bar nasıl yapabilirim?

Kod:
//Background & Text Color
.p-breadcrumbs {flex: 1 1 auto; width: 100%; font-size: 12px;border-color: #374166;border-radius: 4px;overflow: hidden;position: relative; z-index: 0;
    color: #333333;
    background: #ededed;
max-height:48px;
}
// Arrow color - (Border-color)
.p-breadcrumbs>li a::before, .p-breadcrumbs>li a::after {border-style: solid;border-width: 0;border-right-width: 1px; box-shadow: inset currentColor -1px 0px 0px 0px; content: ''; position: absolute;height: 50%;width: 100%;right: 0; z-index: -1;box-sizing: border-box;transform-origin: 100% 50%;
    border-color: #b5b5b5;
    color: rgba(255,255,255,0.38);
}
// Hover color
.p-breadcrumbs>li a:hover::before, .p-breadcrumbs>li a:hover::after {
    background: #dedede...
Kod:
//Background & Text Color
.p-breadcrumbs {flex: 1 1 auto; width: 100%; font-size: 12px;border-color: #374166;border-radius: 4px;overflow: hidden;position: relative; z-index: 0;
    color: #333333;
    background: #ededed;
max-height:48px;
}
// Arrow color - (Border-color)
.p-breadcrumbs>li a::before, .p-breadcrumbs>li a::after {border-style: solid;border-width: 0;border-right-width: 1px; box-shadow: inset currentColor -1px 0px 0px 0px; content: ''; position: absolute;height: 50%;width: 100%;right: 0; z-index: -1;box-sizing: border-box;transform-origin: 100% 50%;
    border-color: #b5b5b5;
    color: rgba(255,255,255,0.38);
}
// Hover color
.p-breadcrumbs>li a:hover::before, .p-breadcrumbs>li a:hover::after {
    background: #dedede;
}
 
.p-breadcrumbs::before { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 0px; border-radius: inherit; pointer-events: none;  z-index: 2;}
.p-breadcrumbs:before, .p-breadcrumbs:after {content: " ";display: table;}
.p-breadcrumbs>li {margin: 0;  padding-left: 15px; float: left; margin-right: -1.5em;font-size: 13px;}
.p-breadcrumbs>li:after { content: ""; width: 1.28571429em; display: inline-block; text-align: center;}
.p-breadcrumbs>li a {padding: 10px 15px;position: relative;z-index: 1;display:inline-block;overflow: visible;max-width: none;text-decoration: none;color: inherit;margin-left: -15px;}
.p-breadcrumbs>li a::before {top: 0;transform: skewX(35deg);}
.p-breadcrumbs>li a::after {top: 50%;transform: skewX(-35deg);}
.p-breadcrumbs>li:first-child span:before { font-family: 'Font Awesome 5 Pro';font-size: inherit;font-style: normal; font-weight: 700;font-size: 14px;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; content: "\f015";padding-right: 5px;}
.p-breadcrumbs>li:first-of-type a {font-size: 0;}
.p-breadcrumbs>li:first-of-type a::before, .p-breadcrumbs>li:first-of-type a::after {width: calc(100% + 20px);}
@media (max-width: 480px){.p-breadcrumbs > li:before {content: "";}}

yukarıdakı kod ısımı gordu.
 
Çözüm

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.