May 31, 2012

Fullscreen Background Image Slideshow with CSS3

CSS3 technology is becoming increasingly popular, and things that are realized with its help, all the more impressive and exciting. Today a post about one of these methods. I was there very much impressed with the output image to full screen browser. In a sample of "epic" and large-scale high-quality HD images created a very cool effect. So recently came across a small network of CSS3 tutorial that allows you to place in the background of a slideshow of pictures on the screen, and with some animation.

CSS3 background slideshow tutorial

In addition, the page displays the title picture, and also with CSS. It looks very cool! Although the need to clarify that it will work only in browsers that support CSS animation. So there you go:

Page Layout

For our slideshow will use an unordered list, where each image tag adding Span, and the DIV will be available heading.

<ul class="cb-slideshow">      <li>          <span> Image 01 </ span>          <div>              <h3> re · lax · a · tion </ h3>          </ Div>      </ Li>      <li> <! - ... -> </ li>      <li> <! - ... -> </ li>  </ Ul>

For each element of Span will be a certain fixed background image (background image) for the slideshow.

CSS styles

First you need to set the styles for the list itself - it will be a fixed position, but stretched to the whole scope. Also used: after pseudo order to locate a picture (with effect) over the image:

.cb-slideshow,  .cb-slideshow:after {      position: fixed;      width: 100%;      height: 100%;      top: 0px;      left: 0px;      z-index: 0;  }  .cb-slideshow:after {      content: '';      background: transparent url(../images/pattern.png) repeat top left;  }

The code used by the repetition of style. Cb-slideshow with image effects for images, though you might as well try to place a gradient.

Span, containing the background image will be positioned absolutely and have a height and width of 100%. Since it is within the specific text, make transparent color as we do not want it to display. Background-size property with a value of cover will make sure that the background image cover the entire area of ​​the element, which in turn stretches the full width of the visible screen. Transparency is set to 0, this will be changed even when the animation.

. CB-Slideshow li Infinite linear 36s 0s ; }                                                                                                                  

The animation for each Span will last at least 36 seconds and run an infinite number of times. But first consider how to resolve the issue with the display headline:

. CB-Slideshow li Infinite linear 36s 0s ; } . CB-Slideshow li div H3 { font-family : 'BebasNeueRegular' , 'Arial Narrow' , Arial , sans-serif ; font-size : 240px ; padding : 0 ; line-height : 200px ; }                                                                                                                                                 

The animation for the header block will last 36 seconds.

Further, the CSS styles should be defined background images for each Span and delayed animation (animation delay) so that each of the following picture and caption appeared in 6 seconds after the previous one.

.cb-slideshow li:nth-child(1) span {      background-image: url(../images/1.jpg)  }  .cb-slideshow li:nth-child(2) span {      background-image: url(../images/2.jpg);      animation-delay: 6s;  }  .cb-slideshow li:nth-child(3) span {      background-image: url(../images/3.jpg);      animation-delay: 12s;  }  .cb-slideshow li:nth-child(4) span {      background-image: url(../images/4.jpg);      animation-delay: 18s;  }  .cb-slideshow li:nth-child(5) span {      background-image: url(../images/5.jpg);      animation-delay: 24s;  }  .cb-slideshow li:nth-child(6) span {      background-image: url(../images/6.jpg);      animation-delay: 30s;  }     .cb-slideshow li:nth-child(2) div {      animation-delay: 6s;  }  .cb-slideshow li:nth-child(3) div {      animation-delay: 12s;  }  .cb-slideshow li:nth-child(4) div {      animation-delay: 18s;  }  .cb-slideshow li:nth-child(5) div {      animation-delay: 24s;  }  .cb-slideshow li:nth-child(6) div {      animation-delay: 30s;  }

Now consider the animation process in more detail. Span elements set the animation 36 seconds. During this time, the transparency will vary from 0 to 1 when the animation reaches 8%. More transparency is preserved until we reach 17%. After 25% it should again be equal to zero and remain so until the end.

Where did these numbers? - Let's deal. We want to see each image was 6 seconds, besides, after passing through the whole cycle again, should be shown the first picture. Since the commonly used 6 images, for a total take 36 seconds. Now we need to set the appropriate values ​​of time for transparency. Given the fact that the second frame (picture) animation will start in 6 seconds, we need to know what percentile of the animation should be shown for the first picture. Divide 6 by 36 and get 0.166 ... that would be 16% for our step parameter keyframe.Now, since we do not want to order our image just disappear all the time, we define an intermediate step, which is equal to half of the previous value, that is 8%. The bottom line is that the picture seemed to completely disappear gradually after 17%, respectively, and completely disappeared by 25%. (Ed. - here, of course, have a little pomozgovat and deal with all the subtleties of animation and mathematical operations. If you want to use to use the code "as is" - just place it in style or make similar calculations).

