Monday, 24 August 2009

CSS code structure for HTML 5: some useful guidelines

In this post I want to illustrate some useful guidelines about how to implement a well organized CSS code structure in view of introduction of HTML 5 markup language. They are not general rules but simple suggestions you can follow in order to improve the readability, manageability, and general organization of CSS code. These suggestions are especially useful if you have to work on complex CSS files that otherwise can be difficult to manage.


I prefer to separate CSS code in three distinct sections: a first section that contains general HTML tags; a second section that contains structure tags; a last section with custom classes.

Section 1: General HTML tags
In this section I divide the code in two subsections. A first subsection that contains code to reset HTML standard tags and a second subsection that contains code to redefine HTML standard tags.

Section 1: Subsection 1
How you know, regarding CSS reset, this practice is used to reset default browser styles for HTML standard elements (body, h1, p, ul, li, ...). One of the most popular files for CSS reset is the Eric Meyers CSS reset. For HTML 5 I suggest you to take a look at the Richard Clark CSS reset based on the Mayers file. These files reset all existing HTML tags and therefor contain a lot of lines of CSS code. In reality, in the majority of cases, the only frequently used tags that require to be reset are body, h1, h2, h3, p, ul, li, form, input and rarely table, tr and td. So if you prefer, you can use a shortened version of these files that includes only HTML elements you really used in your pages:

/* Subsection 1: CSS Reset */
body,
h1, h2, h3,
p, ul, li, form, input,
table, tr, td,
header, nav, article, section, dialog, figure, aside, footer {

border:0;
margin:0;
padding:0;
font-size:100%;
...
}

In the previous code I highlighted in bold some HTML 5 new tags you could need to reset (see after for a short explanation about them).

Section 1: Subsection 2
In the second subsection of the section 1 I simply redefine HTML standard tags:

