html - What's the best approach to turn this design into code? -


i've been making portfolio, , didn't limit myself easier code.. so... ended (that's homepage every other page ready in photoshop)

http://postimg.org/image/z0w6wb4zb/

so best approach turn html/css? should slice zones, or each layer separately (as in clouds, tree, island.. etc).. told use semantic html i'm not sure understand means here. , do buttons? image maps? wouldn't bad idea?

do think design worth trouble anyway?

i can't post comment, best can answer, here goes:

mr. lister right, image maps way go. but, 1 more item think worth noting, seo value, particularly home/portfolio/contact me/and anchors. 1 potential solution use image-maps... feature detection see if browser allows css rotate functionality.

your html

<section class="homepage-navigation">     <a class="contact-me nav-link" href="/contact">contact me</a>     ... </section> 

your css be

.home-navigation{position:relative;} .home-navigation .nav-link{position:absolute;} .home-navigation .contact-me{transform: rotate(-95deg);left:10px;} 

so... there trade-off here. using image map , having link text embed in image easier... lose out on browsers seeing anchor text. if go css route, need consider supporting both browsers allow transform css property, , browsers don't. :|


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -