Custom Property of CSS – Variable in native CSS

Custom properties are the wonderful new features of CSS with extensive support in contemporary browsers. A custom property name that is pre-fixed with ‘–’ like, –heading-color: #00ff00; and are accessed using the var() function. For example color: var(–heading-color);

Previously we have been using variables with CSS preprocessor like Sass and Less, now variables have … Continue reading “Custom Property of CSS – Variable in native CSS”

CSS3 Basic UI module – working draft published by w3c

W3c published a working draft of CSS basic module level 3 on 10th March 2015, where they have extends user interface related features from the selectors, properties and values of CSS level 2. These UI related selectors, properties and value are proposed for CSS level 3. Note: it’s a working draft may change in the … Continue reading “CSS3 Basic UI module – working draft published by w3c”

CSS3 Animation – Hover effects on icons

On the name of animation, flash automatically pops up in the mind, but flash is no longer required to create web-based animation. There are many stunning examples of CSS3 animation. Here, I have come up with the hover effects on the icons. These icon effects can easily be used by just copy paste in the … Continue reading “CSS3 Animation – Hover effects on icons”

Some cool CSS selectors’ addition in selectors level 4 – The future

The web is constantly evolving, Some modules of CSS3 has just started making its way, specs are still in development process and more advance level CSS modules have been drafted to evolve it further, which is being referred as “Selectors level 4”. Selectors have been with us since the beginning of CSS. Most awaited selector … Continue reading “Some cool CSS selectors’ addition in selectors level 4 – The future”

Performance improvement by writing efficient CSS selector

The web is moving from desktop to mobile and performance has become the key focus area in web development. All the UI Developers try to write maintainable, semantics and efficient CSS. But when UI developer becomes dogmatic about the standards, it cost the performance. I don’t mean here that; following the standards degrades the performance. … Continue reading “Performance improvement by writing efficient CSS selector”

How to create retina-ready css based icons?

As a requirement comes up to create an icon, Photoshop or Illustrator pops-up immediately in mind. Making any changes in icon like changing style, size or color open the photoshop again and do the required changes. And if the required icon need to be used in a web apps for iPhone 4s and iPad 3, … Continue reading “How to create retina-ready css based icons?”

What, Why and How to create a future friendly responsive web design?

Web is not limited to desktop or laptop now, future of the web is much more broaden than even present. People are using internet in many devices like Mobile Phone, Tablet and I-pad. Internet usage is increasing in these devices now. The phone is no longer a tool to call or SMS only, people using … Continue reading “What, Why and How to create a future friendly responsive web design?”

Web site design approach and the older browser like IE6

IE6 is outdated but still widely used in the web developing world. We bitch about Microsoft decision to leave its browsers rotting for years and moan about the time we spend to fix the IE6 issues.  Being a UI Developer I will suggest not to support IE6, because while supporting, we feel shackled to the … Continue reading “Web site design approach and the older browser like IE6”

Don’t follow the W3c Standards blindly

It’s a common process for most of the UI Developer to create an HTML page and validates it with w3c validator, if it is passed then it’s done they are creating the standards compliant web page. It’s good to adhere with the standards defined by a community whose mission is to lead the web to … Continue reading “Don’t follow the W3c Standards blindly”

Come out of web-safe font use any font for your website

Typography is one of the important weapon for the designer to use, but when it comes to web, a designer is restricted with web-safe fonts only, because a font is an operating system resource, not a browser resource. You can see any font in your browser, which is installed in your machine. But if your … Continue reading “Come out of web-safe font use any font for your website”

How to make position fixed in IE6 using CSS only

There is big debate in the web community, to support IE6 or not, even Google has stop their support on their apps for IE6, but I always love to have fun with this buggy browser and try to make it function, but not pixel perfection. Though, there are number of issues in IE6 one of … Continue reading “How to make position fixed in IE6 using CSS only”