I would use a google web font–perhaps classic comic, Comic sans, or comic strip to style my links.
Then, I would use the css transform property to rotate the text to where I wanted it to be. This would allow me to make the font size either a percentage, ems, or rems–something that is relative to the size of the parent container. It would also allow me to easily change the position of the text by altering a single property–margin-top–as well as add all sorts of nifty CSS animations on the hover state.
It’s worth playing around with, and if you don’t really like any of the google web fonts, then it’s possible to upload your own and use them on the site. But make sure to check their licenses before you do such a thing.
An example of something that would accomplish what I’m talking about follows, and you could likely just make :hover and :visited variations off of it. Problem is, you’d have to make :nth-child declarations for each menu item, since they would all be at different heights, and thus need different margin-top.
-webkit-transform: rotate(-16deg);
font-size: 2.1em;
color: #F5FF00;
font-weight: 900;
float: left;
display: block;
width: 100%;
height: 2.4em;
margin-top: 85%;
margin-left: 10px;
list-style: none;
background-image: url('');
background-repeat: no-repeat;
text-indent: 0px;
The above code needs the following code to really display properly:
.menu li {
float: left;
display: inline;
text-decoration: none;
width: 25%;
}
and also this:
#main {
width: 100%;
height: auto;
margin: 15px auto;
overflow: hidden;
padding: 24px 0px 0px 0px;
}
Thread Starter
Jeff F.
(@jefferytodd)
@sleneau
Thank you so much for your help. I was not familiar with this and I”m looking into your link for help on older browsers. I really appreciate your time.
Post results here if it works, glad to help
Thread Starter
Jeff F.
(@jefferytodd)
I ended up having delays with the client but I’m still looking for an answer. I tried to use the idea from @sleneau and a couple of other tutorials and unfortunately the font they wanted would not show up with font face rule and they couldn’t deal with another substitute.
So in case another takes a peek, if you know any reason why the images won’t shrink with the rest of the responsive design I would greatly appreciate it. I know the next step is to use different sized images if they have to have this font, but I’m wondering for my growing knowledge why those images as links do not diminish as the others.
thanks
http://luis.amusingz.com
