• Buffer

Create mosaic transition effect for website with jQuery

Here is a nice tutorial from burnmind.com that show you how to create a simple mosaic transition effect with 2 different images by using jQuery.
Create mosaic transition effect for website with jQuery

All you need to do add 2 images with same dimensions for smooth mosaic transition effect. The Only HTML code you need to use is an html element (it can be whatever you want; I’m using a div) with unique CSS id; I named it “mosaic”.

Features :
  1. Simple jQuery File
  2. Easy to use more then 2 images
  3. Easy to change transition effect from mosaic to other
  4. Easy to adjust delay between the transitions
burnmind.com | Demo 1 | Demo 2
Read more

Leaflet.JS - Open-Source JavaScript Library for Mobile-Friendly Maps

Leaflet.JS is an open source JavaScript Library developed by Vladimir Agafonkin. it's an Open source JavaScript Library to create Mobile friendly interactively Map for Smartphones. The script is only about 31 KB in weight and offered all major features required for Online maps.
Leaflet – JavaScript Library for Mobile Friendly Maps
The script is work seamlessly on all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones.
How to Install :

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. 
 Easily customizable.')
    .openPopup();


Features :
  1. Map Layers - Tile layers, Markers, Popups, Vector Layers, Image Layers, WMS Layers, Layer groups, GeoJSON layers
  2. Drag panning with inertia
  3. Zoom Animation
  4. Panning animation
  5. Smooth continuous zoom on modern mobile devices
  6. Tile and popup fade animation
  7. Retina resolution support for tile layers and markers
  8. Pure CSS3 popups and controls for easy restyling the Maps
  9. Image- and HTML-based markers
  10. Custom map projections (with EPSG:4326, EPSG:3857and EPSG:3395 out of the box)
Download - Leaflet JS
Read more

Top 10 free 3d modeling software for Windows

3D Modeling Applications are application which allow you to create 3D models of anything you like from houses, buildings to any 3D animation or 3D graphic animations. After an extensive research we sorted out the top 10 free Open Source 3D Modeling Applications , have a look.

Free 3D Modeling Applications for Windows

  1. Blender

    Blender - Free 3D Modeling Applications for Windows
    Blender is a Free open source, cross platform 3D animation and modeling suite released under the GNU General Public License.you can use blender for creating interactive 3D applications or producing computer-generated images and movies like; modeling, UV unwrapping, texturing, rigging, water simulations, skinning, animating, rendering, particle, and other simulations, non-linear editing, compositing. - Download Blender
  2. Google Sketchup

    Google Sketchup - Free 3D Modeling Applications for Windows
    Google Sketchup is an free, easy-to-learn 3D Modeling tool that allow you to create, modify and share 3D models of anything you like. It's an sketch-based 3D-modeling program that allow you to create 3D models of houses, buildings and many other objects, using an array of drag and drop tools and materials in a WYSIWYG editing environment. - Download Google Sketchup
  3. DAZ 3D Studio

    Free 3D Modeling Apps - DAZ 3D Studio
    DAZ 3D studio is a free, feature rich 3D figure design and 3D animation tool that enables anyone to create stunning digital imagery. With DAZ 3D studio, you can easily design unique digital art and animation using virtual people, animals, props, vehicles, accessories, environments and more. - Download DAZ 3D studio
  4. TrueSpace - 3D Modeling Software

    Free 3D Modeling Apps - TrueSpace
    TrueSpace is a fully-featured 3D computer graphics and animation software package that will let you model, texture, light, animate and render 3D content. As well as traditional images and movies, you can also make 3D content for online shared spaces, and for Virtual Earth. Truespace is a completely 3D modeling/animation/rendering software package. Download TrueSpace
  5. GDesign 2.0

    Free 3D Modeling Apps - GDesign
    GDesign is a 2D/3D free generative art application for Windows. With GDesign you can interactively build, test, and edit complex models using DOL, Stochastic and Parametric Systems, mixed up with some Cellular Automata techniques . you can Create, edit, build and preview huge 2D and 3D objects with extended LSystems and Artificial Life tools. Build organic forms, architecture models, generative 3D image processing filters. - Download GDesign
  6. K3DSurf

    Free 3D Modeling Apps - K3DSurf
    K3DSurf is a program to visualize and manipulate Mathematical models in three, four, five and six dimensions. K3DSurf supports Parametric equations and Isosurfaces. K3DSurf can be used by every one interested in 3D Mathematical drawing functions and don't require any special competences by users. Most of the work was done with the intention to make K3DSurf as simple as possible but without any harm of it's efficiency. - Download K3DSurf
  7. freeCAD

    Free 3D Modeling Apps - FreeCAD
    freeCAD is a open source 3D CAD with advanced Motion Simulation capabilities. It is suitable for anyone interested in learning 3D CAD and Motion Simulation for free before using more sophisticated packages. Its motion simulation capabilities are comparable to the best and can provide accurate answers to engineers and scientists in diverse fields. The program runs on Windows, Linux PC, Macintosh PPC and other Unix's. Assembly data are unchanged across platforms. - Download FreeCAD
  8. Blink 3D

    Blink 3D Free 3D Modeling Apps
    Blink 3D is a fully-featured virtual worlds development platform for creating 3D environments. A complete system is useful for creating and viewing multi-user 3D environments or virtual worlds that can be published and viewed on the Web or locally - Download Blink 3D
  9. Anim8or

    Anim8or - 3D modeling and character animation program
    Anim8or is a 3D modeling and character animation program specially designed to allow straightforward creation of animations. User can easily create and modify 3D models with built-in primitives such as spheres, cylinders, platonic solids, etc.. mesh-edit and subdivision; splines, extrusion, lathing, modifiers, bevel and warp - Download Anim8or
