Cool Web Layouts

Recopilación de Web Layouts interesantes.

www.yakult.co.kr

www.weareacademy.com

www.walkwithyou.me

www.teamfannypack.com

www.pieoneers.com

www.midtsommerjazz.no

www.designfabrika.com

www.bundlehunt.com

www.afedorenko.com

www.1md.be

How to Create a Fixed Navigation Bar for Your Website

There are many ways to approach navigation on your website and they all have their pros and cons. We have the top horizontal navigation bar, which can limit the number of links you can have before you have to resort to sub menus which, in my opinion, aren’t the best — but if you’re only looking to keep a couple of items in your navigation bar, this could be the one for you.

Another approach is the vertical sidebar menu, but a drawback of this approach is that users can become overwhelmed when sub menus start popping out from all over the place. Finally, there’s the tab bar navigation system – the problem with this approach is that it takes a lot more time to design but if you design it well, boy is it good.

In this tutorial, I will be showing you how to create a horizontal navigation bar that sticks to the top of the screen using CSS and HTML. Now, why would you want it to stick to the top? Well, by having the bar stick to the top, this means that the user does not have to scroll to the top when they want to change page. For this tutorial, we’ll be using CSS and HTML and applying CSS3 effects such as drop shadows and background opacity.

Step 1

Open up your text editor, in this tutorial I will be using Chocolat — a great text editor, despite the fact it’s still in beta — and create a directory that contains a CSS file (main.css) and a HTML file (index.html).

Step 2

Within the HTML file, add the basic structure of a HTML document (the basic HTML5 structure is here) and ensure that the file links to your CSS file.

Step 3

Now, within your CSS file, we’re going to create a div that will contain the navigation bar and make it float, I’ll go through it step by step so you know what’s going on. Add the following to your CSS file:

#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}

#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: grey;
} 

The first three lines define the navigation bar container to be fixed, meaning it does not move. The second line defines the position, at the top of the screen; if you were to change this value the navigation bar would change position but because we want it right at the top, 0 is the value we want.

Next, we define the width of the navigation bar at 100%. This means that the bar will span the entire width of the screen and webpage, you can change the size to something like 800px but I think it looks a lot better if it spans the entire width of the webpage. Next, we define the height (35px) – pretty self explanatory but feel free to change and experiment with the values.

We define where we want the text to appear and align itself, in our document it’s in the center but feel free to change this. If you do, make sure you apply padding to make sure the text isn’t right next to the left or right of the webpage. Next, we use padding to essentially position the text so that it will appear in the middle of the navigation bar.

