Design-Notes

Best jQuery Rounded Corner Plugin

alexandra — Tue, 02 Mar 2010 15:47:55 +0000

When I say I found the best rounded corner solution, you have to trust me, cause I have tried numerous solutions and scripts. Finally I found one works on all browsers, including stupid IE !!

JQuery Curvy Corners

The author recently updated the plugin:

As from 2.0.x, CurvyCorners allows you to put rounded corners on your page elements using CSS.

This means CSS3 for mozilla and safari will work on IE as long as you link the Curvy Corners plugin. You don’t event need to write anything in java script !!

CSS3

.rounded {
  -moz-border-radius-topleft:3ex;
  -moz-border-radius-bottomright:3ex;
  -webkit-border-top-left-radius:3ex;
  -webkit-border-bottom-right-radius:3ex;
}

Check it out!!

ADD TO If this helps, why not tell your friends?

Using jQuery to Parse XML data

alexandra — Tue, 23 Feb 2010 20:53:48 +0000

I love jQuery. It made things so much easier. if you still don’t much know it, you can read about more amazing features on their official jQuery site. Also there is a easy way to parse XML data with jQuery and here it is.

First, Include jQuery

The best way to include jQuery these days is using google Ajax Library
URL for jQuery is here:
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Load XML with jQuery

My xml file is test.xml which I got from W3C XML tutorial

$.ajax({ type: "GET",
    url: "test.xml",
    dataType: "xml",
    success: parseXml
  });

XML file:

 version="1.0" encoding="ISO-8859-1"?>
>
  >
    >Empire Burlesque>
    >Bob Dylan>
    >USA>
    >Columbia>
    >10.90>
    >1985>
  >
 
 
>

A Function to Parse XML

function parseXml(xml)
{
  //find every Tutorial and print the author
  $(xml).find("cd").each(function()
  {
   $("#tiles").append(": " + $(this).find("title").text() + "
");
  });
 
}

ADD TO If this helps, why not tell your friends?

Easily Get Ruby on Rails to Work with MySQL

alexandra — Mon, 15 Feb 2010 23:56:46 +0000

Lately I started experimenting with Ruby on Rails. I found it was very difficult to get RoR work with mySQL since RoR is using SQLite instead. I went through some a couple of dreadful tutorials but could not get it working. Then I finally found out a way from a friend. So this tutorial will show you how to easily install and get MySQL to work with RoR on Mac OS leopard.

1. install MacPorts

Go through the installation wizard once you have downloaded it.

2. Run this code in terminal

sudo port install rb-mysql

3. Possible Error

You might get an error
port command not found
No worries. Just run this three lines in terminal.
export PATH=$PATH:/opt/local/bin export MANPATH=$MANPATH:/opt/local/share/man export INFOPATH=$INFOPATH:/opt/local/share/info

Finally, sit back and wait until everything is fully installed. Be patient!
It will automatically install

Rails 2.3.5
ruby 1.8.6
gem 1.3.5
Mysql(5.1)

ADD TO If this helps, why not tell your friends?

Where to learn Ruby on Rails?

alexandra — Fri, 05 Feb 2010 17:02:20 +0000

Ruby on Rail is a very flexible web application framework for the Ruby programming language. Tim O’Reilly ( Founder of O’Reilly Media) describe it :

“Ruby on Rails is a breakthrough in lowering the barriers of entry to programming.
Powerful web applications that formerly might have taken weeks or months
to develop can be produced in a matter of days.”

Four Ways Ruby on Rails Can Help You

Curious on what ruby on rails can do? check this article out!!

Beginner’s Guide To Ruby On Rails

How to Create a Blog from Scratch Using Ruby on Rails

10 Useful Tips For Ruby On Rails Developers

The Ruby Show

ADD TO If this helps, why not tell your friends?

Resume Design Showcase and Tips Round Up

alexandra — Fri, 29 Jan 2010 18:10:03 +0000

It’s almost the season for hiring. For those who are looking for hiring opportunities. Do you have your new Resume/CV ready? Here are some great articles and examples to help you. Enjoy!!

Give your resume a creative boost

36 Beautiful Resume Ideas That Work

Beautiful Design Resumes & their Matching Portfolio Sites

How To Create A Great Web Design CV and Résumé?

5 Examples of Beautiful Resume/CV Web Templates

ADD TO If this helps, why not tell your friends?

Weekly Inspiration: 14 Excellent Logo Designs

alexandra — Mon, 25 Jan 2010 15:36:39 +0000

Logo design is the most difficult of all for me. Therefore I alway keep an eye on new designs and ideas. My favorites from today’s logos are “BISTRO 1689″, “PASTA” and “MOON” : ) Hope you like them too!!

