Be a CSS Ninja with your Font Dragr

In: web resources

26 Oct 2009

The CSS Ninja has created a Font Dragr drag and drop font tester:

Font dragr is an experimental web app that uses HTML5 & CSS3 to create a useful standalone web based application for testing custom fonts, once you visit it for the first time you don’t need to be online to use it after the initial visit. It allows you, in Firefox 3.6+, to drag and drop font files from your file system into the drop area. The browser will then create a data URL encoded copy to use in the page and render the content in the dropped font.

Used in the app:

  • HTML5
    • Offline access applicationCache
    • Drag and drop API
    • File API
    • contenteditable attribute set to true so the text can be edited.
  • CSS3
    • Custom fonts with @font-face
    • Gradients
    • Rounded corners using border-radius
    • Drop shadows with text-shadow & box-shadow
    • Attribute and pseudo selectors
    • Multiple border colours
    • Box model adjust using box-sizing

See it in action:

Go to Source

Comment Form

About this blog

This blog delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from: CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. Our goal is to help you communicate effectively on the web with an engaging website or functional interface.

  • Pharaoh: Free Literature Summaries and Study Guides http://www.freebooknotes.com/ [...]
  • whatever: Vocabulary based on context is essential since any given word may have different meanings depending [...]
  • Clar92: what??????????????????? [...]
  • whiteboy1691: AWW this is too cute! if he says yes say thank you and give him a hug. If he says just smile and [...]
  • erinjl123456: You definatly want to bring you child that would be a great experince. Now I wodent do it with a chi [...]
Internet MegaMeeting, LLC Microsoft Store LinkShare  Referral  Program Iolo technologies, LLC Artisteer - Web Design Generator FTPress.com (Pearson Education) Mobile Security: Parental Controls and Monitoring Atom Entertainment (formerly AtomShockwave)
.
Web Analytics