Dezign Matterz

JQuery Twitter Tooltip

Mia — Thu, 23 Sep 2010 11:37:35 +0000

After a lengthy hiatus & a long summer break from the bloggersphere as well as other work related projects which have been consuming most of my online time , I considered that my return should at least contribute something for lost time spent away from this blog . Within all of this time spent working on various projects , I have come across many great new and interesting scripts ( code ) by which to enhance design and blogger usability . I have always harbored a great passion and deep respect for development and for the Developers who make it all possible for designers and users to get the most out of their designs and their web sites , by working diligently and passionately developing new codes for all users out there .

The JQuery Twitter Tooltip

The following script which I came across lately , is a great piece of work which was created by the awesome team over at Codrops ( for any of you Code Geeks familiar with their great site )this team basically drops Killer Codes daily ! This particular script was created by a member of the Codrop team named Cody , and I found it to be a truly great and useful script for anyone who owns a blog and has a penchant for writing and putting out content !

JQuery Twitter Search Functions

What this script does in essence is that it can be utilized into your posts via its callback function ( which I will elaborate upon ) , by wrapping the span class around any word or search term , and the user reading your post can simply click on the twitter icon and view how many twitter users are searching or discussing that particular term or word . Those of you who run Multi Authored blogs , and cover a wide range of topics will find this script highly beneficial for your blog and especially for the users who frequent your blog .

The twitter search box pops out and can basically be resized and moved around to wherever the user wishes to place it . The box displays tweets in real time and it uses the JQuery Twitter Search Plugin , which can be customized to incorporate its other two ( 2 ) Style features by simply delving into the core .js file titled :jquery.twitter.search.js( for those of you not afraid to plunge into the source code ) ; for those of you that prefer to keep the present design , then you dont need to touch anything and leave everything as it is .

By taking a look at the example provided below , one can gain an idea of how simple this plugin is for any user who frequents your blog to use – simply : Click on the twitter icon and the twitter Pop Up Box appears , you can drag it around , resize it and even leave it where it is while you continue reading the article , it will remain wherever you place it until you decide to close it .

JQuery Twitter Tooltip Example

Evolution vs. Creation: Origins

 In the Evolution vs. Creation conflict, Evolutionists do quite well in terms of theoretical science, but fail to find empirical evidence. Evolutionists theorize that the universe, with all that it contains (space, time, matter and energy), exploded from nothing. This is contrary to the First Law of Thermodynamics. Where did space, time, matter and energy come from in the first place? Thus, for Evolutionists, the ultimate question of Origins remains unsolved. To complicate the Evolutionary position, this original explosion of everything from nothing is unable to explain all of the complexity and fine-tuning in the universe, including cosmic “voids” and “clumps”, retrograde motion of the galaxies, etc. Despite numerous problems, this explosion from nothing has been dubbed the Big Bang and is the accepted theory among the majority of Evolutionists. Evolution is a very unique “science.” Typically, scientists observe evidentiary data and then formulate their conclusions. Evolutionists have formulated their conclusion, and now look for the missing data.

Source taken from : All About Creation

Disclaimer

Some of you may be wondering as to why I decided to do a write up of a code which already exists on Codrops ? Well , in response and in defense of any such questions running through anyone’s minds at this point , I will simply state the following : I decided that a simple step by step tutorial was required on this as soon as I looked at a user comment originally posted on the article Latest Tweets Tooltip with JQuery. The particular user had stated that he had :

uploaded the files to my WP Plugin Folder and want to know where I should apply the ” codes” in order to make it
( the script ) work ? .

The Author’s ( Cody’s ) response to the particular user was that :

this is a jQuery Plugin and not a WordPress Plugin, you would have to use it directly.

Now this is fine and good – IF you know how to work with , but for the greater majority of bloggers wishing to incorporate certain functions and scripts into their WordPress or Blogger Themes who are not familiar with code or HTML , then this can indeed become somewhat of an overwhelming and burdensome task to say the least .

Thus, I figured at that point that there are probably more users out there who may not know how to implement this particular script into their themes ( blogs ) as it is , and decided to request Cody’s permission in putting it out here for any of you who would like to utilize this awesome script into your themes , and Cody approved it ( which I thank him for ) .

At this point I would like to state for the record that the JQuery Twitter Tooltip script has been created by Cody over at Codrops and full credit goes to him .

Utilizing the Script into your WordPress Themes

For users of WordPress , I would advise that you head over to Codrops first and download the JQuery Twitter Tooltip Files . Once you have done so , please log into your C-PANEL- ( backend ), and in your (wp-content) Themes Folder , access your Theme and create a new Folder ; you can name it ” twittertooltip ” ( if you want to ) or whatever you choose .
Upload your Latest Tweets Tooltip zip file (and please Extract your zip file ) and its contents .

Next step : you should create different ” Sub Folders ” such as : twitterjs ( for your twittertooltip.js files ) - twitterimages ( for your twitter tooltipimages ) and twittercss ( for your twittertooltipcss files ) . Doing this will help you to keep track of where everything is located and it will be better organized and wont interfere with any of your other existing Theme Files . So, please create these sub-folders and move each of the files belonging to each category into the above named folders .

Please note : When I implemented the script I had to ” Re-name ” the twitter tooltip ‘ style.css ‘ file , because the script was ineffective since my theme also has a ‘ style.css ‘ file – therefore : I would advise any one attempting to run this script to Re-name this file to anything other than ‘style.css’ as it may also end up making the script not function .

Once you have organized all of your folders , please open your /jquery.ui.theme.css & your twitter.css file ( once you have Re-Named it ! ) in your Editor of your backend and implement the required images ( such as the : icon-grip.png , close.png & twitter.png ) into both of these CSS files and SAVE .

Step 3 : Implementing Your Files

Providing you have followed the steps described above, please go into your Theme File and open up your ” header.php ” file and directly above your tag , link all of your CSS files as displayed below ( * please replace the file extensions with your own ! ) and hit the SAVE button .

Please Note

Prior to saving your ( style.css – which you have renamed to ➔ ) twitterstyle.css file , copy and paste the following code into this file before saving and linking the file into your header.php

View Code CSS

.search_results {
                width: 300px;
                position:absolute;
                display:none;
                                top:10px;
 
                                z-index:100;
 
 
            }

View Code CSS

="text/css" href="/twittertooltip/twittercss/jquery.ui.theme.css" rel="stylesheet" />
="text/css" href="/twittertooltip/twittercss/jquery.ui.core.css" rel="stylesheet" />
="text/css" href="/twittertooltip/twittercss/jquery.ui.resizable.css" rel="stylesheet" />
="text/css" href="/twittertooltip/twittercss/twitterstyle.css" rel="stylesheet" />

