Web Design

Oh, this is a bit different collection I hope, because I couldn’t find really similar articles like this one. I did very big research through youtube, delicious, good-tutorials, vimeo, google and many more websites to find interesting Photoshop, little coding and tips video tutorials. What’s great with video tutorials? – you can see every mouse click and in the same time you hear author’s voice explaining things to you verbaly. In my opinion this is the fastest and the best way how to learn new techniques.

Actually I got this article idea, when I accidentaly found great video tutorial on Deviantart which by the way is the first video in this list as well. It is Photoshop tutorial, where author explains several of his great techniques while creating designs – what font to choose, how to think about spacing, wirefrime, colors, blending options and a lot more hidden tips.

1. Website design walkthrough from Derek Toigo

This video will walk you through Derek Toigo design process of a simple website template. He will explain and unreveal many hidden tips and techniques in his daily designing process.


Read more »

Free Vectors — Social Networking Icons (10 Colors/2 Styles)

Included are 21 social networking icons, in 2 different styles, with 10 color variations total. So in short, it’s a lot of icons! One of the styles is more glossy/gradient-y, and one of the styles is flat. Also, the download includes both CS & CS3 files.

Read More

Streaks of Light: 40 High Resolution Photoshop Brushes

Today, I am releasing one of my favorite sets of brushes to date; a set of 40 high resolution Photoshop brushes for creating streaks of light. It seems like each set of light effect brushes I make get better and better. This set is really amazing and I hope that you enjoy them!

Read More

Free Texture Tuesday: Bokeh

A set of 5 bright and colorful high resolution bokeh textures.

Read More

Abstract 3D Renders Pack – 33 Free Images

This abstract render pack comes filled with 33 images of 3D abstract renders. All the images are in PNG format with transparent backgrounds. For the adventurers out there, we have also included two of the 3ds Max files that this pack was created with!

Read More

108 Mono Icons: Huge Set of Minimal Icons

There are 108 simple icons included in this set. The icons are avaliable in 32×32 px .png (transparent background) format.

Read More

330 Free Letter Pressed Icons

A collection of over a 100 letter pressed icons, in various letter pressed styles exclusive to Creative Nerds readers. The icons include three PSD files which are full of icons which you can drag and drop into your designs.

Read More

5 Free Tape Brushes

Tape is often used to hold things together or fix broken items. That being said, I don’t think these brushes will fix a bad design, but they will surely add a nice touch to hand drawn styles and anything else you find them useful for. Each brush measures around 2500 pixels.

Read More

HTML5 Visual Cheat Sheet (Reloaded)

This cheat sheet is essentially a simple visual grid that contains a list of all HTML tags and of their related attributes supported by HTML 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.

Read More

Design Cartons Free Icon Set For Designers

Here are 5 high quality icons of boxes/cartons that you can use to announce the launch of a new application or on your portfolio websites. There is plenty of space to add your own flavor to the graphics like your name, important dates, blog names, app names etc.

Read More

Tipz — Free WordPress Theme

A free WordPress theme from Alex at Crazy Leaf Design featuring widget ready areas, 3 columns, 2 sidebars (right and left), featured post section with featured image custom field, integrated logo changer (text or image).

Read More

Free Vector Icons: Panda Social Network Icons

A free package containing 12 sweet panda animals, 128×128 pixels each, that have social network marks on their stomach. You’ll get 12 .png files and 1 vector (.ai) file in case you need to rescale them (in Adobe Illustrator format).

Read More

Free Sketching & Wireframing Kit

Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

Read More

18 Stained Brown Paper Textures

A large set of high resolution stained brown paper textures.

Read More

11 Free Scaffolding Grunge Vectors & How-To

This set of 11 Free Scaffolding Grunge Vectors was specifically created with large print designs in mind, but they can be used in web projects too. It’s a common technique to slightly destroy large type in ads and other print campaigns.

SlideDeck

If you are looking for a powerful file manager ready to use in your web projects and simple to customize, take a look at this list with the best and free file manager currently in circulation. Some of these file managers support PHP only or javascript only or Ajax that will give you powerful tool to easily browse directories and files on the server, search, upload and download files, edit, copy, move, delete files and more.

If you know other interesting resources about this topic please leave a comment!

1. AjaXplorer

Ajax File Manager

AjaXplorer is a free Ajax file manager with an easy-to-install file explorer for remotely managing files on a web server. Its “rich client” layout and actions make it accessible to any end-user for a variety of purposes: file management/sharing, photo gallery, code browsing, etc. Only PHP (4 or 5) is necessary, no database needed.

  • Rename/Copy/Move/Delete/Download files or folders
  • Upload multiple files and track status with progress bar (Flash required and no https)
  • Create folders and empty files
  • Edit Text files and code files (js, php, html, java, sql, perl), syntax is highlighted in the editor
  • View Images online, preview images in the list, diaporama of a given folder
  • Listen to MP3sonline without downloading them
  • View Flash videos (FLV) online and full screen.
  • Browse and Extract ZIP files online

