Pure Bytes Lab The Blog

Incredibox: Turn on your speakers and good listening!

E. Nim — Mon, 02 Jul 2012 13:42:20 +0000

Go check it yourself, it’s awesome!
At incredibox.com you can compose your own song.

How it works? It lets you control a group of beat boxers (up to seven of them) and you create a composition using five different categories which include Effects, Beats, Melodies, Chorus and Voices.

So.. Turn on your speakers and good listening!

HTML5 periodic table

E. Nim — Thu, 31 May 2012 02:27:50 +0000

This table shows the 107 elements currently in the HTML5 working draft. A nice presentation quite for geeks that might help you memorize some html5 tags.

Check out the search field as well, it’s a neat feature, you specify a url and it shows you which tags are used the most.

http://joshduck.com/periodic-table.html

Madalena

E. Nim — Wed, 11 Apr 2012 09:54:59 +0000

http://madalena.gr
alternative therapies – empower your inner shelf

It’s a greek website that we’ve made using wordpress. We took our time to modify the selected wordpress theme to fit to our needs. PBL Bookshelf widget had been developed for this website and then we distributed it to wordpress society .

Pure CSS stylish Button

E. Nim — Fri, 06 Apr 2012 22:47:03 +0000

This is a custom pure CSS elegant button with perspective. It works cross-broswer but the whole style might be available only to modern broswers. I recommend you to use it as an action button rather than a link button (ex. submit for an email form).

Change background colors, grandients, font color or font-family to fit your needs. Just note that some of the CSS code is meant for cross-browser purposes, so be careful while modifing it.

I have created a background noise image for the surface of the button. It’s a transparent png image with just the noise on it which allows you to put it above any background color. You can find it here: http://i43.tinypic.com/2a5166u.png

With a darker website background color you should have a darker color for the button shadows as well (box-shadow properties).

HTML

The html is simple and clear, but don’t get too excited too soon…

1
2
3

<button class="button">
	<p>SUBMITp>				
button>

CSS

Let’s have a look at the CSS code, starting with the styling.

/* ----------------- */
/* SETTING THE STYLE */
/* ----------------- */
 
.button{
 
	box-sizing:content-box;
 
	padding:0;
 
	margin:0;
 
	width:208px;
 
	height:64px;
 
	position:relative;
 
	display:block;
 
	background:none;
 
	border:none;
 
	outline:none;
}
 
/* 'before' pseudo-element for button perspective*/
.button:before{
 
	box-sizing:content-box;
 
	content: '';
 
	display: block;
 
	position: absolute;
 
	z-index:-2;
 
	top: 0;
 
	left: 0;
 
	width: 208px;
 
	height: 52px;
 
	background: #377fa3;
 
	border-radius: 6px 6px 12px 12px;
 
	box-shadow: 0px 5px 2px #d3d3d3;
 
	padding-bottom: 8px;
}
 