Step 4 : Installing the JS Files

Since you have installed the CSS files into your header.php tag , you will now open up your footer.php file , and directly above the tag , please copy and paste the files displayed below ( replacing the jquery.twitterpopup.js and the jquery.twitter.search.js with your own files please ! ) .

Also , in order for the script to function properly – you will need to replace the callback function from the one provided as an example below [ $('#wrapper') ] , to whatever name your own Theme wrapper has ( please dont forget to do this or else the script will be ineffective ! ) . Once you have followed the steps described , please hit the ” save ” button .

View Code JAVASCRIPT

Making the script work within your Theme

Now that you have implemented all of your scripts , and you are ready to create your next article / post , all you will have to do is simply utilize the following span around any word or term you wish like so :

View Code HTML

1
2
3

Web development , and as many other words 
or terms you wish as in the examples provided here on this post .
 That is it - your Twitter Tooltip Search is now ready !

Implementation for the Blogger Platform : Step 1

First , please head on over to Codrops and download the Twitter Tooltip Search file , upload your files to your own host or Blogger itself . Next please implement all of the images provided within the Twitter Tooltip File into the proper CSS files and save them .

In your Blogger Dashboard go to : Design > Edit HTML > ( There is no need to Expand Widgets for this installation ) . Simply scroll down and locate the following tag ]]>  , and once you’ve done so – please copy the CSS snippet code for the twitter tooltip searchdirectly above the ]]> tag .

View Code CSS

 /* latest tweets tooltip */
 span.twitter_search{    
 padding-right:20px;     
background:transparent url(../twitterimages/twitter.png) no-repeat center right;    
 cursor:pointer; } 
.twitterSearchClose{    
 position:absolute;  right:0px;  top:0px;     
background:#aaa url(../twitterimages/close.png) no-repeat center right;     
width:13px;    
height:13px;     
cursor:pointer; }  
.search_results {                 
width: 300px;                 
position:absolute;                 
display:none;                                 
top:10px;                                  
z-index:100;                                               
}

Blogger : Step 2

Once you have copied and pasted the CSS above your ]]> tag , scroll further down until you locate your tag, and directly above your tag please copy and paste the following scripts provided below . * Please make sure you replace the example files below with your own files *

View Code CSS

   
="text/css" href="http://your_zip_file/Latest_Tweets_Jquery_Tooltip/jquery.ui.core.css" rel="stylesheet" /> 
="text/css" href="http://your_zip_file/Latest_Tweets_Jquery_Tooltip/jquery.ui_.theme_.css" rel="stylesheet" /> 
="text/css" href="http://your_zip_file/Latest_Tweets_Jquery_Tooltip/jquery.ui.resizable.css" rel="stylesheet" />

Step 3

