CSS | 9photoshop.com

Posts Tagged ‘CSS’

03
Feb
2012

Should You Keep Your Website Open Source?

When you enter the world of web hosting, you will find yourself inundated with options. Choosing a hosting company is only the beginning. Even after you have a domain, hosting account, and all of the preliminary tasks out of the way, you still have to build a website. Many options out there are proprietary, sold by commercial vendors and private developers, but in some situations, it is much better for your website and your business to use free and open source software for your website.

What Is Free and Open Source Software?

To fully grasp the importance of open source software, it is important to have a clear definition. Free and open source software is any software that is made available using a free software license (approved by the Free Software Foundation) or an open source license (approved by the Open Source initiative). Most free and open source licenses fit both lists and include clauses that allow users to copy the source code, modify it, and redistribute it to others. This does not necessarily exclude commercial software, since even free and open source software can still be sold.

How Can a Website Be Open Source?

When we talk about making a website open source, it does not refer to the HTML and CSS code, which is, by the open nature of the Web, always open source and available to everyone. On the other hand, many websites use server-side scripting to create dynamic web pages and web applications. In some cases, these scripts are from proprietary vendors or private contractors, but you can also get them from open source developers.

Some of the most successful and trusted websites use reliable free and open source content management systems, such as WordPress (for blogging), Drupal (for general website content management), and Magento (for e-commerce).

Why Go Open Source?

The most common reason for a website administrator to pick a tool like WordPress over something commercial is that it is free of charge. You do not have to pay a cent to download it and install it on any server. While there are commercial installation and management services available, these are completely optional, and the software remains free and open source even if you use them.

Beyond the initial cost, however, free and open source web software offers significant advantages, including the following:

Avoid Vendor Lock-in

If a vendor creates a complex proprietary web application for your website, you will always be dependent on that vendor for updates, customizations, and possibly even the safety of your data, which may be in a proprietary format. If you ever need to switch to another vendor, you may have serious conversion problems.

Full Customization

When you use free and open source software, it is yours to do with as you please. While other software may have limitations on the amount of customization you can do, an open source web application is like clay that you can mold into whatever you want.

Reliability and Security

As the old open source saying goes, “many eyes make bugs shallow.” It is easier for a community of developers to spot security flaws and fix bugs than it is for a commercial company with a closed development model.

Sustainability

This is especially true if you hire an independent developer to create a new application for you. If something should happen to that developer or you are no longer able to hire that person, you are left with software that no one at your organization truly understands how to develop or fix. With free and open source software, it continues to survive even if the developer does not. The source code remains available even if a vendor goes out of business.

The Open Web

There is one undeniable reason why it makes sense to use free and open source software for your website. The web was built on free and open source principles. The code of the web is free and open, and web standards call for websites to be open and accessible to everyone. Most of the top hosting providers offer free and open source software, and it only makes sense that your website should maintain the spirit of the web by keeping your site open.

You might also like…

Should Designers know how to code? What do you think? →
Is a Design House-Style Really Necessary? →

Tags: app, Application, CSS, dev, Development, html, web, web design, Wordpress
Posted in Design, Photoshop

31
Jan
2012

Weekly Design News – Resources, Tutorials and Freebies (N.118)

No Comments

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy :)
If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebookor by subscribing to our RSS feed.

HTML5 Please – Use the new and shiny responsibly

WPCandy's Completely Unofficial Guide to Plugin UI

Responsive JavaScript Widgets

.htaccess Files for the Rest of Us

How to Design a Dribbble-Style Homepage Layout

A New Year, A New Responsive Dribbble Portfolio

Recreating the IBM Lotusphere 2012 logo in CSS3

How to Make Your Own Icon Webfont

Full CSS3 HTML5 Contact Form with No Images

Create Retro Graphics in Illustrator

GLEGOO – New Free Google Web Font

Static Free Font

Colorful 3D UI Kit

IxD Gestures – Free Omnigraffle Template

Mac OS X Lion Recreated with CSS3

This Week on CodeVisually

We recently launched CodeVisually, our site that focuses solely on resources and tools for web developers and offers a simple solution to painlessly find the resource needed and fast.

Here are our favorite webdev resources from the past week:

Fokiz CMS

GuideGuide

deCSS3

Bootstrap Generator

syze

Gridpak

EaselJS

Create

Previous Weekly Design News…

Design News Roundup Archives →

