Splashnology

50+ New HTML5 Websites

AndrewG — Tue, 21 Feb 2012 22:31:51 +0000

Are you ready to get a new portion of inspiration? We have no doubt that it’s so! As a lot of new HTML5 sites have appeared since we did our last review on 70 Original HTML5 Markup Websites, we would like to share with you the best examples of the recent HTML5 websites. Perhaps, some of these might give you great ideas on how to enhance your own web site.

Girl with a Camera

The One Pause Poetry

We New

Dangers of Fracking

Salt Surf

Austin Beerworks

Lavazza

The Work Cycle

Edits Quarterly

Barack Obama

Kicksend.com

La Moulade

Jibe Visuals

Mathieu Strabach

Mark Heggan

Hello Happy

English Workshop

Slavery Footprint

Adrian Baxter

Vlog.it

901.com

South Mountain

Anna Safroncik

Green Campus Guide

Gallery of Mo

Styro

Dataveyes.com

Scandalous Dirt

Social Summit

Solo

Mezcal Buen Viaje

Kipling

Visions of Beauties

Ala

Flow Festival

Lounge

Inze.it

Jessica Caldwell

Rally Interactive

Fashion Photography

Protest

Neotokio

255 Сreative

Adventure World

Michel Bergerbooze

Neverbland

Zeitgeistbot.com

I am Jamie

Cycle to Work Calculator

April/Zero

Leminence.fr

Soleil Noir 2012

Trinity Webtech

Want More Cocktails?

Web Design Inspiration Cocktails’ Section

28 New Free Fonts For Web Designers

AndrewG — Mon, 20 Feb 2012 14:55:13 +0000

It is obvious that Web designers do their best to make their sites better and more attractive to the visitors. When creating a site they must take into account every detail even the smallest and choosing a font you are going to use sometimes can bring you to a deadlock. We have previously showcased some great collections of free fonts and we are not going to stop there! We would like to present to you a really amazing collection of free download fonts collected from all over the web.
You can use some of these fonts for specific purposes and others can be used for general use. Feel free to visit our site to get more updates for our next font collections.
Warning: A font, like any other software, has a license attached to it, so you’d better check up the license before using them in your commercial works or other projects.

Adamas Regular by Octavian Belintan

“Adamas” was first used by Greek and Latin writers for a stone of impenetrable hardness. Download the font for free and use it in any way you like, commercial or personal.

Download

Poly by José Nicolás Silva Schwarzenberg

Poly is a medium contrast serif font.

Download

Bispo by Jackson Alves

Bispo is a script typeface made inspiring on italic chancery calligraphy, with a flat nib pen and a module of 10 pen widths.

Download

Molesk by Pedro Lobo

Download

PLSTK by Aesthetic Therapie

Font inspired in the plastic industry.

Download

Hagin Serif by Miroslav Bekyarov

Hagin is a new serif free font from Fontfabric constructed with strong geometric forms in “old school” style. Applicable for any type of graphic design – web, print, motion graphics etc and perfect for t-shirts and other items like posters, logos.

Download

Static by Slava Kirilenko

Static is contemporary free font constructed with strong geometric forms in monospaced style. Applicable for any type of graphic design – web, print, motion graphics etc and perfect for t-shirts and other items like posters, logos.

Download

Diplomata by Eduardo Tunni

Download

Origram by Nuno Dias

Inspired in Origamis and Tangrams, the basic shape is an octagon. Gemotric, regular, its a display font.

Download

Archive by Slava Kirilenko

Archive is contemporary free font constructed with strong geometric forms. Applicable for any type of graphic design – web, print, motion graphics etc and perfect for t-shirts and other items like posters, logos.

Download

Rex by Fontfabric type foundry

Rex is a font family with three weights – light, bold and bold inline – that was designed to create unique titles on the fly. It’s all caps font, but there is a difference between both – caps & small caps (see in the examples). Applicable for any type of graphic design – web, print, motion graphics etc and perfect for t-shirts and other items like posters, logos. Cyrillic version is included.

Download

RBNo2 by Rene Bieder

It is inspired by late 19th century industrial fonts with german roots regarding straightness and geometry. Combined with other sans serifs, slab serifs and serif fonts it catches the eye when used in headlines and short copy texts. Additonally to the regular styles the alternate versions will turn the font into a perfect partner for modern, technical and contemporary impressions as well as high quality, luxury and timeless environments.

Download

Prosto by Emelyanov Pavel

Font has multilanguage support and could be used as in titles, as in body text.

Download

Glegoo by Eduardo Tunni

Glegoo, a truly modern slab serif. This Regular style is the first of what will be a large typeface family. It has a precise balance of shapes, counterforms and strokes. Glegoo is slightly condensed, has a large x-height, short ascenders/descenders and large counterforms. These attributes all add up to help reading text, even in very small sizes. Its careful design and proper choice of weight generate a nice texture in paragraphs of text, but the design is also intended to work well when composing headlines with presence and elegance. Large usage will show off the delicate modulation of strokes that are in this font.

Download

Lorena by Arnold hoepker

Download

Grogy by Serge Shi

Download

Ferrica Light by Luis Fernando Carvente

Taking elemnts from the traditional art of “rejería” (palace gates) in Spain and former colonies wich is based upon organic shapes from bindweeds and finding its height in the baroque period. Ferrica keeps this aesthetics while its geometric general strcuture gives it a fresh and new touch.

Download

Hexa by Akos Polgardi

Hexa is a blackletter (textualis) typeface designed along a handful of
simple and strict construction principles. It feels at home primarily in magazines and bibles but you can just as well use it for designing wayfinding signage at airports or laying out phonebooks.

Geotica by exljbris font foundry

The idea behind Geotica was to build a font out of -more or less- simple geometrical line elements. The open wire frame could then be left open or (partially) filled. Geotica comes in four different grades or line thicknesses (One, Two, Three and Four) so it’s suitable for a broad use. Each grade has four styles and is loaded with swashes, final forms, lots of ligatures and ornaments.

Download

Belgrad by Vinzent Britz

This font based on the futura. Added some Art Nouveau elements.

Download

You might also be interested in..

25 Newest High Quality Free Fonts
17 Latest High Quality Free Fonts
50 Amazing Grunge Fonts
32 Cool Sketch Fonts
18 Fresh and Free Fonts for Web Designers
20 New Free Fonts For Web Designers
20 New High Quality Free Fonts
50 Free Fonts For Web Designers
20 Free Creative Handwritten Fonts

Web Design Inspirational Cocktail #25

AndrewG — Sun, 19 Feb 2012 15:36:57 +0000

Nowadays, the development of new site designs is not standing on the same place. Web designers use various tools, their skills and when they get inspired they create a new masterpiece. If you do not have new ideas or just want to look at the work of other authors, then you should certainly see our weekly selection of the best web site designs for inspiration. Here you’ll find some amazing, funny, creative and sometimes unusual designs.

Anet Design

Loenneberga

Clear Assembly

S.O.S Mamute

Panisse restaurant

Steely M

Trinity Web Tech

Life in the Bubble

Soleil Noir Studio

Muffi

Want More Cocktails?

Web Design Inspiration Cocktails’ Section

Parallax Scrolling: Tools, Articles and Tutorials

AndrewG — Sat, 18 Feb 2012 19:23:14 +0000

In our previous post dedicated to parallax scrolling effect, New Websites with Parallax Scrolling, we’ve already described the principle of its work. And today we would like to present to your attention some resources with the help of which the parallax scrolling can be achieved. Here we’ve gathered jQuery plugins, articles and informative tutorials. In case you know any useful sources on this topic, please don’t hesitate to share with us via the comments.

jQuery plugins

jQuery Parallax Image Slider

Custom jQuery Plugin for Creating Parallax Effect Image Sliders.

Demo | Download

Jquery Image Parallax

The jQuery Image Parallax project is a plugin that gives an illusion of depth to an image with transparency (PNG, GIF) by repeating it and animating movement.

Demo | Download

Scrolling Parallax: A jQuery Plugin

Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website.

Demo | Download

Scrollorama

The jQuery plugin for doing cool scrolly stuff.

Download

Scrolldeck

A jQuery plugin for making scrolling presentation decks.

Demo | Download

jParallax

jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way.

Demo | Download

Stellar.js

Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element.

Demo | Download

jQuery Scroll Path

A jQuery plugin for defining a custom path that the browser follows when scrolling.

Demo | Download

Curtain.js

This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. Exactly like a curtain rises.

Download

Plax

Plax is a jQuery / Ender plugin that makes it suuuuuper easy to parallax elements in your site based on mouse position. You can see it implemented in many places throughout GitHub, including the 404 page, the 500 page, and the about page.

Demo | Download

Articles and Tutorials

Parallax Slider With jQuery

Demo

Building a parallax scrolling storytelling framework

Demo

jQuery Parallax Tutorial – Animated Header Background

In this tutorial i will explain in detail how to create your own parallax background effect using jQuery to manage the animation aspects of the banner which you could use for your header background.

Demo

Create a funky parallax background effect using jQuery

In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.

Demo

Build a parallax scrolling website interface with jQuery and CSS

Parallax scrolling website interfaces have been popping up all over the place recently. I didn’t want to miss out on the fun, so I have put together a parallax scrolling demo built using jQuery and CSS.

Demo

The 3D Parallax Effect

Demo

You might also be interested in..

New Websites with Parallax Scrolling

Mind Blowing Art by Matei Apostolescu

AndrewG — Fri, 17 Feb 2012 21:16:45 +0000

When searching the web for some inspiration we came across an undoubtedly great and talented artist, his name is Matei Apostolescu. He is a freelance illustrator and graphic designer based in Bucharest, Romania, EU. His works are really intricate and beautiful to wander at. When creating illustration he uses complex shapes and patterns and pays a lot of attention to the smallest details, as detail has always been one of his favorite things.

The passion to drawing appeared as he learned to hold a pencil in his hand. He started as a graffiti artist and moved from web design to illustration and found a source of inspiration in polymer clay modeling and animation. For some reasons clay modeling might be considered as a hobby in contradistinction from illustration, but Matei stated that it taught him a lot of things about perspective and form, and that it’s a great way to enrich a designer’s experience with digital art.

If you still haven’t seen his amazing and captivating artworks, you should definitely check out the illustrations presented below. We’ve handpicked some of his incredible pieces for your revision. To see more works, please visit his personal web site. There is also presented his collection of polymer clay models and toys.

City 13.01

Probably best author’s work. Incredible detailed psychedelic city. It’s just a part of BIG artwork. Click to the image below to see the full picture.

Battleship 13

Now Fix It

Fire Control Tower

Mr. BWR M1

The 4th surf dude of the apocalypse

Tree Zero Three

General AH64

Farewell Mr.Eldritch

Majestic thirteen

I, the accuser

Thermonuclear oubliette

2010 all in one

Swift Revenge

Wallpaper

A time to destroy

Strange Spring Trap