After you have applied the above scripts above your tag , scroll all the way to the end (bottom ) of your source and locate the tag and directly above this tag please copy and paste the scripts provided below . Please Note : Notice the function named $(#wrapper) should be replaced by the ID of your theme’s name which varies for every theme and has a different name or ID.

If you fail to replace this with the ID of your own themes ID ( of your container ) , the JQuery Twitter Tooltip will NOT work ! Therefore , please keep this in mind when implementing this script . ( If any of you encounter any issues within installing the script , you can contact me and I will assist you in implementing it . ) *

** An example of what your themes ID may be similar to might look something like this ( but not exactly ! ) : #body-wrapper **

View Code JAVASCRIPT

Running the Twitter Tooltip Search within your Blogger Theme

The function for the script to work within your theme is in essence the same as it is for WordPress . When you are ready to create your next post all you will need to do is simply run the span around any word or term you wish to emphasize like so :

View Code HTML

1
2
3

Web Design , or any other word you wish to wrap the span around  . 
That is it - your Twitter Tooltip Search is now ready for your Blogger Theme ! 
Drag it , resize it , its all up to you !

If any of you encounter any problems within utilizing this script , you can contact me and I will try to assist you – or if you wish you may also contact Cody over at Codrops .
Enjoy your Twitter Tooltip .

Thank you Cody for this great script !

Best New Up and Coming Web Designers

Mia — Thu, 06 May 2010 21:51:00 +0000

Web designers are responsible for creating the look and feel of World Wide Web pages for a client’s Web site. This involves developing a graphic design that effectively communicates the ideas being promoted by the Web site.

A web designer may take part in the initial planning of a Web site, meeting with the client to discuss ideas for the layout and organization of the site, the types of colors or images to use (photos, illustrations, videos, etc.), and other matters concerning overall graphic design.

Sometimes a web producer has already developed a basic concept for the web page. In this case it is the web designer’s task to create a design that matches the producer’s ideas.Once the basic concept is agreed upon, the web designer must collect the text documents and images that will appear on the page and convert them into a form in which they can be viewed. This requires a mastery of HTML (hypertext markup language), the computer language used to create web pages.

The designer must also have knowledge of the most current HTML extensions—programs that make it possible to add special features to web pages such as animations and interactive surveys. Because a Web site may incorporate a variety of different functions, including clickable e-mail contacts or the ability to download files to a computer, the designer must have a working knowledge of FTP (file transfer protocol) and other programs that enable these functions to work.

Web designers must have an understanding of software functionality as well as graphic design skills to create successful Web pages. Part of the web designer’s task is to create pages that can be used on any type of server (a central computer in a network that stores files and provides these files to individual computers) and viewed with any type of browser (the software that enables people to access the World Wide Web).To do this, a web designer must be familiar with issues of browser/server compatibility, including which browsers and servers work well together and which ones do not. In addition, the designer must know computer languages such as Javascript, which can be used to create web pages that are compatible with a wide range of hardware and software.

Because web designers work with a client or web producer to develop and refine ideas, they must have strong verbal and visual communications skills. Designers should be able to listen closely to the client and create pages that reflect what the client is looking for ( yes, even those clients from hell ! ). They also need to be flexible because they may be called upon to change their designs. Since Web sites are constantly updated to remain current, a designer has to be able to work well under the pressure of tight deadlines and changing demands.

Web designers typically have a background in fine arts, graphic design, or publishing combined with college courses in computer science and hands-on computer experience. A web designer may have a four-year college degree, a two-year associate’s degree, or perhaps no advanced schooling at all. There are also many web designers who are self taught in HTML as well as other applications who have acquired other necessary computer skills on their own.

All designers must have training in computer graphics packages such as Dreamweaver, Photoshop, Adobe Illustrator, and Paint Shop Pro as well as knowledge of Flash, XML-based web applications and programming, XHTML programming, and other web development languages and technologies.A designer should also be comfortable working with a variety of operating systems such as Windows, Macintosh, and Unix. Since computer technologies are changes rapidly, web designers must constantly stay abreast of new developments in graphics software packages as well as those in the World Wide Web and related technologies.

Prospective web designers should put together a portfolio of their work to show to potential employers. Many web designers are freelancers who sell their services to clients on a consulting or contractual basis. Self-employed web designers often establish a personal page on the World Wide Web that showcases their design skills for potential customers. Here are just a few of tomorrows New Up & Coming Web Designers who are exceptionally talented and are in essence , Re-Designing the cornerstone of the World Wide Web with their killer skills – and an unlimited amount of imagination ! Enjoy their work , you may click on any of the images to be taken to a particular Designers profile , and contact them for any upcoming project venture you may have in mind .

Pablo Renauld

Detrans U.K.

Hydrus

Maxime Chillemi

Hinok

Palneera

Manya

Alex Designs

Mads Ejsing

Princepal Design

Cerebro Creativo

Philip Doms Design

RolEk Design

CrazyClouds Design

Patrick Huntz Design

Zaib NextGen Design

Zee Web Design

Micro Designs

Retro Design Co.

Super Heroes in Comic Illustration Art

Mia — Fri, 16 Apr 2010 01:06:00 +0000

A Super Hero is a type of stock character possessing “extraordinary or superhuman powers” and dedicated to protecting the public. Since the debut of the prototypical superhero Superman in 1938, stories of Super Heroes

—ranging from brief episodic adventures to continuing year-long sagas, have long dominated American comic books and crossed over into other media. The word [Superheroes ] itself dates to at least 1917.

A female superhero is sometimes called a superheroine . “Super-heroes” is a trademark co-owned by DC Comics and Marvel Comics. Superheroes are authentically American, spawning from The Great Depression era.

By most definitions, characters do not strictly require actual superhuman powers to be deemed superheroes, although terms such as costumed crime fighters , are sometimes used to refer to those such as Batman and Green Arrow , without such powers who share other common superhero traits. Such characters were generally referred to as “Mystery Men” in the so-called ” Golden Age of Comic Books ” to distinguish them from characters with super-powers.

Normally, superheroes use their powers to police day-to-day crime while also combating threats against humanity by Super Villains, who as their name implies are criminals of “unprecedented powers” in the same way that superheroes are crime fighters with “unprecedented powers,” though just as with superheroes they do not necessarily need genuine superpowers.

Generally, at least one of these Super Villains will be the superhero’s archenemy, though several popular and long-running series, such as Batman, Superman, and Spider-Man, each have a rogues gallery of archenemies. Superheroes sometimes will combat irregular threats that also match their powers, such as aliens, magical entities, godlike or demon-like creatures, and so forth.

Our fascination with Super Heroes has long thrived since their emergence , spanning from Comic Books to T.V , and cinema . What captivates us about Super Heroes is the fact that they are all inherent of some Demi-God like quality , such as : Immortality , Super- Human strength , whereas : they are deemed Indestructible . However , even Super Heroes all have their Achilles Heel , and all of them have their Nemesis , and all are at some point ‘Destructible ‘ and susceptible to a mortal death or destruction . Yes, even Super Heroes encounter death.

However , we all prefer to believe that our Super Heroes are Immortal / Indestructible, for in a sense – we choose to see an infinitesimal part of ourselves exemplified through them . We all have our preferred Super Hero / Heroine which we look up to and identify with , we all yearn to possess some type of super human ability by which to be able to go out there and rid the world ( society ) of the evils it is plagued by , and since we do not possess such super human abilities , we all look to our Super Heroes /Heroines to Save the Day .

The ancient Greeks believed that we all had a God residing within us and something very similar is referred to in the New Testament “ Ye are all Gods “, and despite the fact that we may all live on earth, many of us recognize that we are of much higher descent ! When confronted with adversity , we come to discover that we are all inherent of some type of Super Human Strength ( ability ) which we were not aware of before . We can all be Heroes , just for one day .

Below are Illustrations of some of our favorite and beloved Super Heroes , rendered by several great new up & coming artists in the field of Comic Art Illustration . You may click on any of the images to be taken to the artists profile and view the rest of their work . Hope you enjoy

Drawing Super Heroes

Digital Art : Creating Superheroes

Superman

Captain America

Super Girl

Wonder Woman

Spiderman

Spider Woman

Batman

Bat Girl

Catwoman

Catwoman & Batman | Nemesis

Flash Gordon

Incredible Hulk

Aquaman

Green Hornet

Ghost | X-Men

Wolverine | X-Men

Phoenix | X-Men

Storm | X-Men

X- Men team

Justice League | Team America

Superhero | R.I.P. Superman

” It’s Not Easy being Me ”

Ode to Superman

Superman sits alone
His head in his hands -

“The world’s slipping away…
Through my fingers like sand.

Always a crime being committed,
I’m stopping all that I can stop.
Sure, I can go fast, but…
I’m already giving all I’ve got.

And what about the children,
All the homeless on the street?
The people with nowhere to go,
And not enough food to eat?

And wars are being fought…
Million’s of miles away;
Too many lives being lost
Every single day…”

Superman sits alone
A tear falling from his eye -

“Nothing’s getting better,
No matter how hard I try.

This world is getting so heavy;
I… I can only do so much…”

And sometimes, even Superman
Can’t do enough.

.

Impressive V-Card Mini Site Themes

Mia — Sun, 11 Apr 2010 04:59:00 +0000

In todays fast paced and competitive Web , your Online Identity and resume are a required Must ! One of the newest Web design trends in presenting your audience with your Online presence is by creating what is termed as a Mini Website , or a one page portfolio site . Designers have gone one step further by creating what has come to be known as a V-Card site .

V-Card Websites are a great way of putting your content out there while simultaneously keeping it down to a minimum . The main focus of a V-Card site is to simply contain a brief bio about you , along with your Job Title description , your contact information such as your E-Mail and your Social Profiles .

Most of the V-Card sites use JQuery & various other javascripts such as animation , or sliding effects where the navigation is concerned as well as the overall features within the V-Card Theme. One can basically display everything about themselves into a compact little box with a minimalist Design. All of the V-Card Themes are beautifully designed and one can have a very professionally designed Online resume with very little effort as most of these V-Card Themes are created for the WordPress Platform ( a few are simply Web Templates -HTML /CSS ) , and their cost is quite minimal beginning from as low as $8.00 .

The V-Card design ( concept ) was originally inspired by Tim Van Damme , who created it in order to showcase his portfolio of works . Since Tim Van Damme , many have followed suit and as of late , there are hundreds if not thousands of such sites which are exploding all over the web , used by Web Designers to showcase their work , such as Rogie King of Komodo Media , Photographer Matthias Kretschmann and the sleek high tech site of Developer Kevin Liew of Queness fame .

If you are a professional and you want to get your self and your work out there , creating a V-Card portfolio site may be an idea whose time has not only come but is also well overdo – all of the themes depicted below are WordPress compatible and easy to install , customize and run . If you have been considering creating a V-Card site , I hope the themes below will somehow inspire you and motivate you enough to purchase and run one or create your very own by following the step by step Tutorial offered at Tuts Arena . Enjoy the themes below and I hope you find some Inspiration !

V-Card Site Template

V-Card Professional

Black Gem V-Card

Fancy V-Card

Clean Card | 4 color scheme variations

Elegant V-Card

Virtual Business Card

Sleek VCard

Assassin VCard

Personal Mini Site VCard

Pixel Portfolio | 2 Color schemes

Pro – VCard | 2 Color Schemes

Lucido VCard | 3 color schemes

Pure ColourFolio VCard

Introducto VCard

Pro Card

Creative Zodiac VCard | Theme

Identity VCard Portfolio

My Identity VCard

Plasma VCard

Free V-Card WordPress Themes

Info Tech V-Card Theme

Digital Business Card

Mini Me V-Card Theme

If none of the above suit you , or you simply dont want to invest in a V-Card Theme , or you may simply not have hosting for some reason by which to launch a mini site of your own – there is an alternative . I had written about DooID some time ago HERE , explaining about incorporating all of your Online Identities in one place . Go read the article and you just may find a very convenient alternative if none of the above are suitable to your present needs .

I personally have my Personal V-Card on Doo ID since it first launched . DooID offers a very beautiful fast loading platform by which you can sign up for Free or opt for a Pro Account ( which is what I have opted for since it gives you more flexibility regarding customization features and an active Contact Email Form built into your Theme which users can contact you through without having to log into their Email account to do so ) ; as well as other pro integrated features which are worth the low cost .

Check it out , you just may come to discover that DooID offers exactly what you want & what suits your present needs . You can still customize the Free theme offered , and the free theme has many Premium Like Features as well !

V-Card Theme Blog for Blogger Platform

If you are presently on the Blogger Platform and had wanted a V-Card Theme for your Blog , then you may be interested to know that a truly great V-Card Theme exists for implementation on Bloggers Platform . Joao Alvarena of Be Insight has created such a theme a while back ago . Joao Alvarena is one of Bloggers Great Theme designers , you can check out his site and view all of the awesome Free Themes he has created for Blogger as well as his beautiful V-Card Theme such as the one below & consider using a V-Card Theme on Bloggers Platform if you cannot switch over to WordPress Hosting . The “Antagonist” ( Joaos V-Card Theme ) , serves as a fully functional Blog with a comment system and the whole works , while managing to maintain the Tim Van Damme V-Card sleek minimalist features. Check it out and try it on

Stylish Author Boxes for Blogger

Mia — Mon, 05 Apr 2010 15:04:00 +0000

Customized Author Boxes for Blogger

Users of WordPress have been enjoying a feature called an Authors Box at the end of their posts , which is offered via a plugin .
Creating an Authors Box below your posts is a great way to post some brief info about yourself to let your readers know something about you and a great way of spicing up your Blog as well .

WordPress users have been enjoying this feature for some time now , and it has become a must for nearly all bloggers of all platforms to incorporate one into their Theme [Blog ] also . The Authors Box has now become somewhat of a Blogger Etiquette , whereby , you are in essence : Introducing something about yourself to your fellow bloggers [ users ] .

WordPress users have been fortunate within the fact that everything they wish to implement into their blogs usually [ for the greater amount ] can be achieved via a simple plugin , and so is the case with the Authors Box . Though I have seen quite several elaborately designed Authors Boxes at the end of certain blogs , the greater degree of blogs usually dont have anything fancy aside from a colored set of divs or div. Which is great , as some users wish to keep it as simple as possible , and then there are users who simply dont possess any knowledge into CSS or HTML etc., by which to create something nice for themselves – which again : is fine.

Author Boxes just as Contact Forms , are great WordPress plugins which users of the mentioned platform have been enjoying for a long time , however : Blogger Platform users do not have plugins at their disposal ( aside from widgets ) . Which means : everything has to be coded and added Manually, which is great if you have some insight into CSS , HTML & javascript – and are adept at reading code ( somewhat…. ). Adding simple enough features such as a contact form and an authors box for Wodpress users may not seem like such a great feat – however : for users of the Blogger Platform , who do not have the luxury of Plugins at their disposal , and whom may not be knowledgeable into CSS, XHTML, and javascript implementation , manual coding something into ones Theme Source can be overwhelming ( to say the least ).

As of late , [ over a month now & counting..... ] many of you who frequent this blog , and several of you who have stumbled upon this blog for the first time – have contacted me via my contact form ( above ) and have written me regarding many blog & design related issues . There were many of you who had wanted to know about how to implement a Contact Form , such as the one I use on this site ( above ) . I hope that all of you who had wanted to know how to go about implementing a contact form have gotten your answer and have managed to install your contact forms – as well as having been able to Style them as you wanted !

For a while now , many of you have contacted me requesting a Tut on how to create an Authors Box below your posts such as the ones which you have been seeing on WordPress powered blogs . Users on the Blogger Platform unfortunately do not have the added Luxury of a plugin such as the one available to WordPress users , and thus – if you are on the Blogger Platform , and you wish to incorporate an Authors Box under your posts , then you can view the [ 4 ] variations of Author Boxes I have created below and if they suit your needs , then by all means : I have submitted them here for you to use .

I hope you will like them enough to use them , and if you wish to change the images used and any other thing you want to switch up – feel free to do so . Simply be aware of all the image sizes used , take into consideration such things as : padding & margin when altering anything within the CSS and in the HTML ( as these classes define a great deal of where your images are placed and aligned ! ) ; therefore , if you are considering making alterations keep in mind everything is controlled within your CSS !

Now , it is all very simple from here on end – you can view any of the styles and simply Copy & Paste your chosen style into your Blogger Theme Source – hit save and you are done ! The actual size of all the Author Boxes varies in width & height . If your wrapper is smaller than 620px , then I recommend using the Author Box Version B , which is suited to fit a wrapper no greater than 560px . If you have a wide wrapper ( check your source document before making any changes please ) ; then you can use any of the Author Boxes below .

Also , please keep in mind : I have styled and coded these on my theme ( which is an advanced theme ), therefore – when you do apply these author boxes to your own theme – you may find that something may not be aligned properly ( as all themes are differently structured ) and will display certain things differently . If you have some insight into CSS , you will be able to overcome these minor issues – if you DO NOT know and encounter any issues , please feel free to contact me , I will help you set things right

Lastly – after you have implemented your CSS ABOVE the tag , and scroll down into your page source , please look for the following line of code , it looks like this ☛

. When you locate this line of code , please copy and paste all of the HTML precisely ABOVE it ! Now , that should be simple enough

Again : if you do encounter any problems within attempting to implement this , feel free to contact me and I will get back to you as soon as possible . If you use any of these Authors Boxes , I hope you enjoy them

Please Note :

If you decide to use any of these Author boxes below , I would advise you to copy and upload ALL of the images to your own Image Host provider and account – as mine may over exceed its bandwidth and all of the images may become null ( deleted ! ) – so…….. consider doing that if you like any of the images ( icons ) and backgrounds used to make these .

The sizes of the boxes depicted below , is the actual size of the real Authors Box

Also , the Light Versions have an link opacity hover state class , which means : the icons used on the Light Version Author Boxes , have Black letter Pressed Icons which look somewhat grey-ish . When a user hovers over them , they are black . Its a very subtle effect , but makes it look all that much better . These look much nicer when implemented .

Authors Box | B Version Light CSS

View Code CSS

a.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=40);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
 