/* 'after' pseudo-element for button surface */
.button:after{
 
	box-sizing:content-box;
 
	content: '';
 
	position:absolute;
 
	z-index:-1;
 
	width:204px;
 
	height:52px;
 
	left:1px;
 
	top:1px;
 
	background:#4496c5;
 
	border-radius:5px;
 
	border:1px solid #61a1bf;
 
   /* fallback/image non-cover color */
   background-color: #63a7cc; 
 
   /* fallback image */
   background-image: url('http://i43.tinypic.com/2a5166u.png'); 
 
   /* Safari 4+, Chrome 1-9 */
   background:url('http://i43.tinypic.com/2a5166u.png'), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63a7cc), to(#3e89b2));
 
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background:url('http://i43.tinypic.com/2a5166u.png'), -webkit-linear-gradient(top, #63a7cc, #3e89b2); 
 
   /* Firefox 3.6+ */
   background:url('http://i43.tinypic.com/2a5166u.png'), -moz-linear-gradient(top, #63a7cc, #3e89b2);
 
   /* IE 10+ */
   background:url('http://i43.tinypic.com/2a5166u.png'), -ms-linear-gradient(top, #63a7cc, #3e89b2);
 
   /* Opera 11.10+ */
   background:url('http://i43.tinypic.com/2a5166u.png'), -o-linear-gradient(top, #63a7cc, #3e89b2);
}
 
 
.button p{
 
	display:inline-block;
 
	padding-bottom:8px;
 
	font-weight: bold;
 
	font-size: 16px;
 
	color: white;
 
	font-family: 'Myriad Pro';
 
	letter-spacing: 1px;
 
	text-shadow: -1px -1px #494949;
}

Ok, that’s enought of styling.
Now let’s add some hover on and mouse down events.

/* ------------------------- */
/* HOVER & MOUSE DOWN EVENTS */
/* ------------------------- */
 
.button:hover{cursor:pointer;}
 
.button:hover:before{background:#3883a5;}
 
.button:hover:after{
 
	/* Safari 4+, Chrome 1-9 */
	background:url('http://i43.tinypic.com/2a5166u.png'), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#70afd1), to(#428eb7));
 
	/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background:url('http://i43.tinypic.com/2a5166u.png'), -webkit-linear-gradient(top, #70afd1, #428eb7); 
 
	/* Firefox 3.6+ */
	background:url('http://i43.tinypic.com/2a5166u.png'), -moz-linear-gradient(top, #70afd1, #428eb7);
 
	/* IE 10+ */
	background:url('http://i43.tinypic.com/2a5166u.png'), -ms-linear-gradient(top, #70afd1, #428eb7);
 
	/* Opera 11.10+ */
	background:url('http://i43.tinypic.com/2a5166u.png'), -o-linear-gradient(top, #70afd1, #428eb7);
}
 
/* You can use 'active' for a Mouse Down event */
.button:active:before{
 
	width: 196px;
 
	margin-top: 4px;
 
	left: 6px;
 
	padding-bottom: 4px;
 
	border-radius: 6px;
 
	box-shadow: 2px 2px 5px #bcbcbc, -2px -2px 5px #bcbcbc;
}
 
.button:active:after{
 
	width: 194px;
 
	height: 54px;
 
	top: 5px;
 
	left: 7px;
 
	border: none;
}
 
.button:active p{position:relative;top:4px;}

That’s it! We are done.
Leave a comment if you liked our custom css button maybe with a link to where you used it.

QR codes can be beautiful

E. Nim — Sat, 24 Mar 2012 03:04:22 +0000

In the end, creating branded QR codes is as much art as it is science. The mathematical qualities of a QR code and the impact of a clever design can truly elevate a QR code to the point where the code becomes the central artwork of a piece of marketing collateral.

This is a very interesting post about how to make extremely awesome QR codes. Check it out!

Jan Ploch: A quite inspiring website

E. Nim — Thu, 22 Mar 2012 14:09:40 +0000

This is a very unique and inspiring website awarded as Site of the Day by awwwards.com

Visit the website:
http://janploch.de/

Windows 8 OS

E. Nim — Sun, 18 Mar 2012 12:10:13 +0000

Are you curious on how good the Microsoft Windows 8 operating system will be???

Let’s study the statistics.. =)

Bookshelf wordpress widget

E. Nim — Sat, 17 Mar 2012 12:49:03 +0000

jQuery: For Dummies

Check out our first widget for wordpress! We have created this widget for a customer, but we are more than thrilled to share it with the community of wordpress.

PBL Bookshelf is an elegant, interactive widget that presents your latest (book) post entry of the selected category.

It acquires the book cover from the featured image of your post.

1.Download the widget

2.Upload widget, install and activate it through ‘Plugins’ menu in wordpress.

3.Go to ‘Appearance>Widgets’ menu in wordpress and use the widget.

In order to have book covers, you should use featured images.

Contributors: Pure Bytes Lab

Date of birth: 18/3/1012

Feel free to send us a feedback with your opinion or desired features.
WordPress link

HP Z1: The Apple iMac Killer

E. Nim — Tue, 13 Mar 2012 18:34:54 +0000

Introducing the HP Z1, the world’s first all-in-one workstation with a 27” (diagonal) display that snaps open to let you swap out parts and make upgrades. No tools required. Expected to ship April 2012.

A quite neat product by HP. In my opinion, the design could be much better but offering you the ability to swap out any part of hardware that easily is a great feature!

View the official webpage or read a full review.

Can you be a web designer?

E. Nim — Tue, 13 Mar 2012 10:01:39 +0000