H.Kahn`s dark delight

Morning cat

Serial Antichrist

Final Transmission

Entanglement

Strangelet Soup

All your base…

Flow my tears the lion said

The angry god of real estate

Interdimensional currency

Winter Launch

Will it bite?

13 micrometers garden.

HealthKare Grandma

Midnight cat

Beware of the friendly bomber

Our benefactors

Silencer

Golem13

Full spectrum dominance

Can you see

The Ignition Perspective.

On a side note.

It felt like a kiss

Beyond the Sloan Great Wall

Fear Alright

Operation loveful heights

The art of music in pre-war times

Statistical delight

35 Examples of Minimalism in Modern Web Design

AndrewG — Wed, 15 Feb 2012 20:49:11 +0000

Minimalism has always been something special, because it’s a real art to do something worth attention with limited resources. Speaking of web design, it seems that minimalistic trend holds its position and a good reason for that is that really talented designers can show their mastery and make a quite simple site look elegant, modest and clean, only by applying some fonts and other light design elements. Minimalistic design is not only looks good, but it also influence the web page loading time and for some web sites and services it plays a vital role. If you decided to make your site look simpler, you might get inspired with the collection of 35 Examples of Minimalism in Modern Web Design presented below.

Nicola Potts

Studio AIRPORT

Goodness

Antoine Wette

Pelicanfly

Yuna Kim

Idea Exhibit

Christian Woo

We Are Empire

Bärnt & Ärnst

Intuition-events.be

Alien Bikes

Deux Huit Huit

Teo Choong Ching

Jon Montenegro

K.A.N.T.T.

Decorate Playlists

Lisi Design

Styiens.com

Mark Dearman

Shelton Fleming

Luan Freire Kondo

La Moulade

Fabrizia Giuffrida

MK Design Media

Subplot

Salt Surf

Mathias Sterner

Spring/Summer

Mike Smart

Unlisted Collection

Dotmick

Fruita Blanch

Type Media 2011

Life in the Bubble

Want More Cocktails?

Web Design Inspiration Cocktails’ Section

CSS3: Life Without Prefixes

Renat Rafikov — Tue, 14 Feb 2012 21:59:23 +0000

Prefixes are a good thing. They help browser developers in realization of new possibilities. But with them developers’ lives get even more difficult. There are a lot of prefixes, and sometimes there are distinctions in syntax.

The problem is obvious. We need to find a method to facilitate the work with prefixes.

Of course, it would be unreasonable stop using prefixes. But it’s quite possible to shift a duty of their generation on specially existing for this purpose instruments. I tried to enumerate the possible variants.

Preprocessors

The essence of preprocessors is that the author of styles file can use additional possibilities, which are not presented in CSS, like variables, similarity of functions and much more, studying the syntax of preprocessor preliminary, a preprocessor will create the normal file of styles, substituting variables and other code for static values. Possibility of code’s replacement can be used in order to generate a cross browser code with prefixes automatically.

The most popular CSS preprocessors are LESS and SASS.

They are direct competitors, although there is a difference between them. Both can be used on the server-side, but LESS is also accessible as a javascript-file, therefore this feature could be dealt with separately.

LESS

This preprocessor possesses a syntax, which is simpler, than its competitor has. There is an ability to process the files of styles on the server-side, but now we are interested in the facility of working on a client-side through the javascript file.

Installation:

Mixin:

.border-radius( @radius: 3px ) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

Use:

#shape1{
  .border-radius(10px);
}

In order to work with prefixes, it is needed to use mixins (the same code, which knows what and where to replace). There are the prepared sets of mixins and libraries for CSS3:

lesselements.com/
github.com/jdmiller82/-lessins-
snipplr.com/view/47181/less-classes/
roel.vanhintum.eu/more-less/

Not necessarily to compile .less files on a server or in a browser, it is possible to get a ready CSS file locally and use it on a web-site.

SimpLESS is an application that automatically compiles .less in standard CSS. Free of charge for all platforms.
Less App is analogical application, but for Mac only.
There is even an expansion for Dreamweaver, compiling files .less in CSS.

A client computer gets files .less and .js, after processing in a browser we get a file .css with all possible prefixes.

SASS

It is written on Ruby. Has more possibilities, than LESS, therefore it suits better for large projects. The use for the generation of prefixes will be practically as in its competitor, that is through mixins.

One of its pluses is that it has a Compass framework that contains the readymade libraries and mixins, including the one for working with CSS3. There is an application for the local compiling of SASS files in CSS. It is cross platform, but requires payment (graphic interface requires payment, and the compiler is opensource).

There are also CSS3 mixin libraries for SASS:

github.com/thoughtbot/bourbon

A processing of SASS files is being held on a server, and a client computer gets the readymade .css file.

Advantages of preprocessors:

+ There are a lot more things to do, except prefixes
+ Possibility to process the CSS files automatically (for example, to compress, deleting superfluous)
+ Normal caching (indeed, LESS is cached by means of localStorage)

Disadvantages of preprocessors:

- For a variant with javascript it is the dependence on the included scripts in a browser
- a code is Generated with all possible prefixes, not only with those that are need for a concrete browser

More competitors:

• CSS Agent on ASP.NET
• Stylus (it has CSS3 extension Nib)
• Turbine
• CSS Crush
• eCSStender

-Prefix-free

-Prefix-free is a script that must be connected to the pages. Unlike preprocessors, it processes the ordinary CSS file, that is there are no variables or mixins in the code, only the simplest CSS code, without vendor prefixes.

Processing pages of styles is done by means of Javascript.

Prefixes are added only for those properties, which are not supported by a concrete browser without prefixes.

A client computer gets a .css file without prefixes. After processing in a browser by means of javascript, only necessary prefixes are added to this file.

Advantages:

+ The author of styles file uses one variant of properties only, without prefixes
+ The user’s browser does not get styles with “strange” prefixes or prefixes that already became old
+ Valid code
+ It is possible to delete painlessly, when it won’t be necessary any more

Disadvantages:

- The styles connected through @import are not being processed
- After the loading of web-site and before a complete processing of CSS3 styles there is a barely noticeable pause
- When Javascript is disabled, a user will not see some of CSS3- styles
- Additional file for loading (indeed, only 2KB when compressed)
- The processed file of styles is not cached

Competitors:

• github.com/codler/jQuery-Css3-Finalize
• imsky.github.com/cssFx/

Generators

This method is already used by many of you. We simply open one of online generators and copy from there the ready code with prefixes.

Recently, I tried to look for a generator that automatically would add properties with prefixes to the standard property written by me. It turned out, that there are a few variants.

• prefixr.com It is possible to choose browsers for which the prefixes are used, it is possible to compress a code, use variables, it has plugins for the code editors
• prefixmycss.com
• cssprefixer.appspot.com Here a generator works as demonstration of possibilities of server script, accessible for free use
• imsky.github.com/cssFx/ This generator demonstrates possibilities of script on javascript, accessible for the free use

We download a file on a server with manually prepared .css file with all prefixes.

Advantages:

+ Nothing needs to be set and adjusted
+ A generator often gives an opportunity of the comfortable adjustment of values for CSS3 properties

Disadvantage:

- There is no automation at creation and subsequent change of CSS3 properties’ values

Code editor

Well, certainly there is a possibility of prefixes’ substitution automation for the code editors and programming environments. It would be very comfortable for prefixes to have Zen Coding on tap.
Currently, I couldn’t find plugins, which use Prefixr:

On this page plugins for Notepad++, TextMate, Espresso, Coda and some other are enumerated.
Prefixr for NetBeans

If your editor can do the processing of CSS3- properties automatically, or you’ve found a good plugin, you are welcome to share it via the comments section.

40+ New Tools and Services for Web Designers and Developers

AndrewG — Mon, 13 Feb 2012 19:59:27 +0000

Last year, in summer we published a very informative roundup Timesaving Tools and Services for Web Developers with numerous handy resources. Such services, generators and frameworks are in a popular demand, especially among people who value their precious time. In this post you’ll find a lot of helpful things, except that it hasn’t any of jQuery plugins, as previously we’ve presented to you a showcase of 50 New jQuery Plugins For Web Developers.

HTML/CSS Tools, Services and Resources

HTML5 Please

Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

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.

HTML KickStart

HTML KickStart is an ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you 10′s of hours on your next web project.

Download

CheckMyColours

CheckMyColours is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits.

Mobile HTMl5

Trying to understand HTML5 compatibility on mobile and tablet browsers.

CSS3 Click Chart

deCSS3

Use this bookmarklet to get a whiff of what your site will look like on older browsers that don’t support CSS3.

Create

Create, from the Midgard Project is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.

Periodic Table of the HTML5 Elements

Bootstrap Generator

Kick-start your Twitter Bootstrap project the way you want. Simply alter the options below and click “Generate” to get your compiled Bootstrap CSS file.

Tinkerbin

Tinkerbin lets you play around with HTML, JavaScript and CSS without creating files or uploading to servers.

Site-wide markup validation

Validate the HTML markup of your whole website with just one click.

Stitches

Drag and drop image files into the space below and click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only currently compatible with the latest versions of Chrome and Firefox.

CSSrefresh

CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.

Simpless

Simpless compiles your *.less files into valid CSS.

Download

The Goldilocks Approach

A good starting point for design that takes device resolution out of the equation.

ht5ifv

HTML5 inline form validator.

HTML Purifier

HTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant, something only achievable with a comprehensive knowledge of W3C’s specifications.

Demo | Download

CSS font stack

excssive

Simply drag and drop your CSS files onto this page, and watch as they’re compressed on the fly.

Download

Cssizer

Cssizer is a simple tool to let you edit the design of an html page in real time (As you type).

The CSS3 Test

This test checks which CSS3 features the browser recognizes, not whether they are implemented correctly.

Animate.css

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Download

foneFrame

foneFrame is a suite of HTML5-based tools that create web pages in the sweet spot shared by Android and iPhone. foneFrame is a schema and naming convention implemented as a a series of templates, multiple free online generators, and misc. tools & widgets. The core foneFrame framework is free, licensed under Creative Commons, and hosted in the cloud for decreased latency & ease of use.

Download

Grids and Frameworks

Toast

Toast is a super simple CSS framework, inspired by the likes of Twitter’s Bootstrap and the 960 grid system to make rapid web design and development easier.

Download

MQFramework

MQFramework is a responsive CSS framework, MQFramework utilises the @media property to allow you to design your sites for browsers of all sizes. Based on a 12 column grid, MQFramework degrades perfectly down to mobile screen sizes.

Download

Less+ Framework

Less+ Framework is a cross-device CSS grid system using media queries.

Demo | Download

Wonderflux

Wonderflux is a powerful, free WordPress theme framework.

Download

Zoey

Zoey is a lightweight framework for developing mobile apps. It is small, customisable and features a range of UI components.

GuideGuide

Pixel accurate columns, rows, midpoints, and baselines can be created based on your document or marquee with the click of a button. Frequently used guide sets can be saved for repeat use. Grids can use multiple types of measurements.

Gridpak

Gridpak is a responsive grid generator. Created by Erskine Design.

YAMB

Yet another boilerplate for responsive (mobile) web design.

Demo | Download

Reverie

Versatile HTML5 Responsive WordPress Framework based on the Power of Foundation.

Demo | Download

Padrino

Padrino is a ruby framework built upon the Sinatra web library. Sinatra is a DSL for creating simple web applications in Ruby. Padrino was created to make it fun and easy to code more advanced web applications while still adhering to the spirit that makes Sinatra great!

Fluid Baseline Grid

The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

Download

Other

Haste

Sharing code is a good thing, and it should be _really_ easy to do it. A lot of times, I want to show you something I’m seeing – and that’s where we
use pastebins. Type what you want me to see, click “Save”, and then copy the URL. Send that URL to someone and they’ll see what you see.

MotionCAPTCHA

MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas Harmony procedural drawing tool by Mr Doob and the $1 Unistroke Gesture Regonizer algorithm (and the more recent Protractor algorithm improvement), requiring users to sketch the shape they see in the canvas in order to submit a form.

Demo | Download

Responsive Design Test Bookmarklet

It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices.

αlphaPun.ch

An image with a transparent background is like a painting on a window: you can see all sorts of exciting things behind it, but you can’t reach through to touch them. αlphaPun.ch changes that! αlphaPun.ch will trace the opaque part of your png or gif image. It will then punch through the alpha channel (i.e. the transparent bit), so you can click on things behind it.

Hextone

Convert hex to rgb.

Snoopy

Snoopy is a bookmarklet for snooping on web pages. It’s intended for use on mobile browsers (such as Mobile Safari on the iPad) where you can’t view-source to poke around under the hood of sites to see how they’re built. You might find it useful for your desktop browser, too.

Illustrator Short Keys

Download

InDesign Short Keys

You might also be interested in..

Timesaving Tools and Services for Web Developers
50 New jQuery Plugins For Web Developers
Responsive Web Design Toolbox: 50 Handy Tools and Services
15 Handy HTML5/CSS3 Frameworks For Web Developers
Online Generators For Web Development – Ultimate Colleсtion

Web Design Inspirational Cocktail #24

AndrewG — Sat, 11 Feb 2012 14:01:47 +0000

Nieuwelaar.co.nz

Michelbergerbooze.com

Theletterd.com.au

Graphic-culture.com

Annasafroncik.it

Luhsetea.com

Talentgarden.it

Afar25.com

Planetpropaganda.com

Jpunt.nl

Kryptis.com

Want More Cocktails?

Web Design Inspiration Cocktails’ Section

Great Dozen of Advices to the Beginning HTML Coders

Michael Davydenko — Thu, 09 Feb 2012 23:02:01 +0000

Introduction

I am a freelancer. Previously, I didn’t think much about how and what coders do. I was responsible for the server, and my friend was coding and managing with the content. Quite recently I wanted to try to understand “what’s what”. A couple of days ago I came across the material that I liked very much. It was a clear example of what and how to write. Unfortunately, I cannot share the link, because I don’t remember where this manual is situated. Though, it was possible to memorize it, I went another way – I summarized it and made some notes. So, you are welcome to look through my notes.

New Doctype

Do you still use this old, decrepit, covered with wrinkles doctype?

If yes, then why? It is the time to move to the new doctype, which came to us together with HTML5:

Now you don’t need to rush in search of correct doctype (and, as a result, the mode of compatibility). HTML5 allows no more worrying about it, and it’s not your headache anymore. If new doctype will meet the old browser, then it will simply remain in the standard mode of compatibility. Start using it and feel the difference!

element

I’ve already used the similar markup before:

Image of Mars.

But, unfortunately, here we do not see an easy method to add heading to our image. When developing the standard of HTML5 it was taken into account, and this problem was decided by addition of figure element. In combination with figcaption we can easily add heading or signature to our image without any additional efforts. For example:


        
        
            Something very interesting is displayed here.

Let’s move on.

No more types for script and link elements

Previously, a lot of people were doing the following markup:

You don’t have to do this anymore. It meant that first we had the addition of style, and then the implementation of the script. Now it’s obviously that there is no necessity to specify the type.

With or without quotes – that’s the question

Remember that HTML5 it not XHTML. You don’t have to turn your attributes in quotation marks, if you don’t want to do this. There is nothing shameful and wrong, especially, if when coding you feel yourself “like a duck in water”:

What the heck are you doing?

Make your content easily editable

HTML5 presents new, not less wonderful possibility to the web developers. Such possibility is a changeable content. Just imagine, we read Wikipedia and suddenly notice, that some author made (well, it can happen to anyone) a mistake. With the use of this possibility we can simply tap on the text and literally correct this text in two clicks. Here’s the example of markup:


     
    
        
        untitled
    
    
         To-Do List 
         
             Get up. 
             Drink coffee. 
             Finally do something!

Or to do it in the tables of style:

Voilà!

Submit form for entering your e-mail

Formerly, all of us had to place the ordinary fields for an input and check the data adequacy on a server side. Now it is done on a client side, not loading the server with superfluous queries. Old browsers (all of you probably guess what I mean) when meeting the new type of input will render the ordinary text input. It can be done very easily. So, for example:


  

    
    untitled


    
        Email:

And it will look like this:

Or like this…

This field at once will alert you that you’ve entered a not valid email address. In case if all is well (and in IE everything is always well), the data is being sent to us on a server.

Dark horse aka placeholders

Again, before we did a prompt in textbox by means of scripting on JavaScript. When pushing on a textbox the prompt disappeared. Today we do not need to take care of it – in fact we have placeholders.

Like this:

Header and footer

Now we do not need to do anything with id, to specify, where is the header of our web-site (or heading, that’s the same thing), and where is the footer. Like this:


     Nothing
   
  
     still nothing

And how about legal, literate from the point of view of semantics and, accordingly, valid code. Why not?


     3000 kilometres above earth.
      

    
     -3000 kilometres under. Under earth.

Try not to confuse these elements once on your web-site. Well, everything can happen.

Internet Explorer and HTML5 — reality or fiction?

The old versions of IE don’t want to be friends with HTML5. Our task is to make them friends.

First method – to use JavaScript and CSS. At first it is needed stylize new elements. For example:

header, footer, article, section, nav, menu, hgroup {
   display: block;
}

But now, unfortunately, IE still cannot be influenced, therefore it will ignore these tags. We will create them by means of JavaScript:

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

Now we can use these tags where ever we want. Not to repeat this all over again, Remy Sharp offered to simplify this process with IE. We should add this script to our project in the following way:

Now IE updates and in some Developer Preview versions you can already test support of HTML5 in Internet Explorer. Yes, yes, you did not got it wrong – exactly HTML5.

element

Again semantics. Imagine that you have a block with the blog’s categories on your web site, and the themes below. Certainly, when pushing on a block with categories the existent themes come out. It’s easy to notice that these blocks are in relationship.

Now, at the level of semantics, we can prove it. Like this:


        
             Bla bla... 
             How I spent this summer.

No comments.

Required attribute

Let’s assume that we have a registration form. We certainly need to let the user understand that there are the fields of input that must be necessarily filled.
Before, it was done in this way: a user entered data, sent it to the server by pressing the button, and then it was up to the script that checked the validity of the entered data, and if some of the obligatory fields were not filled the user was informed about mistake.
Now it’s easily done on the client’s side of the client. Simply add the required attribute to the textbox. So, for example:


        Your name:

Conclusion

In this topic I wanted and I gave some advices to the beginning web-programmers, and if to be more precise to the coders, on how to write a code. Hope, they’ll be useful for you!

You might also be interested in..

HTML5 Essentials Resources
On the Sails of HTML5: How New Technologies Change Modern Web
HTML5: New Functions Of The Old Tags
Content editable Feature in HTML5
HTML5 Placeholder stylization with the help of CSS
How to Make Your Own Video Player On HTML5 Video
15 Handy HTML5/CSS3 Frameworks For Web Developers
20 Free HTML5 Games
Meet The Future – HTML5 Demos
HTML5 video players

Showcase of Web Designs with Big and Bold Typography

AndrewG — Wed, 08 Feb 2012 20:15:09 +0000

Typography which is chosen by a professional designer always looks great and beautiful, even if it is a big and bold type. Of course it’s very easy to spoil the web site’s design with some ugly, unsuitable and huge headlines, but finding the right big typography can make even unremarkable site look very attractive. One of the reasons, why big and bold type is often used by designers in their portfolios, and also for commercial web sites, is that it gets the attention of visitors and potential customers. The showcase below features the best example of big and bold typography in web design.

Bonesbrigadedjs.com

Fandangomediagroup.com

Szdravkov.com

Checkyourpaper.panda.org/paperbuyingtips

Letsdothis-now.org

Thegregthompson.com

Launchfactory.org

20calendars.lavazza.com

Ralphvanrentergem.be

Navidad2011.talentocorporativo.com

Theboutiquebakery.co

Leighhattersley.co.uk

Besser-leben-mit-lehm.de

Edio.cz

Contempoworld-design.co.uk

Madebycraft.net

Englishworkshop.eu

Noltedesign.com

Viljamis.com

Rolandgroza.com

Goslingo.com

Harryford.co.uk

Deda.me

Pro-foods.com

Sillypoems.info

Kettlenyc.com

Deuxhuithuit.com

Warchild.org.uk

Deen.com.br

Tedxportland.com

Want More Cocktails?

Web Design Inspiration Cocktails’ Section

Dive into CSS3

Renat Rafikov — Tue, 07 Feb 2012 22:17:14 +0000

Everyone who was ever interested in CSS3 has already tried it. Now we can generate rounded corners and drop shadows without any superfluous efforts.

But it’s just a superficial level. I had to look into the new possibilities of browsers in more detail, to answer the arising questions like: to what extent gradients with a great number of colour transitions have the cross browser compatibility, where and how is it possible to apply at once a few shadows to the block, for what browsers prefixes of properties are used specifically etc.

In addition, I was interested in support of CSS3 on mobile platforms, unstudied possibilities of CSS3, and also generators that create a cross browser code. I tried to fill in some blanks and collect useful information for those, who only prepares to go deeper.

Browsers, supporting properties enumerated as CSS comments. Generators and instruments mostly can execute a few functions at once, therefore in such cases I specified them only wherein they, on my opinion, are managing the best of all.

Linear-gradient

Actually there are a few types of CSS3 gradients. It is the simplest gradient.

div {

  background-color: #444444;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 */

  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */

  background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6+ */

  background-image: -ms-linear-gradient(top, #444444, #999999); /* IE 10+ */

  background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */

  background-image: linear-gradient(to bottom, #444444, #999999);

}

Except pointing initial and eventual colors, gradients allow to change the slope angle, starting position and completion of colour transition, amount of colors and direction of gradient.

Safari (up to the version 5) and Chrome (up to the version 10) had their own syntax, and IE 10 with Opera add their prefixes, increasing the amount of code.
All possibilities of gradients are supported by those browsers that can represent CSS3 gradients, even if some generators offer us only a transition between two colors.

Repeating-linear-gradient

Allows repeating the gradient, gives an opportunity to create base-line patterns.

div {

  background-color: #444444;

  background-image: -webkit-repeating-linear-gradient(top, #444444 18%, #999999 25%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */

  background-image: -moz-repeating-linear-gradient(top, #444444 18%, #999999 25%); /* Firefox 3.6+ */

  background-image: -ms-repeating-linear-gradient(top, #444444 18%, #999999 25%); /* IE 10+ */

  background-image: -o-repeating-linear-gradient(top, #444444 18%, #999999 25%); /* Opera 11.10+ */

  background-image: repeating-linear-gradient(top, #444444 18%, #999999 25%);

}

Radial-gradient

Circular gradient. It is similarly possible to have a few colour transitions and to determine the point of beginning of gradient (not necessarily from the center of circle).

div {

  background: #444444;

  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#444444), color-stop(100%,#999999)); /*  Chrome 1-10, Safari 4+, iOS 3.2-4.3, Android 2.1-3.0 */

  background: -webkit-radial-gradient(center, ellipse cover, #444444 0%,#999999 100%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */

  background: -moz-radial-gradient(center, ellipse cover, #444444 0%, #999999 100%); /* Firefox 3.6+ */

  background: -o-radial-gradient(center, ellipse cover, #444444 0%,#999999 100%); /* Opera 11.6+ */

  background: -ms-radial-gradient(center, ellipse cover, #444444 0%,#999999 100%); /* IE 10+ */

  background: radial-gradient(center, ellipse cover, #444444 0%,#999999 100%);

}

Opera did not support a circular gradient to the version 11.6. In others a situation is the same, as with a linear gradient.

Tools:

• gradients.glrzad.com gives a cross browser code; it is possible to create the great number of colour transitions
• colorzilla.com/gradient-editor/ the coolest generator. It is possible to create linear and circular gradients, there is also an ability of saving the most used colors in custom palettes, great number of readymade gradients.
• lea.verou.me/css3patterns/ CSS3 patterns gallery. It is possible to take a look at the code of every pattern.

Multiple backgrounds

It is an ability to appoint few background display patterns to one element at once.

div {

  background: url(fallback.png) no-repeat 0 0;

  background: url(foreground.png) no-repeat 0 0, url(middle-ground.png) no-repeat 0 0, url(background.png) no-repeat 0 0; /* Firefox 3.6+, Safari 1.3+, Chrome 2+, IE 9+, Opera 10.5+, iOS 3.2+, Android 2.1+ */

}

You shouldn’t forget about the browsers not supporting plural backgrounds.

The order of backgrounds is the following: from the upper to the lower, it is meant that a lowermost background needs to be appointed in the end. Instead of base-line pictures it is possible to appoint CSS3 gradients.

Border-radius

Rounded corners of a block. All is simple, if the identical radius of rounding is needed.

div {

  -webkit-border-radius: 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */

  -moz-border-radius: 12px; /* Firefox 1-3.6 */

  border-radius: 12px; /* Opera 10.5+, IE 9+, Safari 5, Chrome, Firefox 4+, iOS 4+, Android 2.1+ */

}

All manufacturers have already given up the vendor prefixes in the last versions of browsers.

But if different corners must be of a different radius, then it is needed to enumerate radiuses for every corner.

In Firefox there is a feature, related to enumeration of corners that takes place by means of syntax different from a standard. But the use of brief syntax, which is identical in browsers, can become a decision.

div {

  -moz-border-radius: 15px 30px 45px 60px;

  -webkit-border-radius: 15px 30px 45px 60px;

  border-radius: 15px 30px 45px 60px;

}

Interesting possibility is a transmission of pairs of radiuses’ values for every corner. It is so possible to obtain more difficult forms, than a simple rounding:

div {

  border-top-left-radius: 5px 30px;

  border-top-right-radius: 30px 60px;

  border-bottom-left-radius: 80px 40px;

  border-bottom-right-radius: 40px 100px;

}

If they all are the same:

div {

  border-radius: 8px / 13px;

}

Tools:

• css3please.com generates a lot of useful things.
• border-radius.com a specialized generator for rounded corners.
• css3generator.com generates a lot of things. For corners gives an opportunity of choice between an identical radius and different.
• layerstyles.org/builder.html imitates Photoshop’s interface. It’s easy to generate not only corners.

Box-shadow

Drop shadows for blocks.

div {

  -webkit-box-shadow: 0px 0px 4px #000000; /* Safari 3-4, iOS 4.0.2-4.2, Android 2.3+ */

  -moz-box-shadow: 0px 0px 4px #000000; /* Firefox 3.5-3.6 */

  box-shadow: 0px 0px 4px #000000; /* Opera 10.5+, IE 9+, Firefox 4+, Chrome 6+, iOS 5+ */

}

Shadows can be directed inside the element.

div {

  -webkit-box-shadow: inset 6px 6px 12px #000000;

  -moz-box-shadow: inset 6px 6px 12px #000000;

  box-shadow: inset 6px 6px 12px #000000;

}

It is possible to apply few shadows to one element at once.

div {

  -webkit-box-shadow: inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;

  -moz-box-shadow: inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;

  box-shadow: inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;

}

Another least used value is spread – radius, and to change it you simply need to add it right after the value of blur shadow. A positive value increases the shadow, a negative value will do the sizes of shadow less than the block’s size from which the shadow falls.

div {

  -webkit-box-shadow: 0 5px 5px -6px #000000;

  -moz-box-shadow: 0 5px 5px -6px #000000;

  box-shadow: inset 0 5px 5px -6px #000000;

}

It is possible to apply inner shadows, plural shadows and spread – radius in all browsers that support simple CSS3 shadows.
Almost all manufacturers have already given up the vendor prefixes in the last versions of browsers.

• css3maker.com multifunctional generator. It is possible to do internal shadows, change colors.
• css3.me all settings can be used when necessary
• css3generator.com it is possible to adjust the color of shade in RGBA at once

RGBA

It is the ability to use alpha-transparency for colors. Unlike property of opacity it can be applied to the font, borders and to the block’s background without changing the transparency of the block’s content.

div {

  background: rgb(200, 54, 54);

  background: rgba(200, 54, 54, 0.5); /* Firefox 3+, Chrome, Safari 3+, Opera 10.10+, IE 9+, iOS 3.2+, Android 2.1+ */

}

For cross browser compatibility it is needed to specify a color without alpha-transparency, or way to transparent PHG.

The existent HSLA format can be used in the same versions of browsers that support RGBA.

Tools:

• hex2rgba.devoth.com converts HEX in RGBA

Pseudoelements

Generating of content in CSS through :before/:after. Used both for adding of symbols and complete words to the document and for creation of new blocks, which can be used for registration.

div:before,

div:after { /* Firefox 3.5+, Chrome, Safari 1.3+, Opera 6+, IE 8+, iOS 3.2+, Android 2.1+ */

  content:"";

  display:block;

}

Support is already very good, even on mobile platforms it works without problems.

It’s interesting that CSS3 requires application of syntax with two colons (::before / ::after) but IE8 requires the use of pseudoelements with one colon.

Conclusion

I succeeded in finding out the state of things with support of CSS3 by different browsers. Found a great number of instruments. Did not find a generator for rounding with the pairs of values for a corner, generator, that can create a few shadows of a block at once, and also generator, that would unite all necessary functions, but would be simple and have a good interface.

Certainly, there is also a great number of properties, for example border – image or transition, but they are not used so widely, or require a deeper study, therefore did not enter this review. But you can make an effort in finding instruments or information practically for any case.

Information sources about support of properties by different browsers:

caniuse.com
css3files.com
css3please.com

Free WordPress Themes for Winter 2012

AndrewG — Mon, 06 Feb 2012 20:21:49 +0000

Earlier we have covered some really good round ups with various new WordPress themes that were free to use and download. In today’s post, we’ve decided to replenish the great list with some fresh themes and arrange them according to sections: themes for blogs, themes for galleries and portfolios, for business and corporate web sites and others so all you have to do is just pick up one of these according to your own taste. They all can be customized and used for free in both personal and commercial projects. If you know about any cool and new themes, please share with us through the contact form.

Themes For Galleries And Portfolios

Photum

The theme is built with HTML5 and is responsive, meaning that as you resize your browser window the photos will re-arrange. This makes the theme work with many different screen resolutions and mobile devices. It uses custom post types for the photography portfolio so you can have a separate blog and portfolio. We have included options so you can set up different equipment and tag each photo with it, you can also add locations which will get added to the photos.

Demo | Download

Designer

Demo | Download

gGRID!

Very elegant, clean and fast loading WordPress theme with minimalistic approach.

Demo | Download

Fotofolio Landscape

Fotofolio Landscape is a WordPress theme specially designed for Visual Artist, Photographer, or any media designer, to show off their works.

Demo | Download

Widely

Widely WordPress Theme is minimalistic theme perfect for for businesses, creatives, and individuals who want to quickly publish their portfolio and anyone else who’s serious about having a simple, well designed website with a full powered content manager.

Demo | Download

Good

A mobile friendly blog theme that comes with built in breadcrumbs, pagination, single post stylsheets, Jigoshop e-commerce plugin integration, and simplicity.

Demo | Download

Ultra Grid

Ultra Grid Theme is beautiful and modern WordPress theme with a grid like design. This is perfect theme for any artist to showcase their portfolio in a grid layout style.

Demo | Download

Workz

The homepage has a custom layout driven by custom post types with a tagline, nivo image slider, homepage highlights and recent works section. The portfolio allows you to easily add unlimited items and categories via custom post types. You can create a “filterable portfolio” as well as have paginated portfolio category pages. And of course there is a full blog section so you can post news/articles in a minimal fashion.

Demo | Download

Gridly

Gridly is a free minimal & responsive portfolio theme ideal for graphic designers or photographers.

Demo | Download

Elegantia

Elegantia is a premium wordpress theme with clean and elegant design. It’s WordPress 3.0 ready theme with 7 color schemes and sortable portfolio.

Demo | Download

Photographer

Photographer Free WordPress Theme is design for amateur and professional photographers to show and display their photography. This theme was inspired by the works of Thomas Hawk.

Demo | Download

Cudazi Mono

Cudazi Mono is a clean, luxurious WordPress theme perfect for a wide range of applications. This theme takes advantage of custom post types, provides ample widget areas and drag and drop menus for easy setup and maximum flexibility.

Demo | Download

MiniFolio

MiniFolio is a very clean and simple free WordPress theme that will allow you to easily set up an online portfolio and a very simple blog.

Demo | Download

Architekt

Architekt Free WordPress Theme is clean simple and unique. Design to showcase your architectural portfolio This theme was inspired by the works of Fantastic Norway.

Demo | Download

Pronto

Pronto is a very clean and minimal jQuery Masonry WordPress theme that’s perfect for showcasing your posts in a grid like fashion, that will re-adjust depending on your visitors browser size.

Demo | Download

Easini

Easini Theme is a high quality portfolio wordpress theme comes packed with a featured content slider that suitable for Portfolio, Business and can also use for magazine websites, the latest WordPress 3.0 goodness, shortcodes, jQuery and much more.

Demo | Download

Showcaser

howcaser is a free WordPress theme I’ve created for those who seek a very clean and minimal solution for a gallery, portfolio or showcase style website. Everything runs off of the regular post types and there isn’t any to configure besides the custom logo (PSD included in the theme, although its just a circle).

Demo | Download

Grid Portfolio

Grid Portfolio Theme is clean theme with grid like layout, this WordPress theme is perfect to showcase any portfolio. Grid Portfolio has nice and unique structure to show any artwork.

Demo | Download

Leon

This theme is WordPress 3 ready, fully responsive and has custom menu feature, featured thumbnails, widgetized sidebar and footer, theme option page etc.

Demo | Download

Graphic

Demo | Download

Exhibition

Exhibition Theme is clean and modern WordPress theme with a blog like design. This is perfect theme for any artist to showcase their portfolio and blog about their work.

Demo | Download

Visual

Visual WordPress Theme is a grid like theme with slider option. Great for displaying your portfolio on main page. This is perfect theme for any designer to showcase their portfolio and blog about their work.

Demo | Download

Shuttershot

Shuttershot is a fullscreen slideshow template. This theme is ideal for photography websites to showcase their portfolio in style.The theme has option to use either a full screen slideshow on the homepage or a regular blog with image slideshow as the background. If you are using a slideshow on the homepage you can set a custom page template as the blog.

Demo | Download

Fungus

Fungus theme, a free wordpress theme custom based our FunDay theme. The theme is look clean with dark blue and white as the dominant color.

Demo | Download

Themes For Blogs

WPTuts

WPTuts comes with very little options but comes with support for the Wp 3.0+ menu system, background color changer and featured images. It’s the perfect theme for anyone that wants to setup their blog super quickly and without any hassle. Plus, the minimal code and design images will keep your site fast.

Demo | Download

CleanMag

CleanMag theme is a simple blogging style template with a powerful homepage slider created using the jQuery UI and a slider custom post type. The idea was to provide you with something that was very clean and minimal and easy to use.

Demo | Download

Origin

Origin is a simple and elegant theme with responsive layout for better viewing on mobile devices – smartphones and tablets. It’s built on the Hybrid Core framework and inherits its professional and well-organized coding practices, making it an excellent starting point for further customization and development.

Demo | Download

The blog

The blog WordPress theme is an awesome multipurpose premium free theme. It’s super clean, simple yet professional and easy to setup, it has 11 fantastic layouts variations and 11 eye catching color styles that will make your website unique and striking.

Demo | Download

BonPress

BonPress is the perfect personal blog theme. Packed with Post Formats (audio, video) feature and multiple Custom Widgets, like Twitter, Flickr, will offer you a unique experience from blogging.

Demo | Download

Lucas

Cool theme with fancy css3 effects, widget ready areas, automatic post thumbnail, custom widgets (featured, latest tweets, flickr and about us).

Demo | Download

Lefty

The Lefty theme looks great and will surely impress your visitors. At the same time it’s a very minimalistic theme in the sense that it includes only the basic features needed for casual every day blogging.

Demo | Download

Sintea

Sintea comes with widgets, extensive theme options, an automatically updating slideshow and free support. The future-proof design will mean your website will always look modern and up to date.

Demo | Download

Hatch

Hatch is a simple photography and portfolio WordPress theme. Optimized for mobile browsing – the responsive layout will automatically detect if the visitor is viewing your site on a desktop screen or a mobile device (smartphone or tablet) and will adjust accordingly

Demo | Download

Graphite 1.1

The Graphite WordPress theme is a fully functional, free wordpress theme from MediaLoot, perfect for creative professionals but suitable for anybody.

Demo | Download

Samaraka

The theme come with dark as dominant color with unique and simple design that will perfectly fit for your personal blogs, portfolio and can be fit for an unique magazine-style.

Demo | Download

Abtely

Very elegant, clean and fast loading WordPress theme with minimalistic approach.

Demo | Download

Busby

Busby is a clean personal blogging theme with it’s own options panel built with the UpThemes framework.

Demo | Download

Magazine Style Themes

Report

The homepage of this theme is crafted with different modules which enables it to function as an intuitive news magazine interface. For example there is an auto scrolling news ticker below the menu bar. This will display latest posts from a particular category you select. It holds a featured slider on the homepage.

Demo | Download

Myst

Myst is a nice minimal magazine wordpress theme. It is suitable for magazine sites or tutorial sites. The large featured images on the index page makes it even an ideal photoblog theme . This is a fab series theme compatible with the wordpress 3+ version. If you look closer you can see that I have included the post “Like” function on the post meta. It will be a cool tool to identify the popularity of your different posts.

Demo | Download

Oxygen

A professional magazine theme with responsive layout for enhanced mobile browsing experience. Oxygen is a parent theme, built on the industry-recognized Hybrid Core framework.

Demo | Download

Frameraising

Frameraising is a clean, elegant magazine wordpress theme. Theme has a two column design with a jQuery featured image slider. Theme is wordpress 3 ready with features like featured thumbnail etc. Theme also comes with an options page.

Demo | Download

Themes For Business And Corporate Websites

Complete

Complete theme has a very clean, modern and professional design that is very simplistic and content focused. Using custom post types, an advanced admin panel and meta boxes. The Complete theme will allow you to easily set up a business, portfolio and/or blog website.

Demo | Download

Actiniumize

Actiniumize WP theme is an awesome WordPress theme which is great for any blogger who wants to impress their readers with their contents and a premium quality design blog at no cost!

Demo | Download

Swatch

Swatch is a business theme with a portfolio module that allows it’s usage to be completely diverse. It’s packed full of the usual features you’ve come to expect from our commercial themes, and built on the WooFramework that powers all our themes.

Demo | Download

Wootique

Wootique is a flexible, highly customisable eCommerce theme for WordPress. Wootique has been designed from the ground up to take advantage of all of WooCommerce core features whilst delivering fantastic customisability.

Demo | Download

Proyecto

Proyecto is a free WordPress theme that I created for those who want to setup a business and/or portfolio website.

Demo | Download

Bizz

Bizz is a very clean and minimal free WordPress theme created by WPExplorer.com that is ideal for business and portfolio websites. The theme features a homepage built using custom post types (slider, homepage highlights and latest portfolio items) making it really easy to set everything up, you can create an unlimited amount of paginated portfolio pages to showcase your work as well as add a page template with a filterable portfolio, there is a whole blog section for sharing news and 2 widgetized areas (sidebar and footer).

Demo | Download

Other

Danko

Danko WordPress Theme is ideal for charity organizations. It’s focused on raising funds for your charity. Use our free theme to do as much good as possible.

Demo | Download

Launch Effect

Launch Effect is a free one-page theme that lets you create a viral campaign in minutes.

Demo | Download

QuickLaunch Theme

You might also be interested in..

20 Free Responsive WordPress Themes
New High Quality HTML5/CSS3 Templates and Themes
Free WordPress Themes for Summer 2011
50 Free WordPress Themes Collection 2010
50 Newest Free WordPress Themes for 2010

Studio Ghibli Animated Films: Awesome Fan Artworks. Part 2

AndrewG — Sat, 04 Feb 2012 14:21:03 +0000

Which of you haven’t watched animated films created by the well-known Japanese manga artist, film director and animator of many popular anime feature films Hayao Miyazaki? Miyazaki has gained general acceptance as a maker of animated feature films and, along with Isao Takahata, co-founded Studio Ghibli, an animation studio and production company. If you are still not acquainted with Nausicaä of the Valley of the Wind, Kiki’s Delivery Service, Princess Mononoke, My Neighbor Totoro, Spirited Away, Howl’s Moving Castle, Ponyo and with his other amazing works, then you should certainly watch them! And if you think that watching anime is for kids only, you are mistaken, because Miyazaki’s films are the embodiment of kindness, love, friendship, courage and self-sacrifice, and when watching them even the grownups find these films very instructive and touching. To inspire you we’ve collected some great artworks at deviantART made by the fans of these animated films. So dive deep into the wonderful and colorful world of anime together with us!

Totoro and winter by villasukka

Ghosts Moving Castle by alexmakovsky

Kiki is waiting for the catbus by NiG3L

Totoro and Spirited Away by alexmakovsky

Give Me His Heart by Sparkyyy

Nausicaa by MeryAlisonThompson

Howl by sakimichan

Kiki’s Delivery Service by 14-bis

Porco Rosso Marco Pagot fan art by Pabzzz

Chihiro Fan art by Pabzzz

Howls Moving Castle by AksaArt

Princess Mononoke by AtomiccircuS

Howl’s Moving Castle by RavenSetFree

He’ll Eat Your Heart Out by Choestoe

Hauru no ugoku shiro by sharandula

Mononoke Hime by chirostute

Totoro by akreon

Mononoke Hime by spicysteweddemon

Spirited Away: Promise by arriku

Miyazaki Sushi by OtisFrampton

Gina fan art Porco Rosso by Pabzzz

Golden Reunion by ChencoIlufi

Turquoise Journey by ChencoIlufi

Spirited Away by AKK-STUDIO

Sophie…Howl’s Moving Castle by DavinArfel

Haku… Spirited away by DavinArfel

Ashitaka Versus The Demon Boar by MetalHanzo

La mononoke by Binexsu

Totoro by Caring201

Ponyo by Tamasaburo89

Baron Humbert Von Gikkingen by TalbainEric

Young Yubaba by alexmakovsky

Autumn Totoro by rontufox

Spirited away. Haku by AksaArt

Ponyo by chikinnugets

Make a wish by chernotrav

To piece by pt0317

By the Fire by pd-inc

Spirited Away… by moni158

Spirited Away 2 by AllaD8

Howl’s Moving Castle by ThePlanPony

Dinner’s almost ready by Flipfloppery

Princess Mononoke by AKK-STUDIO

Totoro by alexandresama

Spirited Away: Chihiro + Haku by BloodRedBites

In love with the sea by DonPixe

Elementary My Dear by danee313

Feel the Magic by Sumiya

Spirited away by Anelu

Howl’s Room by BloodRedBites

San by missgizmo

Kiki’s Delivery Service by foogie

Howl and Calcifer by ginkoflowers

Mononoke by lehuss

You’re it by Mikomi-sama

Princess Mononoke by curry23

Because We Live by yuumei

The Wolf Girl – pesky demon by jimmymcwicked

Ashitaka by chirostute

Howl and Calcifer by moni158

You might also be interested in..

Studio Ghibli Animated Films: Awesome Fan Artworks. Part 1
Classic LucasArts Adventure Games: Best Fan Artworks
Amazing Halloween Fan Artworks
Alice in Wonderland Fan Art
The Legend of Zelda Fan Art
Tolkien’s Middle-Earth Fan Art
StarCraft Universe: 100+ Awesome Fan Artworks

Web Design Inspirational Cocktail #23

AndrewG — Fri, 03 Feb 2012 20:57:00 +0000

Badminton-center.com

Quazarwebdesign.com

Squarefactor.com

Citrus7.com.br

Rolandgroza.com

Studioairport.nl

Nicolapotts.com

Landor.com

Sheltonfleming.co.uk

Amuki.com.ec

Want More Cocktails?

Web Design Inspiration Cocktails’ Section

50 New jQuery Plugins For Web Developers

AndrewG — Thu, 02 Feb 2012 21:24:53 +0000

In spite of the fact that jQuery was released in January 2006 it still holds its position and it’s not surprising, because of its ability to add various elements without the necessity to write bulky and heavy code. Also, it’s getting even much more easier as the community of developers constantly releases plugins that allow web developers to enhance their projects. And to make your task simpler, in order you could just visit our site and choose some of these useful plugins, we’ve picked the best and the newest jQuery plugins and listed them below.

Textualizer.js

A jQuery plug-in which transitions through blurbs of text, animating each character.

Download

Impress.js

Impress.js is a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Download

Revolver.js

Revolver is a new content slider that makes no assumptions about your markup.

Download

Craftmap

CraftMap (previous MobilyMap) is a lightweight (6KB only), fully configurable jQuery plugin that converts a simple image into a functional map by overlaying dynamic elements on it such as markers.

Demo | Download

ResponsiveSlides.js

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It work with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it.

Download

jQuery Map Marker Plugin

This plugin makes it easy to put multiple markers on Map using Google Map API V3.
Map Marker is very useful when you have a list of data & you want to show all of them on Map too.

Demo | Download

jQuery Collapse

This Plugin delivers an accessible and lightweight solution to a widely adopted interface pattern (known as progressive disclosure).
in 50 New jQuery Plugins For Web Developers" />
Download

slabText

This script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Download

Font.js

This library adds a Font object to the collection of predefined objects available to you when doing JS coding for the web. You are probably already familiar with new Image() for loading images through the browser; this object does something similar for fonts.

Download

Stellar.js

Demo | Download

jQuery Transit

Super-smooth CSS3 transformations and transitions for jQuery — v0.1.2+

Download

jQuery Plugin Boilerplate

A boilerplate for jump-starting jQuery plugins development. Contains lots of comments to help you get going easily. It is truly object-oriented, it implements public and private methods as well as public and private properties, making it the ideal candidate for when building both simple and complex jQuery plugins.

EaselJS

EaselJS is a javascript library for working with the html5 canvas element.

Download

Cuepoint.js

Cuepoint.js is an open source plugin for adding subtitles to your HTML5 video. You’re free to use it for whatever you want.

Hovercard.js

A free light weight jQuery plugin that enables you to display related information with the hovered label, link, or any html element of your choice.

Download

jRumble

jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It’s great to use as a hover effect or a way to direct attention to an element.

Download

Sharrre

Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (with PHP script) and more.

Download

jQuery tubular

Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your body tag, specify a YouTube video ID and tell it the ID of your content wrapper, and you’re on your way.

Download

Flow Slider jQuery Plugin

Flow Slider is a JavaScript thumbnail slider. Flow Slider is customizable, skinnable, fashionable, and looks great on every site. Impress your visitors and make navigation more intuitive!

Download

Pdf.js

Pdf.js is an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format (PDF) renderer without native code assistance.

Download

Humane.js

A simple, modern, framework-independent, well-tested, unobtrusive, notification system. Utilizes CSS transitions when available, falls back to JS animation when not. Includes mobile support.

Download

jqPagination

jqPagination is a jQuery plugin that provides a newer method of pagination for your web site or application. Instead of displaying a list of page numbers like traditional pagination methods jqPagination uses an interactive ‘Page 1 of 5′ input that, when selected, allows the user to enter their desired page number. The plugin will ensure that only valid pages can be selected, a valid request will result in the paged callback. First, previous, next and last buttons work out of the box, but are optional.

Download

jQuip

Download

Tokeninput

Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.

Demo | Download

jquery.slideshowify.js

Slideshowify is a jQuery plugin for generating a “Ken Burns Effect”-style slideshow from images that match a selector. Images that don’t fit the window proportions exactly (generally the case) are cropped and panned across the screen. This also resembles that Mac screensaver.

Demo | Download

ComboGrid

Combogrid, like autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, but in a tabular and paginated manner. Combogrid provides keyboard navigation support for selecting an item. And It’s ThemeRoller-ready.

Download

jQuery Responsive Thumbnail Gallery Plugin

jQuery Plugin for creating image galleries that scale to fit their container.

Download

jQuery News Ticker

Taking inspiration from the BBC News website ticker, jQuery News Ticker brings a lightweight and easy to use news ticker to jQuery.

Download

jQuery Lifestream

Show a stream of your online activity.

Demo | Download

In-Field Labels jQuery Plugin

This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.

Download

Moment.js

A lightweight javascript date library for parsing, manipulating, and formatting dates.

Download

ALAJAX

A jQuery plugin that converts a normal HTML form into ajax by only including the script. It sends the form by AJAX to the URL given in “action” property of the form. Also, the plugin uses the “method” property to use POST or GET method.

Download

bxSlider

jQuery HTML Content Slider.

Download

Slidorion

A combination of an image slider and an accordion, the Slidorion displays beautiful images along with a variable length description. With slides linked to each tab, and accompanied by a large array of effects, the Slidorion is a great alternative to the traditional jQuery slider.

Minimit Gallery Plugin

Minimit Gallery is a highly customizable, library agnostic plugin that does galleries, slideshows, carousels, slides… pratically everything that has multiple states, in less than 10KB.

Demo | Download

js Message

Custom notifications, alerts, confirmations.

Download

Sisyphus.js

Here you may fill forms below in arbitrary way, then close your tab/browser, refresh window or open this page in a new tab to see all your changes are saved and restored.

Download

List.js

List.js is a 9 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable with the possibility to add, edit and remove items by dead simple templating.

Download

Validate.js

Lightweight JavaScript form validation library inspired by CodeIgniter. No dependencies, just over 1kb gzipped, and customizable!

Download

jQuery videoBG

This jQuery plugin enables you to very easily use an HTML5 video as a background to a website or any div.

Money.js

JavaScript currency conversion library, done right – with no dependencies, in just over 1 kb.

Download

Jwerty

jwerty is a JS lib which allows you to bind, fire and assert key combination strings against elements and events. It normalises the poor std api into something easy to use and clear.

Download

Arctext.js

The main idea behind the Arctext plugin is to rotate letters with CSS3 transforms in order to place them along a curved path. The curve is always a segment of a circle (hence arc) for which the radius can be specified. The space and rotation for each letter will be calculated using that radius and the width of the text.

Demo | Download

Response.js

Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media) progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

Download

TextExt

TextExt is a plugin for jQuery which is designed to provide functionality such as tag input and autocomplete.

Download

Sticky

Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible.

Download

Jeditable

Edit In Place Plugin For jQuery.

Download

jPages

jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items with delay, completely customizable navigation panel and also integration with Animate.css and Lazy Load.

Download

jQuery Cycle Lite Plugin

The jQuery Cycle Lite Plugin is a lighter version of the Cycle Plugin. The Lite version is optimized for file size and includes only a fade transition (though other transition effects can be created using options). It also supports pause-on-hover, auto-fit, before/after callbacks, click triggers and adjustable timeouts and transition speeds.

Download

Scrollrama

The jQuery plugin for doing cool scrolly stuff.

Download

Float Mania: Explanation of How CSS Property Float Works

Jean Louis — Wed, 01 Feb 2012 20:56:51 +0000

As previously I was asked for several times: “why float is displayed wrong?”, I decided to write this note, which would explain typical situations a beginning coder runs into, and when someone asks me again simply to give a link to this article.

Disclaimer

I am not a professional coder, although on the sort of my activity I had to code several dozens of sites. I have friends who learn how to code and I want to help them. Most likely, you also have such friends. The aim of this article is not telling about something new, but telling about old from the point of view of problems that the beginning coders often collide with. I do not apply on absolute truth of the words, and in case you have any good ideas I will be very glad, if you’ll correct and supplement me.

Properties of element with float, which you should always keep in mind

(if it is set in the value of left or right)

• An element is displayed as a block, so as if display: block property was set to it;
• The width of an element compresses to the sizes of content, if a width of an element is obviously not set;
• An element sticks to the left (left) or right edge (right);
• All other content of a page, in HTML code after an element with float, flows around it.

Incident from life #1

I have two blocks, I applied float: right to one of the blocks, it aligned on a right level, but however remained under the first. The example of how it looks.

The cause

If it happened so, it means you applied float not to the first, but to the second block. By virtue of the fact that floating (that which with float) element is flowed around only with those elements which are after it in HTML code, the first block will not flow it around.

Similarly the block elements, by default, have a maximally possible width (prove) within the limits of parent. Your floating element is not simply placed on one line with the first sectional elements with a maximal width, therefore it is being displaced downwards.

Solution

Change blocks’ places in HTML code, put a block with float on the first one.

Incident from life #2

I have two blocks in header/content/footer. I did float: left to one of them, and float: right to another. But after it all site’s content was displaced.

The cause

Blocks with float, by default, do not influence on the height of parent, that is if you have some container, and there are only floating blocks in it, then the height of container will become equal to zero. The example of how it looks.

Similarly all content of a site, which is in HTML code and follows after floating elements, flows around them, that often results in an unexpected effect.

Solution

Solution #1. Obviously to set the height of container. In those cases, when the sizes of container are known, this is the simplest decision.

Solution #2. To add an empty block with clear: both. Addition of similar element clears the “floating” of blocks and compels a container to stretch on all height. Semantically this is not the best decision, because it inserts the superfluous element of marking.

Solution #3. To apply property of overflow: auto (or hidden) to the container. Compels a container all over again to calculate the height and to change it so that it included floating elements, otherwise it would have to add a scrollbar or hide them. However, sometimes it happens, therefore be careful.

Circles in Modern Web Design

AndrewG — Mon, 30 Jan 2012 19:06:55 +0000

In our previous posts we’ve already discussed different trends of the last year and now we would like to share with you a new idea in creating web sites’ designs. Have you noticed how many designs with circle elements appeared recently? It seems that the use of circles becomes more and more popular and needed. And why not? Circles can be associated with the sun, positive smilies, snowballs, juicy orange, with the scoop of ice cream and other nice and circular things around us. So, if you haven’t got any ideas of applying circles to your design projects, you should certainly look through the sites listed below and get some inspiration!

Spielzeugmuseum-ilmenau.de

Lutonsciencefair.co.uk

Tweed.is

Ishuplus.com

Zwartwitmedia.com

Ralphvanrentergem.be

Arboltextual.com

Studuj.newtoncollege.cz

Werbeagentur-kopfnuss.de

Circle-ent.com

Iamrakesh.com

Vasaportfolio.com

Targetnuclearweapons.org.au

Inmotionmassage.co.uk

Vlog.it

Terminalalterego.com

Aw-digital.com

Alwayswithhonor.com

Jorgerigabert.com

Curiousgenerationgroup.com

Privaatdisain.ee

Locomotivane.com.br

Craigjamieson.com

Chichestermusicacademy.com

Goslingo.com

Digitaldrop.net

Lmnopstudios.com

Thekettle.net

Smallstudio.com.au

Madebyzeki.co.uk

Werbungrockt.de

Dotmick.com

Zabawnik.org

Yann-pochet.com

Kentwoolsocks.com

Moretech.it

Zizzi.co.uk

Visionpark.at

Skewedicons.com

Stamonica.org

Firstbasedesign.co.uk

Ilussori.com

Muenchen-webdesigner.com

Weareempire.co.uk

Travelison.com

Headlampcreative.com

Bradevansdesign.com

Cappen.com

Chienjaunestudio.com

Styiens.com

Theautumnsrain.com

Want More Cocktails?

Web Design Inspiration Cocktails’ Section

Classic LucasArts Adventure Games: Best Fan Artworks

AndrewG — Sun, 29 Jan 2012 20:55:46 +0000

LucasArts Entertainment Company is famous as a video game developer for its line of graphic adventure games that were published in 1990s. Some of you might remember such their games as The Secret of Monkey Island (1990), Indiana Jones and the Last Crusade: The Graphic Adventure (1989), The Secret of Monkey Island (1990), Monkey Island 2: LeChuck’s Revenge (1991), Indiana Jones and the Fate of Atlantis (1992), Maniac Mansion: Day of the Tentacle, Sam & Max Hit the Road (1993), The Curse of Monkey Island (1997), Grim Fandango (1998), Star Wars: Dark Forces, Jedi Knight: Dark Forces II and a lot of others. Those of you who played some of these games when you were young could get inspired with our collection of the best fan artworks dedicated to the classic LucasArts Adventure Games and want to try them once again! As usually, here we’ve handpicked the best works of the huge fans from deviantART. Hope you’ll enjoy it!

Monkey Island

Blood Island by titos2k

Monkey Island Face Melter by WonderDookie

The Horror of Monkey Island by dominuself

Monkey Island by kampfkohlrabi

Monkey Island – A Man Posessed by TheOneCalledNio

“Arrgh, Math be hard.” by MarinaYoshi

LeChuck’s Revenge by CoolSurface

LeChuck playing MI2 by QuadrilinearFilter

Morgan LeFlay by Garrenh

The Lady of voodoo by TheFoxdragon

Guybrush Threepwood by TolmanCotton

Six Guybrushes by spacecoyote

Zombie Pirate LeChuck by Vihola

Monkey Island by Shmivv

Guybrush Threepwood artrade by toadboue

Monkey island by Gigei

Guybrush Threepwood by KazeBR

Oh, my sweet Elaine… by VanKid

Monkey Island postcard by TheoVision

First arrival by AdoC

Monkey Island Halloween by AdoC

Voodoo Witch by titos2k

Monkey Island Caribbean Sunset by Raax-theIceWarrior

Monkey island by zarzo

Along the Caribbean Coast by kimbil

Treasure Hunters by heikkivayrynen

Monkey Island Adventure by Dhraklord

Monkey Island by VegaNya

X marks the spot by SpankTB

You fight like a…OW by fdiskart

Together Again by Ofelan

Voodoo Cannonball by titos2k

Christmas on June colored by gilau

Wally Adventures by Ovi-One

Monkey Madness WIP by Hierodulai

Morgan LeFlay: Pirate Hunter by pettyartist

In The Weird Dream by VanKid

Tales of Monkey Island – The Movie by Nemiant

Sam & Max

Sammun-mak Attack by AmazingTrout

Sam’n'Max in Poland by titos2k

Sam & Max – Movil Lagomorph Launcher by Ginny-N

Sam and Max Halloween by WonderDookie

Sam and Max Christmas 2009 by Ovi-One

Sam and Max by BillyFore

Tomb of Sammun-Mak Poster by Light-Rises

Full Throttle

Full Throttle by RaananZ

Indestructible by Lord-Of-The-Guns

Full Throttle by retrofive

Asphalt n’ Trouble by CommandoFunebrero

Full throttle by Cinsev

Grim Fandango

Manny Calavera – Grim Fandango by rmda

Grim Fandango by Bisart

The Dig

The Dig by spaghetti016

The Dig by CytosisX

You might also be interested in..

Studio Ghibli Animated Films: Awesome Fan Artworks
Amazing Halloween Fan Artworks
Alice in Wonderland Fan Art
The Legend of Zelda Fan Art
Tolkien’s Middle-Earth Fan Art
StarCraft Universe: 100+ Awesome Fan Artworks

30 New Photo Manipulation Tutorials

AndrewG — Fri, 27 Jan 2012 20:34:32 +0000

Photoshop is a powerful tool in the hands of a really skilful designer or photographer. It helps to bring your ideas into reality and mostly used for Photo Manipulation. To help you in mastering your flairs we’ve gathered 30 New Photo manipulation tutorials. These tutorials are made for those people who have creative mind and like experimenting with different effects. The tutorials listed below will help you learning various techniques of how to manipulate images using Photoshop.

Create a Serene Fantasy Photo Manipulation

In this tutorial you’ll learn how to compose magical scene from different stock images, how to create strong atmosphere and add interesting lights and shadows. You’ll also learn many different ways of color adjustments to get the exact images you’ve always wished.

Create an Elephant Sundae Using Photo Manipulation Techniques

Photoshop is great at seamlessly combing photos to create an entirely new scene. In this tutorial we will create an elephant sundae using several stock photos.

Turn a Portrait Photo Into a Painting

In this tutorial we will turn a photo into a digital painting using several techniques to achieve a mixed media look.

Create a Powerful Human Disintegration Effect in Photoshop

In this tutorial we will create a powerful, and emotional human disintegration effect in Photoshop.

Create a Floating Over-Grown “Tree House” in Photoshop

In this tutorial we will combine several stock images to create a floating over-grown tree house in Photoshop.

Create a Lamb’s Coat in Photoshop

In this tutorial we will demonstrate how to create a lamb’s coat in Photoshop using several stock photos.

Create a Cybernetic Woman in Photoshop

In this long and detailed tutorial we will demonstrate how to create a cybernetic woman using a photo of a model and a few stock images.

Create a Fictional Arctic Snow Frog in Photoshop

In this tutorial, we will combine several stock images and effects to create a fictional arctic snow frog in Photoshop.

Undress a Giraffe in Photoshop

This tutorial demonstrate how to undress a giraffe by removing its spots. We will then show how to turn its spots into an outfit that will be draped over an ironing board.

Create a Surreal Out of Bounds Photo Manipulation in Photoshop

In this tutorial we will combine several images of water, animals, and people to create a surreal out of bounds photo manipulation in Photoshop.

Combine Images to Create a Surreal Portrait in Photoshop

In this tutorial we will use the liquify tool and several image blending techniques to create a surreal and slightly creepy photo manipulation.

How to Create a Photo Manipulation of a Flooded City Scene

In this tutorial, we will learn how to manipulate a simple photo into a flooding torrent of a scene. We’ll use some relatively simple techniques to give this image a semi-realistic, stylized feel.

How to Create a Flaming Photo Manipulation

In this tutorial, we’ll manipulate a picture so it looks like a woman burning in flames.

How to Apply Textures to Uneven Surfaces

Create a Fallen, Rain-Soaked, Angel Composition in Photoshop

In this tutorial we will demonstrate how to create a lonely, fallen, rain-soaked, angel composition in Photoshop using photo manipulation techniques.

The Making of the Nutty Boat Trip

In this tutorial, we will demonstrate how to place a couple of squirrels in a coffee mug that is floating in a body of water.

Create a Devastating Tidal Wave in Photoshop

In today’s tutorial, Matte Painting 101: Create a Devastating Tidal Wave in Photoshop we will give New York City a break and will destroy London with a devastating tidal wave.

How to Make a Car Advertisement Poster Design

In this graphic design tutorial, we’ll cover the essential advertising workflow. By following along with this Photoshop ad tutorial, you’ll see how to take just a simple stock image and build a pixel perfect artwork around it, while also communicating valuable information about the brand to viewers.

Create a Dark Human Photo Manipulation with Liquified Water Texture in Photoshop

In this Photoshop tutorial, I will show you the steps I took to Create Liquid Human Photo Manipulation with Liquified Water Texture in Photoshop.

Tribal Fighter – Manipulation Tutorial

This is going to be an easy one, I’ll be using the techniques used on my other tutorials but will end up with a different result.

Love Me – Photoshop Manipulation Tutorial

This is a manipulation tutorial that’s suitable for beginners and advanced Photoshop users alike. There are only a few stock images used to make this so it’s easier for me to explain and for you to reproduce.

One Moment – Manipulation Tutorial

In this Photoshop tutorial I will show you how to create a nice spotlight effect on an image using the brush tool. It’s not a difficult effect to achieve but patience is needed. I used a single stock image which can be downloaded for free.

Hopeless – Photoshop Manipulation Tutorial

You will see how to create shadows and how combining a couple of images and the right adjustments you can create a cool manipulation.

Trip Home – Summer Scene Manipulation

I will show you how to combine a few free stock images and create a beautiful warm summer scene. If you followed the Manipulation Secrets series it will be a lot easier for you to follow this tutorial.

Business Man – Awesome Black & White Tutorial

Lonely – Manipulation Tutorial

This time we will use less stock images and focus more on the effects, blend modes, and illumination.

Create a Nebula Cosmolady in Photoshop

How to Create a Dramatic Fisheye Spartan Scene with Photoshop

In this tutorial we are going to learn how to blend and distort different desert landscape stock images to create a dynamic fisheye-like perspective and use different adjustment layers to get different coloring and feel to the manipulation.

Make a Dark Statue with 3D Tentacles Photo Manipulation

In this tutorial we will create a dark statue photomanipulation using Photoshop and Cinema 4D.

Create a Water Girl Photo Manipulation Mixing with Splatter Brushes in Photoshop

In this tutorial, I will show you the steps I took to Create a Water Girl Photo Manipulation (Mixing with Splatter Brushes) in Photoshop.

You might also be interested in..

50 Fresh Impressive Photo Manipulation Tutorials

Web Design Inspirational Cocktail #22

AndrewG — Thu, 26 Jan 2012 16:13:18 +0000

Lutonsciencefair.co.uk

Quantum90.com

Launchfactory.org

Mariahelenacunha.com

Niketo.com

Ralphvanrentergem.be

Dataveyes.com

Goodnesspopup.com

Want More Cocktails?

Web Design Inspiration Cocktails’ Section

On the Sails of HTML5: How New Technologies Change Modern Web. Part 2

Constantin Kichinsky — Wed, 25 Jan 2012 18:16:26 +0000

You can read the first part of this article here

A3. Agile

The third A is Agile. The world is difficult and sometimes it is not enough to be simply accessible and adaptive to some different, but general parameters. A site must be flexible and the making of technological decisions must be flexible too.

Actually, I must confess, that previously it was quite difficult for me to keep from the use of word “flexible” in this article, but it was worth it and further I’m going to explain why.

If adaptation of site is based on its availability, then flexibility, in its turn, is based on adaptations and also extends availability. Although it may seem that it is simply a word-play, there is a certain difference between adaptivity and flexibility.

Adaptation, as a rule, is limited and supposes the change of original appearance or behavior in reply to some turndown of environment. For example, our eye adapts oneself to the different level of luminosity or distance to the examined object. Behavior of many living creatures adapts oneself under the change of temperature condition. In the same way a site adapts oneself to the determined screen sizes or browser possibilities.

Flexibility shows up in critical points, when gradual adaptation is impossible, more senseless or a range of made alteration is such that distance between two extreme points becomes too large and a way between them breaks on separate scenarios. As a rule, flexibility is characterized by overrun and changing of technological platform.

Flexibility is not something new and many of you are acquainted with it from the practice. Further I’ll tell you about a few of such scenarios. Now let us go back to the present time and the near past. Modern mobile browsers are quite good with the ordinary web sites, allowing to co-operate with them with the use of scaling.

The adaptation considered before allows to improve this scenario, adjusting the appearance, but still it is the same site. Decision which in today’s practice is used more frequent can be found in the separate mobile version of a site.

It can be considered differently, but one of viewpoints consists in technological flexibility of a made decisions. If platforms and concrete required functional are strongly differ on each of them, then the adaptive scenarios have too large tension and it’s time to break them. And nothing is wrong here.

In fact, flexibility is the thing that takes place with adaptation in a limit. Technological flexibility is the adaptation of thought the aim of which is an effective task solving. In particular, it can lead both to the search of compromises in the used technologies, and to the appearance of scenarios which are not cross platform to a full degree.

For example, a well-known game Angry Birds, created on HTML5, uses Adobe Flash for reproducing the musical accompaniment and the audio effects. It may seem strange, however, this normal, flexible technological decision allows using the technologies, which are accessible and work quite effectively in the wide range of browsers. In this case developers can face with a variety of problems when reproducing audio via audio -element in HTML5 (by the way, this was not Internet Explorer, but another popular browser ;) and flash was used for the decision of this task. It is an example of flexible combination of technologies without involving of the religious feelings.

Other thematic example is Kindle Cloud Reader from Amazon. This browser application allowing reading books straight through a browser, thus it works even offline. I’ll mention about this moment later. Now we are interested in technological flexibility.

I don’t know about all business details of Amazon’s motivation but, eventually, the company’s aspiration for the co-operation with end users via browser passing the application shops shows up obviously in Kindle Cloud Reader. If you will look at a primary audience, you’ll see that it’s the users of iPad and tables on Android.

In the next moment, when thinking on a technological decision, you will discover that you need a technology for a local storage, allowing saving the files on user’s device for further reading. Here appears examination of the available technologies, which can be quickly resolved due to the circumstance that both platforms are united by the browser and, although browsers are different, both are based on the Webkit engine.

Webkit supports WebSQL Database technology, allowing doing the right thing: to keep data in a local storage. In this moment, if you are acquainted with new web-standards, you might get a clue. Actually, on the W3C site with red letters in a box and additionally in white on a black background with yellow circles it is written (see the pic. above), that the development of this technology is stopped. In reality, today W3C and browser developers look toward the alternative technology – IndexedDB (and Local Storage for relatively simple scenarios).

All of it in any way didn’t prevent the developers from Amazon to use the accessible technology at the moment of development, in spite of its undefined future status and limited support in other browsers.

It is flexibility in technology and in some way it’s even boldness in decision-making: to do first of all a product for a key audience and not trying to lean over backwards, to do a decision which will work for all the potential users. Flexibility acknowledges compromises.

Finally, another example of flexibility display. In IE9 appeared a possibility of fixing a web site on a taskbar with an additional functional – besides the icon of application or site, it is a context menu (static and dynamic), application management with the help of the buttons in the window of preview and notifications for users.

Although this technology is accessible only in IE, it allows extending the functional of a site with a little effort, making it more accessible and adaptive under additional possibilities. It is a flexible expansion of UX user in co-operating with a site.

Flexibility is not a question of technological cleanness (this question remains always actual, although sometimes it is necessary to make compromises), it is a question of the use of existent possibilities and efficiency of task decision.

Often we get in a situation when some new technologies appear and we are in a great want of using them, but, looking back on the existent ecosystem of browsers, we are forced to pull ourselves up and stop. Flexibility looks toward the ideas of Graceful Degradation, allowing using modern decisions if it is possible, and aiming to provide alternative scenarios where it is impossible.

It is so-called fallback -scenarios, when, for example, in old browsers a concrete unsupported (as a rule, not because browsers are bad, but because they are old) mechanism will be realized through other accessible technologies:

In some cases the emergent difference between a modern level and the level in old browsers is filled by means of so-called Polyfills (see the article of What is a Polyfill? by Remy Sharp).

And sometimes it is simply needed to have boldness to cut off a part of browsers’ ecosystem, however, not forgetting about the respect to their users. It is actually important.

And, certainly, don’t forget about taking the approach of Feature Detection and Modernizr libraries.

A4. Async

The fourth A is Async. A site must be adapted under the asynchrony of our world and of its web-part in particular. It may seem that asynchrony is something quite different from all that we’ve discussed before, but, actually, it is not the case.

If the site works accordingly to the behavior of asynchronous nature of all life cycle of its work that was put in it, it means that it’s adapted to the time delays and spatial gaps. Certainly, adaptation is complemented with flexible ability to take into account possibilities of different devices and software solutions, and aimed at the improvement of site’s availability for end users.

The problem of asynchrony arises in a few key points about which it is always important to remember:

• Interaction with a network
• Interaction with a server
• Processes in a browser
• Interaction with user

It is important to understand what takes place in each of these points in case when interaction is being violated, or with appearance of delays, and how these points influence on each other.

For example, what will happen to a site, if the internet disconnects? The obvious answer that would have appeared previously – a site will not work. Today we have a better answer- a site can remain functional, but will not get updating from a network and won’t be able to send queries on a server. Look at the Application Cache from HTML5 and local data storages, they open an enormous amount of new scenarios.

What will happen to a site, if there is no answer from a server for a long time? Perhaps, it simply went down, or the timeout occurred? Or, maybe, simply the connection disappeared temporally? On all these questions a site (or application) must be able to give answers with concrete behavior in the emerged situation. Or another variant: it is needed to support permanent connection with a web server for a regular messaging. It’s possible to use old good AJAX and technologies on its base, and also to look at Web Sockets where this technology is already supported today.

What, if you need to do some calculation, processing of data on a client’s side or, for example, local file uploaded through File API? All these processes potentially can lead to blocking of UI stream, what is extremely undesirable. Technologies of Web Workers and Web Messaging, allowing to start implementation of tasks on JavaScript in separate streams and to carry out co-operation between them, can become a way out of the situation.

Of course, all such questions do the decision-making more complicated, but a user wins in the total. The thing is worth the effort.

A5. Attractive

And finally, the fifth A is Attractive. A site must be attractive for a user. And, it is also another look at the questions of availability, adaptivity, flexibility and asynchrony. User is attracted by a decision which can be adjusted to his needs and be comfortable to him.

Of course, it doesn’t mean that for every concrete user there must be necessarily some magical adjustable mechanisms in the sites and web-applications (although, that would be really good). Most users have similar scenarios of how they use this or that application or web site and these scenarios can be fully clustered and determined.

Internal beauty and harmony of a site requires adaptation under person’s psychology. The competent use of audio and visual (or multimedia) possibilities of modern technologies is adjustment to everything that attracts all of us in the surrounding world. The main thing is not to overdo and to know where to stop.

Here come to help you some graphic possibilities of HTML5 – Canvas and SVG, multimedia HTML5 Audio and Video, and enormous amount of new CSS possibilities, including typography, animations, transformations and different effects.

For example, look at the comics for Disney’s Tron done by means of HTML5 Canvas. It’s already not simply sequence of pictures, but the whole interactive presentation which a spectator can co-operate with. Completely different level!

At the same time take a look at the Never Mind the Bullets comics. It is also an interactive scenario, but this time CSS3 possibilities are used with plural backgrounds, allowing creating the effect of parallax. It really engages a spectator in the process as the events unfold.

Finally, I simply can’t omit the new Bing feature, if previously it was in everyday cool and unique photos, then now Bing periodically pleases us with some nice backgrounds on HTML5 Video.

Attract a user, make his trip enthralling.

5A.Conclusion

We are on a finish line. 5A is a not panacea, world-view or a system of worship. It is an aspiration to do sites better and more effective, aspiration to find reasonable balance between universal availability, technological perfection, contemporaneity and prudence, including the decision of business-tasks.

I am sure that good sites must be accessible for users and machines, adaptive to different devices and form factors, open up in all beauty in modern browsers and to feel free to use new technologies wherein it is possible, to be modern and sensitive to the time and to make a user pleased and satisfied in a way so, that he wanted to visit it again.

p.s. Mentioned IE technologies

Just in case I add the technologies mentioned in the article:

• HTML5 Semantic Tags — IE9+ (+HTML5 Shim for • HTML5 Canvas, Audio + Video, SVG — IE9+
• HTML5 Offline|Application Cache, Web Forms — IE10+
• ARIA, role attributes — IE8+, IE9+
• CSS3 Media Queries, Transforms 2D, Fonts (Font-face + WOFF), Borders & Backgrounds (Border Radius, Multiple Backgrounds) — IE9+
• CSS3 Exclusions and Shapes, Grid Layout, Flexible Box, Transforms 3D, Transitions, Animations, Borders & Backgrounds (Gradients) — IE10+
• Web Storage — IE8+
• IndexedDB, Web Sockets, Web Workers, Web Messaging — IE10+
• IE Pinned Sites — IE9+

It's far not all the new possibilities accessible in IE and other browsers.

To read original article in Russian click here.

On the Sails of HTML5: How New Technologies Change Modern Web. Part 1

Constantin Kichinsky — Tue, 24 Jan 2012 09:04:22 +0000

What is HTML5?

Today, from a number of those people who are somehow related to web development, only lazy ones haven’t heard about HTML5. You won’t be mistaken, supposing that at every modern conference, where some questions about web are being discussed, almost for sure, there might be something about HTML5. Practically every large company, related to web, whether it is Google, Apple, Microsoft, Amazon, Adobe, Oracle, Facebook, Yandex or Mail.ru. says something in favor of HTML5, makes a declaration of love and adherence to advancement and development of HTML5. Yeah! (Opera and Mozilla, undoubtedly, are in this list too.)

We can only be glad about this universal aspiration. Certainly, in case when all market participants get round the table and come to an agreement, but not try to pull the blanket back to their sides.

Enormous prospects, new wave of web development, new generation of web-applications! That’s cool!

I’m not going to tell you what HTML5 is. In the context of the article it is important to understand clearly one thing: there are two ways of understanding HTML5.

The first is the standard of HTML5, the document on W3C site, where all new tags, attributes, new APIs, and a number of concomitant documents, which have such additional details as API for Canvas, are described.

The second is the “big”, marketing, HTML5 trend, an umbrella for the whole generation of new technologies, including both the specification of HTML5 and great number of CSS3 modules, different APIs for JavaScript, and new standard for JavaScript – ECMAScript5.

As a rule, it’s clear from a context what is meant and a large mess doesn’t arise. Market HTML5 is a fixed notion supported by all market participants. But it is important to be aware of what is actually meant, because frequently somebody (we won’t point a finger at) affords to tell about many interesting things under the sauce of HTML5, that are not related to the web-standards and W3C, but, undoubtedly, support the general spirit of web development. It is also important to understand what is referred to every technology, whether it is an early prototype or an already established and concerted specification.

My story will be devoted mainly to the HTML5 trend, but I’ll try to make references on the concrete standards which we are going to talk about.

Revolutions in “HTML5″ and for “HTML5″

To understand better where a modern web moves, the first thing you should pay your attention to, are the distinctive transformations, which happened in IT Industry on the whole and web industry in particular. The world we can observe today notedly differs from that, what it was like some 5-10 years ago (I will remind that HTML 4.01 was ratified more than 11 years ago).

Among these changes it is impossible to omit the following:

• New hardware. Graphic chipsets, multicore processors and different touch-controls, getting to the quite different devices, up to mobile telephones, and also large aspiring to energy efficiency (how not to mention ARM and Intel Atom). Plus the enormous variety of form factors: from mobile devices, tablet pc’s, netbooks and notebooks to the stationary computers and TV sets. And it’s desirable to have an access to the internet everywhere!
• New trends in services. Cloud, sociality, mobility and permanent availability regardless of device.
• Changes in browsers. Upgrowth of contention – today there are five browsers on the market, which have too sufficient shares, that they cannot be ignored. Plus, certainly, mobile “zoo” :) And here is an important moment: today (or tomorrow) a modern browser knows both about the graphic acceleration and about multicore architecture, about touch-controls and different media input units, energy efficiency and cloud, about social services and mobility. Concrete details can differ from browser to browser, but a general trend is obvious.

All of it finds an obvious embodiment in one or other web-standards, therefore today we have a really new and constantly growing generation of technologies (recently on the Adobe MAX conference

Adobe presented a suggestion of new standard and variant of its realization – filters and shaders for CSS):

• HTML: Semantics, Graphics, Multimedia, WebForms, Security, DnD, History, Offline…
• CSS: Fonts, Colors, Borders & Backgrounds, Layouts, Media Queries, Transformations, Transitions & Animations…
• APIs: Geolocation, DB & LocalStorage, Sockets, Files, Media, Workers…
• JS: ECMAScript5

It is also important to understand that there are close interlacements between all these innovations in devices, software, services, standards and different practices of development, and that everything what we observe now in the field of web-development and web-standards, undoubtedly, will find its reflection in different software, realizing and supporting these standards (from the instruments of development to the browsers and OS), and at the hardware level (maybe, even Google’s dream will come true and hardware support of webm will appear in key devices ;).

Now let us talk about how, actually, modern web changes and what technologies and practices stand after it.

I’ve tried to distinguish a few key trends, which describe the essence of these transformations. So it turned out that it’s possible to pick up a characteristic word on the letter “A” for all of them, and the order of their implementation in the process of development and comprehension of web sites or web-applications, generally, coincides with alphabetical. :)

It would be nice, if thinking over the next project or analyzing the current, you will look at it through the prism of these “A’s”.

A1. Accessible

The first “A” is Accessible. A site must be accessible. Undoubtedly, it includes the questions of availability for people with limited possibilities (Accessibility), and not only. A site should be accessible for all internet users, including the searching mechanisms and any programs which extract the sense of your documents.

Now it’s the high time to mention the semantic marking and the correct balance between marking, styles and logic on JavaScript. The reality of the situation today is that not only the things, which related to the part of content presentation are taken out from marking, but also part of things from JS is taken out into declarative description on CSS.

From the point of view of semantics, a great number of new tags appeared in HTML5, both for the structural marking and for content marking directly:

A part of existent HTML5 tags acquires a new value. So, if before the choice between i and em (like b and strong) frequently was in favour of more short writing, then today it’s a tags with the different semantic loading, even if by default they have identical presentation an italics or fat outline.

On the whole, the more the marking is semantic, and the less garbage it contains, the easier (automatically) to understand where is the particular information.

The other part of innovations touches directly upon the questions of availability: here, foremost, the point is about aria – and role -attributes, allowing marking out the purpose and the roles of content. This information, for example, afterwards can be used by the programs for reading from a screen (screen reader). I should say that providing of availability is not the most banal task, and it’s almost the first time when this question attracted so great attention in HTML5.

Another side of availability is a question of comfort interaction with content and, in particular, speeds of input. New possibilities for web-forms, allowing to specify additional attributes, setting the type of the entered values, ranges and other parameters, were brought in HTML5. So, if it’s only possible to enter a telephone number into the field, then the user’s browser, for example, on a mobile or a tablet device can adjust a keyboard exactly for the input of digital data.

Finally, the theme which I also should mention in this block is HMTL Microdata. Microdata is a development of microformat ideas and it offers the rules of data annotation in accordance with one or another schemes:


   Konstantin Kichinsky
   
   ADE
   constantin.kichinsky.ru

See the examples of schemes on the site http://schema.org/. There you’ll find a collection of schemas supported by Bing, Google and Yahoo!

As I’ve already said, there are two interesting tendencies from the point of view of balance in the code between the mark-up, styles and logic. The first, obviously, is the wiping of all the style elements out of HTML5, general undesirability of the inline -styles use, also, from the point of view of the productivity.

I think, that it’s superfluously to remind you about tabular and sectional layouts, but today all of us are closer to the semantic layout.

The second tendency is the expansion of CSS possibilities and the arrival of possibility to make a declarative description of different effects, animations and transformations via corresponding rules instead of JavaScript code.

It’s not the last time when we see the display of these tendencies :)

A2. Adaptive

The second A is Adaptive. A site must be adaptive according to its surrounding terms and adjustable to an external situation. Here is necessary to say that adaptivity is not something strongly additional in relation to the availability of the site, it is rather the expansion and development, because adaptivity must grow from the ideas of availability.

To adapt to different screen resolutions, form-factors, different font sizes, output devices and other parameters, means to be accessible in all these scenarios.

In principle, adaptation is based not only on concrete standards, but also on different techniques and approaches which can be used in the process of web sites design and development, and also their various combinations. In this context I want to mention two important terms, you should certainly pay your attention to: Responsive Design (see the article Responsive Web Design by Ethan Marcotte) and Progressive Enhancement (see the article Progressive Enhancement and the Future of Web Design by Steven Champeon).

The first is about the adaptation to different screen resolutions and form-factors. The second one is about moving from simple scenarios to more advanced (for example, from old browsers to modern one), while working on your site.

In some cases it is an implementation of one or another standards or certain techniques, for example, in order to give different images to the client in various conditions(little for little devices and large one for large). And sometimes it is a development of the functional with the arrival of corresponding possibilities.

You can imagine a large chart of different scenarios. Across, you’ll find various screen resolutions (and form-factors related to them) and vertically there will be a motion from the less advanced browsers to more modern. Responsive Design and Progressive Enhancement are the methods of navigation (and thinking) upwards and downwards, to the right and to the left.
Let us look at few concrete technologies and web-standards.

CSS3 Media Queries

The first task that everyone faces with is adaptation of the site to different screen resolutions. A problem here is that there are many of them, they are different and some new appear constantly. I think that all the people who work in web development (or web design) more than a year, remember all these conversations whether it is time or not to switch over the low-limit size 800x600px to the greater 1024x768px, study of statistics and trends in screen size of an average user.

Generally speaking, today this question and the statement of such question are already non-topical. Do you know why? Because, instead of gradually coming to the greater and greater screen sizes, actually we came to the greater variety of screen sizes, thus in both sides to the little mobile like 480x800px and large at the modern monitors – 1920x1080px and more.

Thus in all this range a modern browser can work on an eventual device – whether it is IE engine (from Windows Phone to desktop Windows) or one of engines on a base of webkit (from iPhone and iPad to MacOS X and desktop Windows), and there can be quite different engines, including the enormous zoo of java browsers in different mobile devices.

A rubber layout can be used in certain ranges, but it is not omnipotent and limited on the application. And in such variety additional instruments are needed for adaptation. In general…

If on a few minutes to take a look at the modern engines, you will discover that all of them support the special technology which is called Media Queries (it is one of CSS3 modules).

CSS3 Media Queries extends the traditional Media Types, already accessible in HTML 4.01 and CSS 2.1, and allows determining the rules of CSS more precise depending on the different parameters of reproducing context, being it sizes of the screen, device orientation, depth of color, monochrome or coloured printing etc.

The idea of Media Queries consists in that you can define how to place the content, what content to display, and what not, depending on the value of all these parameters. If the screen is little, it means that it is necessary to regroup all the elements in a way, that they were reasonably fitted in a little screen, and if it’s large, it is possible to use the available place more optimally, and to display more information. You can look up yourself how it all works in the examples collected on the http://mediaqueri.es web site.

The use of Media Queries, by the way, is strongly bound on that you really dissociate marking of content from its presentation. Therefore availability (and semanticity) lies at the head of the corner. The advantage is that you do one site for different devices. Devices, which don’t identify Media Queries, will ignore your rules.

Usually in simple scenarios it’s quite enough the possibilities of CSS 2.1 and module of Media Queries, but in the cases of a difficult layout you’ll need additional instruments to do something worth and effective in execution.

You will certainly like many other CSS3 modules, perfectly combining with the ideas of Media Queries.

Take a look at CSS3 Exclusions and Shapes (previously Positioned Floats), allowing to adjust the positioning of separate elements relatively to the flowing content around, thus behavior of content in its turn can be determined by other parameters, including the screen sizes and modes of placement:

In the example above CSS3 Exclusions is used in combination with a multi-column layout and layout with the use of grid.

I should say some more about the last point. Placing of blocks on a grid is an enormous headache of all coders. Once this was a tabular layout, then it became unfashionable and almost all confessed this approach was incorrect and began to use the sectional layout with multistory css rules, if it was required to do anything more difficult, than the layout in two-three columns.

Among the new modules CSS3 there is a module devoted exactly to this task it is CSS3 Grid Layout. Grid allows lining up elements on a virtual grid. It is a quite powerful instrument, imagine, that you simply can use different grids for your blocks at different screen resolutions! You’ll be able soon :)

Another interesting module is CSS3 Flexible Box, allowing your blocks to fill the space taken for them, according to your wishes, be that filling of free space or distribution of space between blocks in the set proportion. Today many similar tasks are solved by means of different devices in a layout and style rules, tomorrow it will be enough to specify what is exactly required (see also the article CSS3 Flexible Box Layout Explained by Richard Shepherd).

On the whole, using technologies that are already accessible today or will be in the nearest future, you can do decisions which will easily adapt oneself under different terms. Being technologically a decision, your site can regroup differently in various terms, showing the most optimal exterior in every case.

Now let’s go back to Progressive Enhancement.

Progressive Enhancement

Shortly the idea of Progressive Enhancement can be stated (or interpreted) as a step-by-step improvement: you do a base functional working in all browsers, and further improve it, moving from old versions to new one, not violating the capacity, but adding some needed features for the users of modern decisions.

Ultimately it means, that all users of your site will get a guaranteed minimum of functional, but at the same time, for those, who prefers more fresh decisions, a site will be, for example, more beautiful.

And if you still live with an idea, that a site must look identically everywhere, it’s time to crumple it and throw it into the nearest garbage can. To look everywhere identically is an impermissible spending of energy and in the modern terms of large variety of devices it rather looks as evolutional miscalculation (translating into the language of money: users will prefer those, which are able to adapt oneself), than the top of engineering idea.

How it works? Very simple.

Do you think about the application of something from the arsenal of CSS3 Borders & Backgrounds? Do square corners for those, which don’t support round, and round for those, which support them. Do a continuous background for old browsers and gradient for modern. If it is possible to do with one background image in IE6 – 8, then leave the use of plural backgrounds for IE9+.

Do a base functional and add some new possibilities to it. Users will be glad, when switching to the new and modern browser, they will really feel a difference on your site.

It is possible to think about Progressive Enhancement in a spirit of television analogy. We passed a long way from monochromic to coloured and further with the video of high definition. And (while the question is about the analog technology), old televisions can still show modern transmissions, but in a monochromic variant. The audience knows that in modern television a picture will be better. However, a transferrable signal does not depend on television.

You can read the second part of this article here

To read original article in Russian click here.

Meet the Designer – Interview with Vadim Sherbakov

AndrewG — Mon, 23 Jan 2012 12:36:37 +0000

If you’re concerned with web design/development and everything concomitant, and you read blogs and use social media to connect to the community, no doubt you might become interested in learning about some new faces in this fields. This time, we had an interview with Vadim Sherbakov a designer living and working in Moscow.

Please tell us a bit about your background. How did you come to web design?

As long as I can remember, I was always interested in design, but I chose to go for a business school in UK for my education (which in a sense helped me a lot after all in my career as a designer). Fortunately, I realized soon enough that business is not my cup of tea, and I decided to change my career. I went for a position of a senior designer on а TV channel, doing CG for TV programs such as openers, titles, program design. Then after a while, together with 2 of my friends, we decided to create a freelance community on our own, doing mostly CG for films and TV commercials. During the next several years we’ve produced many CG shots, commercials and tv show graphics and a year ago we’ve decided to merge with a bigger production company to increase our production output. By that time I was already an Art director in our small establishment and I found a new interest in web design and UI (mostly iOS) design and decided to pursue that path as well. I’ve created my own portfolio website and to my astonishment it became a “site of the day” in awwwards.com and had been pronounced one of 365 best sites in the world in 2011.

Have you received any special education before starting your career? Could you become what you are now without it?

I received business education which helps me with my freelance career. All my design education was mostly watch and learn education as well as self-education.

Did you look up to someone when you were a beginning designer? Are there any professionals you still look up to?

I usually pay attention to projects or work not as a designer, I may like 2-3 works from one designer and 1 or 2 from another and so forth, or studio when you see а collaboration of the designers works. But I remember from the early days I loved the Hydro74 works (mostly all of them), still fascinated by the quality of his work. Today I really like the work of Jonas Eriksson. He is a terrific designer.

Could you name a few inspiring designs you’ve seen recently?

76 Synthesizer is one crazy iPad application. Totally awesome design. 360° Langstrasse Zürich is a jaw dropping parallax scrolling website as well as new Beetle Volkswagen site. I also really like http://www.revision.ru/work/46977/ – fantastic website for a company producing handmade soaps.

What social media do you use for work? Which one is your favourite?

I use Twitter and Facebook. I really like Dribbble – some kind of social network (if I may say so) for a designers and is my favorite one.

Where do you go for design inspiration?

I have a day-to-day routine of checking dribbble, awwwards sites and I also sent up my iPad rss reader for several design site such as design-newz.com etc.

How do you find/attract web design clients?

Since my portfolio site became of the day client usually find me at awwwwards and dribble themselves.

How do you usually start a new project?

I usually check out the clients website (if it exists), try to understand what they want and need from me in the project. I also try to find the best example in the field of the project, to see what I will be up against and what my work will be compared to. I also try to find an inspiration in the recent cool concepts, web sites etc, not to copy but to be inspired and motivated, to craft something better or at least as cool as it.

How do you think, what are the most important skills for a designer to have/develop?

I believe that the most important skill for a web designer nowadays is skill to work with fonts. Create great composition with different types of fonts as well as finding the one for your next project is a skill which comes with practice or never comes at all. I constantly search through the web for new and exciting fonts for my next big project. I like traditional foundry where you could find a solid professional font, but I also love small independent foundry with smaller selection or even independent designers with 1-2 fonts to offer – this is an equivalent of treasure hunting for me :)

Do you have any favorite websites for interacting with others in the design community?

Dribbble. Periodically.

How do you think, what trends will be popular in 2012?

More cool bold big typography. Textured websites are still popular. Responsive design becomes even more popular and will be starting to become a major trend since there will be iPad 3 and iPhone 5 in nearest future (I hope)

What changes would you like to see in the design community in the next 5 years?

As for the other industries, I would love to see more new ideas. It would be great to see more cool sites such as dribble, behance or cargo collective to emerge.

Thank you Vadim for your participation and for the great responses. We wish you a lot of new and interesting projects.

To learn more about Vadim Sherbakov you can visit this links:

Official site: http://www.madebyvadim.com
Twitter: http://twitter.com/#!/MadebyVadim
Dribbble: http://dribbble.com/Vadim

See other interviews

Studio Ghibli Animated Films: Awesome Fan Artworks

AndrewG — Sat, 21 Jan 2012 21:44:36 +0000

Ghibli Tribute by jmlfreeman

Sen to Chihiro no Kamikakushi by Erise09

Fujimoto by KurkoBoltsi

Howl by chernotrav

Homage to Hayao Miyazaki by GushieBear

Spirited Away – Visit to Zeneba by kimimaro-21

Floating by Athena-chan

My Neighbour Mooglo by MetalHanzo

Nausicaa by lcibos

The Catbus by lacluna

Riding the Wind in the Sky by lastscionz

Watching from the distance by lastscionz

Totoro by Azertip

Howl’s Moving Castle by UdonNodu

Miyazaki Compilation by meiwren

Pirate Ship by Slence

Its magic by randis

Mononoke hime by empireINC

Mononoke by AnnouncerGuy

Rain by Vanoxymore

Ghibli Fanart by PeterPan-Syndrome

Beautiful World of Ghibli by Barukurii

Spirited Away by Barukurii

Howl’s Moving Castle: Stroll Through the Sky by Barukurii

Ghibli love by alexielart

Ghibli Universe by ditto9

Ghibli by eokani

The Ghibli Gang by flamable77

Ghibli Art – State of Serenity by ziwu

Ghibli Bookmarks by PhantomSeptember

Ghibli a go-go by kaffepanna

Ghibli Girl by SilivrenStar

Night Flight by TsaoShin

Laputa: The Floating City by volleyballplayer13

Totoro by sigu

Studio Ghibli Goodness by TalbainEric

Ghibli Wars by Merinid-DE

Ghibli’s creatures by kuroreeves

Tonari No Totoro Ghibli by jdesigns79

Urban Ghibli by Takiusa

Tribute to Ghibli by Hyung86

The Ghibli Boys by Angeliko

Long Tail Jim and Totoro by Aldagon

Arrietty by anndr

My friend Totoro by BlackInk-Studio

Spirited Away by caelesc

Tadashi to Totorotachi by deedala

The Tale of Nausicaa’s Forest by Ginnunga

My own very neighbor, Totoro by 1337-momo

Totoro and Friends by lolita-art

Howl’s Moving Castle by DarkKenjie

Princess Mononoke by mikemaihack

Kiki by mikemaihack

A Very Magical Family by rue789

Howl in his world by Futago-KawaiI

Totoro in the City by Gilmec

Soccer Chaos with Totoro by Merinid-DE

Princess Mononoke by sakimichan

Catch It by Risachantag

Bus stop by viria13

Ghibli Miyazaki Tribute by UdonNodu

Howl’s Moving Castle by StarMasayume

Totoro no rain by Apofiss

Autumn Eve by Merinid-DE

Howl and Calcifer by mirukawa

You might also be interested in..

Amazing Halloween Fan Artworks
Alice in Wonderland Fan Art
The Legend of Zelda Fan Art
Tolkien’s Middle-Earth Fan Art
StarCraft Universe: 100+ Awesome Fan Artworks

40 New and Free Icon Sets for Web Designers

AndrewG — Fri, 20 Jan 2012 16:10:05 +0000

Icons are one of the most important features of any web related project and good icons are like a real godsend for web designers. Every designer knows that icons can do a lot when it’s needed to make a design look complete. Previously, we’ve shared with our readers some good collections of free icons and now it’s the time to provide you with some new sets you might find useful and even to add some of them to your collection. So, today we present 40 New and Free Icon Sets.

Socialico

Socialico is a package of 74 social media icons, combined within a single wieght font and designed by Jelio Dimitrov a.k.a. Arsek.

Download

Free custom MacOS icons

Six eye-catching icons designed by Ramotion to replace MacOS native applications icons.

Download

Free Mega Pack Vector Icons Set

Download

Mini Cards: 15 Credit/Debit Card Icons

Download

“Lifetime” Social Network Icons

27 social networks (Bebo, Badoo, Blogger, Delicious, Mylife Classmates, Digg, Netlog, MyOpera, Facebok, Ning, Orkit, Flixster, Zorpia, Youtube, Google+, Scribd, Technorati, Hi5, LastFM, Fotolog, Skype, Squidoo and Tagged) – each in 6 different sizes (24×24, 32×32, 48×48, 64×64, 128×128 and 256×256), 3 mouseover states (link, hover and active) and 2 graphic formats (PNG and PSD).

Download

Pixicus Icon Set: 106 Pixel Perfect Icons

A set of 106 pixel perfect icons by Fabio Basile.

Download

Free Vector Web Icons

This freebie offers vectors, all scalable, Adobe Photoshop PSDs as well as Fireworks PNGs. The icon set is completely free to use for commercial or personal applications without any restrictions.

Download

Mini Social Icon Set

Download

Free Mini Christmas Icons

A free set of mini 32px festive christmas icons for the holiday season. Free users will get 16 flat PNG icons.

Download

Free Social Media Bookmarking Icon Set

This set consists of 38 high quality icons in transparency PNG format (64 x 64, 32 x 32).
Download

Social media icons by simpo-jo

This social media icon set contains 25 icons in PNG format.

Download

Free Sweet Candy Social Icon Pack

The new icon set “Free Sweet Candy Mix Social Icon Pack” contains 17 free social icons available in 4 colors: blue, orange, red and purple. The “Free Candy Mix Social Icon Pack” consists of high quality, free 128×128 pixels icons, PNG file format for the following social networks: Delicious, Designbump, Designfloat, DevianArt, Digg, Diigo, Facebook, Feedburner, Flickr, Gmail, LinkedIn, NewsWire, Reddit, RSS Feed, Stumbleupon, Technorati and Twitter.

Download

Social Media Icons by KimMaida

A custom collection of 24 social media icons, including Photoshop vector (smart object) files, an Adobe Fireworks file (with web slices for exporting), various sizes of .pngs, as well as image sprites showing hover states for use with CSS. These icons are free for personal and commercial use.

Download

90 Social Media icons by Sergey Alekseev

Set of 90 simple Social Media Icons. Set includes: AI, PSD, CSH files.

Download

Free Stamp Social Network Icon

In this icon set are included 32 creative noisy stamp icons in five different sizes. These icons you can use in grunge or nosy style blogs and website to share posts or show your social profiles. Icon set is free for all, so grab it and use for all your projects.

Download

Somicro: 27 Social Media Icons

Somicro contains 27 icons covering most of the popular social networks out there. In the pack come 2 sets; one with a border and one without, totalizing 54 icons. It’s aim is to be used on the web, hence the small icon size. This set was created by Tina Mailhot-Roberge at Veodesign.

Download

Renova Icon Set

The icon set present 13 icons for most popular social networks and some for web stuff, mail icon, search icon, add/close button and the close one.

Download

Sweet social icon set

Download

Social Media Icon Pack by Vector Open Stock

This is a great detailed, glossy, shiny social media icon pack. It can only be seen in illustrator as it contains some nice effect as blur and shadows. Button Like ones.

Download

Circle Social Media Icons

Circle Social Media Icons is a set of 50 PNG icons designed at 48×48 in size.

Download

Socialis

This free download includes a PSD file will fully editable shape layers, plus 56 icon variations in PNG format.

Download

Free “Metallic” icons by IconShock

These are large icons 256×256 and provided as transparent PNG files. These icons are completely free for both personal and commercial use.

Download

Bijou

Download

Festive Christmas Icon Pack

This is a pack of 20 free festive vector (.EPS) icons created by offset media.

Download

WP7 Icons

Download

MimiGlyphs

Hand crafted, Infinitely scalable Icons for User Interface Designers.

Download

Melticons

20 free icons in eps format.

Download

Free Retro Icon Set

Download

Cuticons

5 cute little social icons for Facebook, Dribbble, Forrst, Vimeo and Twitter.

Download

HTML5 icons

Download

Picons Social

Picons Social is a bundle of 60 vector icons of your most favorite social services and applications. You are free to use them on your personal or business websites, interfaces or even other application, but you have to respect their owners’ rights and guidelines of use.

Download

Social icons pack 2

Download

10 office icons

Collection includes 10 office icons which can be used for web, desktop and mobile. PNG files are available in the following sizes: 48×48 px., 64×64 px., 128×128 px.

Download

LinkDeck

The LinkDeck icon pack can be used in both personal and commercial projects. Available sizes: 256×256, 128×128, 64×64, 32×32 and 16×16.

Download

Social Postage Stamps

24 transparent PNG files at 64 x 64px each.

Download

Aluminum Metal Social Media Icons by EyeOfNick

This is a set of Aluminum styled social media icons/buttons. Autor was inspired by the design of Apple’s iCloud logo and emulated it in the form of social media buttons. You may do what you like with the pack!

Download

New Social Media Icon Set

This social media icon set contains 25 scalable vectors complete with semi-transparent shadows for use on various types of backgrounds.

Download

Picas social media icons

Download

Free Social Icons by Gabriel Valdivia

Download

Aroma Free Icon Set

Download

You might also be interested in..

50 Fresh & Free Icon Sets For Web Designers
Collection of Free Google+ Icons
50 Beautiful Free Social Icon Sets
30 Fresh Creative Social Media Icon Sets

PROTECT IP / SOPA Breaks The Internet

AndrewG — Wed, 18 Jan 2012 18:56:16 +0000

Tell Congress not to censor the internet NOW! – fightforthefuture.org/pipa

PROTECT-IP is a bill that has been introduced in the Senate and the House and is moving quickly through Congress. It gives the government and corporations the ability to censor the net, in the name of protecting “creativity”. The law would let the government or corporations censor entire sites– they just have to convince a judge that the site is “dedicated to copyright infringement.”

The government has already wrongly shut down sites without any recourse to the site owner. Under this bill, sharing a video with anything copyrighted in it, or what sites like Youtube and Twitter do, would be considered illegal behavior according to this bill.

According to the Congressional Budget Office, this bill would cost us $47 million tax dollars a year — that’s for a fix that won’t work, disrupts the internet, stifles innovation, shuts out diverse voices, and censors the internet. This bill is bad for creativity and does not protect your rights.

Sliding Panel on CSS3 with iframe inside

Ivan Efimov — Wed, 18 Jan 2012 18:44:06 +0000

I want to share some little experience of how to create a sliding panel on CSS3 with iframe inside and how to overcome unpleasant surprises of IE. It seems to me that this decision could be good for adding a feedback form on the site, or a chat with a consultant etc.

Just in case I will remind that iframe has some minuses and when creating a site with iframe it is necessary to take them into account. However it has a lot of pluses, but we are not going to talk about that.

Here div will play the role of sliding panel. Inside it has another div it is a button-heading and iframe itself.


    
        Feedback

And now styles with comments:

#feedbackP{
    width : 400px;
    height : 272px;
    position : fixed; /* we fix the position in a window */
    z-index : 50;
    /* we move a panel to the right downward: */
    top : 100%;
    left : 100%;
    /* we pull out the top: */
    margin-top : -25px;
    margin-left : -130px;

    border : 2px solid;
    border-radius: 10px;

    padding: 5px;

    /* we set the effect of motion: */
    -moz-transition:margin 0.3s linear;
    -o-transition:margin 0.3s linear;
    -webkit-transition:margin 0.3s linear;
    -ms-transition:margin 0.3s linear;
    transition:margin 0.3s linear;
}
#feedbackP:hover{
    /* we pull out a panel that everyone could see it: */
    margin-top : -272px;
    margin-left : -400px;
    /* we set the effect of motion: */
    -moz-transition:margin 0.3s linear;
    -o-transition:margin 0.3s linear;
    -webkit-transition:margin 0.3s linear;
    -ms-transition:margin 0.3s linear;
    transition:margin 0.3s linear;
}

/* We do the heading of the panel, as a corner of paper folder: */
#feedbackButton{
    font-weight : bold;
    margin-left : 10px;
    margin-top : -6px;
    border : 1px solid #717277;
    border-radius : 0px 0px 10px 10px;
    text-align : center;
    width : 100px;
    margin-bottom : 5px;
    color : #FFFFFF;
    background : #717277;
}

#feedBackIframe{
    width : 390px;
    height : 240px;
    border : 1px solid;
}

Here, is what I’ve got, when a panel is drawn out:

It might seem that this is it, but the program can’t leave us all without any surprises.
The first thing is that

position : fixed;

doesn’t work in IE6. For IE7 it is needed to specify DOCTYPE. One can put up with border – radius and transition. And for those, who doesn’t want to bear with that such panel will not work in IE 6 – there are a few methods. I didn’t care much of IE<9, as I use canvas HTML5. But it's not all the surprises of IE. As soon as a mouse from div gets in iframe, inside of it the div stops to be hover. It results in that an appearing panel disappears at once.

A small script on JS + JQuery, which is necessary to be included, comes for help, if the browser is IE:

Cross browser availability:

• FF — yes
• Chrome — yes
• Safari — yes
• Opera — a panel emerges not smoothly, but sharply
• IE — a panel emerges not smoothly, but sharply

In the end I bring an example in operation: click. (a panel is on the right bottom corner)

You might also be interested in..

How to Create Simple Tooltips with CSS3
Round Avatars in CSS3
Tooltips in CSS3 and HTML5
Making an Image Gallery with CSS3
How to Create Progress Bar with CSS3
SITH – CSS3 Technique for Soft Image Transition
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
CSS3 Now! Transitions
CSS3 Now! Animation, Transparency, and more (Part 2)
Sprite animation in CSS3
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools

How to Create Simple Tooltips with CSS3

Softlink — Mon, 16 Jan 2012 21:12:52 +0000

I was asked for several times to create simple tooltips, the one with the arrows. It seemed to be easy: I had to do a block with round corners, take triangles and voilà. However, it’s not that simple. Because you know that designers’ imagination is very creative and sometimes even wild. They want to make inclined arrows, frames, or add some shadows. Certainly, it is possible to complete everything on the pictures, but it is impractical. If for no other reason than the heap of actions, in order that all will stretch on all sides.

If to use a bit of fantasy, all of it appeared absolutely solvable by means of CSS.

So, let’s pass from words to deeds.

I should say at once, that you can find all examples by clicking on a reference at the end of the article. And those who like to think about “higher matters” shouldn’t read this article up to the end, because nothing supernatural is presented here.

So, we need to make a draft. We may need one div and 1 or 2 pseudoelements.

div{
position:relative;
display:inline-block;
padding:10px;
min-height:30px;
min-width:100px;
font-family:'Trebuchet MS';
margin-right:30px;
text-align:left;
}

div:before, div:after{
content:'';
position:absolute;
}

Tooltip with a frame

We round the tooltip itself and make a frame. Then we hang on it a pseudoelement with an arrow and by means of transform at first we rotate it, and then we incline it. In the total we’ll get an inclined parallelogram. We set it a frame and through z – index:-1 we hide it “under” the basic block. But now the frame of tooltip appears over the arrow. For this purpose we take another pseudoelement and lay it on exactly over this frame, setting a background colour, the same as the tooltip has. That’s all. You can see the code below.

.t1{
border-radius:10px;
background:#efefef;
border:1px solid #777;
}

.t1:before{
bottom:-5px;
left:10px;
width:20px;
height:10px;
-webkit-transform:rotate(-30deg) skewX(-45deg);
-moz-transform:rotate(-30deg) skewX(-45deg);
-o-transform:rotate(-30deg) skewX(-45deg);
-ms-transform:rotate(-30deg) skewX(-45deg);
background:#efefef;
z-index:-1;
border:1px solid #777;
}

.t1:after{
left:13px;
bottom:-1px;
width:15px;
height:1px;
background:#efefef;
}

Simple tooltip with an arrow

All is simple here. As well as I’ve written in introduction: we take a block and hang it a triangle through a pseudoelement.

.t2{
background:#333;
border-radius:5px;
color:#ccc;
}

.t2:before{
left:10px;
bottom:-10px;
width:0px;
height:0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #333;
}

Tooltip with shadow

Here almost everything is the same, as well as in the first variant, only we add shade. And we make a z – index positive (or we do not specify it), because shade is shade and you can’t hide it behind an auxiliary pseudoelement. I would like to make a note at once, that this construction implies under itself reserving a space at the bottom of the tooltip.

.t3:before{
bottom:-4px;
right:10px;
width:20px;
height:10px;
-webkit-transform:rotate(30deg) skewX(45deg);
-moz-transform:rotate(30deg) skewX(45deg);
-ms-transform:rotate(30deg) skewX(45deg);
-o-transform:rotate(30deg) skewX(45deg);
background:#efefef;
z-index:1;
box-shadow:4px 5px 5px 0px #777;
}

In the example there is a tooltip with a gradient, but I will not describe it, as there everything is made analogically.

Semitransparent tooltip

In its turn it doesn’t differ from the “ordinary tooltip” with an arrow. We set a background through rgba. For an order I inclined it too.

.t5:before{
left:15px;
top:-10px;
width:0px;
height:0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(51,51,51,0.5);
-webkit-transform:skewX(45deg);
-moz-transform:skewX(45deg);
-ms-transform:skewX(45deg);
-o-transform:skewX(45deg);
}

That’s all tricks. Here you can see the example.

You might also be interested in..

Round Avatars in CSS3
Tooltips in CSS3 and HTML5
Making an Image Gallery with CSS3
How to Create Progress Bar with CSS3
SITH – CSS3 Technique for Soft Image Transition
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
CSS3 Now! Transitions
CSS3 Now! Animation, Transparency, and more (Part 2)
Sprite animation in CSS3
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools

40+ New Adobe Illustrator Tutorials

AndrewG — Sun, 15 Jan 2012 18:24:11 +0000

Are you a professional or a beginner in Adobe Illustrator? Well, never mind! To make progress at least in something you should read, learn and practice, practice and again practice. And if you are ready to start learning new techniques, you’ll need some fresh tutorial to keep to. To help you with that we’ve gathered here a list of step-by-step tutorials that might come of a great interest to you, in case if you’re searching for new methods of enhancing your personal skills and to make your work with this program more efficient and easy.

Create a Burning, Vector Match Using Gradient Meshes

In this tutorial you will learn how to create realistic vector fire, using the Gradient Mesh Tool and Screen Blending mode.

How to Create a Cartoon Style Big Bang Explosion

Circles, triangles and a star shape create a bright explosion. This is a step-by-step tutorial for beginners.

How to Create Realistic, Vector Bubbles

In this tutorial we will learn how to create realistic colorful bubbles. We’ll cover numerous techniques and build this illustrations step by step.

How to Create a Cute Snail Using Adobe Illustrator

In this tutorial we will learn how to draw a snail using tools such as the Pen Tool (P), Selection Tool (V), Direct Selection Tool (A), Ellipse Tool, and Gradient Tool (G). Some shapes will be created with the help of the Pathfinder panel.

Create a Jellyfish with Brushes in Adobe Illustrator CS5

How to Create a Zodiac-Themed Portrait in Adobe Illustrator CS5

This tutorial is full of helpful hints on using a variety of tools in Illustrator CS5 as well as some of the thought processes behind elements of the portrait.

How to make a Classic Air Mail Envelope with Adobe Illustrator

Quick Tip with Ryan shows us how to create a classic envelope in Adobe Illustrator, using simple shapes, effects, and gradients. After your envelope is created, some simple shadows and gradients create a warm background that makes the envelope look good enough to mail to Santa.

How to Draw a Vector, Music Folder Icon

Read this tutorial and learn how to draw a music folder icon in Illustrator. We’ll use the 3D Revolve tool and Extrude & Bevel effects.

Make a Fun Holiday Reindeer Illustration

Take an in-depth look at the process of designing and illustrating a holiday reindeer illustration. This tutorial covers illustration style, color selection, shading and touches on typography.

How to Create a Floral Repeating Pattern

Learn how to create a repeating floral pattern that’s perfect for gift wrap, desktop wallpapers or textile designs.

How to Create a Circus Tent in Adobe Illustrator

You will be learning how to create a cute circus tent in Adobe Illustrator. Get ready to use some basic tools such as Pen Tool and some quite useful Pathfinder features.

How to Create a Vector Stamp Set in Illustrator

How to Create an Ornament Illustration for a Holiday Sale

Quick and easy tutorial that will teach you how to use the appearance panel and some nice fonts to make a very simple sales illustration.

Create a Vector Bamboo Forest with Blends, Brushes and Profiles

In this tutorial you’ll learn how to create a bamboo vector illustration with the help of custom art and pattern brushes, blends and profiles on strokes in Adobe Illustrator CS5.

Create a Cocktail Glass in Adobe Illustrator

In this very detailed tutorial we will learn how to create a cocktail glass with a colorful drink and fancy decoration.

How to Turn a Photo into Vector Artwork

In this Adobe Illustrator tutorial, we’ll create a vector illustration of a high-heeled shoe by tracing a reference photo of it using the Pen Tool.

Create a 50s ad poster in Illustrator

Create a Slick Golden Text Effect with Adobe Illustrator

In the following tutorial you will learn how to create a slick golden text effect. Although it’s a pretty short tutorial, the sixteen steps cover many techniques and effects that can be used for other projects.

Tracing a Vector Face From a Reference Photo

Roller Blades

In this Illustrator tutorial, you will learn how to draw a pair of high-detailed roller blades from scratch, new useful drawing techniques and you could consider it a great chance to practice your Pen Tool skills.

Create Your Own Set of File Icons

Create a Classic Baby Stroller in Adobe Illustrator

In the following tutorial you will learn how to create a classic baby stroller illustration.

Create a Jack O’ Lantern with Blend Art Brushes in Illustrator

Create Sonic The Hedgehog Opening on Illustrator

How to Create a Pacifier Icon in Illustrator

n the following tutorial I will show you how to create a pacifier icon. You’ll learn to use professional vector shape building techniques, save time with Illustrator’s tools, and how to add those details that make the final image pop.

Create an Angry Birds Parody in Illustrator

How to Create a Glossy, Colorful Text Effect

In the following tutorial you will learn how to create a glossy, colorful text design in Illustrator CS5. We’ll use an interesting font choice, opacity masks, shape building techniques, and more to create this text effect.

Create a Gift/Present Box Icon in Illustrator

Learn how to create a Christmas or Birthday inspired Gift Box in Illustrator using shapes, colour gradients and 3D options.

How to Make a Simple iOS style Book Icon

Learn how to use a few rounded rectangles, some gradient effects and the blend tool to make a great looking iOS style Book Icon.

Create a Fashionable Dress Shoe in Illustrator

In this tutorial, you’ll learn how to create a dress shoe with the help of gradient meshes. We will also explore how to create custom vector textures as well.

Create a Corn Cob in Adobe Illustrator

In this very interesting tutorial we will have the opportunity to create something unusual. We will create a Corn Cob by using Adobe Illustrator.

Creating a Realistic Curtain

In this tutorial we will use it to create an interesting damask curtain. The Mesh Tool will help us to create the illusion of the silk look of the curtain with a nice floral design. You can use this simple technique to create similar illustrations (a waving flag, for example).

Create a Christmas Greeting Card

In this tutorial we create nice, colorful presents to stuff a Christmas sock we will combine different kinds of tools, such as; the Pen Tool, Mesh Tool, Ellipse Tool and the Rectangle Tool.

How to Illustrate a Tomato Using Adobe Illustrator

You will use Meshes, Gradients and Blends for creating the resulted picture. The skills you will learn here can easily be transferred to creating various objects.

Futuristic Interface Design

Follow this tutorial to learn how to draw a futuristic download player using only basic shapes. It is mainly created using the 3D effects tool because of the lighting/shading options and the Bevel shapes that can be easily created to obtain a futuristic look. This Adobe illustrator tutorial is good for learning more about interface designs in Illustrator.

Create a Simple Vector Ninja Character in Illustrator

Follow this step by step Adobe Illustrator tutorial to create a simple vector ninja character. The design is made from basic shapes and uses Illustrator’s core tools, which makes this tutorial perfect for beginners.

How to Create an Isometric Shopping Basket Using Illustrator, Phantasm CS and VectorScribe

In this tutorial we will learn how to create a Shopping Basket with the help of 3D modeling.

How to Illustrate a Lighthouse

Create a Vector Gift Box for Upcoming Christmas

In this tutorial we will be creating an attractive gift box in Adobe Illustrator. We are going to use few usual types of tools, such as, Rectangle Tool (M), Ellipse Tool (L), Extrude&Bevel 3D effect and some nice colors to create an eye catchy illustration.

You might also be interested in..

Creating Cartoon Characters: New Adobe Illustrator Tutorials
60 Adobe Illustrator Tutorials Collection