Creativity - Tree house or Giant nest? [Pictures]

I present you a cool idea, one tree house that looks like a giant nest.
Picture of the "giant nest":


It's a creative idea, don't you think so?

If you are thinking that the tree house don't have windows, I can tell you that isn't true, the tree house have discreet windows that are hidden by the branches.
2 Pictures that show the discreet windows and the beds:





You can access "the giant

The church that is a house [7 Pics]

I present you the church that is a house.
Yes, one church was converted into a house. The church name is St. Jakobus.
The transformation of St. Jakobus church, in the Netherlands, was the supervised by Zecc Architects.

The church that is a house, 7 pictures:








For more pictures, for visit the church:
Residential Church

Web site "Zecc Architects":
Zecc Architects

Source: Residential Church

10 Stunning websites to inspire your webdesign style in 2009

If you are looking for new ideas for the design of your next web project, follow the suggestions of my friend Greg from Submit CSS that this week proposes a collection of 10 stunning websites which can help you to find the right inspiration!

1. Carbonica (http://www.carbonica.org/)
Carbonica helps you combat climate change by reducing your carbon footprint.

2. Matt (http://www.themattinator.com)
The Carsonified team built Matt to see if it was possible to launch a simple web app in four days - everything from design, to development to marketing.

3. Satsu Design (http://www.satsu.co.uk/)
Satsu is a multi-disciplinary design agency based offshore on the Isle of Man.

4. Sawyer Hollenshead (http://sawyerhollenshead.com/)
Here you can find all of his most recent work, which includes web design and photography.

5. We Are Not Freelancers (http://www.wearenotfreelancers.co.za/)
All things web design through the eyes of David and Marc Perel.

6. BootB (http://www.bootb.com/en/)
BootB is an online way to find the best marketing concepts and strategies, graphic design solutions or ideas for advertising campaigns by addressing the unlimited number of creative talents from all over the Planet.

7. Pointless Ramblings (http://pointlessramblings.com/)
Pointless Ramblings is run by Nick Barrett who works as a freelance web design/developer and is also a student.

8. Mel Kadel (http://www.melkadel.com/)
The online professional portfolio of Mel Kadel.

9. Edgepoint Church (http://edgepointchurch.com/)
EdgePoint Church presents themself as an "awesomely different" kind of church in Powell, Tennessee.

10. Jason Julien (http://www.jasonjulien.com/)
Jason Julien is an award winning web designer and interactive creative director who has worked for "small businesses and big businesses and the middlemen in between."

10 Beautiful icons set for web developers and designers

This post contains a collection of 10 beautiful and very popular icons set useful to be used in your web applications or your websites.

1. Web development icons Download
Web development icons is a set with 60 free icons in web 2.0 style (24x24). These icons are free to use in any kind of project unlimited times.

2. Function free icon set Download
A great collection designed by Liam McKay. All icons are free for personal non-commercial use:

3. Pixelicious Download
150 beautiful pixel icons designed by PixelResort:

4. Social Web Button Download
Another great collection of social icons set provided from WebFruits:

5. Sweetie Pack Download
Sweetie Pack is a popular clean and beautiful icons set with other 100 icons. I suggest you to read this post. CSS Message Box collection with sweetie pack:

6. FeedIcons Download
This is a beautiful icon set feed

7. Mini Icons Download
Super mini icons set for web applications designed by FamFamFam:

8. Tango Icons Set Download
The Tango icon library contains a basic set of icons for the most common usage. To make it easier for a developer to find an appropriate icon for their application a number of aids are there to help.

9. Monofactor Download
Monofactor is a beautifu set contains 25 scalable Illustrator format icons:

10. Aquaticus Social Icons Download
Aquaticus is a beautiful social icons set designed by Jwoloh (60x60, 48x48, 24x24, 16x16):

If you have other icons set to suggest add a comment with the related link!

Related Content
Beautiful CSS buttons with icon set

5 Photoshop and Illustrator brushes set for web designer

This collection includes over 60 brushes: pencil lines, grunge Polaroid photos, diagonal lines for webpages background, safety pins and shape tags.


1. Lineart Brush (Download)
This brush for Illustrator will make your strokes look like they were drawn with a pencil. Thin were the stroke begins, wider in the middle, and back to thin were the stroke ends.

Each size comes in two variations - one with the stroke getting wider to the left and one with the stroke getting wider to the right. If you need other sizes just copy one of the sizes and modify it.


2. Polaroid Brushes (Download)
A nice collection of Polaroid brushes, for Photoshop useful to be used in grunge or vintage website style:

3. Diagonal Lines (Download)
This set of 17 diagonal lines brushes useful to design quickly background pattern for your websites.

4. Safety Pin (Download)
This is a set with six nice pin brushes for Photoshop.

5. Shape Tags (Download)
This is another brushes set of 23 shape tag very useful to design original tags in your websites.

If you have an interesting brushes set and you want to share it please add a comment!

Beautiful and free social websites icon set for bloggers

I want to suggest you this beautiful and free icon set of the most popular social websites "in a bottle" for bloggers (for personal and not for commercial use) designed from the guys of Templates.com.

Take a look at Templates.com

Free Icon set for bloggers consists of 10 icons: StumbleUpon.com, Ma.gnolia.com, Technorati.com, del.icio.us, DesignFloat.com, Digg.com, RSS, Twitter.com, Facebook.com, Reddit.com. Each icon is produced in the following sizes: 80х80, 64х64, 32х32.

If you are courious about icon desing, you can learn more about the creation process of this Icon Set here.

Take a look at this link to download this icon set.

Templates.com

Design a nice pencil and handwritten style Woork like

The way you present your posts is crucial to attract more visitors on your site and to increase your traffic. Every time I add a new post on my blog I spend a little bit of time to prepare a well presented post, adding for example some explanation images with some comments using a pencil and handwritten style which my readers love! I receive daily at least two emails where some readers ask to me what is the font I use in my tutorials to simulate this effect and how I design pencil-style lines. So I decided to add a little explanation in this post.

Pencil style
Since I started this blog I used this style (pencil + handwritten), to design all images I added to my post. Now, I can say it has been a good choice because it's a little particular which my readers love and, in some way, gives a little bit of personality to my post. To design my pecil-handwritten images I use a standard Illustrator brush:

Handwritten fonts
For explanation text I use Kelly Script and for the header (or simply to obtain a nice graphic effect) I use Cutty Fruit:

For my new tag cloud in the header of my blog (and for the new logo) I used Vintage font instead of Anarchistic which I used for the header of my old site.

I prepared a zip file with these font which you can download here:

Download Woork font collection

Ok, it's all! I hope you can find this post useful to find new ideas and inspiration for your site!

Nice login and signup panel Newsvine like using CSS

Are you looking for inspiration for a login panel? This post can help you...

Yesterday a reader of my blog, Benjamin, asked to me a suggest for an idea to design a simple login/register section for his site. So I suggested him to take inspiration form the panel used on Newsvine which is like the following:

It's a simple panel which includes both options (register and log-in) and it appears/disappears cliking on a link in the navigation bar. In this tutorial I prepared the code (html, css, javascript) which you can use in your HTML pages.

Download source code


Step 1: introduction
Before to go directly to the code, I want to illustrate the structure which I used to implement this panel: I added a navigation bar with an unordered list to add some links (in this tutorial I added just a link "Login | Register"), and a layer "login_menu" which contains register/login sections:

I separed the two sections using two layers #new-user-col (for register section) and #signup-user-col (for login section). Register button in the first section is a simple link with applyed CSS class .green-button; instead, Login button, in the secont section, is a <button> element which you can use to submit the login form.


Step 2: HTML code
Copy and paste the following HTML code in your page inside the tag <body>:

<div id="navbar">

<ul>
<li>
<a href="#" onclick="showlayer('login_menu')">
Login | Register
</a></li>
</ul>
<div id="login_menu" style="display:none;">
<div id="new-user-col">New User:<br /><br />
<a href="register.html" class="green-button">Register</a>
</div>

<div id="signup-user-col">
Existing User log in below:<br /><br />
<form action="login.html" method="post">
<ul>
<li>
<label for="email">Email:</label>
<input type="text" id="email" size="18"/>
</li>
<li>
<label for="psw">Password:</label>
<input type="text" id="psw" size="18"/>
</li>
<button type="submit" class="green-button">Log-in</button>
</ul>
</form>
</div>

<div class="spacer"></div>

</div>
</div>

I set the initial status of the panel to "hide", set the CSS display property of the layer "login_menu" to "none":

<div id="login_menu"style="display:none;">

Now, take a look at the CSS code...

Step 3: CSS code
Copy and paste the following CSS code in the <head> section of your page or into a separated CSS file:

/* ------------ */
/* NAV BAR */

#navbar{
background:url(pic/bg.png) repeat-x;
height:29px;
line-height:29px;
}

/*------ Reset CSS Properties ------ */
#navbar ul, #navbar li,
#navbar form,
#navbar button {
border:0; margin:0;padding:0; list-style:none;
}

#navbar li a{
margin:0 6px;
text-decoration:none;
color:#000000;
font-weight:bold;
border-bottom:dotted 1px #000000;
}

/*------ Layer with Register and Login Section ------ */
#login_menu{
background:#aaaaaa;
border:solid 1px #666666;
width:340px;
padding:10px;
color:#FFFFFF;
position:absolute;
font-weight:bold;
font-size:12px;
line-height:18px;
}
#login_menu li{
padding-bottom:6px;
text-align:right;
}
#new-user-col{
padding-right:10px;
border-right:1px #DEDEDE solid;
height:120px;
width:100px;
float:left;
line-height:12px;
}
#signup-user-col{
padding-left:20px;
height:120px;
width:200px;
float:left;
line-height:12px;
text-align:right;
}
#login_menu label{font-size:11px; font-weight:normal;}
#login_menu input{font-size:11px; color:#333333; margin-left:10px;}

/*------ Button ------ */
#login_menu button{
line-height:24px;
float:right;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
text-align:center;
cursor:pointer;
}

.green-button{
background:url(pic/button.png);
display:block;
color:#FFFFFF;
font-size:11px;
text-decoration:none;
width:81px;
height:26px;
line-height:24px;
text-align:center;
}

/*------ Spacer ------ */
.spacer{clear:both; height:1px;}

Step 4: Javascript Function to show/hide layer
By showing/hiding the panel I used this simple Javascript function I often use in my tutorials:

<script type="text/javascript">
function showlayer(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else {
myLayer.style.display="none";
}
}
</script>

In the past, some readers asked to me why I don't use a framework (such as mootools, scriptaculous, jquery) to implement this effect by showing/hiding HTML elements. I could do it, but, for simplicity, I prefer to use these few lines of javascript code which I add in an external JS file.

It's all!

Download source code


Related Content
Two CSS vertical menu with show/hide effects
Pastel color menu with dynamic submenu using CSS
Digg-like navigation bar using CSS
Flickr like horizontal menu
Perfect pagination style using CSS

Navigation bar with tabs using CSS and sliding doors effect

My friend William asked to me to design for his project a simple navigation bar with tabs using CSS.

I prepared for him this navbar (with status effects active, hover, link). You can download the source code and reuse it in your projects. If you want, you can change tabs colors simply modifying the image which I used as background for each tab.

I also added a short explanation about how to use PHP URL variables to set a tab "active" when the relative page is loaded. Read more for a complete explanation about this tutorial.

Download source code


Step 1: General structure
Each tab has rounded corners and adapts its width to the text conteined inside it. I use this simple method to implement CSS sliding doors effect:

...a <span> element inside an <a> element. I apply to the both elements a background image with rounded corners. For the image, I used a single background image to manage active, link, hover tab status which includes all these states. The image is the following:

You can change the status a tab simply change position property for the CSS background attribute to change the state of each tab in this way:

hover status:

background:url(img/tab-round.png) right 30px;

link status:

background:url(img/tab-round.png) right 60px;

active status:

background:url(img/tab-round.png) right 0px;

Step 2: HTML Code
I used a list <ul> and a <li> element for each tab and, how I said, a link with a <span> tag inside:

<ul class="tab">

<li class="active"><a href="#news"><span>News</span></a></li>
<li><a href="#upcoming"><span>Upcoming</span></a></li>
<li><a href="#favorites"><span>Favorites</span></a></li>
<li><a href="#messages"><span>Messages</span></a></li>
<li><a href="#account"><span>My Account</span></a>&lt/li>

</ul>

Class property is set to active when is defined a PHP URL variable such as $_GET['var_name']. PHP code to add to each li element is like the following:

<li
<?php if(isset($_GET['upcoming'])){?>
class="active"
<?php } >>
<a href="#upcoming">
<span>Upcoming</span>
</a>
</li>

...if is set an URL variable called "upcoming" set the current tab active assiged the class "active" to the properties of the current <li> element

Step3: CSS Code
CSS code is:

ul, li{border:0; margin:0; padding:0; list-style:none;}
ul{
border-bottom:solid 1px #e9f0f5;
height:29px;
}
li{float:left; margin-right:2px;}

.tab a:link, .tab a:visited{
background:url(img/tab-round.png) right 60px;
color:#56554e;
display:block;
font-weight:bold;
height:30px;
line-height:30px;
text-decoration:none;
}
.tab a span{
background:url(img/tab-round.png) left 60px;
display:block;
height:30px;
margin-right:14px;
padding-left:14px;
}
.tab a:hover{
background:url(img/tab-round.png) right 30px;
display:block;
color:#e0ded0;
}
.tab a:hover span{
background:url(img/tab-round.png) left 30px;
display:block;
}

/* ------------------------- */
/* ACTIVE ELEMENTS */
.active a:link, .active a:visited, .active a:visited, .active a:hover{
color:#1c4e7e;
background:url(img/tab-round.png) right 0 no-repeat;
}
.active a span, .active a:hover span{
background:url(img/tab-round.png) left 0 no-repeat;
}

It's all! Download the source code to reuse it in your projects.

If your site has a different color scheme you can change the colors of the image using for example photoshop or gimp.

Download source code

Nice CSS menu with feed reader icons list

This tutorial illustrates how to design a nice CSS menu with a list of feed reader icons.

I added to this menu the following links: standard reader (your browser), My Yahoo, NewsGator, Bloglines, Netvibes and Google Reader. The result is something like this:

Download source code for the full code and icons.

Download this tutorial

Step 1: HTML Code
Create a <div> element with ID=rss-menu and add an header using <h2> tag and an unordered list using <ul> tag:

<div id="rss-menu">
<h2>Subscribe My Feeds</h2>
<ul>

<li class="feed-xml">
<a href="http://feeds.feedburner.com/Woork">Subscribe to RSS Feed</a&gt;
</li>

<li class="feed-yahoo">
<a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/Woork">Add to My Yahoo</a>
</li>

<li class="feed-newsgator">
<a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds.feedburner.com/Woork">Subscribe in NewsGator</a>
</li>

<li class="feed-bloglines">
<a href="http://www.bloglines.com/sub/ http://feeds.feedburner.com/Woork">Subscribe with Bloglines</a>
</li>

<li class="feed-netvibes">
<a href="http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/Woork">Add to Netvibes</a>
</li>

<li class="feed-google">
<a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/Woork">Add to Google</a>
</li>

</ul
</div>

How you can see from the code above, each feed reader link is contained into a <li> element:

I designed and used a background icon for each <li> element (using CSS), adding a short description. (ex. "Add to netvibes").


Step 2: CSS Code
I used a CSS class for each feed icons:

.feed-yahoo{
background:url(pic/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(pic/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(pic/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(pic/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(pic/feed-xml.png) no-repeat;
}
.feed-google{
background:url(pic/feed-google.png) no-repeat;
}

Download source code for full CSS code.


Step 3: Show/Hide Menu with Javascript
You can also add a javascript function to show/hide this menu in your page adding this simple javascript code in the <head> tag:

function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else {
document.getElementById(layer).style.display="none";
}
}

This function take in input a parameter which is the ID of the layer you want to show/hide (in this case "rss-menu"). So, create a button which you can use to show/hide your menu:

<a href="#" onclick="javascript:showlayer('rss-menu')" class="rss-button">Subscribe My Feed</a>

If you want your menu is displayed above the content of your page set CSS attribute position to absolute

It's all!

Download this tutorial

FORM elements design using CSS and list (ul and dl)

Tables are useful to design complex HTML forms but a good alternative is to use list elements and CSS.

After my last post (Clean and pure CSS FORM design) I receive a lot of messages with some suggests, opinions and critics about the method illustrated in these post to design a FORM using pure CSS code. I have to say I prefer to use table to place FORM elements into the page, but another method I often use is the following: using unordered list (<ul>).

In this post I would show another way to design FORM using list elements <ul> and <li> (Jennifer also suggested to use <dl> tag). In any case, if you want to use pure CSS code instead of HTML table to design your FORM I think this is a good way to do it.

Download source code


Step 1: HTML Code
HTML code is very simple. I use a <fieldset> to contain our form and I placed each form element inside a <li> tag as it was a row of a table:

HTML code is:

<fieldset>

<legend>Sign-up Form</legend>
<form name="signup" action="index.html" method="post">
<ul>

<li> <label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</li>

<li> <label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>

<li> <label for="psw">Password</label>
<input type="text" name="psw" id="psw" size="30" />
</li>

<li> <label for="free">Free Subscrition</label>
<input type="radio" name="subscription" id="free"/>
</li>

<li> <label for="professional">Professional</label>
<input type="radio" name="subscription" id="professional"/> </li>

<li>
<label for="newsletter">Newsletter</label>
<input type="checkbox" name="newsletter" id="newsletter"/>
</li>

<li><label for="submit"></label>
<button type="submit" id="submit">Send</button> </li>

<ul>
</form>

</fieldset>

...and CSS code "to simulate" a table structure where to place each form element is:

fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style:none;
}
fieldset li{
clear:both;
list-style:none;
padding-bottom:10px;
}

fieldset input{
float:left;
}
fieldset label{
width:140px;
float:left;
}

The result is something like this:

Ok, I admit, it don't look so nice, but with some lines of CSS code we could do a good job to make it more grateful.

Download source code


Related Post
Clean and pure CSS FORM design
Table's anatomy: why tables are not so bad
Are you a CSS fanatic?
Improve form usability with auto messages