In Tutorials, by Manoela Ilic
Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.
In Articles, by Gisele Muller
Today we decided to gather a few examples of minimal sites using texture to add detail to their layout. From really subtle and delicate examples to complete textured backgrounds, you will be able to find a lot of inspiration to include texture on your next project, enjoy.
In Tutorials, by Alessio Atzeni
The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.
In Playground, by Manoela Ilic
Today we want to share one of our CSS 3D Transforms experiments with you. The idea is to show an image’s fullscreen version by rotating two blocks in three-dimensional space. The faces of the blocks being rotated to the front will show the fullscreen image.
In Articles, by Patrick Cox
For a lot of designers constraints are kryptonite or a barbed wire fence that is a prison for their design freedom. But design constraints shouldn’t be viewed as problems to be overcome, rather, constraints or restrictions are probably the best tool for creativity. Constraints are good: they give you direction and they challenge you to be better. Constraints force you to try new things and to experiment more.
In Tutorials, by Manoela Ilic
Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements.
In Articles, by Patrick Cox
In the previous “Developing {blank} in Web Design” articles I’ve discussed Rhythm, Balance and Emphasis. But we are missing the last main principle of design — Unity. It’s a very important concept in design and one that is actually pretty easy to achieve. Unity is simply that, the unification of objects within a composition. Unity is the measure of how objects or elements fit together — or don’t for that matter. Its really just a matter of linking elements together to create harmony.
In Tutorials, by Manoela Ilic
There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.
In Playground, by Manoela Ilic
How cool is it to sometimes just display content a little bit differently? Today we want to share an experiment with you that let’s you show images and content in a unique form – a wave. The idea is to initially have some smaller thumbnails rotated and placed in a wave-like manner. When clicking on a thumbnail, we’ll “zoom” into the wave. Clicking again will make the large content area appear; here we will show some more content.
In Articles, by Patrick Cox
Let’s make a real world comparison: buildings are very much like web sites. So are we (web designers and developers) essentially just architects? When you compare web design with any other major form of art, fine art, print design, music, sculpture, architecture, it almost directly compares itself to architecture. Web design, like architecture, is an art form that has many differing interests. Web sites and buildings have users, clients, companies, products, information, technology, structure and design.
In Tutorials, by Manoela Ilic
In today’s tutorial we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place. We’ll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size.
In Tutorials, by Manoela Ilic
Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions.
In Articles, by Gisele Muller
Last week Patrick wrote a nice article about Developing Emphasis in Web Design, and today, based on that article, we decided to show you some examples of emphasis in web design. As explained in last week’s article, we will split the examples in three different perspectives: Proportion, Contrast and Physical Relationship
In Tutorials, by Manoela Ilic
Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.
In Articles, by Patrick Cox
Is it just me or is the popularity of mobile devices pushing a new minimalist movement in web design? Web design trends come and go from time to time: the dancing babies, suckerfish menus, rounded corners and ribbons have all graced the web with enthusiastic glee. But these are all more superficial things, style things. There is a movement growing in the web design community for a more minimal web, a user friendly web, a more semantic web where things have a purpose and reason for their existence. And the new mobile revolution is taking us there.
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.
