0
POPSMoving Boxes Content with jQuery Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item.
0
POPS25 Examples of Portrait Usage in Web Design Following the recent trend of using big background images in web design, we decided to gather a list of websites using portraits in their layouts. So at this showcase we will show you how several designers are using portraits at their designs to make things more personal and to give a nice unique touch to their sites.
0
POPSThe Importance of Texture in Mobile Design Implied textural designs are not new to the interwebs. Most of the time texture is used as a design device to add depth, dimension, or just used to spice up a bland design. But as mobile touch devices take over the world, texture will play a key role in how users interact with the mobile internet.
0
POPSExpanding Image Menu with jQuery In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat effect.
0
POPSMake 'em Feel at Home The more comfortable users are with your website the more likely they are to enjoy their experience and come back for another visit. Make them feel at home with a familiar greeting, a friendly smile and pleasant conversation.
0
POPS25 Examples of Interesting and Beautiful Navigation Designing the perfect navigation for a website it's one of the main keys to have a good outcome, to have a website that gets users attentions and make them want to browse around to check every little information (tab, image, text, etc) you have there. Navigation menus, schemes, layouts, everything has an important weight and need to be carefully analyzed to form a nice layout. From horizontal sliders to vertical scrolls and menu based navigations, here you will see 25 examples of navigations that will certainly get you inspired.
0
POPSRe-thinking Browser Compatibility Kryptonite is to Superman as the browser is to the web designer. The lives of web designers everywhere would be much better if browsers would render their beautiful designs without a bug or a hitch. But sadly this is and will never be so. It's our time to re-think the way we work with the browser.
0
POPSDesigning for Feature-Rich Websites: Best Practices For all websites, organizing content can be an issue. With poorly planned content placement, the visitor may not know where to look, or when. Disorganization can also look sloppy, and make a visitor leave quickly. For content heavy and feature-rich websites, this can be an even bigger issue.
0
POPS20 Unique and Creative Image Sliders Image sliders and sideshows have become an essential element in web design. They are a great way to display information and visual content in an interesting way. From the classical slide-to-the-side method to modern full page sliders - today we want to show you some unique and creative versions of the classical image slider.
0
POPSOverlay-like Effect with jQuery Today we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay. This allows to focus certain elements in a web page while making others appear less prominent.
0
POPSThe Problem with Web Fonts The problem with web fonts is that nobody wants to use the 'safe' fonts and you need as much live text on your site as possible. So what's a designer to do? Fortunately or unfortunately there are plenty of options.
0
POPSFullscreen Gallery with Thumbnail Flip In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.
0
POPS25 Examples of Interesting and Creative Structures in Web Design Of course we all love the basics when it comes to web design, we like columns, grids, organized and well disposed content... but that doesn't mean we don't like creative and interesting structures in web design. Here we will show some examples of websites that have chosen a slightly different approach to design their pages and had a nice result. From colorful and illustrated pages to clean and simple ones based on typography, I'm pretty sure you will like these approaches. ;)
0
POPSLet's call it Modern Web Design I am proposing a new buzzword to replace all other web design buzzwords. Forget 'Graceful Degradation', lose 'Progressive Enhancement', drop 'Semantic Web' and let's finally throw out the 'Web X.0' - I propose we just lump it all together and call it Modern Web Design. Simple and clean don’t you think? Kind of like the HTML5 doctype.
0
POPS3D Wall Gallery Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality.
0
POPSShowcase of Depth and Perspective in Web Design An interesting way to spice up a web design is to add some depth to it. Instead of making a design flat, certain elements and techniques can stimulate the depth perception of the visitor. Special cues tell us that certain objects are closer than others and we can put up a three-dimensional picture of our environment. In the following we want to show you some great examples of depth in web design.
0
POPS25 Examples of Circular Elements in Web Design When designing a website we have a lot of elements to worry about: menus, navigations buttons, forms, header, footer and many other important details that make our design special. Today we decided to list some good examples of circular elements in web design. We will show you beautiful circular buttons, menus, images and other details. You will see that when properly designed, circles can make your website look pretty unique.
0
POPSSweet Thumbnails Preview Gallery with jQuery In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.
0
POPSShadow Usage in Web Design When designing a website you can use several effects to drive attention to an element, emphasize something or simply to give your page an unique and personal touch. From underlines to color schemes, bold texts, shadows, borders and an enormous number of effects, there is an effect for every taste and functionality. Shadows are good to emphasize texts, links and also to give that special 'detail driven' touch to an image.
0
POPSVisual Movement - Flow in Web Design In fine art, visual movement is used to guide the viewer through the piece. Lines, shapes, color, depth and hierarchy can all be used to guide the viewer from one point to the next - at a glance. Visual movement is more commonly known in the graphic design world as 'flow'.
0
POPSB&W Box Gallery In today's experiment, we created a little gallery that plays with the black and white versions of images. The idea is to have an initial grid-like view of the different categories or albums. In the background we can see the black an white version of the current image of the hovered album.
0
POPSCreative Examples of Portfolio Item Display Portfolios are a great opportunity to show your potential clients and customers what you have created and what you are capable of. It can also be a playground for ideas - the way that a portfolio itself is presented, the interaction possibilities it allows and it's uniqueness can be a great way to show your identity and your creativity.
0
POPSAnimated Form Switching with jQuery In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.
0
POPS25 Fresh Examples of Beautiful UI Elements UI elements - user interface elements - are a really important part of the design process. Here we will list 25 websites that know how to give their users a nice experience with beautiful UI elements.
0
POPSParallax Slider with jQuery Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it's in motion.
0
POPSPortfolio Zoom Slider with jQuery In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.
0
POPSWebsite Tour with jQuery Today we want to share a little script with you that allows to create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application in an interactive way.
0
POPSMoleskine Notebook with jQuery Booklet Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel.We will create a virtual Moleskine notebook with latest posts from the blog.
0
POPSMerging Image Boxes with jQuery Today we will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter into the little box shaped thumbnails again.
0
POPSOverlay Effect Menu with jQuery In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect with jQuery.
0
POPSAnimated Portfolio Gallery with jQuery Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scoller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay.
0
POPSCustom Animation Banner with jQuery In today's tutorial we will be creating a custom animation banner with jQuery. The idea is to have different elements in a banner that will animate step-wise in a custom way. We will be using the jQuery Easing Plugin and the jQuery 2D Transform Plugin to create some nifty animations.
Clips
Latest Pops
Latest Comments
Most Pops
Tags
Print
Save
Turn on live update