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

Archive for the ‘CC License’ Category

The increasing variety and usage of device/screen types (cell phone, smart phone, tablet, desktop..) urge the need for serving web content accordingly.

Adaptive Images is a solution for delivering browser-size-specific images for any device.. automatically.

It is JavaScript-PHP-powered where a lightweight JS file detects the browser size and the PHP file resizes the images on the web page. And, all this happens with the help of a .htaccess rule which redirects any requests for .JPG, .GIF or .PNG files to the PHP image processor file.

Adaptive Images

Adaptive Images is a plug 'n' play resource which can be easily integrated into any PHP website.

There is a built-in caching system for minimizing each image only once for each size.

Also, several options for customization exist including "array of browser-image sizes", .JPG quality and more.

WP7 Icons is a growing collection of free icons that are mono colored (black and white versions are available).

They are in transparent PNG + vector .Design (for Expression Design) formats and the PNG version is sized as 48*48px (or 24*24px once the empty space is trimmed).

The set includes items from add or delete to media controls and social networking icons.

P.S. The designer also provides a tutorial on "how to create such icons using Expression Design.

WP7 Icons

  • Tags:
  • Filed under: CC License, Design, Icons
  • 0 Comments
  • theexpressiveweb.com is a beautiful resource and showcase on CSS3 and HTML5 features.

    It is brought by Adobe and currently shares 12 features including the ones like CSS3 animations, media queries, web fonts, HTML5 audio, canvas and web storage.

    The website is pretty interactive and comes with many impressive demos that are built by Adobe or other websites.

    theexpressiveweb

    For each property, the browsers that support it are displayed and, for non-compatible browsers, any possible fallback strategies are discussed.

    Also, the official announcement of the project includes an informative "Lessons Learned" part which is a very nice read.

    P.S. 2 Adobe-related posts in a row. What are the odds? : )

    If you are looking for a thematic and original set of social bookmarking icons, here comes an option for you.

    Social Lego is a set of 20 icons, built exclusively for WRD readers by Iconshock (same creators of WordPressThemeShock), that has a lego-like texture and includes the items for the most popular social services like Facebook, Twitter, Google+, Youtube and much more.

    The set comes as .PNG and .AI vector formats where you can create any size and modify the easily.

    It is free to be used in both personal and commercial projects (and can not be redistributed).

    Social Lego

    Download Paper And Cardboard Textures

    P.S. If you share this icon set in your website/blog, please link to this post rather than the download link. Thanks very much for that.

  • Tags:
  • Filed under: CC License, Design, Icons
  • 3 Comments
  • Although listing the contents of a directory is not a good practice for most of the websites (considering the complete structure and files will be available to the public eyes), it is an easy way to show and share files.

    The default Apache directory listing/index page is not the most handsome one and h5ai is a template built specifically to improve these pages.

    h5ai

    Its is built with HTML5 Boilerplate, jQuery + Modernizr and can be implemented with few steps: "copy folder h5ai to the web-root directory of your server and update the .htaccess file".

    There is a list of options provided inside a JavaScript file and, best of all, the output can be presented in multiple languages with the strings being defined inside that JS file.

    Similar to the The Wall plugin for MooTools that was shared few days ago, Mosaiqy is a jQuery plugin for presenting images in a Mosaic-like grid interface.

    The images are displayed inside randomly moving columns and rows where CSS3 transitions are used for the animations.

    Mosaiqy jQuery Image Gallery

    Once a thumbnail is clicked, the original version is loaded inside the grid with a nice slideIn/Out effect.

    It retrieves images from a JSON/JSONP data source which makes integrating with image hosting services pretty easy and there are already demos for Flickr, Instagram and Panoramio.

    Mosaiqy has multiple configuration options like the speed of transitions, delay between each, number of columns/rows, looping on/off and more.

    Flashmo, a well-known website sharing free Flash files, has recently released new open source Flash resources.

    They are all built with AS3, the galleries have touch support on mobile phones and, besides using them, their sources are a good way of improving skills.

    One of them is an mp3 player which can display a playlist and play the items one-by-one or it has a "mini" version which can still play multiple songs but doesn't show the playlist.

    Flashmo Mp3 Player

    The list is fed with an XML file that has the info about the song + artist names and the location of the mp3 file (so, files can be located in different folders).

    Another resource is a coverflow-like image slider where you can drag (with touch support) and browse through the items.

    Every image can point to different URLs and the database is again an XML file.

    Flashmo Coverflow

    And, a 3D spiral gallery which is built with Papervision3D and Tweener.

    You can drag up/down or left/right to move around thumbnails, use mouse wheel to zoom in/out, double-click on stage to toggle fullscreen.

    For a complete customization, settings can be edited from an XML file.

    Flashmo Spiral Gallery

    There are also other new resources like 3D curve gallery or 3D touch ring.

  • Tags:
  • Filed under: CC License, Flash, Goodies
  • 5 Comments
  • Resources on creating CSS3 buttons that looked stylish was shared previously at WRD.

    CSS3 Buttonize Framework is a new addition to this list which comes with styles for creating buttons in various sizes.

    Icons can be used inside the items and there are ready-to-use classes for building disabled, striped or highlighted buttons and a panel/horizontal navigation.

    CSS3 Buttonize Framework

    PCSS is a PHP(5) library that allows us to write CSS(3) code with a simpler + shorter syntax and brings awesome features like server-side browser specifics, class nesting, default unit and variables.

    As the CSS is preprocessed on the server-side, every designer's dream: "dynamic CSS" comes true and variables can be used easily.

    The rules being processed on the server-side also helps avoiding redundant commands (like many "-webkit", "-moz", etc.) as only the rules needed for the browser will be generated.

    PCSS

    Using the library, we can set a default image directory and default unit (em or px) to prevent rewriting them again and again.

    There are also shortcuts provided for @font-face usage and nesting of CSS rules.

    There are various new and exciting stuff with the website development like HTML5 and CSS3.

    But, when it comes to designing HTML e-mails, it is still the tables and hacks for improving compatibility with different e-mail clients.

    HTML E-mail Boilerplate is a project which presents a starting point for HTML e-mail design and includes solutions for the major rendering problems with the most common email clients.

    The code is very well documented and the download pack includes a non-documented version).

    HTML E-mail Boilerplate

    Uptime Robot
    feed-holder
    FeedBurner
    • PSD to HTML
    • aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter
    • PSD to HTML
      ManageWP