Christmas Glyphs and iPad Fun

Eloine

Ok so this is not a work of art but it sure was fun and there is a potential to do so much more with this app. It’s called iFontMaker and it’s available for both the ipad and the iphone.

Do you need a custom font for a design project? Do you need a webfont that is scalable on a browser? Then give this a whirl during the break.

It’s really pretty simple – there are hints as to where the font character might be be it serif or san serif typeface and you either trace it with a calligraphic style brush or a blunt brush. I chose here to just make little Christmas style dingbats as much as I could think of and then publish that.

When you’re done with the alphabet both upper and lower as well as numbers and other characters you can publish the font and they will turn it into a system font for you as well as a web font that you can use on your web pages. Here is a link to mine! Above I opened it in Adobe Illustrator – I can scale it type with it and apply colors to it as well as continually edit it if I wish. Pretty cool huh?

If you need to make a custom font for someone this app makes it pretty easy to create one!

 

Magnify an image

Eloine

I ran across this jquery plugin to magnify an image. I needed to put a map on a page that I felt was a little small for the detail it had. This plugin allows the mouse over to actually load a larger image in place of it without destroying your layout.

[button link=”http://www.losmedanos.edu/construction/pathways.asp” newwindow=”yes”] Demo[/button]

[button link=”http://mlens.musings.it/” color=”green” newwindow=”yes”] Download[/button]

 

Special icons attached to special links

Special icons attached to special links

Eloine

I thought I would share a little tip that just makes getting around sites easier and easier for the web content creator to maintain. If you find you have a lot of external sites you are linking to or links to PDFs it’s good practice to somehow tell people that information before they click. Otherwise they may download something they didn’t want to or are trying to find a way to get back to where they came from. It’s been considered good practice to add (PDF) or (DOC) at the end of a link but not everyone does it when you have multiple authors or they do it inconstantly with lower and upper case.


The code below shows how to add an external link icon and a special link icon if it’s a secure site or if it’s an email address. Note the code changes a little for when it’s a file type like a .DOC or a .PDF. You must also tell the CSS as in the example here how big your icon is so it doesn’t overlap the text. The very last part is important to tell the browser that if it isn’t any of these special things just leave it blank.

Here is an example link where this college needed a list of scholarships available. The inhouse links are for scholarships administered by the college but the ones with the icons are outside links that they are not responsible for. By doing the code below no modification to the HTML is necessary. The browser will read the CSS and figure out how to display the link.

#middlecol a[href^="http://"] {
    background: url(https://www.yourdomain.com/images/external.png) 
    center right no-repeat;
    padding-right: 13px;
}

#middlecol a[href^="https://"] {
    background: url(https://www.yourdomain.com/images/external.png) 
    center right no-repeat;
    padding-right: 13px;
}

#middlecol a[href^="mailto:"] {
    background: url(https://www.yourdomain.com/images/email.gif) 
    center right no-repeat;
    padding-right: 20px;
}


#middlecol a[href$='.pdf'] {
    background: url(https://www.yourdomain.com/PDFs/pdficon.gif) 
    center right no-repeat;
    padding-right: 20px;
	line-height:20px;

}

#middlecol a[href$='.doc'] {
    background: url(https://www.yourdomain.com/images/wordicon.gif) 
    center right no-repeat;
    padding-right: 20px;
	line-height:20px;

}

#middlecol a[href$='.docx'] {
    background: url(https://www.yourdomain.com/images/wordicon.gif) 
    center right no-repeat;
    padding-right: 20px;
    line-height:20px;

}

#middlecol a[href^="http://www.yourdomain.com"]  {
    background: none;
    padding-right: 0;
}