/* Subsection 2: Standard HTML tags redefinition */
body,
form, input {
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

h1{font-size:24px;}
h2{font-size:18px;}
h3{font-size:13px;}

a:link, a:visited{color:#0033CC;}
a:hover {color:#666;}

If I need to define a standard tag (for example <h1>) with different properties depending on the position of the tag on the page (<h1> for post titles and <h1> for sidebar titles) I prefer to add the related CSS code into the section that contains structural tags (Section 2). For example, for the sidebar:

aside {...}
aside h1 {...}


Section 2: Structural tags
In this section I define all CSS elements that define the page structure. As I anticipated, HTML 5 introduces new tags that improve the semantic of the code. Some of these tags are: <header>, <nav>, <article>, <section>, <aside>, <footer>... You can use these tag instead of more common DIV layers we used until now (for example: <div id="nav">...</div>).
Shortly, the picture on the right represents a typical two columns layout that use HTML 5 tags to define page structure. If you want to know more information about this topic, I suggest you to take a look at these excellent articles:

- Smashing Magazine: HTML5 and The Future of the Web
- Steve Smith: Structural Tags in HTML5
- Lachlan Hunt: Preview of HTML5

CSS code is very simple:

header{...}
nav{...}
article{...}
section{...}
aside{...}
footer{...}

Practically it's identical to the code we are using with DIV layers:

#header{...}
#nav{...}
#aside{...} /* sidebar*/
#footer{...}
...

For each HTML element you can define its child elements. For example if this is the code for the navigation bar:

<nav>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</nav>

...the related CSS code is:

nav{...}
nav ul{...}
nav ul li{...}
nav ul li a{...}

As I said before, in order to improve code readability, I suggest you to use indented code, and alphabetical order to list properties of elements:

nav ul li a{
font-size:12px;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;
width:100px;
}

What changes respect to HTML 4? Not so much:

<div id="nav">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<div>

Simplifying, this kind of structural tags in HTML 5 are DIV layer with a specific ID in HTML 4:

#nav{...}
#nav ul{...}
#nav ul li{...}
#nav ul li a{...}


Section 3: Custom Classes
In the last section of my CSS files I add custom classes I can reuse in several sections (header, sidebar, footer,...).

/* Custom Classes */
.left-align{float:left;}
.red{color:#FF0000;}
.small-text-gray{color:#999; font-size:11px;}

That's all. If you have some suggestion about this topic please leave a comment, thanks!


 
CSS3 rounded corners for every browser

Read More

Saturday, 22 August 2009

Best 5 hand-drawn social icon set

Do you like hand-drawn style? Are you looking for some icons to improve the design of your website? Take a look at this collection that contains the best 5 hand-drawn social icon set in circulation.

Hand-drawn Social Media Icons (download)
This beautiful icon set, designed by Alex Latimer for WooThemes, comprising of 24 different icons, should cover most of the social networks that you frequent regularly and the default icon size has been set at 64 x 64 pixels.



Handycons 2 (download)
Handycons is a free, hand drawn social media icon set that contains more than 20 icons. Package contains Facebook, Blinklist, Feedburner, Flickr, FriendFeed, Furl, Gmail, Google, Heart icon, Last FM, Linked IN, Magnolia, Newsvine, PayPal, Skype, Sphinn, Twitter, Vimeo, Yahoo and You Tube icons. All icons come in four sizes: 16x16, 32x32, 64x64 and 12x128px.



Social Icons hand drawned (download)
Another beautiful set. The icons are available in the size: 24x24, 32x32, 48x48 and 64x6.



Free Hand Drawn Doodle Icon Set for Bloggers (download)
This set of free hand drawn doodle icons designed by Chris Spooner includes 14 graphics tailored specifically for bloggers. Including social media graphics for Delicious, Design Float, Digg, Facebook, StumbleUpon, Technorati and Twitter as well as commonly used icons such as RSS, Home, Comments, Contact and Wordpress.




FreeHand ColorStroked Icon Pac (download)
This pack includes many social media icons such as Delicious, Digg, Flickr, StumbleUpon, Technorati, Twitter and WordPress.




Related Posts
- 10 Beautiful icons set for web developers and designers
- Beautiful and free social websites icon set for bloggers
- 10 High resolution relaxing wallpapers for your desktop

Read More

Friday, 21 August 2009

Add a retweet counter on your website with ReTweet.com

Some time ago I wrote a popular post about how to integrate into your web pages a Tweetmeme button that shows the number of retweets received by a single post or page of your blog or website. In the past days a new service, similar to Tweetmeme, has been launched. This service is ReTweet.com that shows popular links being retweeted across Twitter and provides a simple widget that shows the number of retweets received by your posts.


You can quickly integrate into your site this widget, which shows a button with a counter, just in some seconds using two lines of JavaScript code. There are two versions of the button, big and small:

If you are a Blogger user find this code:

<b:includable id='post' var='post'>
<div class='post hentry'>

...and if you want to add the big button add immediately after the last row this code:

<script type="text/javascript">
url = '<data:post.url>';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

If you prefer the smaller button use this code:

<script type="text/javascript">
url = '<data:post.url>';
size = 'small';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

If you use another blogging platform and want to add a ReTweet.com button on your website the only thing you have to change from the previous code is the value of the var url. Take a look at the official page here.


Add a retweet counter on your posts with TweetmemeHow to install Disqus comments into BloggerImprove the default comment system with Google Friend ConnectAdd TwitThis on your Blogger templateAdd Digg vote button on Blogger Template (update)Add delicious button with counter in your blogger postsPlace Google AdSense below post's title on BloggerAdd StumbleUpon button in your Blogger postsAdd reddit button with counter in your Blogger template Add Technorati blog reaction on your Blogger templateAdd Mixx button on Blogger templateAdd DZone button on Blogger templateAdd Design Float button on Blogger templateSome Blogger Tips you probably don't knowAdd Yahoo! Buzz button on Blogger Template

Read More

Elegant ScrollPanes with jQuery and CSS3

Some day ago I twittered a link about TweetTab a nice on-line service (similar to Monitter) to monitor in real time Twitter trends and custom searches. I like the design of TweetTab, clean and simple and I like in particular scrollpane used in each search tab. Take a look at this screenshot of TweetTab for a preview of the scrollpane used:


Some readers of woork asked to me how to implement that kind of scrollpane in their web projects. This is very simple using jSrcollPane, a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style.
I prepared a simplified version ready to reuse in your project using jQuery and some lines of CSS3 code. You can download the source code here .





Step 1. HTML code
First of all, you have to include jQuery and jScrollPane into the <head> tag of your web page:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>

Now create a DIV element into the tag <body> of your page. This layer will contain a certain number of child elements, for example &lt;p> tags:

<div id="section-scroll" class="scroll-pane">
<p> ... </p>
<p> ... </p>
<p> ... </p>
<p> ... </p>
</div>

<p> elements are contained into the div with id="section-scroll". You have to set a CSS class .scroll-pane with this properties:

.scroll-pane {
width: 400px;
height: 250px;
overflow:auto;
}

It's important set a fixed height and the property overflow to "auto". This is the result:


Now add this JavaScript code below the inclusion of jScrollPane (in the <head> tag) to initialize the script for the layer with ID="section-scroll":

<script type="text/javascript">
$(function()
{
$('#section-scroll').jScrollPane();
});
</script>

You can also use this script with multiple elements in the same page. The only thing you have to do is create several layers like this:

<div id="section-scroll-1" class="scroll-pane"> ... </div>
<div id="section-scroll-2" class="scroll-pane"> ... </div>
<div id="section-scroll-3" class="scroll-pane"> ... </div>

...and change the previous JavaScript code to initialize the ScrollPane for each element in this way:

<script type="text/javascript">
$(function()
{
$('#section-scroll-1').jScrollPane();
$('#section-scroll-2').jScrollPane();
$('#section-scroll-3').jScrollPane();
});
</script>


Step 2. CSS Code
Now take a look at CSS code. I prepared a very basic code you can quickly customize in your web projects. I used border-radius property to design HTML elements with rounded corners. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer. I already wrote this post about how to solve this problem with every browsers I suggest you to read.

.scroll-pane {
width: 400px;
height: 250px;
overflow:auto;
float: left;
}

/*JScrollPane CSS*/
.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
padding-right: 20px;

}
.jScrollPaneTrack{
position:absolute;
cursor:pointer;
right:0;
top:0;
height:100%;
}
.jScrollPaneDrag{
position:absolute;
background:#CCC;
cursor:pointer;
overflow:hidden;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}

.scroll-pane{padding:0;}
.scroll-pane p{
-moz-border-radius:6px;
-webkit-border-radius:6px;
background:#232323;
padding:12px;
color:#CCC;
font-size:14px;
line-height:16px;
}


The final result is something like this:


You can change it how you prefer for your web sites. That's all! Download the source code.
For other information about jScrollPane, thake a look at the official page.


CSS3 rounded corners for every browserHow to implement a news ticker with jQuery and ten lines of codeHow to implement a launching soon page with PHP and jQueryHow to implement a Post-to-Wall Facebook-like using PHP and jQuery

Read More

Thursday, 20 August 2009

Beautiful sets of environment and nature icons

Are you looking for some interesting new icons for your next web project related to environment and nature? Take a look at this collection of some awesome sets of professional icons. A large part of these icons are not totally free but their price is not so expensive respect to their high quality and affordable for everyone.


Gaia 08-09
Climate change and the conservation of our planet is one of the most impartant issues facing us today. Inspired by Live:Earth, a group of Customize.org members tried to find a way of contributing their own part with this beautiful icon set. You can find the new icon set Gaia 09 here.



Environment - Set 72 (download)
This is definitively one of my preferred icon set available on myVectorStore.



Green Icons (download)
A nice set of icons representing the human responsibility to help protect our environment.



Satin Environment and Nature Icons (download)


Environment icons (download)
Another beautiful green icon set.


Tulliana 2 (download)
These icons designed by Umut Pulat are not strictly related to the environment and nature but colors and some characteristic of their design are particularly suitable for this topic.



Environment Icons by Alexey Potapov (download)
An elegant and essential icon set designed by Alexey Potapov.



Environment set by niclienos (download)
This set of icons designed by niclienos is another of my preferred set.



Environmental & Green Energy Icons Set (download)
Environmental & Green Energy Icons Set on white background for Adobe Illustrator.



Eco Design (download)

EPA Icons (download)
A set of rounded icons by the United States Environmental Protection Agency.



WP WooThemes Ultimate Icon Set (download)
This is a nice set with some icons nautre-inspired.

Read More

Starting a freelance career: revenues estimating and time management

Starting a freelance web designer/developer career is an exciting challenge to attempt. In this post I want to reply to several requests I received in the past about this topic, in particular how to estimate potential revenues and manage time during the start-up phase of your freelance activity.

Revenue estimating
A frequently asked question is: how much can I earn in one year with my freelance activity? Find an answer to this question is not simple because there are a lot of factors that affect your potential revenues, for example: market conditions, your commitment, your appeal to attract customers, competitors, ...

Some of these factors can't be directly controlled by you (for example market conditions and competitors) and require a complex analysis that, in this post, is not in scope. Anyway, elaborate a realistic estimate of your potential revenues could be not so simple... but you can quickly find an answer in two simple steps.

Step 1. Try to think in this way, asking you: "What could be my monthly target in terms of revenues?". This value is simple to determinate analyzing your needs and defining a realistic value, for example $ 1,800/month.

Step 2. Then: What's the effort I have to spend to reach that value?

The leverages you can use to reach your monthly target value are fundamentally two: the quantity of projects on which you can work on during a month and the fixed price for each project. For example, if you want to reach a monthly value equal to $ 1000 consider the following two scenarios:


In the first scenario (high quantity - low price), you decide to fix a low price ($ 100) for your services but consequently you have to work on a lot of projects during a month (10) to reach the expected value in terms of revenues ($ 1000).
In this case, other things being equal, you have a big advantage respect to your competitors: you offer the same their services (with the same quality, this is absolutely important) at a lower price. This is a recommended strategy during the start-up phase in order to attract new customers, offering them a more attractive price respect to your competitors. But, how much lover should be the price of your services respect to other competitors? Lower, but not too lower. Why?
First is a question of credibility. In some situations a price too low is perceived as lack of quality of a product or service. Second, if you set a price too low, the only way to reach your monthly target revenue is to work on a too large number of projects. The problem is if you are able to work simultaneously on a lot of projects! The risk is not be able to respect milestones and contribute consequently to create a bad reputation of yourself. Neither you can think to work seven days a week for twenty-four hours a day!

In the second scenario (low quantity - high price), you decide to fix a high price ($ 500) for your services and consequently you can work on not many projects during a month (2) to reach the expected value in terms of revenues ($ 1000).
The problem is that a "high price" could mean a higher price respect your competitors. In this case, you have to be able to offer to your customers a sensible value added in your services respect to market standard. But have you the necessary credibility and reputation to do it during the start-up phase? Probably you have not!

All things considered, a good balance between all these aspects is necessary for a realistic estimate of your potential revenues. I suggest you to use this very simple approach: define the average number of projects on which you can work on during a month, for example two projects/month; then define the average price for each website, for example $ 900US/website. Each month you average revenue will be 2 x $ 900 = $ 1,800. Your average annual revenue will be $ 1,800 x 12 = $ 21,600.



What could be the problem whit this estimate at first sight? Probably this linear and constant trend will be difficult to reproduce in the real life and find two new projects every month (twenty-four projects/year) could be a hard challenge, if not almost impossible. But not let discourage you and try to adjust your first estimate.


Time management during the start-up phase
Another important aspect to consider, if you decide to star a freelance career, is you can't think to dedicate 100% of your working time only implementing code. Especially in the first months, during the start up of your activity, you have to dedicate a large part of your time searching new customers and managing relationships whit them. This time-consuming activity is very important for two aspects: first, no clients, no job; second, maintain good relationships with your clients is a crucial point to establish long-term relationships and take further opportunities whit them.

If you are freelance looking for take a look at these useful online resources where you can find interesting job proposals:

- oDesk
- GetAFreelancer
- Guru
- Elance

Good luck!

Related Posts
- Structured process you have to know to develop a web application
- How to manage a small web project: a simple approach
- Simple process to estimate times and costs in a web project
- The Deming Cycle: an application to web design

Read More

Wednesday, 19 August 2009

Fresh resources for web developers you can't miss

This week I found some interesting fresh resources for web developers I want share with you. This list includes an awesome MooTools slider, a free on-line service for cross-browser compatibility testing, a jquery plug-in to implement a notification system (for example Facebook-like) and other interesting links. Take a look and add a comment to suggest other resources.


SlideItMoo 1.1
SlideItMoo is a great slider for MooTools that supports: continuous navigation, elements selection based on CSS selector, direction control (-1: enter from left; 1: enter from right), mouse wheel navigation, effect duration as parameter (when autoslide is enabled, the duration between slides is the sum of the effect duration and the slide duration )


Beautiful jQuery Slider
This tutorial explains how to develop a beautiful jQuery slider. The result is really awesome.

Adobe BrowserLab
Adobe BrowserLab is the perfect on-line solution for cross-browser compatibility testing. It supports, Internet Explorer 6-7, Firefox 2-3 on Windows XP and OS X. It's very useful and fast to rendering pages.


Password Strength
Password Strength is a jQuery plug-in that tries to calculate how many possibilities the hacker needs to try to guess your password.


Growl for jQuery
Growl (for the net & jQuery) is a simple notification system inspired by Growl for the Mac OS X. You can use it to implement a notification system Facebook like.

Mootools Link Tweaker Class
Link Tweaker is a tiny Mootools class to add distinct styles (of your choosing) to external links and/or various types of file download links.

If you want to suggest a new resource please leave a comment, thanks!

Related Post
- Interesting Code Highlighters for blogs and websites
- 10 Useful resources for web designers and developers
- Practical solutions to hyphenate text on web pages
- 10 Useful code snippets for web developers
- Twitter API: How to create your own Monitter with PHP and jQuery
- Ultra versatile slider for websites
- Simple images slider to create Flickr-like slideshows

Read More

Tuesday, 18 August 2009

How to implement a mobile version of your blog in three simple steps

After launching of the mobile version of woork I received a lot of messages from my readers that asked to me to dedicate a special post about this topic. So in this post I want to illustrate you a simple way to implement a mobile version of your blog/website in three simple steps using Mobify.me, an awesome on-line service that allow you to design mobile versions of a website just with some clicks.


Step 1: Select sections for your mobile layout
First thing to do is to create an account on Mobify.me. It's simple and free. Than you have to choose the URL of the website you want to "Mobify". It appears an interface that allows you to choose sections to add to the mobile version of your website. The only thing you have to do is to pass your mouse over a section (red borders appear automatically around the section) and click on to select it:



Remember that, in order to improve readability, templates for a mobile device have to be simple, preferably with a single-column layout. I suggest you to select only the section that contains your posts (selected in red in the previous image). You can add the header and footer in the next step using the Design view that allow you to have more control over the CSS and HTML code.

Step 2: Design CSS + HTML code
At this point you are ready to customize the layout of your mobile template using the Design view and adding for example a custom header and footer. How you can see in the following image, Design view is divided in two parts:



Left section contains the CSS code and right section a preview in real time of your website (you can choose several mobile devices such as iPhone, Nokia, BlackBerry). To customize header and footer choose the related link on the right menu. This is the window that appears:



You have only to add some lines of HTML code and press "save and close". Then you can add CSS code to customize all HTML elements of your template using the left section of the Design view:



How I said all changes you make to your code are in real time, so you can see how your template looks immediately in the right section of the Design view. When your code is ready click on the button save to save your mobile template.


Step 3: Publish your website
Now you are ready to publish the mobile version of your website. Publishing is very simple. You can publish your blog using your hosting service or directly Mobify.me hosting choosing an URL like this: http://yourname.mobify.me (if you use Blogger this is the best solutions!).

At this point you have to add in the tag <head> of your original template some lines of JavaScript code that allows to redirect visitors that use mobile devices to browse your website. The code is very simple:

<script type="text/javascript" src="http://yourname.mobify.me/mobify/redirect.js"></script>
<script type="text/javascript">try{_mobify("http://yourname.mobify.me/");} catch(err) {};</script>

Save your template and don't forget to publish it otherwise the redirect doesn't works! Ok, your mobile version is now ready! Take a look at the final result trying to load your website from a mobile device. Simple no? And also free! Try to take a look at the mobile version of woork loading woork from your mobile device and tell me what you think about.

Any suggestion about this topic? Please leave a comment, thanks!

External Links
- Mobify.me

Related Posts
- The mobile version of Woork is on-line with Mobify.me

Read More

Monday, 17 August 2009

Say hello to the new template: Cordite

Hello everyone! I'm very, very excited... this evening I released the new template of woork called Cordite. How you can see, the structure of the blog is the same of the previous version (three columns) but I changed almost totally the design by following all suggestions I received from you in the past months. In particular I dedicate a lot of time to improve the readability of the pages. I changed the font (from Lucida to Arial), I added a section with some clean icons reserved to Twitter, my RSS feeds and finally I added a decent footer! I hope you'll like the final result (and remember... this is Blogger not Wordpress!).

I also want to anticipate some news that will come in the next months. Actually I'm working to a new section dedicated to podcasts and I'm going to launch a network of websites called shweps... subscribe to my RSS feed to stay updated!

And now it's your time... what do you thing about the new template? Leave your comments, thanks!

Read More

Sunday, 16 August 2009

The mobile version of Woork is on-line with Mobify.me

Hello everyone, some interesting news from Woork. I just released the mobile version of my blog. Now you can read this blog more easily using your favorite mobile device (you'll be redirected to the mobile version at this link: http://woork.mobify.me/)
To implement the mobile version of Woork I used a great free service called MOBIFY that provides websites with seamless, integrated mobile views. It lets publishers quickly monetize mobile users and gives web designers a powerful mobile toolkit. MOBIFY is compatible with thousands of devices, integrates with most web publishing platforms and is free to use.



If you are looking for an awesome free service on-line to create the mobile version of your website or blog quickly and for free you can't absolutely miss this service (http://mobify.me/).

Related Posts

Read More

Saturday, 15 August 2009

Practical solutions to hyphenate text on web pages

In this post I want to suggest you three simple and useful ways to hyphenate text on your web pages using JavaScript or PHP. If you take a look at W3.org documentation you can find this explanation about hyphenation:

"In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur. Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character. For operations such as searching and sorting, the soft hyphen should always be ignored."

To hyphenate text I found the following practical solutions:

Hyphenator.js
This script automatically hyphenates texts on websites and runs on any modern browser that supports JavaScript and the soft hyphen (&shy;). It runs on the client in order that the HTML source of the website may be served clean and svelte and that it can respond to text resizings by the user. The result is really great:



The usage of this script is really simple. You have to include the script into your pages in the <head> tag:

<script src="hyphenator.js" type="text/javascript"></script>

...then you have to invoke the script adding this code after the previous code:

<script type="text/javascript">
Hyphenator.run();
</script>

...and use this HTML code to active hyphenation:

<p class="hyphenate text" lang="en">
Your text here...
</p>

Take a look at this example for a live preview.

You can also choose the language changing the property "lang" (actually the script support 16 languages, for the full list take a look here).


phpHyphenator
The phpHyphenator is a PHP port of the JavaScript hyphenator.js by Mathias Nater for automatic hyphenation in web pages using soft hyphens. The hyphenation algorithm needs large pattern files for doing the hyphenation and and using JavaScript can slow down page loading. PHP instead is doing hyphenation directly on the server wihtout sending the pattern files to the client.


Online Soft Hyphenation Generator
You can also try this interesting on-line HTML Soft Hyphenation Generator a configurable automatic hyphenation (soft or hard) generator for HTML text based on phpHypenator.




Any suggestion about this topic? Please leave a comment, thanks!

Read More

Friday, 14 August 2009

CSS3 rounded corners for every browser? An alternative quick solution without headache

In the last weeks I frequently received a question about how to use CSS3 border-radius property to draw HTML elements with rounded corners in Internet Explorer. How you know CSS3 border-radius property is natively supported in Safari, Firefox and Chrome but for some mysterious reason this property is not supported in Internet Explorer.

So to draw rounded corners in IE you have to use some trick, for example using CSS classes with a background image (take a look at this post).


The simpler and quick solution I know to draw rounded corners in every browser is to use a mix of CSS3 and JavaScript. CurvyCorners is a free JavaScript library for creating gorgeous rounded corners for HTML elements. The final result looks like this:



The big advantage of this script is that lets render rounded borders in Safari, Chrome and Mozilla (which support rounded borders via -webkit-border-radius and -moz-border-radius) natively with CSS3 property and in IE and Opera with JavaScript.

The only thing you have to do is to include curvycorners.js into the <head> tag of your page:

<script type="text/javascript" src="curvycorners.js"></script>

Then you have to write a CSS class like this:

.roundedCorners{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;

/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}

At this point add the following code into the <head> of your page, after the previous CSS code:

<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var setting = {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}
</script>


tl, tr, bl, br are: top-left, top-right, bottom-left, bottom-right borders.

If you have different CSS classes (ex. roundedCorners, roundedCorners_1, roundedCorners_2) you can apply them changing the previous code in this way:

...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...


Now if you want to apply rounded corners to a DIV element use this code:

<div class="roundedCorners"> </div>

This is the result in every browser:


I think this is actually the simpler and quick solution to implement rounded corners in every browser. Ok... and what's if JavaScript is disabled? Sincerly I think this case is not so frequent... but if you don't want to use JavaScript, the most realiable solution is to use CSS classes with background images. Any suggestion about this topic? Please leave a comment, thanks!

Download the source code here:




 
Liquid styled input element with CSSClean Tab Bar Digg-like using CSSLiquid expandable section with rounded corners using CSSLiquid layer with rounded corners using css

Read More

Wednesday, 12 August 2009

How to install Disqus comments into a highly customized Blogger template

In the past weeks I switched from Blogger comments system to Disqus. I like this service that provides (for free) a powerful and versatile comments platform, actually the best available for Blogger. In the past days some readers of my blog, that decided to pass to Disqus, wrote me saying to have encounter several problems during the integration process with their Blogger template.
In particular, comments didn't appear in their pages.
I had the same problem when I added Disqus to my template. I think the problem is due to the use of highly customized Blogger templates (for example like my template). In this case, if you encounter this problem, try to install Disqus choosing Generic code (not Blogger!) from the menu you find in Admin > Tools:




Follow all related instructions... the only thing you have to do is to add into your Blogger template some lines of code like these:

<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/your_account/embed.js">
</script>

...

Now save all changes on your template and try to if it's all ok!


Add a retweet counter on your website with ReTweet.comAdd a retweet counter on your posts with TweetmemeImprove the default comment system with Google Friend ConnectAdd TwitThis on your Blogger templateAdd Digg vote button on Blogger Template (update)Add delicious button with counter in your blogger postsPlace Google AdSense below post's title on BloggerAdd StumbleUpon button in your Blogger postsAdd reddit button with counter in your Blogger template Add Technorati blog reaction on your Blogger templateAdd Mixx button on Blogger templateAdd DZone button on Blogger templateAdd Design Float button on Blogger templateSome Blogger Tips you probably don't knowAdd Yahoo! Buzz button on Blogger Template

Read More

Slicejobs: Compare the best slicing services or promote yourself for free

Today I want to suggest you this new website called Slicejobs made to assist designers in chosing the right slicing freelancer and company to turn photoshop-design into html/css template.
Freelancers and companies that offer slicing services can sign up for free and define their own specific rates. This way, when a visitor shows up, looking for slicing services, their information and calculated rates will be displayed on the fly.



If you are looking for the services of a slicing artist or agency for your website’s needs all you have to do is visit the site and over a few weeks, you can easily compare the services of numerous slicing providers based on your personal needs.

If you are a freelance slicer, web designer, web coder or agency owner, all you have to do is register at the site so you can showcase your services and designs to attract more clients who are looking for your services. This is one fast and easy way to keep your hands filled with projects at no cost (only a few minutes of your time to set up an account).

Slicejobs will officially launch at the first of September.

Read More

Tuesday, 11 August 2009

10 Useful resources for web designers and developers

Today I want to present you a selection of some useful resources for web designers and developers. This list contains in particular some awesome fonts, a simple PHP Content Management System, a JavaScript Cart, a PHP application for job boards, a weekly calendar (Google Calendar like, made with jQuery), an open source knowledge base application and interesting links with jQuery and MooTools plugins.


1. 52 Really High Quality Free Fonts For Modern And Cool Design
This post contains a great collection of awesome fonts



2. Beautiful New Free Fonts For Your Designs
In this collection Smashing Magazine presents high-quality fonts: Calluna, Andika Basic, Mentone, Sovereign Regular, Medio, Tiresias Infopoint and many other high-quality free fonts.

3. GetSimple CMS
GetSimple is a powerful and very simple CMS that has everything your client needs, and nothing a CMS doesn't.

4. SimpleCart(js)
No databases, no programming, no headaches. SimpleCart(js) is a simple javascript shopping cart in under 20kb that you can setup in minutes. It's lightweight, fast, simple to use, and completely customizable. All you need to know is basic HTML.

5. jQuery Week Calendar
The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

6. JoobsBox
JoobsBox is the most flexible software for job boards, allowing community expand it to unlimited needs. Plugins and Themes allows you to extend JoobsBox to do almost anything with your job board.

7. jCryption
In short words jCryption is a javascript HTML-Form encryption plugin, which encrypts the POST/GET-Data that will be sent when you submit a form.

8. 68Kb Knowledge Base Software
68KB is an open source PHP MySQL driven knowledge base script. Built with you in mind to make it easy to configure and setup.

9. Moowheel
The purpose Moowheel is to provide a unique and elegant way to visualize data using Javascript and the <canvas> object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise. The script is licensed under an MIT-style license.

10. SlideItMoo
SlideItMoo is a simple MooTools plugin to display thumbnail images of your gallery. It can slide either by mouse wheel scroll or by clicking the arrows on the left and/or right.

Read More