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
Post a Comment