Read more

Create.js - On-site web editing interface

Create.js is an easy to use, free yet comprehensive web editing interface for Content Management Systems. The User interface of Create.js is mainly focus on simplicity and allow you to edit your site content directly from the page you’re reading. Any modification done by user stored in browser and then send to CMS instantly with One click.
Create.js - On-site web editing interface

It’s a new kind of web editing tool that give you Modern, HTML5 enabled fully browser based user interface for manage your site content. it written in JavaScript so any content management system can easily work with Create.js, Make them universal web editing interface for many CMSs like OpenCms, Symfony CMF, and Midgard have already integrated Create.js as their web editing interface.
Features of Create.js
  1. Free and open source JavaScript based web editing interface
  2. A Slick On-site Edit-In-Place Interface
  3. Compatible with any CMS
  4. Browser-based HTML5 environment for managing content.
  5. Create.js is built on top for VIE
  6. Local, in-browser storage and retrieval of unsaved content
  7. Running workflows for content items
  8. Browsing and reverting content history
  9. Easy rebranding of the interface with some CSS
Download : Create.js
Read more

Top 27 Creative Elevator Advertisements

When web user become more and more ad blind, and traditional ways of advertising getting fail - Advertising companies trying to find new and unique concept to advertise their clients products to minimize the ad blindness. A good example could be elevator advertising. Here is Top 30 Creative Elevator Advertisements that look very promising and beautifully placed on various Elevator, which use by thousands of people daily.

27 Creative Elevator Advertisements

  1. Alliance Elevator

    Alliance Top 27 Creative Elevator Advertisements
  2. Animal Planet Elevator

    Animal Planet Top 27 Creative Elevator Advertisements
  3. Jelly Tots ad concept for Elevator

    Jelly Tots Top 27 Creative Elevator Advertisements
  4. Air Asia Elevator advertisement

    Air Asia Top 27 Creative Elevator Advertisements
  5. Coca Cola Zero Elevator ads

    Coca Cola Zero Top 27 Creative Elevator Advertisements
  6. Achilles Forklift Elevator Advertisement

    Achilles Forklift Top 27 Creative Elevator Advertisements
  7. Semina Lubricant Gel Gay Pride Parade ad for Elevator

    Semina Lubricant Gel Gay Pride Parade Top 27 Creative Elevator Advertisements
  8. Oreo: Elevator advertisement

    oreoelevator1 Top 27 Creative Elevator Advertisements
  9. Great Lakes Science Center Bodyworlds 2 : Elevator Ads

    Great Lakes Science Center Bodyworlds 2 Top 27 Creative Elevator Advertisements
  10. Kagatani Knife: Elevator

    Kagatani Knife: Top 27 Creative Elevator Advertisements
  11. Kristina Dragomir: The elevator

    Kristina Dragomir The elevator Top 27 Creative Elevator Advertisements
  12. Folliderm: Bald man Ads for Elevator

    Folliderm Prevent hair loss Top 27 Creative Elevator Advertisements
  13. Volkswagen: Hospital elevator

    Volkwagen for Safety Top 27 Creative Elevator Advertisements
  14. Shams Taekwondo School: Elevator

    Shams Taekwondo School Elevator Top 27 Creative Elevator Advertisements
  15. Sabina Stobrawe: Divorce lift

    Divorce Lawyer Top 27 Creative Elevator Advertisements
  16. Gold's Gym: Elevator

    Gold's Gym Elevator Top 27 Creative Elevator Advertisements
  17. Superman, The Movie: Elevator

    Superman The Movie Elevator Top 27 Creative Elevator Advertisements
  18. Swiss Skydive: Free fall Elevator Advertisement

    Swiss Skydive Elevator Top 27 Creative Elevator Advertisements
  19. Killer Jeans: Elevator advertisement

    Killer Jeans Elevator Top 27 Creative Elevator Advertisements
  20. Romrawin Clinic: Beauty is Confidence

    Romrawin Clinic Beauty is Confidence Top 27 Creative Elevator Advertisements
  21. Superette: Elevator Advert

    Superette Elevator advert Top 27 Creative Elevator Advertisements
  22. Accor Hotels: Relay Pass Elevator Ads

    Accor Hotel for Olympic Games Sydney Top 27 Creative Elevator Advertisements
  23. Fiat Punto advertisement: Elevator parking sensor

    Fiat Punto Parking Sensors Top 27 Creative Elevator Advertisements
  24. Maxwell House: Morning Alarm Maxwell House Morning Alarm Top 27 Creative Elevator Advertisements
  25. Resident Evil

    Resident Evil Top 27 Creative Elevator Advertisements
  26. Stop abuse Elevator Advert

    Stop abuse Top 27 Creative Elevator Advertisements
  27. Plastic Surgery Clinic: Be Born Again

    Plastic Surgery Clinic Be Born Again Top 27 Creative Elevator Advertisements
