In Tutorials by Manoela Ilic
Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.
In Articles by Patrick Cox
In order to further demystify HTML5 and help these knuckle dragging designers and developers to jump on the bandwagon I’ve put together a top ten list of reasons why we should all be using HTML5 right now.
In Articles by Manoela Ilic
Centering elements in a web design is a very effective way of creating visual balance. Centered designs can also make responsiveness easier, a property that is becoming more and more desirable with the growth of the ‘mobile web’. Inspired by these two ideas I want to share a couple of centered designs with you. The collections consist of web designs that mainly have centered elements like headlines, images or content areas.
In Tutorials by Manoela Ilic
Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.
In Tutorials by Manoela Ilic
Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.
In Playground by Manoela Ilic
Today we want to share a neat image blur effect with you. Using canvas, we want to blur images on the transition to another one, creating a smooth effect.
In Articles by Patrick Cox
Lines, lines, lines. Lines are everywhere in design, they are used to divide space, direct the user’s eye, create flow, create emphasis and organize all design elements into form. Generally, we don’t think about lines that much, but we make use of them quite often to visually communicate our objective to the user.
In Articles by Gisele Muller
Typography is a very important part of design and choosing the right type for your design can be very challenging. From print to web layouts, typography is the center piece of a good design and today we gathered a few examples of beautiful typeface combinations in web design to inspire you. In web design, typography can be used in different forms, big bold headers, simple and clean menus, explanatory text and so on. Finding a good combination of typeface is more than only good taste, it’s an art.
In Tutorials by Tim Holman
With HTML5 gaining popularity, this tutorial outlines what is really just the tip of the iceberg that is interactive design. In this tutorial I will go over the development of dynamic, and generative banners to give your website that little extra wow!
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.