.socialize{background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/34023454.png)no-repeat;width:515px;height:55px;padding-top:7px;padding-bottom:5px;padding-left:80px;}
.authorbox{width:555px;height:175px;background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/16237904.png)no-repeat;font-family:Arial Rounded MT Bold,verdana;font-size:13px;h3-font-size:15px;color:#121212;}
 
.left {
float:left;
height:100px;
margin-bottom:-5px;
margin-left:15px;
margin-right:25px;
margin-top:-10px;
padding-top:-55px;
width:200px;
}
.right {
float:right;
margin-top:-50px;
width:430px;
}

Authors Box | B Version Light HTML

View Code HTML


 
 


 

 

 

 

 

 

 

 
 

 

 

 
Author
 
 
David
 
 

 
 

 
If you enjoyed this article or have any suggestions, then ⊱⊱
 Add your Comment, Fave It, Share It, and Spread the 
 
 
 

 
Follow Me on Twitter !

Authors Box | A Version Light CSS

View Code CSS

 
a.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=40);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
 
.authorbox{width:608px;height:208px;background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/TYPOGRAPHY/67358746.png)no-repeat;font-family:Arial Rounded MT Bold,verdana;font-size:13px;color:#121212;}
 
.left{float:left;width:100px;height:100px;margin:25px;margin-left:15px;margin-top:10px;}
.right{float:right;margin-top:50px;width:425px;}

