| Autor | Zpráva | ||
|---|---|---|---|
| emissary Profil |
#1 · Zasláno: 30. 10. 2016, 10:29:15
Zdravím vás,
chcem sa spýtať na pridávanie ikoniek. Ide o to, že na badoo.com používajú celkom sympatické ikonky. Chcel by som pochopiť akým spôsobom je tam táto ikonka pridaná. Je to SVG obrázok, ale vôbec nerozumiem tomu spracovaniu. 
<div class="photo-counter">
<i class="icon icon--white">
<svg class="icon-svg">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-camera-contour"></use>
</svg>
</i>
<span class="small">3</span>
</div>Čo je to za "tag" <use></use>. Vôbec nerozumiem ani tomu linku xlink:href="#icon-camera-contour" ktoré odkazuje na nejake IDčko, ktoré sa tam ani nenachádza. Ak bude niekto taky zdatný a bude mi vedieť vysvetliť túto technológiu, tak budem moc rád.
Čo sa týka CSS, tak: .photo-counter {
position: absolute;
top: 158px;
left: 6px;
padding: 4px 10px;
border-radius: 16px;
background: rgba(0,0,0,.5);
color: #fff;
font: 1em/1.28572 'FS Albert Pro Web Bold',Helvetica,Arial,sans-serif;
}
.icon--white {
fill: #fff;
}
.icon {
transition: color .2s,fill .2s,background .2s,box-shadow .2s,opacity .2s;
width: 16px;
height: 16px;
display: inline-block;
}
i {
font-style: normal;
}
.icon-svg {
display: block;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
background: inherit;
fill: inherit;
pointer-events: none;
box-sizing: border-box;
}
.icon-svg > use {
transition: opacity .2s;
}To je všetko čo som z toho vytiahol. |
||
| Chamurappi Profil |
#2 · Zasláno: 30. 10. 2016, 19:34:58
Reaguji na emissaryho:
„ktoré odkazuje na nejake IDčko, ktoré sa tam ani nenachádza“ Určitě se tam nenachází? Řekl bych, že AJAXem natahují do stránky tento kus SVG. |
||
|
Časová prodleva: 6 let
|
|||
0