2. fileNice

Ajax File Manager

fileNice is a free php file browser, particularly useful if you have a ‘dump’ folder on your server where you regularly upload files and you want to be able to see what’s there.

3. File Thingie

Ajax File Manager

File Thingie is a small web-based file manager written in PHP. It is intended for those who need to give others access to a part of their server’s file system when FTP is not practical. Through File Thingie you and your users get access to the most common functions:

  • Simple — Just one file
  • Upload multiple files at once
  • Multiple users and user groups
  • Create subdirectories
  • Rename, move, delete and copy files and folders
  • Search for file and folder names
  • Control access to files based on black- or whitelists
  • Edit text files
  • Unzip files without downloading
  • Easy customization of the CSS based layout
  • Translate into your own language

4. MooTools based FileManager

Ajax File Manager

A MooTools based File-Manager for the web that allows you to (pre)view, upload and modify files and folders via the browser. Features include:

  • Browse through Files and Folders on your Server
  • Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files
  • View detailed Previews of Images, Text-Files, Compressed-Files or Audio Content
  • Nice User Interface
  • Upload Files via FancyUpload (integrated Feature)
  • Option to automatically resize big Images when uploading
  • Use it to select a File anywhere you need to specify one inside your Application’s Backend
  • Use as a FileManager in TinyMCE

5. Relay

Ajax File Manager

Relay is a wonderful piece of ajax code written with the aid of the prototype ajax toolkit. It does a wonderful job of uploading / downloading and managing files on your private server, let’s check out some of its features:

  • drag-n-drop files and folders
  • dynamic loading file structure
  • upload progress bar
  • thumbnail view, including pdf
  • multiple users & accounts

6. Kae’s File Manager

Ajax File Manager

KFM is an online file manager which can be used on its own, or as a plugin for a rich-text editor such as FCKeditor or TinyMCE. KFM is Open Source, and you are free to use it in any project, whether free or commercial. Let’s check out some of its features: drag-and-drop everything, icon-view, list-view, plugins, image manipulations, slideshows, easy installation and upgrades, syntax-highlighting text editor, search engine, tagging, multi-lingual. plugins for mp3 playback, video playback.

7. eXtplorer

Ajax File Manager

eXtplorer is a web-based File Manager. You can use it to. Features include:

  • browse directories & files on the server and
  • edit, copy, move, delete files,
  • search, upload and download files,
  • create and extract archives,
  • create new files and directories,
  • change file permissions (chmod) and much more…

When we think about CSS-Styled lists, different ideas come to mind but that rusty old image of bulleted items is not one of them anymore. There are lots of different methods to format nice HTML lists that is used in most web designs not only for navigation menu (vertical or horizontal) but for formatting many design blocks in a stylish and elegant manner. In this article, we’ll have a look at how such lists can create a whole new look, feel, and effect of a site.

Style Your Ordered List

Styling your Lists

By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.

Elastic Calendar Styling with CSS

Styling your Lists

You can tackle calendar styling with pure CSS, and I feel it makes just as much sense semantically as a table does. By using CSS, we can even do some cool things like do all our sizing with ems so our calendar layout will be elastic. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.

Three Column CSS

Styling your Lists

A Three Column CSS Layout Using Just an Unordered List

Simulating a Table Using an Unordered List

Styling your Lists

With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more “tabley” information. Here is how to simulate a table using an unordered list.

How to Create a Block Hover Effect for a List of Links

Styling your Lists

Learn how to create this “block hover” effect. Because IE only supports the :hover element for links, the link anchor needs to go around all the text in the list item. Therefore, we need to provide some additional hooks in order to style the content. We do this through the use of <em> and <span> tags.

<div id="links">
    <ul>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
    </ul>
  </div>

The Amazing LI

Styling your Lists

Using CSS and Unordered List Items to Do Just About Anything.

Centering List Items Horizontally

Styling your Lists

Slightly Trickier Than You Might Think, by wrapping the list inside a table div and using display: table; trick.

Turning a list into a navigation bar

Styling your Lists

Learn how to create a navigation bar using unordered lists.

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

Styling your Lists

Tables are useful to design complex HTML forms but a good alternative is to use list elements and CSS. In this post you will see another way to design FORM using list elements <ul> and <li>.

<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>
</fieldset>