Authors Box | A Version Light HTML

View Code HTML


 
 

 

 
Author
 
 
David
 
 

 
 
 
 

 
If you enjoyed this article or have any suggestions, then ⊱⊱
 Add your Comment, Fave It, Share It, and Spread the 
        
 

 

 

 

 

 

 

 
     
 
Follow Me on Twitter !

Authors Box | 2A Version Dark CSS

View Code CSS

 
.authorbox{width:608px;height:208px;background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/89118614.png)no-repeat;font-family:Arial Rounded MT Bold,verdana;font-size:13px;color:#121212;}
 
.left{float:left;width:100px;height:100px;margin:25px;margin-left:15px;margin-top:10px;}
.right{float:right;margin-top:20px;width:425px;}
-->

Authors Box | 2A Version Dark HTML

View Code HTML


 
 

 

 
Author
 
 
David
 
 

 
 

 
If you enjoyed this article or have any suggestions, then ⊱⊱
 Add your Comment, Fave It, Share It, and Spread the 
 
 

 

 

 

 

 

 

 
 
 

 
Follow Me on Twitter !

Authors Box | 2B Version Dark CSS

View Code CSS

.socialize{background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/1270446985_234.png)no-repeat;width:608px;height:55px;padding-top:4px;padding-bottom:5px;padding-left:130px;}
.authorbox{width:608px;height:208px;background:url(http://i662.photobucket.com/albums/uu345/VEGA-5/Site%20Buttons/SOCIAL%20ICONS%202/Author_Box_Images/89118614.png)no-repeat;font-family:Arial Rounded MT Bold,verdana;font-size:13px;h3-font-size:15px;color:#121212;}
 
.left {
float:left;
height:100px;
margin-bottom:25px;
margin-left:15px;
margin-right:25px;
margin-top:-10px;
padding-top:10px;
width:200px;
}
.right {
float:right;
margin-top:-70px;
width:430px;
}

Authors Box | 2B Version Dark HTML

View Code HTML


 
 


 

 

 

 

 

 

 
 

 

 

 
Author
 
 
David
 
 

 
 

 
If you enjoyed this article or have any suggestions, then ⊱⊱
 Add your Comment, Fave It, Share It, and Spread the 
 
 
 

 
Follow Me on Twitter !

Word of note

Please keep in mind that these are just Brief Bio Boxes , meaning : Keep it short & simple – do NOT attempt to write an Auto-Biographical account into these boxes – save it for your memoirs ! Ok, now good luck & enjoy – and as mentioned above : If you require any help in anything , contact me .

Also :

You can change the Icons which are included into these author boxes – just keep in mind not to use icons which exceed more than 32px x 32px . Change Info Links to your own & replace with your own words – USE !

Post Update

Several of you who have used the Author Boxes have contacted me and are requesting a second tut on how to implement an Authors Box into your WordPress Platform Supported Themes . For those of you who want to implement an Authors Bio Box into your WP Theme ( andwithout a plugin ) and furthermore you may want to tweak or style your own Authors box so that it matches your theme – ( or even use any of the Author Styled Boxes provided here in this post ) – then what I will recommend for you is , to go over to Evolutionary Designs blog site , hosted by James Johnston .

James gives a detailed and simple code markup as well as clearly defined instructions on implementation. If you possess a bit of knowledge into CSS and PHP ( which is not that different than HTML ! ) you will not have a problem installing any of the above Author Bio Boxes or even creating / designing your own . As mentioned : James Johnston’s blog clearly defines everything you need to do in order to get this feature to work properly on your own site & WITHOUT a Plugin ! Hope this helps everyone

M. 

Exceptional Photo Manipulation Photography

Mia — Wed, 31 Mar 2010 01:51:00 +0000

The art of Photo manipulation is the process of image editing techniques applied to photographs in order to create an illusion or deception (in contrast to mere enhancement or correction), through analog or digital means.

It’s uses, cultural impact, and ethical concerns have made it a subject of interest beyond the technical process and skills involved. Photo manipulation can be regarded as old as photography itself; contrary to the idea of a photo having inherent verisimilitude.Photo manipulation has been regularly used to deceive or persuade viewers, or for improved story-telling and self-expression.

Within the process of digital editing, photographs are usually taken with a digital camera and input directly into a computer. Transparencies, negatives or printed photographs may also be digitized using a scanner, or images may be obtained from stock photography databases. With the advent of computers, graphics tablets, and digital cameras, the term image editing encompasses everything that can be done to a photo, whether in a darkroom or on a computer. Photo manipulation is often much more explicit than subtle alterations to color balance or contrast and may involve overlaying a head onto a different body or changing a sign’s text, for example. The incorporation of Image editing software can be used to apply effects and warp an image until the desired result is achieved. The resulting image may have little or no resemblance to the photo (or photos in the case of compositing) from which it originated. Today, photo manipulation is widely accepted as an art-form.

Before the emergence of computers, photo manipulation was achieved by retouching with ink, paint, double-exposure, piecing photos or negatives together in the darkroom, or scratching Polaroids.The earliest recorded case of photo manipulation was in the early 1860s, when a photo of Abraham Lincoln was altered using the body from a portrait of John C. Calhoun and the head of Lincoln from a famous seated portrait by Mathew Brady – the same portrait which was the basis for the original Lincoln Five-dollar bill.

With the explosion of the ’80s , we saw the advent of digital retouching with Quantel computers running Paintbox, and Scitex imaging workstations being used professionally. Silicon Graphics computers running Barco Creator became available in the late 1980s which, alongside other contemporary packages, were effectively replaced in the market by Adobe Photoshop running on the Apple Macintosh.
Below are some of the best photo manipulations I recently came across , and thought you all might like them as well , as you can clearly assess : the Digital Age is in Full Effect !.

The Art of Digital Photo Manipulation

The awesome works of Alberto Seveso

Photoshop Tutorials

30 Photoshop Manipulation Tutorials

60 Exceptional Photo manipulation Tutorials

30 Most Wanted Photo Manipulation Tutorials

75 Huge Compilation Photo Manipulation Tutorials

Adventures In Illustrative Typography

Mia — Mon, 29 Mar 2010 12:06:00 +0000

The Art of Illustrative Typography

In today’s Web Design & Advertising world & Corporate identity , your logo and your choice of typography speak volumes about you and your product . The most fundamental and basic principle of good Web Design is Typography .Your Font type will determine the success or the failure of your web design

therefore incorporating the right set of font type is considered crucial & otherwise : detrimental to your Web design.

Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning).

Typography is performed by typesetters, compositors, typographers, graphic designers, art directors, comic book artists, graffiti artists, and clerical workers. Until the Digital Age, typography was a specialized occupation. Digitization opened up typography to new generations of visual designers and lay users.

Typography traces its origins to the first punches and dyes used to make seals and currency in ancient times.Display typography is a potent element in graphic design, where there is less concern for readability and more potential for using type in an artistic manner. Type is combined with negative space, graphic elements and pictures, forming relationships and dialog between words and images.

The color and size of type elements are much more prevalent than in text typography. Most display typography exploits type at larger sizes, where the details of letter design are magnified. Color is used for its emotional effect in conveying the tone and nature of subject matter.

Typography has long been a vital part of promotional material and advertising. Designers often use typography to set a theme and mood in an advertisement; for example using bold, large text to convey a particular message to the reader.

Here are some of the best in Illusrtative Typographic Designs by some of the best Graphic Designers on the cornerstone of the www. Enjoy ~

Extensive Typographic Tutorials

If you would like to master or simply learn new skills concerning the illustrative process , manipulation or creation aspect of Typographic Art , then here are a few good tuts on various forms of Illustrative Typography .

Fred Design : Rules for Good Typography

Gomediazine : Photo shop & Illustrative Typography

PSD Tuts

3 D Illustration Typography

Abduzeedo : Frilly Bits Typography

Mastering 3D Typographic Effects

Creating Richly Ornate Illustrative Typography

Typographic Portrait Illustration

Type Sett

Typography Served

The Masters of Typography

Master Typographers

Free Calligraphic Font | for Download

Free Vimeo Font | for download : black Rose

The World of Caricature Art

Mia — Sat, 27 Mar 2010 02:01:00 +0000

Exploring the World of Caricature Art

Amongst the varied art forms , Caricature Art has always managed to impress everyone who looks upon it due to the fact that Caricature Art tends to always exaggerate the sheer essence of the subject by incorporating an easily identifiable likeness to that particular individual.

Within the art of literature , caricature is referred as a description of a person using an exaggeration of certain characteristics and the oversimplification of others .
In Caricature Art , certain subjects can be rendered complimentary and can serve a political purpose , or they may simply be drawn for entertainment purposes. Politicians are commonly depicted in Editorial Cartoons , whilst caricatures of Movie Actors are usually found in Entertainment magazines.
The term ” Caricature ” is derived from the Italian ” caricare “ , which means : to load or to charge , where the definition essentially means : ” a loaded portrait ” .

Caricature art tends to lend itself to an ” Anthropomorphic ” style of art whereas : it solely depicts and draws upon depictions of Real Life People , rather than inanimate objects , such as : automobiles or coffee mugs . Caricature Art requires Real Life Subjects which to draw upon and from .

The earliest works of Caricature ARt can be found in some drawings by the Master himself : Leonardo Da Vinci , who sought people with deformaties and used as his models . Caricature, experienced its first successes in the closed aristocratic circles of France and Italy, where the such portraits could be passed about for mutual enjoyment.

Presented here are two [2 ] Modern Day Artists who are exceptionally gifted and skilled at the art of Caricature and Digital Art . They have managed to literally capture the essence of their subjects down to a science . After viewing their work you may visit their profiles and you may contact them for any personal requests or projects.

Caricaturists aim to invest their image with as much meaning as possible , it seems that Niall O’ Laughlin ( based in Ireland ) and Nico Di Mattia ( based in Argentina ) have managed to infuse their subjects with an immense amount of Real Life Characteristics, that it feels as if you are viewing more of an actual photograph rater than a work of Art ! Enjoy the works of two up and coming Great master Illustrators & Caricaturists .

International Society of Carcaturists

Caricaturist Convention

The Caricature Art of Niall O’Laughlin.

Musicians :

U2

Rihanna

Shane McGowan

Amy Winehouse

Beyonce

Bono : U2

David Bowie

George Michael

Leonard Cohen

Michael jackson

Paul McCartney

Movie Stars :

Borat

David Hasselhoff

George Clooney

Jack Nicholson

Matt damon

Sean Penn

The Digital Art & Speed Paintings of : NICO Di MATTIA

Nico Di Mattia was born in Cordoba, Argentina. Nico was attracted to the arts, comic books, animation and narration during his early childhood years . In 1998, at the age of 15, he independently published his first comic book.Because of his passion for drawings and colors, he improved his skills and sought out his own style. In 2001, he entered the Cinema and TV School at Cordoba´s National University. While studying there, he acted as a script writer, director and postproducer for various short films, most of which emphasized his skills with aesthetic experimentation.

During his first year at Cordoba´s National University that Nico made his very first “speedpainting”. It was a painting of the poster from “Planet of the Apes“, created on his bedroom wall with acrylics. This process, which he recorded on VHS, was accelerated and musicalized, resulting in a performance that he called ” Art Fusion”.

Nico currently directs and edits his own comic book and illustrators’ Magazine , and works as a freelance illustrator and caricaturist for different business, companies and private clients from all over world.

Nico Di Mattia at work

Caricature Art by Nico Di Mattia

Nico Di Mattia : self portrait

Mad Hatter

Tim Burton in Digital Art

Terminator

Sarah Conor : Terminator

Robert Deniro

Michael Jackson

Slash

Avril Lavigne

Dr. House

Wolverine

Danny Glover

Snoop Dogg

Tiger Woods

Joker – Batman

Ben Stiller

Mickey Rourke

The Beatles : Fabulous 4

Willem Dafoe

Ozzy Osbourne

Thom Yorke

Radiohead

Lulin Love

Paris Hilton

Tim Burton

Nico Di Mattia Blog

Nico Di Mattia on Facebook

Speed Painting by Nico Di Mattia

Speed Paintings are known as a time-lapse video featuring the construction of an image. It is primarily a digital art form whereby the image is hand-drawn and rendered using a tablet and graphics editor such as Photoshop or Painter. Whilst the image is in production, every single action on the computer screen is automatically captured and compiled into a real-time video.

That recording, which begins with a blank background and ends with the completed piece, then undergoes an editing process. The video is accelerated, components are added or removed and it is also given an appropriate soundtrack. The finished SpeedPainting, which may have taken the artist more than five hours altogether, will usually last little more than three and a half minutes. In few words: it is the “Behind the Scenes” of an illustration.

Illustration Art : Behind the Scenes

You can find out more information about the Art of Caricature by visiting the Caricature.Org or to simply submit your own work .

Fully Customizable Contact Forms without Script !

Mia — Fri, 05 Mar 2010 03:48:00 +0000

Customizable Contact Forms for any Platform .

Contact Forms are an important aspect when it comes to your blog [ or website ] , as they provide your users a way by which to personally communicate with you should they have a question which is more personally based and cannot be posted as a comment and be shared with the entire community publicly. After all , it is a form of blogging etiquette , since we sometimes need to contact the site administrator and either request something or even convey a personal opinion which we dont want others to see .

There are users who cannot differentiate between regular commenting and personal based questions or remarks and they will go on and post them as comments on one’s blog . Now surely – we cannot shift the entire blame on the user, as there are quite a few number of bloggers out there who do not provide a ” contact me ” link, nor a separate contact form by which to provide their users / readers with any other option within contacting them.

In the past , the Blogger Platform didnt even provide any other choice other than their generic comment form , and Blogger users were subjected to using the comment form provided by Blogger ( and there are still a great many Bloggers who are still using that generic comment form – why ? I dont know .. ) ; but ever since Blogger decided to allow the integration of users incorporating comment forms such as : Intense Debate and Disqus , Bloggers now have a choice between choosing amongst the two comment systems . Integrating any of these two comment systems into one’s blog will definitely improve not only your Blogs appearance but your comment rate as well . Blogger is making rapid advancements within many of its user functionalities – and I am sure that more such features will be integrated soon which will make Blogger a more user friendly Platform .

Another feature which Blogger has integrated lately into their platform have been the Pages feature , such as those which have been existent on the Almighty WordPress platform since its inception .

Now, since most of you have learned to use the pages feature , you may wish to create separate so called Pages on your blog such as : About or even a Contact & Subscribe page(s) . Creating your About or Contact pages should not be a complex matter – and I am certain you have by this point figured out how to do so – and now you will obviously want to create a Personalized Contact Form for your page .

Again now, as far as Contact Forms go , there have not existed a great too many options for Blogger – aside from the usual Generic Contact Forms, and yes : They are quite boring and ugly in appearance, the choices for creating contact forms for Blogger have not been many [ since one requires a database to run a contact form - something which Blogger does not have .] ; thus , having a Contact Form which one is able to customize as they want or to match their Theme has been non-existent ……. until now .

Get ready because , the days of boring , generic , ugly contact forms are now over ! You can now have a Fully Customizable Contact Form , tailored to your specifications , and even one which will match your Blog entirely ! If you would like to see what I am implying by a Contact Form matching your Blog entirely , take a look at my @Contact( Drop Down Panel at the top of my blog’s header ) – now pull that down and take a look at my contact form . Nice isnt it ? and not boring or ugly in the least now is it ?

You can now have your very own personally customized contact form regardless of what platform youre on [ be it on Blogger or WordPress ] – without having to write a single line of code – or knowing any HTML ! Wufoomakes creating and stylizing your Contact Forms a breeze whether you know how to create a Contact Form or NOT .

The first step in getting your Contact Form is to simply go to

Wufoo

and sign up for an account . The Free Account which they offer limits you to just 3 Forms . You can create a Contact Form , Subscription Mailing List Form or any other type of Form you want – the possibilities are endless as Wufoo offers many options . After you have signed up for an account , you can view the visual examples I have set below for guidance . It is truly a simple process and I will not go into details here on how to create one ( I dont wish to insult anyone’s intelligence ) .However , once you familiarize yourself with the Contact Form Editor you will be styling your Contact Forms within no time at all !

WUFOO.COM

create your wufoo account

WUFOO PRICE PLANS

price plans & free form plan

CSS GALLERY DESIGNS

CSS Forms Gallery

THEME DESIGNER

Designing your contact form panel

Form Builder

add a field | field settings | form settings

If you wish to implement Icons into your Forms ( as I have done below in the example Forms ) you will need to have uploaded your images to an Image host ( or your Blogger ) , copy the URL to your image and insert it using HTML into the field settings . Take a look at the example below and you can see how I have installed the icons into the Forms used here .

FORM MANAGER

managing your forms

ENTRY MANAGER

creating and viewing & managing your entries panel

CODE EDITOR

choosing your installation code

Below are just some examples of what you can do as far as customizing your Contact Forms and Mail Subscription Forms for your Blog . Please note : In the Wufoo Theme Designer where you are offered the styling features – you will see that you have the option of implementing your own Header as well as Wallpaper ( which of there exist a list of options ) or you may want to create your own, such as a logo or any other type of image you have in mind .

A Forewarning about this feature : It will NOT be effective once you install the Form into your theme, as all the forms are geared to take on your themes features. But I have found a way around this : The only way by which any of your images will be visible is if you install the header image or any other type of image you wish to use by going to the FORM BUILDER PANEL SETTINGS , and install any image you wish by going to Field Settings and installing the images directly into the Field Label box . Repeat this process anywhere you wish to install images .

Stylized contact forms

Customized Subscription Mail Forms

Please note , that after you have customized and edited your custom Contact Forms – you will be given the choice of several installation feature options within the Code Editor panel . Now I have tested several of the installation codes , here on my own theme and on my test site , and I will tell you in brief : As many Templates are differently structured , you may find that the Javascript code may not work properly and the Contact Form is NOT visible .

This means that you will either have to choose the iFrame code , or : if that does not work either ( due to your Theme ) – you may have to end up choosing the Pop Up Link Form option .

This means that you will have either a Text Link displayed ( wherever you wish to place it on your Blog ) or you may wish to replace the Text Link with an image , such as : an Envelope or an @ symbol icon , again , there are many choices for displaying your contact form on your site .
The best part about the Wufoo Contact Forms are that once a user fills out the info and submits the info required – they are not taken nor redirected off your page ( which is a big plus ! )

ICONS

If you wish to use icons within your contact forms in order to give them an added special touch , you can go to Dry Icons, as they have some of the best icons around for developers and users alike and which come in a variety of sizes from 16 x 16 all the way up to 512 x 512 px ! You may also try Iconspediafor some great icons as well .

If you wish to implement your own Send or Submit buttons such as I have done on the Contact & Mail Forms , you will have to create them , and simply implement the URL link of the image into the Text Link when you are designing your Forms in the Theme Designer Panel settings . The best way to design your forms for any of you who are not familiar with the editor is to simply take your time and acquaint yourselves with all of the various settings Wufoo offers – if you attempt to do it all in a hurry , you may become frustrated and lost . So..take your time and go out there and create the best Contact Forms ever !

Enjoy !

If you require any assistance , please feel free to contact me

Steampunk Art : Revisited

Mia — Wed, 24 Feb 2010 16:15:00 +0000

Steampunk : Brave New ” Art ” World

Steampunk , can be regarded as a sub-genre of Science Fiction which often features elements of Fantasy and of which appeared on the scene in the early 1980′s and 1990′s . The term Steampunk implies and mainly depicts works which are set in an era where Steam Power is predominant and widely used ; such as the early Victorian era [ 19th Century England ] -but the predominant elements are those of Science Fiction and Fantasy .

Fantasy fiction works such as those of Jules Verne and H.G. Wells portrayed Steampunk to a greater extent, by depicting fictional technological inventions such as the computer and even inter-stellar explorations , as in Aldous Huxley’s famed body of work Brave New World , H.G. Wells’ Time Machine and Jules Verne’s The Secret Adventures of Jules Verne( a Sci-Fi T.V. Series in which the Steampunk genre is precedent ] and in which the worlds first dirigible airship is described , which features unexampled luxury, total mobility and an extraordinary array of weapons and gadgets.

Cyberpunk and Steampunk are often placed under the same category as they both cater to a similar fanbase and to a greater degree – and element of Rebellion , albeit they have both progressed as separate movements but still manage to influence each other . Steampunk has been influenced and has adopted the early styles of 19th century scientific romances of jules Verne , H.G Wells , Mark Twain and Mary Shelley .

During the 1990′s the Steampunk movement has exploded beyond the works which were set in early historical periods to works which are now set in Fantasy Worlds that depend largely on steam and spring powered technology such as : Final Fantasy VI, Skies of Arcadia , Rise of Nations: Rise of the Legends , Edge of Twilight, and Arcanum : Of Steamworks and Magick Obscura .

Other utilitarian objects which have been utilised by enthusiasts into pseudo-Victorian mechanical Steampunk style are : computer keyboards, electric guitars , iPods, radios, automobiles, motorcycles etc., and are redesigned with materials such as polished brass, iron , and wood and are made to replicate the Victorian Era . Fans of the genre tend to adopt the Steampunk aesthetic through fashion , home interior decor, music and film and are classified as Neo-Victorians, with modern technologies and sensibilities. There even exists a Steampunk Philosphy with undertones of Punk inspired Anti-Establishment sentiments which are fueled with optimism about the human potential .

Whether it be Film , Literature , Fashion or Technology – one thing is certain : Steampunk is no longer a fad nor something which is going away anytime soon – as it stands , the Steampunk movement is already 20 years old and is expanding rapidly . As far as Steampunk fashion goes , it does not have any preset guidelines nor restrictions as it synthesizes the Modern day fashion elements along with those of the Victorian Era.

The World of Steampunk Art & Fashion

Aranwen Jewelry : you can find these pieces for sale

View Artists Profile and Contact for Details

the mysterious geographical explorations of :
Jasper Morello

A truly beautiful Industrial Steampunk Animation video : Watch….

Pioneer to the Falls | Interpol

Mac 10.5 23″ -Linux

Windows Comp

Steampunk-Monitor- Keyboard-Mouse built in the old world style..

Brand new 20″ widescreen with wireless keyboard and mouse..

This setup is ready to plug in to your computer and is on eBay right now