Bistro 1689

Aviation Project

Graphic studio

Pasta

Smile

Moon

M:2

Comedy convention

Sofa Manufacture

Finance Company

Designer Portfolio

Online Wine Database

Canadian natural resource exploration and development company

Software

ADD TO If this helps, why not tell your friends?

Dynamic CSS Button with Pressing Effect

alexandra — Fri, 15 Jan 2010 16:11:32 +0000

People always get excited for a little interaction on web pages. So why not make the buttons look pressed when user press them? This little trick is extremely useful and popular. Recognize this button below?

Right, its from the very famous TWITTER.
You can also see a Demo of this tutorial.

Design your buttons

First design the buttons in photoshop or fireworks, so you have a rough idea on how big they should be. Then slice the buttons into right middle and left sections like this

Dynamic width buttons

Write your html and use SPAN to hold extra images.
HTML

 
      Button1
      Button2 test 
      Bu3

CSS

body {
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
 
	line-height:1.4em;
}
a {
	color:#cc0000;
	text-decoration:none;
}
ul li {
	float:left;
	display:block;
}
ul li a {
	color:#cc0000;
	font-size:23px;
	font-weight:bold;
	display:block;
	float:left;
	padding:11px 0 13px 0;
	background:url(images/gray-mid.png) repeat-x;
}
ul li span.left {
	display:block;
	float:left;
	width:13px;
	height:40px;
	background:url(images/gray-left.png) no-repeat;
}
ul li span.right {
	display:block;
	float:left;
	margin:0 20px 0 0;
	width:13px;
	height:40px;
	background:url(images/gray-right.png) no-repeat;
}

At this part I found the height of the button looks different in Firefox browsers.

This is when some CSS hacks on firefox come handy.
You can read more on firefox browser hacks.

ul li a, x:-moz-any-link, x:default {
padding:11px 0 12px 0;
}
 
/* Target Firefox 2 */
ul li a, x:-moz-any-link {
padding:11px 0 12px 0;
}

Hover

Apply a gradient from light to dark to those already sliced pieces and name them differently:

ul li:hover span.left {
	background:url(images/gray-left-hover.png) no-repeat;
}
ul li:hover span.right{
	background:url(images/gray-right-hover.png) no-repeat;
}
ul li:hover a {
	background:url(images/gray-mid-hover.png) repeat-x;
}

Active

Active is when you press the button.
Flip the hover images vertically, so they looks pressing in.

ul li:active span.left{
	background:url(images/gray-left-active.png) no-repeat;
}
ul li:active span.right {
	background:url(images/gray-right-active.png) no-repeat;
}
ul li:active a {
	background:url(images/gray-mid-active.png) repeat-x;
}

ALL DONE !!

ADD TO If this helps, why not tell your friends?

11 Excellent FREE Fonts for Corporate Branding

alexandra — Wed, 13 Jan 2010 17:31:51 +0000

Bold and clean is always a good choice for branding. Font is the most important element when designing a brand or logo. Here I collected several FREE fonts which are good for branding design. I have used some of them and got very good feedback. Hope you like them too!