@ Keyframes imageAnimation                                                                               

Similar calculations apply to animate the title, the only thing that make the Cape a little faster so that he disappeared, so the transparency of 0 to 19%.

@ Keyframes titleAnimation {       0%  { Opacity :  0  }       8%  { Opacity :  1  }       17%  { Opacity :  1  }       19%  { Opacity :  0  }       100%  { Opacity :  0  }   }

For all web browsers that do not support animation, we only show the last image slideshow by setting the transparency of the Span to 1.

. No-cssanimations  . CB-Slideshow li span {       Opacity :  1 ;   }

Finally you can take care of the font size when viewing area smaller. We will use the media queries in order to set the font smaller for certain values ​​of the width.

@ Media screen and (max-width: 1140px) {       . CB-Slideshow li div H3 {  font-size :  140px  }   }   @ Media screen and (max-width: 600px) {       . CB-Slideshow li div H3 {  font-size :  80px  }   }

Perhaps that's it for the simplest version of a slideshow with background images on the screen. While you can add something in the process of transition between pictures.

Alternative Animation

The following sample code, along with a change in image scale also adds a little twist:

@ Keyframes imageAnimation                                                                                                                        

The title should be "go" to the right (you need to change text-align blocks in the value of right), then get out of moving to the left with the effect of extinction:

@ Keyframes titleAnimation                                                                                                                                   

That is, in principle, and all. On this page you can find the demo (examples) of CSS3 effects. Experiment with different effects and animation for the titles and pictures. It should also be noted that at present the most beautiful and gently slide it will work in browsers with support for Webkit such as Chrome and especially Safari. On the other, alas, can be significantly slowdown, but overall impressions of this picture I think everyone will be good.

Read More →

3D Icons/ Three-dimensional Social Media Icons

Social will be different - black, white, red, now offer a couple of sets of three-dimensional images for your social sites. Of course, 3D icons for each suit is not the layout or template, but sometimes they can add some original touches overall design of the project. The following three-dimensional social icons are displayed (displayed) at different angles and with different effects, so I'm sure everyone will find something for work or recharge personal collection. By tradition, all 3D icons can tell on the link or on-site sources, the designers from which more than thank you for the development.

Isometric 3D Social Icons Set

Isometric 3D Social Icons Set

Download ~ 9 MB / / Source

The set includes isometric icons of popular social services (31 services). A choice of four sizes: 32, 64, 128 and 256 px. Moreover, it should be noted that the collection Isometric 3D Social Icons Set are not just icons, but full rollovers (which is why the archive is not only png files, and html).

3D Social Media Icon Pack

3D Social Media Icon Pack

Download ~ 300 kB / / Source

Three-dimensional set of creative icons created to Tutorial9, can be used for personal or commercial projects. The archive includes the most popular services - Digg, YouTube, Technorati , Flickr, Twitter and others - a total of 20 different icons.

20 Amazing 3D social icons

20 Amazing 3D social icons

Download ~ 1 MB / / Source

Another very original set of 3D icons from another angle. Each logo is made without the "substrate", which may be useful in different situations. Transparent icons in PNG format size 64 × 64 and 128 × 128 pixels. They look, in my opinion, very nice, are the most popular social networking services.

Vector 3D Social Icons

Vector 3D Social Icons

Download ~ 2.3 MB / / Source

Another set was created exclusively for readers one of the design blogs. The main feature of 3D icons is simplicity of execution, there is nothing superfluous. In the archive you will find 10 three-dimensional images to blogs, sites, etc. As you have probably realized from the title is also available vector sources (AI) files that can be used to resize images without losing quality. Also, for example, a set of PNG icons added to 256x256 pixels.

Tron Legacy Icons

Tron Legacy Icons

Download ~ 24 MB / / Source

For fans of the movie or the throne of the various "neon" sites set fits perfectly. The archive will find the file formats PNG, BMP, GIF, ICO and even vector AI. It is the largest collection of three-dimensional icons, which presents images in different ways - active and inactive, and there are sizes from 16 to 256 pixels. Very cool of performance (I would say the most stocked) archive of icons.

3D Sosyal medya ikonları

3D Sosyal medya ikonları

Download ~ 500KB / / Source

The last of its kind, but not the implementation of a set - stylish three-dimensional social icons in the form of a "thin plates", contains 12 files in PNG format and size of 512 pixels. As you can see from the previews, the image looks very nice with a slight flare and rich, vivid colors. All the most popular sots.seti and services.