5 Ways to Set Your Unordered Lists Apart

Styling your Lists

Here are five different ways to style your unordered lists with CSS.

Taming Lists

Styling your Lists

In this article, Mark Newhouse demonstrates how to use CSS to bring unwieldy lists under control. It’s time for you to tell lists how to behave, instead of letting them run wild on your web page.

<div id="bread">
<ul>
	<li class="first">Home
	<ul>
		<li>&#187; Products
		<ul>
			<li>&#187; Computers
			<ul>
				<li>&#187; Software</li>
			</ul></li>
		</ul></li>
	</ul></li>
</ul>
</div>

Nested lists used to create a simple folder metaphore

Styling your Lists

Here’s a rough and ready example showing how to make a folder analalogy using a nested list.

<ul id="sitemap">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#" class="open">item 4</a>
<ul>
<li><a href="#">sub-item 1</a></li>
<li><a href="#">sub-item 2</a></li>
<li><a href="#" class="open">sub-item 3</a>
<ul>
<li><a href="#">sub-sub-item 1</a></li>
<li><a href="#">sub-sub-item 2</a></li>
<li><a href="#" class="open">sub-sub-item 3</a>
<ul>
<li><a href="#">sub-sub-sub-item 1</a></li>
<li><a href="#">sub-sub-sub-item 2</a></li>
<li><a href="#">sub-sub-sub-item 3</a></li>
<li><a href="#">sub-sub-sub-item 4</a></li>
</ul>
</li>
<li><a href="#">sub-sub-item 4</a></li>
</ul>
</li>
<li><a href="#">sub-item 4</a></li>
</ul>
</li>
<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>
</ul>

Handcrafted CSS + HTML Grid Calendar 2009

Styling your Lists

Some experiments with css and grids in order to make CSS Grid Calendar for 2009.

Best Practices

Mixx’s Popular Stories

Styling your Lists

The markup is not simple, since they are using child <ul> along with a voting form and <span> tags.

<ul>
    <li>
      <h4><a href="#"></a><span><a target="_blank" href="#"></a></span></h4>
      <div>
	<div><span></span></div>
	<div>
             <form>
		    <input/>
		    <button type="submit"><span></span></button>
		    <input/>
             </form>
	 </div>
      </div>
      <ul>
	  <li><a href="#"></a></li>
	  <li></li>
	  <li></li>
      </ul>
      <blockquote>
	  <p></p>
      </blockquote>
      <ul>
	  <li><a href="#"></a></li>
	  <li><a href="#"></a></li>
	  <li><a href="#"></a></li>
      </ul>

    </li>
</ul>

Thecosmicmachine

Styling your Lists

Thecosmicmachine’s Supported social networks, uses unordered list. Clean and simple.

<ul id="web2List">
					<li>
						<img src="images/twitter_32.png"/>
						<strong>Twitter</strong><br/>
						What are you doing?
					</li>
					<li>
						<img src="images/facebook_32.png"/>
						<strong>Facebook</strong><br/>
						Connect with the people around you.
					</li>
</ul>

Viget- Inspire

Styling your Lists

Viget- Inspire uses a pretty nice calender in their footer using unordered list.

<ul class="clearfix">
       <li><a href="http://www.viget.com/inspire/2009/05/">May 09</a></li>
       <li><a href="http://www.viget.com/inspire/2009/04/">Apr 09</a></li>
       <li><a href="http://www.viget.com/inspire/2009/03/">Mar 09</a></li>
       <li><a href="http://www.viget.com/inspire/2009/02/">Feb 09</a></li>
       ......
</ul>

Product Planner

Styling your Lists

Product Planner uses ordered list to show the user the steps of using their service. Each item (#how_to_use li.step_1) uses a different image.

<ol>
		<li class="step_1">Find a flow from the gallery.</li>
		<li class="step_2">Use that flow to create your own.</li>
		<li class="step_3">Share it with your colleagues.</li>
</ol>

Onwired Code block

Styling your Lists

Onwired uses ordered list to create their code block.

Jobs on the wall

Styling your Lists

Nick La uses unordered lists to display all available jobs.

<ul class="joblist">
   <li class="">
        <img class="employerlogo" alt="" src="http://jobs.webdesignerwall.com/images/logos/small_1390806013"/>
        <img class="category" alt="" src="http://jobs.webdesignerwall.com/images/cat-design.gif"/>
        <h3><a href="http://jobs.webdesignerwall.com/job.php?id=310">Web/Graphic Designer</a></h3>
        <p class="jobinfo"><span class="type">Full-Time</span>   <em>at</em> Hallmark Channel <em>(Studio City, Ca)</em></p>
   </li>
</ul>