Category: Cascading Style sheet (CSS)
-
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); :root { –heading-color: red; –heading-bg: #a1a1a1; } H1 { background-color: var(–heading-bg); color: var(–heading-color); } Previously we have…
-
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…
-
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…
-
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…
-
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.…
-
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,…
-
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…
-
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…
-
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…
-
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…