Of course, the three-dimensional social icons all quite specific, not every site will be used 3D images. Although in some cases, their use may add to a project of originality. In general, I think, experienced designers will find where to apply these six good sets.

Read More →

40 Best Flash Websites

It makes sense to also design, optimization, and take care of the texts. If you view certain sections of the project, it is not always a sufficient number of publications - this will be corrected. Today we continue the theme flash sites, started in the previous article, Adobe Flash for the beginner with some basic capabilities oapisyvalis technology, its advantages and disadvantages. In one of the items I gave several examples of flash sites, but they certainly were not enough to fully understand just how Flash can be steep. So I suggest you the best selection of mega-awesome flash sites in 2010.

In this list were selected the 40 best sites for premium TheFWA (The favourite website awards) from the different categories. Here you will find different sites as flash web studios, online gaming projects, personal and commercial. One of them called the best site of the month, while others have won awards the best Flash sites of the day, but it is, in fact, it does not matter - certainly there are very cool projects. You can enjoy and be inspired to begin studying flash :)

A. Amazing world of Nespresso Variations (site of the month for December). This is definitely one of the best flash work I have ever seen - all perfected in every detail, the world came up with one-piece, with lots of nuances, there is a mini game on the site, different location, lots of beautiful graphics and music.

best flash websites

Two. Noel, WHERE is My Intel? Frankly, at this site there is little understood, there are funny moments, but overall nothing special.

Intel flash site

Three. Swedish Armed Forces Recruit . That's how the army recruited in Sweden, if I understand correctly. Sorry, but no webcam is nothing special to see (the site of the month for November)

lushy flash website 2010

Four. Amazing Friendz Fascinating though simple flash toy from French developers.

flash game online

Five. Mo `s wanted . That is a reality show, or mini-site to collect donations for the group of guys, more happy style, and graphic design rather than flash.

best flash websites

6. For Colored Girls - Emotions in Color website for the movie, an interesting and novel as a flash implementation, and design work.

examples of flash sites

Seven. An interactive experience Celebrating Claude Mone t. (Site of the month for October) - certainly deserves this title because the internet made ​​the project a very high quality, there are many elements, beautiful flush transitions between pages, sense of style and idea.

best flash sites

Eight. Driven by Technology Minimum content presented with more interesting than the texts themselves and graphics (I advise to take a look, a cool flash site).

The original flash site

Nine. What `s your Real Age? This funny character is to determine your "real age" as he says, sorry, that all the voice in the Brazilian, it is necessary to read.

An interactive flash site

10. The Wilderness Downtown (site of the month for September) - uploaded my whole cent, or that he could, he "creates" a video about your city, using Google Street View - quite original, but it is very demanding on the resources (recommend using guglohrom)

tech flash website 2010

11. 31fps interactive perception of music in a variety of shapes, forms and graphics, etc. - May not be bright looks, but the implementation process was worth much effort.

The original flash site

12. Plus 360 degrees . Something related to 3D, but generally not impressed.

Flash site with 3d elements

13. The Perrier Mansion (site of the month in August) So far, the most chic collection of flash website - not every day you can wander through the mansion in the company of such an interesting lady (yes, by the way, the site is 18 + :)

chic and stylish flash site

14. Heads or Tails SoBe looks like some sort of online share (the game), where it was necessary to find a message under the lid vyigrashnoe, made ​​with high quality and bright.

a bright flash site

15. JKVC beautiful and colorful site design studio.

beautiful site Web Studios

16. Battle of the Cheetos . (Site in July) - full flash online game where you control your "Cheetos-army" and the fight against rivals for the right to rule the Internet, in terms of gameplay done qualitatively!

online flash game

17. Thingdom created to help children explore genetics - also something like a game, I pobarahtalsya 5 minutes there, but little understood) appears on the principle on Spore.

The original flash large selection of 2010

18. Party & Exhibition 2010 . Korean guys went to some show-party web site contains interactive video of the event, in principle a good idea.

Flash video website

19. Weber Design Lab . Creative Flash Web site of the studio (as far as it can be called creativity in such a solid collection), is simple and tasteful.

flash site web studio

20. An Encounter with Greatness (website June) - brought together so Pele, Maradona and Zidane to play foosball but to talk about life. The natural site with epic shots.

stylish flash site

21. The Card Chest . Tools for creating a Christmas greeting cards online, you can completely customize the sign and, as I understand it, send in reality (but paid).

best flash websites

22. Parade Is twitter visualization - enter a keyword and get a parade of avatar profiles

Flash visualization of Twitter