Image Source - adsoftheworld.com
Read more

PhotoSwipe - Image gallery for mobile and tablets devices

PhotoSwipe is a free and open source HTML/CSS/JavaScript based image gallery that specially designed to work smoothly with all mobile devices and tablets.
PhotoSwipe - Image gallery for mobile and tablets devices

PhotoSwipe is totally inspired from iOS photo viewer, Google images for mobiles and doesn’t required any external framework to create responsive image gallery for mobile and Tablet devices.
Currently PhotoSwipe provide support for all major mobile operating system running Webkit based browser such as iOS, Android and Blackberry 6, Also perfectly work with Chrome, Firefox, Safari and Internet Explorer 8 and above.
Features of PhotoSwipe image gallery
  1. Specially optimized for mobile devices and tablets running a Webkit based browser
  2. Also compatible with modern desktop browsers, including Internet Explorer 8, Firefox and Chrome and above.
  3. From v3 can be run within a div on your page as well as "full screen".
  4. Multiple input options including swipe gestures, keyboard control and an interactive on screen toolbar.
  5. Responsive to device orientation changes.
  6. Automatically scales images to maximize screen size and orientation.
  7. Zoom and pan around images
  8. Easy to rotate your images (Only available on iOS)
  9. Works with your markup and semantic structure.
  10. Support for Image Captions
  11. Slideshow feature to automatically play through images in the gallery.
  12. integrated with jQuery Mobile.
  13. Easily and smoothly run with any platform such as iPhone, iPad, Android, Blackberry 6 and Desktop.
  14. Comprehensive customization options such as Presentation controlled via CSS, Easy to set gallery loops and not, Easy to Hide or show captions and toolbar, Easy to change caption and toolbar positions etc..
Download : PhotoSwipe image gallery for mobile

Read more

Create responsive wireframes with Wirefy Framework

Wirefy is a CSS-JS based framework that help you to create responsive and cross-browser wireframe layouts to give you best user experience. Whether you are designing yourself or use the framework to help educate your clients, Wirefy framework is highly flexible and easy to use.
Create responsive wireframes with Wirefy Framework

The framework totally written from scratch and mainly designed to use for mobile and tablets devices. it means the wireframe designed by Wirefy instantly respond to the proper viewport. So you can easily resize the wireframe to see how it works. The framework is style-agnostic, so that clients don't get hung up on colors, fonts, other design elements.
Create responsive wireframes with Wirefy Framework
it also included various styles such as typography, grid, tables, Tabs, images, forms, buttons, pagination,slideshow etc.. for all major web design elements to instantly develop or experiment with different flows and layouts to find the best solution to your clients communication problem.

Since the framework is highly flexible, user can used them for develop responsive web designs, web apps, or basic device apps.
Download : responsive wireframe framework - wirefy

Read more

PmWiki - wiki-based collaborative system for creation and maintenance of websites

PmWiki is a free wiki software for collaboratively creation and maintenance of websites. it's wiki software written in PHP programming language and specially designed for Multi author website.



Read more

    Search This Blog

    Loading...

    COPYRIGHT

    The content is copyrighted to Dreamcss.com and may not be reproduced on other websites without permission.

    CONTACT/ TIP US

    Write to us at admin@dreamcss.com if you have any comments, questions, suggestions about this site or would like to send us a tip.

    SUBCRIBE

    If you enjoyed this blog, subscribe to receive more just like it.

| | privacy policy