designart

The mobile user experience encompasses the user’s perceptions and feelings before, during and after their interaction with your mobile presence — be it through a browser or an app — using a mobile device that could lie anywhere on the continuum from low-end feature phone to high-definition tablet. Creating mobile user experiences that delight users forces us to rethink a lot of what we have taken for granted so far with desktop design. It is complicated in part by mobile-specific considerations that go hand in hand with small screens, wide variations in device features, constraints in usage and connectivity, and the hard-to-identify-but-ever-changing mobile context. Dissecting the mobile user experience into its key components gives us a conceptual framework for building and evaluating good mobile experiences, within the context of a user-centered approach to designing for mobile . These components shape the mobile user experience — including functionality, context, user input, c...

Cool Typography Effects With CSS3 and jQuery Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with  CSS3 animations  and transitions and we’ll explore some of the possibilities. Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with  CSS3 animations  and  transitions  and we’ll explore some of the possibilites. We’ll be using   jquery.DG_lettering.js  in order to style single letters of the words we’ll be having in our big headlines. THE HTML The structure will simply be an h2 element with an anchor inside. We’ll wrap the headline in a container:      Sun Then we’ll call the jquery.DG_lettering.js plugin, so that every letter gets wrapped in a span. This example looks crazy: we’ll create a  text shadow  that “elevates” the...

On the occasion of Christmas and winter Holidays, I thought to wish this festival by create a nice webpage greetings. So, today I had created this Christmas greeting card using snow-fall effect with help of CSS3 and JavaScript. I hope you all will enjoy this holiday and my web-card too :). Today we will create a Christmas greeting card using CSS3 and jQuery. There are many things we can do with  CSS3  and javascript. We’ll use  snowfall.dg.js  for creating these snow. Features and Principle Note: Snowfall Plugin is Less than 12Kb in size. There are many options for customize and use this plugin as per your requirement. Some features are: No need to add any image for snow. No need to add any JavaScript library. You can use any html element in place of snow. Change the Color of Snow by using hexadecimal value. Also support in iPhone, iPad and Mobile devices. Snow-fall movement with...

Today, I will describe you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago, in order to achieve such effects, we used jQuery. But, as it turned out, CSS3 has all the necessary tools for making modal windows too. In our demonstration I have prepared single page with two popup elements: join form and login form. Welcome to  test results (domo)  and understand how it was made.  read more… HTML First, lets create the main HTML markup. As you can see – the structure is quite easy. Here are one panel with buttons and two popups. Each of them contains own overlay DIV element and popup DIV element with some content inside and ‘close’ button.   read more…

In this new article, you’ll learn how create a cool and usable CSS3 search box using the  HTML5    placeholder  attribute. For the browsers that don’t support this new HTML5 attribute, a fallback is created using Modernizr’s feature detection. Structure The  form  element is used as the wrapper, while the two inputs are used as search field and search button respectively. The HTML code         You may notice the  placeholder  attribute, but just ignore it for now, as we will talk later about it. The reason why there are so many id’s (instead of CSS3 advanced selectors as input[type="text"]  or  input[type="submit"] ) is because I wanted this to degrade gracefully for older browsers. The CSS Form wrapper #searchbox{         background: #eaf8fc;         background-image: -moz-linear-gradient(#fff, #d4e8ec);         background-image: -web...

When designing a pricing table for a product or service, your job as a web designer/developer is to make sure that the table is easy to understand, intuitive and clear. This way, you will help users to choose the best plan for theirs needs. So, in this article you’ll learn how to build an awesome CSS3 pricing table, with no images and minimal HTML markup. if you’re in a hurry, just check the   final result . The HTML               Enterprise $59         Sign up                     10GB Disk Space             100GB Monthly Bandwidth             20 Email Accounts             Unlimited subdomains                 ...   The CSS   #pricing-table {         margin: 100px auto;     ...