23. Lexus Dark Ride . The interactive site, a movie where you play a major role (the best flash website in May)

an interactive flash video site

24. California - The Game This game is designed to promote tourism in California, unfortunately now it will not play.

flash game online

25. Lollipop Project 2 . It looks like a page of a fan of Asian fashion and glamor artist or group, a bright and beautiful.

a bright flash site

26. BMW Cinetique . BMW presents the fifth series (the site in April). Stuck in the picture is in my 3d printer, in general, you can see some finished objects, or create your own.

Flash website bmw

27. Start the Change . Unfortunately the site is not available, the picture clearly :)

best flash websites 2010

28. Johannes Leonardo `s Philosophy . Looks like a web page to the studio, easy navigation, from the customers they have Google? - Cool :)

Flash Web Site Studio

29. Bank Run Game (the best flash website in March 2010) - another interactive game where you are the protagonist, is very exciting.

flash interactive game

30. Hands Symphony . Music performed by means of hands, nothing more is understood.

The original flash site

31. Canv-as.com innovative store to buy posters - you can choose to paint them, then see how the interior will look and order.

FLAINE Shop

32. Wrangler Blue Bell Spring-Summer (the site of February) - a really cool flash site, I remember back then sent a link to it, it is interesting to control the main character :)

Creative Flash Website

33. We are all Fans . The site aggregator of social media files (photos, tweets), which turned into portraits of performers - looks really cool.

Social flash site

34. NUTCASE . The famous extreme athletes from the Czech Republic - I can not say that much impressed.

Sports flash site

35. Verbatim Championship . The battle between the robots online, where you create and manage (the best flash website in January)

The original flash site

36. We Choose the moon . Reconstruction of the Apollo 11 mission of the expedition to the moon in real time (the site of the year 2009 and for good reason). Incidentally, I wrote about it in the paper, popular sites about space on the Vebdvanolnyh notes.

the best flash website 2009

37. Labuat . Interactive music video where you can click to create their own patterns and draw the music (Audience Award 2009) - super flash website!

coolest flash sites

38. The Impossible Hoop Challenge - some uncomplicated game of flash.

flash game

39. RIZ MC Microscope lab - whether the site of, or xs, in the style of science fiction and research in secret laboratories.

The original flash site

40. Market Mall Santa Tracker - Santa's website, where you can leave requests, monitor how much is left before Christmas and read a variety of information, beautiful and festive.

Christmas flash site

That's a rather big collection of the best turned out flash sites, 2010, for the selection thanks to the author of this article . Each of the above web project has some specific features and advantages that have allowed to be listed here. Some of them can boast the original functional solutions and ideas, and somewhere in the first place there is graphic design, and someone decided to take the style and atmosphere. Some of the sites is simply not impressive, it is difficult to imagine how much work and labor invested in them. After these selections you realize how cool flash technology and in some cases irreplaceable.

Read More →

Free Menus/Navigation PSD files Download

Each site basically consists of a number of important and required element, without which it is difficult to imagine a webpage. I remember once, long ago told our new novice designer in a studio that is sure to be on the site, how and why to use, etc. Menu - by far one of the key - without the navigation is extremely difficult to do. Those who take risks to do it, get very specific, but not much "usability" layouts. In general, no menu, the site is difficult to imagine themselves in the implementation of the menu are varied. I suggest you two interesting PSD file menu.

The menu in Apple style

psd files menu

Download / / Source

To begin with a simple menu, but very stylish and "clean" with no extra effects - 3 different color schemes carried out in shades of gray. A dedicated button for a link to "Home" + block the search for each menu item is the style when you hover mouse on it. As used font Lucida Sans. This PSD file size is 600 × 400 pixels and weighs 408 KB.

Free PSD files menu

psd source site menu

Download / / Source

Here is a hefty set of menus in PSD - a godsend for web designers. So many different designs of the navigation controls in the same place I had not seen. I think many will agree with me. Judging by first impressions, all the menus provided in the kit - multi-level: somewhere it is implemented as a sub, somewhere in the form of a drop-down list. This PSD source, in fact, allows you to create virtually any menu in accordance with their wishes - colors, fonts, shapes and shadows - all can be changed. Set just have to be in the bins of any web developer and designer.

Read More →

Ways to Navigate Users to the Site

Imagine that you are traveling by car, but because of traffic jams all the main roads are blocked and you need to turn in an unfamiliar part of town. For a while, moving in the right direction will help you to road signs, but suddenly they disappear. It seems to get lost in an unfamiliar place pushover.

Any site, regardless of its ultimate goal should be to perform the main task - to specify the path to the user information of interest to him. However, perhaps the fault of their own, and perhaps the fault of the designer, the user is lost and does not know where to go. How do you help your visitors navigate the site. There are several effective ways.

Page Titles

Each page of the site needs to be unique, rather short, but no less meaningful title. The title tells users that it can be found on a given page. Page titles performs its function is much more effective if:

  • more basic font header text at least a couple of pixels;
  • used a different font color, font or background;
  • there is a noticeable space above and below the title.

Bread crumbs

"Bread crumbs" is called a chain of links that are intended to show how the current page belongs to the principal.Often they are located directly above the page title. For example: Home> Forums> Jobs> Jobs.

Advantages of "bread crumbs" in their ability to instantly point to the location of the user, and to help the latter understand the structure and hierarchy of the site. The user sees, how he got to the current page, and how he go back a few steps back.

In this case, "breadcrumbs" show the real structure of the site, rather than the way in which the user came from.By the way, if you have a blog on wordpress, I advise you to read the article about how to make bread crumbs in WordPress using plug Breadcrumb NavXT.

Primary and secondary navigation

Although it is obvious, but not out of place to recall that it was proper to use the primary navigation is the most powerful tool to guide users. It is desirable to make the navigation controls other than the color and the background, the names of navigational elements should closely match the page title. In contrast to primary navigation, which determines the sections of the site, the secondary takes the user to specific pages. You can use the PSD files beautiful menu for the site , which were published in the last article.

References

Links must clearly communicate, where they lead. Users are more likely to pass by reference, if there is to know where it leads. Do not load the page meaningless slogans like "Click Here". As the names of other elements of navigation, the names of references should correspond to the target page title. Some tips on design options , you can also find in this blog.

The structure of the page

An important role in the site navigation and structure of the plays of its pages. When designing pages, remember that:

  • Many users are familiar with the standard structures of sites, so the location of the navigation controls in the places where they expect to see, makes it easier to navigate. Try to avoid too "clever" designs.
  • easier for the user to decide where to go, if the key elements (links) are close by. Try to group the key elements.

Progress

It is desirable to show the user steps in the procedure that he performs on the site (we are talking about procedures that require sequential visits to several pages, for example, when ordering the goods in e-commerce site or downloading files.) Make progress is easily visible to the user saw his current position, passed, and the next steps.

Site Map

Availability of maps is important for sites with many pages. That's really where it's easy to get lost! Go to the map can be accessed when the information can not be found by searching the site, so the site map should fully reflect the structure of the latter, to be clear and understandable. To create a wordpress site map for your blog , you can use plug-dagon design sitemap generator.

Title page (Title)

Title page - the text, which is located in the browser's title bar. Remember, the shorter the name, the easier to understand its meaning. Important information first place, since it is often the first few words are the most important to users. The meaning of the name should remain clear, even if the page is not visible (in your history or favorites list.)

In general, all requests for user navigation will be extremely positive influence not only on the positive perception of the project from the visitors. Some of them are also useful for search engines - site map, breadcrumbs, the name of the page - all the right things. In addition, the better the usability of the project, including navigation, the better it will work and the more he will be giving.

Read More →

Free Business Icons

The characters' Basket ',' Credit Card Visa »,« PayPal »,« Calculator "," Sale »(Sale) - a mandatory attribute of any modern commercial site. This may be a normal online store or site, where there is any products or services. In any case, if you are developing just such a project on e-commerce, without a good set of business icons you can not do. Our selection of a small selection of your hands!

30 E-Commerce Icons

commercial icons

Download (2 mb) / / Source

30 E-Commerce Icons - a set has been designed specifically for studio GraphicsFuel portal Sixrevisions. As the name implies, a set of 30 commercial icons. Design - "Candy." In my view, the set includes almost everything that can be useful - an icon for discounts, delivery, gifts, calculators, etc. (Except, of course, the character of Russian payment systems like Webmoney or Yandex). The size of icons - 128x128, 64x64 pixels, and 42h42. For each icon there are PSD sources, not least because you can make the necessary changes, having the ability to work in Photoshop.

KaChing Icons E-commerce

E-commerce Icons

Download (2,66 mb) / / Source

KaChing - even a very attractive set of business icons (although the design is easier than 30 E-Commerce Icons, it is as though a "pixel"). The format of icons - PNG. Size 48x48 and 400x400 pixels a little bit unusual. Like the previous set, includes the source files in PSD, poєtomu you can easily tweak the picture and get the pictures you need. As you can see, each icon has a name (below) that you may understand better why this or that option, the choice is a little more, although there are standard credit cards, shipping, gifts, basket and all that.

Read More →