Viget Inspire, "an inspiring blog which discusses web design standards, trends and techniques", has an experiment on the uses of CSS3 box shadows.

The article shares 39 original uses of "box shadows" and it is a great showcase of what can be accomplished with this CSS3 property.

In order to create the effects, some examples have multiple box shadows and make use of other CSS properties like :before/:after, transition, webkit-keyframes, text-shadow and background-image: gradient.

Normalize.css is a set of CSS rules for forcing HTML elements to render more consistently across all browsers.

Compared to CSS resets, it doesn't reset all elements but leave the useful defaults and fixes various bugs.

The CSS file includes rules for a wide range of elements including the ones for HTML5 and well-documented (inline).

The developer mentions that Normalize.css shouldn't be an insert-and-forget resource, rather, it should be used as a customisable starting point on any project..

ProCSSor is a free web service for formatting and prettifying CSS files on the fly.

It can grab a CSS file by simply copy-pasting, uploading or mentioning the URL directly.

The service has many options to create an output that you'll feel ok with like "brace styles", right/left columns" or "indent properties".

At WRD, the previous tweet button for sharing stories was the cool Easy Retweet Button by John Resig. However, it was not perfect as, sometimes, it was unable to communicate with the URL shortener service and the tweet links were appearing buggy.

In search for a better one, I tested few others including the official tweet button. They were loading the links ok but had other issues like "loading slow", "blocking pages on load", etc.

And, for a button that is clicked by -maybe- 1/100 of the visitors, loading the scripts and making requests for every visitor didn't look like the smartest choice.

Here is another method, that is actually used at WRD now which loads very fast for everyone and almost fault-proof.

How it works?

First of all, the button is hosted locally and it does not make any requests until it is clicked.

• A link with the querystring that includes URL and the title of the web page is created, pointed to a server-side file (to be presented later in this article) and attached to any custom button we design.
• Once clicked, it sends the URL and title to the server-side file which creates the tweet link and redirects to Twitter with the tweet.

Read the rest of this entry »

As CSS3 is being used more everyday and there are already ways to CSS3-enable incompatible browsers, if not already, it is time to check what it offers.

Impressive Webs, a blog on web design, is featuring CSS3 Click Chart which enables us to easily find out the new CSS properties with examples.

By clicking to the "?" besides every example, you can see the codes used to create them, the description of the property and browsers supporting it.

Faary is a free web-based form builder that enables designing forms by simply defining them as text.

In order to better define how it works, an entry like:

• header,        Sign-up to Newsletter
• text,             *Your E-mail,email
• submit,        Send it!

will end up in a newsletter form with the title: "Sign-up to Newsletter ", an e-mail input which is required and a submit button.

The application supports every input type, client-side JavaScript validation and headers/sub-headers.

Once the details for the form is set, the output can be previewed and downloaded as a .zip file.

The Grid Accordion is an advanced accordion navigation that is built with jQuery.

It  works similar to most other accordions, only one cell is open at a time and handy for displaying detailed information about the items inside a grid.

The big thing is that the column of the current open cell expands to a reasonable reading width.

The accordion also makes use of CSS3 pseudo class selector :nth-of-type for styling the columns (which you can add extra class names to support non-CSS3-enabled browsers).

There is a beautiful demo provided which you can play with.

Every web designer and developer probably have bad memories with Internet Explorer. And this is mostly because the browser compiling (or used to do so) CSS properties differently compared to the standards.

IEcss.com is a website which helps us to better understand the reasons behind this incompatibility.

It shares a chart of user agent style sheets (CSS styles that are applied by default) for the major versions of Internet Explorer; IE6, IE7, IE8, and IE9 Platform Preview.

The chart includes values for almost every CSS property and they can be downloaded per browser.

This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.

In the first part of the Ultimate Magento Guide, we covered the back-end features of this open source e-commerce software. We also created a simple product and displayed it in our e-store.

Today we will focus on "customizing the basic layout of our e-store",  "what Magento Connect is” and "how we can install themes + extensions".

Let's Turn Off The Cache

Before heading to the customization, we will turn off the cache mode of Magento so that we can see our changes. Otherwise, Magento will keep showing the cached pages.

We can turn off the cache from our back-end. Go to System>Cache Management. Choose "disable" from the drop down menu which is an option in "All Cache". Follow the screenshot below if you are having some problem.

After disabling the cache, we will now change the name of our e-store which appears on many places (like after a new user registration). We can change it by going to System> Manage Stores, click the "Default Store View" and put the actual name of the store there just like “WRD E-Store”.

Read the rest of this entry »

This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.

In the process of launching an e-store, when it comes to choosing the right solution, you will get puzzled by the hundreds of solutions available.

The options range from simple and free shopping cart systems to complex and paid e-commerce softwares which can charge you for both getting and “keeping” your shop online.

However, there are some applications which offer great features but still free.

One of the best and open source e-commerce solutions available for free is Magento.

In the following comprehensive tutorial, we will see what are the benefits and drawbacks of using Magento as your e-commerce application. We will make a demo store and take a look on some basic and intermediate features of Magento. So what are we waiting for? Let’s get started.

Why use Magento?

Pros:

• free (absolutely free, no charges at all for community version)
• open source (you can even make it better by writing your own code)
• easy upgrades (automatic upgrades without loosing your customizations)
• extensions, plugins (enhance your Magento installation with plugins just like WordPress)
• very comprehensive theming system (custom themes for your store similar to WordPress)
• downloadable goodies support

Cons:

• resource intensive (yes, Magento needs a lot of memory in order to work efficiently but don’t worry, we will also learn how to fix it up to run Magento in low cost hosting solutions.)
• latest version of PHP not supported (Magento only works with PHP 5.2)

Read the rest of this entry »