problem med svg image sprites och en bonus... [HTML5/CSS/JS]
Hej,
Det var inte länge sedan jag senast skapade en tråd (inte ens två dygn), men nu kommer jag med fler problem som jag gärna får lite hjälp med!
Det första problemet är de image sprites jag tänkt använda på min sida, vilka är gjorda som vektorer och därför är i formatet .svg. Dock visar sig inte mina ikoner någonstans, och jag undrar var de tagit vägen! Relevant HTML samt CSS nedan:
<body>
<div class="navBar">
<img id = "navBG" src="images/menuBar.svg" />
<nav class = "navBar">
<ul id = "menuItems">
<li id = "portfolio"></li>
<li id = "about"></li>
<li id = "blog"></li>
</ul>
</nav>
</div>
/* navigation */
.navBar {
position: absolute;
z-index: 9001;
width: 130px;
height: 900px;
top: 0px;
left: 0px;
}
#navBG {
position: absolute;
width: 130px;
height: 100%;
opacity: 0.47;
}
#menuItems {
list-style-type: none;
}
#portfolio {
background-image: url(images/portfolio.svg);
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}
#about {
background-image: url(images/about.svg);
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}
#blog {
background-image: url(images/blog.svg);
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}
Det andra problemet jag har är mer av den tekniska typen "google har inte ett enda bra svar på det här, och inget om HTML5, men det kanske går ändå, eller?". Det jag vill göra är att den del av bilden (som ligger bakom navigationspanelen) blir suddig à la gaussian blur, men hur gör jag det? Ett naturligt val hade ju kunnat vara att bara ha den delen av bilden suddig, men som jag har det kommer det inte fungera... Breakdown av hur det ska vara:
Bakgrunden har ett bildspel (med en zoom-effekt, denna är inte konfigurerad än, så kommentarer om estetiken i zoomningen får vänta) som rullar, och längst till vänster finns en tunn spalt (som i själva verket är en semi-transparent svart rektangel, som det ska vara suddigt under) med ett litet "handtag", eller vad man ska kalla det, för att dra ut menyn.
När man drar ut menyn blir allt under menyn suddigt.
Problemet är alltså att jag har två olika tillstånd; ett aktivt då det suddas under hela navigationen, och ett passivt då man bara ser en smalare strimla, så då kan jag ju inte ha det utsuddat som default på bilderna.
Se nedan för exempel:
Passiv:
Aktiv:
Ni hittar även sidan i sin helhet (så att ni kan se scriptet etc. in action) på bgslide.leosjoberg.com
Tack på förhand!
MVH
Leo
Edit: om ni går in på sidan märker ni att ni kan scrolla ner, kan det vara där som mina sprites lägger sig, och hur ska jag isåfall göra för att få upp dem? Funkar något så enkelt som float eller måste jag köra på absolut position? Inser för övrigt att jag inte hunnit ändra koden till varken .navBar eller #navBG, deras bredd och höjd ska enbart definieras i procent, inget annat!
Edit: har nu lagt till klassen "navItem" på alla val, och CSS för .navItem ser ut som följer:
.navItem {
position: absolute;
left: 20px;
z-index: 9003;
}
Citera för svar!|Fraktfritt hos INET|Min hemsida
Fractal Design Define R3|Corsair AX 850W|Gigabyte Nvidia GeForce GTX 570|Corsair Vengeance 1600MHz 2x4GB|ASRock P67 Extreme4|Intel Core i5 2500K|2x Samsung Spinpoint F3 1TB|Samsung Blu-Ray läsare
Nikon D7000|Nikon 60mm macro|Nikon 18-70|Nikon 55-300|Nikon 10.5 Fisheye
