In Tutorials by Manoela Ilic
Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. Today we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.
In Articles by Patrick Cox
Developing emphasis in web design can be tricky in that it all depends on what you want to accomplish with it. For the most part, whatever the product is, is what will be our focal point and in most cases it’s not the picture of the product but how to get the product that becomes the focal point – the call to action.
In Playground by Manoela Ilic
This multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location of the places where each one has a set of images, and the second level shows each single image and its location. Using Google Maps, we’ll have the location shown on the left side while the images of a location are shown on the right. The images can be viewed in medium size mode or in full lightbox-like mode. The map has a fullscreen option which will show the thumbnails of the images in their location.
In Articles by Patrick Cox
Negative space is most commonly associated with logos or compositions where the empty space creates a unique shape or represents something – like the arrow in the FedEx logo. But negative space in web design may not be that cool or sexy, but its still very important to the over all design. Just remember that you don’t want your design to feel cramped or cluttered, you want your users to enjoy the experience. If anything, just add a little bit more padding.
In Tutorials by Manoela Ilic
A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.
In Articles by Patrick Cox
Your design should be inviting and allow your users to sit down, relax, hang out and maybe look around a bit and the best way to achieve this is through visual balance. Visual balance is basically just balancing design elements off of each other – as if your design elements are sitting on a teeter-totter.
In Playground by Manoela Ilic
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images.
In Playground by Manoela Ilic
Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don’t support the new properties.
In Playground by Brian S. Reed
jCookies, a jQuery plugin, makes getting and settings HTTP Cookies a breeze. jCookies allows the storage of any type of data: strings, arrays, objects, etc. A while back while developing my FormBuilder I needed a good solution for storing cookies via JavaScript. As a result of the work down for that project I built jCookies.
In Articles by Patrick Cox
This article is about the importance of proper markup in a website. A great way to make sure your site works properly is to write your HTML first before you jump into the CSS and JS. This will allow you to focus on the content and the functions and test them before you start making everything pretty.
In Playground by Manoela Ilic
Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.
In Articles by Patrick Cox
A huge, gigantic, humongously important part of web design and development is usability – the ability for your users to actually use your web site. Just as chairs need four legs that make them sturdy, usable and successful, web sites also need four legs to make them sturdy, usable and successful
In Playground by Manoela Ilic
Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the “zoom” effect by enlarging the current image and fading in the new one.
In Articles by Patrick Cox
In design, rhythm is created by simply repeating elements in predictable patterns. This repetition is a natural thing that occurs everywhere in our world. As people, we are driven everyday by predictable, timed events. The sun comes up every day and sets every day, the seasons cycle in predictable patterns every year, and we all know that the World Cup happens every four years. Rhythm in design is just re-creating that, re-creating these predictable timed patterns, creating a sub-conscience relationship with ourselves and creating comfort or familiarity.
In Playground by Manoela Ilic
Today we want to share a simple circular content carousel with you. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.
In Tutorials by Marcin Dziewulski
Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.
In Playground by Manoela Ilic
Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.
In Articles by Manoela Ilic
Making a web design with contrasty colors will allow for a better focus on certain areas of a web site. With a minimal color scheme, more contrast can be achieved and with the right complementary color, a unique and impactful visual impression is given.