Now, we get to interesting, fancy CSS3 stuff. The next three lines define that the navigation bar will have a shadow, the first two 0pxs define any inset we want on the shadow, for a navigation bar I wouldn’t suggest this, the 8px defines the blur of the shadow — I’ve chosen 8px because it doesn’t add too much of a blur whilst remaining noticeable. The final 0px is the amount of spread. You could think of this as a stroke applied before the shadow blurs, looks good if used correctly, looks terrible if it’s not and finally we have the hex value for the color of the shadow — I’ve used black (#000000) but you can use something like white or yellow to create a glow, depends on the background of your website really.

Now, the last two lines of the CSS define the background of the navigation bar and for a fixed navigation bar it looks good to have the bar semi-transparent and this is what this little CSS3 code does. The first three values specify the RGB values and for this I have created black (the only reason I’ve used black on this webpage is because the background is white and black is a nice contrasting color but feel free to change any of these values as you go along). The final value (0.8) is the alpha and this is what makes the background transparent. Alpha (or transparency) ranges from 0.1 (most transparent) to 1.0 (least transparent, or opaque). I have used 0.8 because the user will definitely be able to tell that it’s transparent whilst also being able to notice the text within the actual navigation bar.

The next two declarations essentially give the text that will be in the navigation bar some style and the #navigation a:hover defines what will happen when the user hovers over the text, in this case it will change from white to grey.

Step 4

Now, all of that is out of the way, we need to add some HTML to our document that will actually make use of this CSS. So, switch back to your HTML document and add the followong class and text to it:

Home
Portfolio
Our Apps
Support
Press
About

Here, we’re making use of the navigation div that we created earlier and also adding some a tags that are links to other pages, feel free to change the ‘#’ signs to URLs.

Step 5

Open your HTML file in your browser and you’ll see that something isn’t quite right, there’s a space on the left hand side between the start of the navigation bar and the edge of the website. How could this be? We defined the width as 100%. Well, for some reason unknown to me, there’s automatically padding added to HTML documents by your browser and you must define otherwise in your CSS file.

Step 6

Switch back to your CSS file and add the follow code at the top:

body {
padding: 0;
margin: 0;
}

This will remove the automatically added padding to your document.

Step 7

Now, you can optionally add some text and information to your HTML document to test your new navigation bar. I’ve added some content (and given it some style which you can see if you view the source files) as well as added an image. Now open up the HTML document in your browser and you’ll be able to view the navigation bar and it will perform correctly.

The point of this tutorial was to show you how to get up and running with a navigation bar that stays at the top of a webpage. You can apply this not only to navigation bars but also to buttons that ask for feedback or take users to social network pages. This tutorial also demonstrates some interesting CSS3 principals and core HTML practices.

Click here to download the source files.

[ Go to Source ]

Random Apps And Tools For Designers And Developers

I’m very glad that we work in a vast domain where new resources appear everyday from handy developers and designers for the rest of us, developers or designers. Having said that, I’m inviting you to check out this list of 33 tools and apps that could help you on your projects.

Bear CSS

Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.

Rickshaw

Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock.

Jeditable – Edit In Place Plugin For jQuery

Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements.

Font.js: A Powerful Font Toolkit for JavaScript

Mike Kamermans has been working on a little font toolkit for your JavaScript that is kind of akin to the built-in Image object but for Fonts. It gives you font loading events using a technique perfected in Mozilla’s pdf.js project, metrics information, and a better version of the canvas element’s measureText method with additional information such as height, bounding box, and leading.

HTML5 Reset v2

Like a lot of developers, we start every HTML project with the same set of HTML and CSS files. We’ve been using these files for a long time and have progressively added bits and pieces to them as our own personal best practices have evolved.

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it’s time for our best practices to catch up, and we thought we’d put our files out there for everyone to use. By no means do we see this as the One True Way to start every project, but we think it’s a good starting place that anyone can make their own.

jQuery Collapse

This Plugin delivers an accessible and lightweight solution to a widely adopted interface pattern (known as progressive disclosure). It includes features like cookie persistence, ARIA compliance, and is designed to be flexible and modular enough to be used in many different’t scenarios.

PxLoader: A JavaScript Preloader for HTML5 Apps

PxLoader is a Javascript library that helps you download images, sound files or anything else you need before you take a specific action on your site (like showing a user interface or starting a game). You can use it to create a preloader for HTML5 games and websites.

jquery.mentionsInput

jquery.mentionsInput is a small, but awesome UI component that allows you to “@mention” someone in a text message, just like you are used to on Facebook or Twitter.

ofmlabs codecs: A suite of JavaScript audio codecs

Web browsers are becoming more and more powerful, and new APIs like the Web Audio API and Audio Data API are making the web an ever more interesting and dynamic place. At ofmlabs we are invested in improving the state of audio on the web, and with JSMad showed that decoding audio purely in JavaScript is possible thanks to these APIs and the hard work of browser makers and spec authors. And now we’ve done it again. Introducing alac.js, a port of the recently open sourced Apple Lossless decoder to JavaScript. Now it is possible to play MP3 and Apple Lossless even in browsers without native support.

Ember.js

Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.

Enlight

Enlight is the new open source e-commerce framework by Shopware. Enlight is based on both the Zend framework and the Symphony 2 framework but, unlike them, focuses on the developing of modern rich internet applications (RIA) as well as individual e-commerce applications.

PHP BUG LOST

PHP Bug Lost is a one-file script PHP debug and monitoring console. Include it in your script and: send log messages, view SQL queries (sends an email to the admin if there’s an error), measure times and memory usage (sends emails for long loading times or excessive memory usage), see all the vars in your scripts and view all your AJAX queries (send params and responses).

Gridpak: The Responsive grid generator

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

jqMobi

jqMobi is a Javascript framework targeted at HTML5 browsers with a blazingly fast query selector library that supports W3C queries.

FeedEk jQuery RSS/ATOM Feed Plugin

FeedEk is an RSS/ATOM Feed Reader/Importer/Parser that is written with jQuery. You can obtain feeds easily from any domain.

Fbootstrapp

Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.

Revolver.js

Revolver is a new content slider that makes no assumptions about your markup. Think of Revolver as a boilerplate or framework for making your own slider, exactly the way you want it.

3×4 Grid Builder

The 3 × 4 grid poster illustrates a change in design practice. Computation-based design—that is, the use of algorithms to compute options—is becoming more practical and more common. Design tools are becoming more computation-based; designers are working more closely with programmers; and designers are taking up programming.

Scrollorama

impress.js

It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers.

jQuery UI Bootstrap

With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually.

Screenfly

CoderDeck

CoderDeck combines Deck.js with the CodeMirror2 highlighting code editor to make it easy to demo and teach live HTML, CSS and Javascript directly in the browser.

Dialawg

The astonishingly simple way to share, track, protect, and control your files, messages…and relationships.

WhatFont Tool

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.

Patternizer

With Patternizer, it’s easy to make something amazing in just a few minutes. It takes all the work out of creating complicated patterns, letting you focus on creativity and play. Patterns can be saved and shared with anyone, allowing for collaboration and remixing.

Clickdummy

Clickdummy is about communicating your designs better. ClickDummy turns your website, mobile and software mockups into clickable prototypes with room for annotation and feedback from your clients, friends, and co-workers. No more emailing .PDFs, trying to trace feedback through message threads, or worrying about putting Photoshop images into an HTML container. Clickdummy puts your designs and feedback in context.

Remind Me Later

Remind Me Later adds events to iCal in two clicks. Type “Buy groceries at 4pm tomorrow”, and it will add “Buy groceries” to iCal at 4pm tomorrow.

Projectial

Projectial is a system which makes managing projects, human resources, finances, and time, more effective. Implementing it, you can overview the employees, their tasks and projects, and the whole company.

Skyclerk

Skyclerk will change the way you look at bookkeeping and accounting forever. Our system makes it so any small to medium size business can be up and running with a fully robust accounting system in seconds. No software to install, no backups to worry about, no expensive shrink wrap software to buy.

Golden Ratio Calculator

There are two scenarios the calculator is designed for. The first is that you have a column with a certain width (perhaps to achieve a nice word:line ratio). You wish to find a matching column. Type in the width and use the left side, which gives you both a smaller and larger column.

The second scenario is that you have a container and wish to divide it in two. Type in the container width and use the right side measurements

Opus Domini Lite

Personal Planner and management application, includes
-Daily Tasks
-Master Tasks
-Compass
-Goals
-Mission
-Multiple Planning Views
-Meeting Planner
-Repeating Tasks
-Subtasks
-Master Task Planner
-Event synchronization with ical
-Search
-Password protection
-Weather info

Smartling

Web and mobile app content is becoming more dynamic. Content that could, should and would be translated is growing exponentially. The “translation challenge” is only getting bigger.

Go to Source

Useful CSS3 Buttons Tutorials And Techniques

CSS3 brings to life countless new possibilities to make even better websites. Creating buttons with CSS is one of the most experimented-with web design techniques. /> Below we’ve collected best tutorials to make extremely gorgeous buttons using CSS3.

Super Awesome Buttons with CSS3 and RGBA

Create a CSS3 Call to Action Button

Build Kick-Ass Practical CSS3 Buttons

Just Some Other Awesome CSS3 Buttons

CSS3 Buttons with Icons

Type Study: An All CSS Button

Roll Your Own Google Buttons

CSS3 Facebook Buttons

Make CSS3 Buttons That Are Extremely Fancy

How To Design A Sexy Button Using CSS

Building Beautiful Buttons With CSS Gradients

Beautiful Photoshop-like Buttons with CSS3

CSS3 Gradient Buttons

Better Button and Nav Interactions

BonBon: Sweet CSS3 buttons

Know other techniques for creating awesome CSS buttons that weren’t mentioned here? Please share them in the comments!

Go to Source

10 awesome HTML5 audio players

Media Element

MediaElement is an audio an video player which is written in pure HTML5 and CSS. Older browsers are supported by Custom Flash and Silverlight players that mimic the HTML5 MediaElement API.
Media Element is skinnable, and offers plugins for popular platforms such as WordPress, Drupal, Joomla, etc.

→ Visit http://mediaelementjs.com/

Scott Andrew’s HTML5 audio player

This player is very minimalist but works well. Great to use when you do not need playlists or any fancy effects!

→ Visit http://www.scottandrew.com/pub/html5audioplayer/

Speakker

Here is a great player, probably my favorite from the whole list. Speakker is super easy to set up and comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors, etc…
Speakker is cross-browser compatible and have a Flash fallback for old browsers.
and two different button sets for light and dark themes.

→ Visit http://www.speakker.com/

MooTools HTML5 Audio Player

Are you using Mootools on your website? If yes, you’ll probably enjoy this player, made with HTML5 and the Mootools JavaScript framework. The player works perfectly on all recent browsers.

→ Visit http://simulacre.org/mootools-html5-audio-player/

Universal HTML5 Audio Player

This player is the only one from the list which isn’t free. But it’s cheap ($5 only!) and works well. It have lots of useful features, such as a way to protect your audio from being hijacked by using a beep overlay, which is a great solution for commercial uses.

→ Visit http://codecanyon.net/item/universal-html5-audio-player

SoundManager 2

Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single lightweight (10 kb) JavaScript API.
Want to see what you can do with Sound Manager 2? Then visit http://wheelsofsteel.net/ for an awesome demo!

→ Visit http://www.schillmania.com/projects/soundmanager2/

jplayer

jplayer is a jQuery plugin which have been my audio player of choice for several months because of its simplicity. A great tool which can also play videos.

→ Visit http://jplayer.org/

audio.js

audio.js is a drop-in javascript library that allows HTML5′s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.

→ Visit http://kolber.github.com/audiojs/

HTML5 Audio Player Bookmarklet

This bookmarklet adds an audio player to play linked audio files on any page. It can be used on any page which has links to downloadable audio files. A great tool to stream audio instead of downloading!

→ Visit http://marklets.com/HTML5+Audio+Player.aspx

Go to Source