Tags: book, CSS, dev, font, Graphic, html, icon, illustrator, Javascript, Logo, plugin, resource, Resources, template, tutorial, twitter, web, Weekly News
Posted in Design, Photoshop

26
Jan
2012

How to Design a Dribbble-Style Homepage Layout

No Comments

Advertise here with BSA

The popular design network Dribbble has grown substantially in just a few short years. Graphics designers and illustrators from all over the world have flocked onto the web seeking invites. But aside from the exclusivity their layout design has become a prominent factor of the entire branding.

I love the simplistic nature of their gallery-style photo boxes. It matches well with a community of designers excited to share their latest pixels with the world. In this tutorial I’ll go over techniques for constructing a similar design in HTML5 and CSS3. You can build a very similar page structure with just bare-bones essential CSS. Yet when we can utilize new browser-supported properties like box shadows the process becomes much more captivating.

Live Demo – Download Source Code

Starting in HTML

To begin let’s build the default HTML template so we have a starting point to work with. The basic HTML5 construct requires a simple doctype declaration. In the code below I’m also including some meta tags along with an external CSS stylesheet.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dribbble-Styled Homepage Demo - SpyreStudios</title>
  <meta name="author" content="SpyreStudios">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

If you notice we don’t need to close the link or meta tags anymore. The syntax <link rel="stylesheet" /> is still valid with a forward slash at the end. However it’s not required in HTML5, so this will save you a bit of typing.

Now let’s move on to building the core body page. I’ve slimmed down the template a bit to include only the header navigation bar along with the notorious thumbnail display. In the top portion I’m isolating the navigation with HTML5′s nav element. We need to use this as a container since the background will span the entire width of the page. However our inner content is set inside a wrapper limited at 710px wide.

<nav>
    <div class="wrap">
		<ul id="menu-l">
			<li><a href="#">Shots</a></li>
			<li><a href="#">Explore</a></li>
			<li><a href="#">Designers</a></li>
			<li><a href="#">Jobs</a></li>
			<li><a href="#">About</a></li>
			<li class="floatr"><a href="#">Sign in</a></li>
		</ul>
	</div>
</nav>

The rest isn’t too exciting, just a simple unordered list of navigation links. Dribbble actually has the sign in link floating off to the right side pushed up next to the search bar. For this I just created a class .floatr to append onto the list item.

Building our Thumbnail Display

Now directly underneath the navigation section I’ve created another div wrapper. This holds a sub-navigation menu with inactive links to sort through the many different shots. I also included a copy of the small heading text displayed on Dribbble’s featured section.

<ul class="subsortnav">
	<li><a href="#" class="sel">Popular</a></li>
	<li><a href="#">Everyone</a></li>
	<li><a href="#">Debuts</a></li>
	<li><a href="#">Playoffs</a></li>
</ul>

<h2><strong>What are you working on?</strong> Dribbble is show and tell for designers. <a href="#">Sign up as a spectator</a></h2>

Now let’s take a quick look at how I’ve setup the shots gallery. Each row displays 3 different shots measuring about 220px in width. The formatting is held inside an ordered list with each new shot attributed inside a list item.

This can get a bit tricky since we’re working with more than just plain text. But HTML lists were built for much more than just navigation menus. And certainly this dribbble gallery is one such example. Check out my code below and we can break down each segment individually.

<ol class="dribbble clearfix">
	<!-- @teaser #001 -->
	<li id="screen-1" class="group">
		<div class="shot">
			<a href="http://dribbble.com/shots/393501-Ampackaging"><img src="shots/01_teaser.jpg" /></a>
		</div>
		<span class="meta"><a href="http://dribbble.com/55His"><img src="photos/55-hi.png" class="avatar" /> 55 Hi's</a></span>
	</li>

To make recognition easier I’ve given each list item an ID of “screen-#” starting at 1. Inside are two different block areas – a div containing the shot image along with a span underneath for the author’s name and avatar photo. Much of the internal HTML looks exactly the same within the OL element. So now let’s turn our focus onto CSS markup.

Styling the Page

Inside my example style.css you’ll find each of the code blocks split into segments. At first I’m doing some formal browser resets to remove margins and padding, along with re-setting font sizes to the traditional 1.0 scale. By that I mean the 62.5% value creates a ratio of 1.0em = 10px and all font sizes/line height values are even.

/** default styles **/
* { margin: 0; padding: 0; }
html { height: 101%; }

