UI Design: Wireframe, Mockup and Prototype

There is a huge misconception about the actual meaning behind words such as wireframe, mockup, and prototype. They are considered by most as a method to show a design. The UI design process The UI design process goes from wireframing to mockups to prototyping, with variation in fidelity for each stage. The prototype is interactive while… Continue reading UI Design: Wireframe, Mockup and Prototype

CSS Browser-Specific Hacks

What is this? Browser hacks is an extensive list of browser specific CSS hacks from all over the inter-webs. CSS hacks are needed in order to solve problems caused by different browsers rendering. How to? Pick the hack you want. Copy it into your stylesheet. Add the style you want between the braces. Enjoy the new styles for… Continue reading CSS Browser-Specific Hacks

Published
Categorized as UX/UI

CSS3 Selectors Module Part-3

This is the last blog in my tri-series on CSS3 Selectors Module. Please click on the link to read CSS3 Module Part – 1 and CSS3 Module Part 2. Positional Selectors :first-child – Selects every <p> element that is the first child of its parent first-child Selector Example: HTML <p>This content is the first child of… Continue reading CSS3 Selectors Module Part-3

Published
Categorized as UX/UI

CSS3 Selectors Module Part-2

In continuation of my earlier blog on ‘CSS3 Selectors Module’ in this second part, I will explain the concepts of Combinators and Attribute Selectors. Combinators There are four different combinators in CSS3 selectors: Descendant Selector(space) Direct Child Selector(>) Adjacent Sibling Selector(+) General Sibling Selector(~) Descendant Selector Example: HTML <p>The descendant selector matches all elements that… Continue reading CSS3 Selectors Module Part-2

Published
Categorized as UX/UI

CSS3 Selectors Module Part-1

INTRODUCTION A CSS selector is the part of a CSS rule-set that actually selects the content we want to style. CSS Syntax : CSS selectors are used to “find” (or select) HTML elements based on their element name, id, class, attribute, and more. W3C Proposed Recommendation: http://www.w3.org/TR/css3-selectors/ BASIC SELECTORS: H1 { } – The Element/Tag Selectors P… Continue reading CSS3 Selectors Module Part-1

Published
Categorized as UX/UI

Understanding CSS3 – Part 3

In continuation of my blog CSS3 (Part 1 and Part 2), in this blog, i.e. `Understanding CSS3 (Part 3)’, I will elaborate on the theme of modules: 3D Transforms Using with 3d transforms, we can move element to x-axis, y-axis and z-axis, The below example clearly specifies how the element will rotate. The rotateX() Method… Continue reading Understanding CSS3 – Part 3

Published
Categorized as UX/UI

Understanding CSS3 – Part 2

As mentioned in my earlier blog, CSS3 is a simple mechanism for adding styles, for example, fonts, colors, spacing, etc. to web documents. It is a collaboration of CSS2 with some new specifications, which we can call as modules. Given below are a few more modules. Shadows: Shadow Effects In CSS3 you can add shadow to… Continue reading Understanding CSS3 – Part 2

Published
Categorized as UX/UI

Understanding CSS3 – Part 1

CSS is a simple mechanism for adding styles, for example, fonts, colors, spacing, etc. to web documents. It is a collaboration of CSS2 with some new specifications, which we can call as modules. Given below is a list of styles with explanations on how to add the same: Rounded Corners. Border Image. Multiple Background. Gradient Shadow… Continue reading Understanding CSS3 – Part 1

Published
Categorized as UX/UI

Optimizing Codes with Object Oriented Cascading Style Sheets

Object Oriented Cascading Style Sheet (OOCSS) ensures that your code is reusable, fast, maintainable, scalable and efficient.  OOCSS style sheets are easy to add and maintain and helps us to avoid duplicating our code. To achieve this, you need to add multiple classes to each element in your HTML in order to give it modular… Continue reading Optimizing Codes with Object Oriented Cascading Style Sheets

Published
Categorized as UX/UI