Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Web Based’ Category

Sometimes, like switching between OSs, we require a font being in a different format for a better compatibility

FreeFontConverter is a web application that enables us to convert from -almost- any font format to another.

Besides the common font formats like TrueType (.ttf), OpenType (.oft) and PostScript (.ps), it supports .svg, .bin, .dfont and many others.

Free Font Converter

Spritebox is a free-to-use web application which offers a WYSIWYG tool for creating CSS classes from a single sprite image.

Image to be used can be fetched from a URL, uploaded directly or via drag 'n' drops from the computer.

Spritebox

After that, it is possible to mark any parts of the image, define a class/id name and CSS rules containing the background-position will be created automatically.

Besides mouse, the application can be controlled via keyboard shortcuts and main image can be zoomed for pixel-perfect selections.

X-Icon Editor is an HTML5 application, using <canvas> tag,  that allows you to create high resolution icons.

It generates the icons in .ICO format with 4 different resolutions embedded: 64×64, 32×32, 24×24 and 16×16.

X-Icon Editor

This makes it a perfect fit for IE9 as the browser uses multiple-sized favicons in different screens (address bar, tab page, site mode).

There are tools like brush, pencil, text or shapes for drawing the icon. Also, it is possible to import any image and edit it.

  • Tags:
  • Filed under: Design, Icons, No License, Web Based
  • 0 Comments
  • For many, wireframes are a part of the design process as they help a lot when thinking and discussing on a design.

    Wirify is a bookmarklet which reverses the standard process and converts any given web page into a wireframe.

    Wirify

    With the help of jQuery, it calculates the dimensions of the elements in the page and displays them "wirified".

    It is a handy resource for quickly stepping back and seeing the big picture without all the details.

    ColorZilla, an advanced color toolkit plugin for Firefox, is sharing a web-based CSS gradient creator.

    It has a Photoshop-like interface (just the opacity level is missing) where you can select the images to be used and their locations with the help of a slider.

    CSS3 Gradient Generator

    New "gradient stops" can be added just by clicking to the slider and the tools has a list of "presets" for instantly generating ready-to-use" styles.

    A last useful feature is the ability to see "how the output will look in IE".

  • Tags:
  • Filed under: Design, No License, Web Based
  • 3 Comments
  • Gridulator is a free web application for creating totally custom grids in .PNG format for using with the image editing applications, inside CSS files, etc.

    It simply asks the overall width and the number of columns. Once they are selected, any possible grid variations are automatically displayed.

    You can instantly preview how the grid will look like or download the full-size PNG file for it. Simple and handy.

    Gridulator

  • Tags:
  • Filed under: Design, No License, Web Based
  • 0 Comments
  • It is usually a good idea to share your thoughts about a website visually in order to make the details clear.

    MarkUp is a free web application that, with the help of a bookmarklet, enables you to draw on any web page.

    MarkUp

    Once the bookmarklet is clicked, the menu with the options of shapes (circle, rectangle, free drawing, etc.) appears and it becomes possible to draw + take notes (with the color you prefer).

    And, once the drawing is complete, you can select it to be published which is actually a unique URL generated -that displays the output-  to share.

    Lorem Ipsum is the most popular placeholder text used in graphic and web design.

    If you're bored of it, here is another alternative named Fillerati that has texts from various books.

    The website lets you choose the source of the text, whether it will be a paragraph, list or a title and how long it will be with the help of a slider.

    And, once the slider is clicked, the text is automatically copied to your clipboard.

    Fillerati

    Instant CSS Code is a free web-based tool that enables us to quickly create a web project framework with valid HTML/XHTML and CSS.

    It asks you a name for the project, the document type, JavaScript library to be used, whether it'll be compressed or not, page character set and few other questions.

    Instant CSS Code

    Once submitted, the project folder is ready to download which is a fast way for starting coding.

    A nice feature is that, it also asks the IDs to be used in the CSS file for creating the empty rules (time-saver).

    CSS3, Please! is a web-based & simple-yet-effective cross-browser CSS3 rules generator.

    As every browser may require different prefixes for the CSS3 properties, this tool makes it so easy by providing them all with an editable & well-commented way where the output can be seen instantly.

    Currently, it helps you write the rules for: border-radius, box-shadow, linear-gradients, rotation & @font-face. Some other transforms like skew & scale will be added soon.

    For some transforms, that Internet Explorer can support via IE filters, they are mentioned too.

    CSS3 Please

    Uptime Robot
    feed-holder
    FeedBurner
    HotScripts Marketplace
    PSD2HTML.com