body { font-family: Arial, Tahoma, sans-serif; font-size: 62.5%; line-height: 1; background: #eeeeee; }

a { color: #5484a7; text-decoration: none; }
a:hover { text-decoration: none; color: #356080; }

Such an interesting part of our CSS is handling each dribbble box display. The ordered list element is given a class of “dribbble” and each internal list item holds a shot image and author details.

If you notice I’ve included a secondary class .rowstart on some list items. This is applied to each shot starting on a new row. In this case ID numbers 4, 7, and 10. The class will just clear everything from the previous row so we know the next three boxes will display properly. Also worth noting are some of the slight margin fixes I’ve applied to the author avatar image.

ol.dribbble { list-style: none; }
ol.dribbble li { width: 220px; height: 210px; margin-right: 15px; float: left; }
ol.dribbble li.rowstart { clear: left; }

ol.dribbble li span.meta { font-size: 1.2em; display: block; font-weight: bold; padding-left: 6px; }
ol.dribbble li span.meta a { text-decoration: none; display: block; }
ol.dribbble li span.meta img.avatar { float: left; margin-right: 6px; margin-top: -3px; }

Creating Shots

We are using a class of .shot attached to the internal div element inside each list item. This behaves as a block with a limit of 220px in width and 210px in height.

Ideally this should be enough since none of the author’s names would break onto the second line. However if you wanted to include extra user information or add Dribbble’s social icons you can set the box height to auto. Then using a bottom margin add extra space as needed. Though I feel that using strict size limits will work better across all browsers and resolutions.

ol.dribbble li div.shot {
    display: block;
    clear: left;
    margin-bottom: 8px;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

A fantastic bit of CSS3 code is from the selector above using drop shadows. This displays a very slight shadow coming out of the right side of each box. The color setting is applied using RGBa which allows reduction in opacity. In this scenario we’ve created a solid black color with only 07% alpha transparency instead of 100%. This gives an ever-so-slight drop shadow that looks stunning in contrast with such a light background.

Live Demo – Download Source Code

Conclusion

I hope this brief tutorial has demonstrated just how easy it is to prototype a layout using CSS3. Even with many of the older properties it’s still a simple process to look over a page design and clone much of the functionality yourself. And with HTML5 specs growing in support web developers have never had it easier! Let us know your thoughts in the post discussion area and be sure to download a copy of the demo source code above.

Advertise here with BSA

Tags: CSS, tutorial
Posted in Photoshop Tutorials

24
Jan
2012

Freebie: Colorful 3D UI Kit

No Comments

We have a fantastic freebie for all of you web designers out there, you’ll love this:)
Designed by Land-of-Web, the Colorful 3D UI Kit comes in .psd format and is full of beautifully designed modern web elements covering almost all aspects of web design, including:

• Drop-Downs, Silders & Progress Bars
• Switches, Tabs, Icons, Tool-Tips and many useful Navigation Elements
• Search and Select Boxes
• Media Control Buttons and Mini Player

UI Kit Preview

Download the UI Kit

Within the .zip file you will find all of the .psd elements from above.
Download: Colorful 3D UI Kit

Copyright

This Web UI set is free for personal and commercial use with attribution appreciated but not required. You MAY NOT re-upload or re-distribute this set on any other website, and please link directly to this page for all sharing.

Thanks

Big thank you to Nataly from Land-of-Web for designing and allowing us to release this fantastic freebie. You can also follow her on Twitter.

You might also like…

Fantastic Freebie: 3D Web UI Kit →
20 Free Web UI Element Kits and Stencils →
A Collection of Printable Web Browser Sketching and Wireframe Templates →
10 Completely Free Wireframe and Mockup Applications →
A Collection of Useful Web Design Wireframing Resources →
40 Detailed and High Quality Mobile Phone .psd Source Files →
40 Professional and Detailed Web Layout PSD Templates →
Android App Developers GUI Kits, Icons, Fonts and Tools →
iPhone and iPad Development GUI Kits, Stencils and Icons →
Illustrator Template Toolbox for Web, Mobile and App Developers →
40 High Quality CSS and XHTML Web Layout Templates →

Tags: app, Application, button, buttons, CSS, dev, Development, font, gui, html, icon, icons, illustrator, iphone, Mobile, resource, Resources, template, twitter, web, web design
Posted in Design, Photoshop

24
Jan
2012

This Week on CodeVisually

We recently launched CodeVisually, our site that focuses solely on resources and tools for web developers and offers a simple solution to painlessly find the resource needed and fast.

Here are our favorite webdev resources from the past week: