Change Icon Color in Lightning Web Component

Lightning Web Component provides hundreds of standard icon to choose from this list. And Lightning Web Components like lightning-icon or button-icon can be used to choose these icons.

If we want to change background color of these icons then only colors we have are green, yellow, red or gray as per their variant success, warning , error or inverse.

If you ever try to change color of these icons using fill property, you would be disappointed. Lightning Web Component used shadow DOM to encapsulate components from outer world, same principal here restricts us changing icon background color.

Try yourself [Not Working]

Complete CSS 3 Tutorial – Transform Operations

Cascading Style Sheet (CSS) is the language used by all the web languages like ASP.Net, PHP, JSP or Velocity (Basically HTML) to control the display style of the elements without changing the code. With the help of CSS we can control the border width, color, background color, background image, font and so on.

With the help of CSS 3 other than just style now we can even animate, translate and do lots of stuff which were not possible by the CSS 2 and needed the help of other JavaScript library like JQuery UI.

In this tutorial we are going to learn different transform operations supported by the CSS 3.

The Transform operations are supported by IE 9, Mozilla, Google Chrome, Safari and Opera.

Live Demo – Click Here.

Categorized as HTML Tagged ,

CSS – label control ignores the width style

Label tag does not work with css attribute “width” on some browsers like Chrome and Mozilla.

Simplest solution is :
before applying css for width, make sure “float:left” is written for label control.

Label elements are in-line style elements, so technically Chrome and Firefox are interpreting the CSS properly by not obeying my width declaration. In-line elements do not accept width attributes. The workaround is to force the label element to become a block level element by floating it.


Create Pure CSS based Menu – Step by Step Tutorial

After a long time i am going to write the article on CSS and HTML.  In this tutorial i am going to create a pure CSS based Menu with description of lots of CSS property and problems faced by the web developer. One advantage of having CSS based Menu rather than  JavaScript based Menu is that it is very light weight and cross browse compatible. I have used CSS based Menu in my website

Live Demo – Pure CSS based Menu

Lets consider below HTML code on which we want to create a Menu.

Categorized as HTML Tagged ,

Complete CSS Selector Tutorial for the beginners

Below table displays that in how many ways we can select any element in CSS to style them.

*Any Element
AElement of Type "A"
A.redColorElement "A" whose class is "redColor"
A#IndiaElement "A" which have id as "India"
A[bar]Element "A" with attribute "bar"
A[bar="Mum"]Element "A" which have attribute as "bar" whose value is exactly equal to "Mum"
A[bar~="Mum"]Element "A" whose "bar" attribute value is a list of whitespace-separated values, one of which is exactly equal to "Mum"
A[bar^="Mum"]Element "A" whose "bar" attribute value begins exactly with the string "Mum"
A[bar$="Mum"]Element "A" whose "bar" attribute value ends exactly with the string "Mum"
A[bar*="Mum"]Element "A" whose "bar" attribute value contains the substring "Mum"
A:link, A:visitedElement "A" being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
A:active, A:hover, A:focusElement "A" during certain user actions
A::first-linethe first formatted line of an "A" element
A:targetElement "A" being the target of the referring URI
A::first-letterthe first formatted letter of an Element "A"
A::beforegenerated content before an Element "A"
A::aftergenerated content after Element "A"
A:nth-child(n)Element "A", the n-th child of its parent
A:nth-last-child(n)Element "A", the n-th child of its parent, counting from the last one
A:nth-of-type(n)Element "A", the n-th sibling of its type
A:nth-last-of-type(n)Element "A", the n-th sibling of its type, counting from the last one
A:first-childElement "A", first child of its parent
A:last-childElement "A", last child of its parent
A:first-of-typeElement "A", first sibling of its type
A:last-of-typeElement "A", last sibling of its type
A:only-childElement "A", only child of its parent
A:only-of-typeElement "A", only sibling of its type
A:emptyElement "A" that has no children
A:rootElement "A", root of the document
A:enabled, A:disableda user interface element "A" which is enabled or disabled
A:checkeda user interface element "A" which is checked (for example a radio-button or checkbox)
A:not(s)Element "A" that does not match simple selector s
A BElement "B" descendant of Element "A"
A > BElement "B" child of Element "A"
A + BElement "B" immediately preceded by Element "A"
A~BElement "B" preceded by an Element "A"

Read more from w3 org.

Drop a line if you have any feedback or question.

Telerik Controls – CSS Lost on Page Postback

After long time i am writing this tips on my blog.
This is very small but usefull trick about telerik controls.

Telerik controls like “Tree View”, runs fine in Internet explorer but it fails loading CSS in Mozilla or chrome. To overcome this, use below line of code in Page_Load method.

protected void Page_Load(object sender, EventArgs e)
RadTreeView1.EnableAjaxSkinRendering = true;

I hope this would help. 🙂

Vertically middle align the DIV tag using CSS

In this article, i will emphasize on the way of vertically align the text in DIV tag of HTML.

First note i want to share is that, DIV tag is not for the purpose to contain the texts. It is utilized mainly for the placing controls and components.

Below is two methods which will work on all browsers to vertically align the text in DIV  tag.

Steps for Method 1:

  1. Specify the parent container as position:relative or position:absolute.
  2. Specify a fixed height on the child container.
  3. Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
  4. Set margin-top:-yy where yy is half the height of the child container to offset the item up.
Categorized as HTML Tagged ,

Create Gradient Header using CSS

Many designers resist using header tags (H1, H2, etc.) on their Web pages because the spacing around the tags can break a tight page layout.

Create attractive headers in HTML using CSS
Create attractive headers in HTML using CSS

Heading tags (H1 through to H6) are given more weight by search engines than regular body copy. So they should be used wisely to reinforce the page’s overall keyword theme……By SEO

I have used header tags and applied some css effects, it easy to write with 10-12 line of css and html Output will look like image shown.

First we need to add a div tag to our html page to put header on it.

Css for div:

#container {
	background: #6699FF;
	margin: auto;
	width: 500px;
	height: 700px;
	padding-top: 30px;
	font-family: helvetica, arial, sans-serif;

We will use this as

Css for Header Tag..

h1 {
	 background: red;             /*Background color to header*/
	 background: -moz-linear-gradient(top, red, FFFFFF);
              /*from to colors, I have used simple name it can be replaced by color codes*/
	 background: -webkit-gradient(linear, left top, left bottom, from(red), to(white));
	 padding: 10px 20px;
	 margin-left: -20px;
	 margin-top: 0;
	 position: relative;
	 width: 70%;
       /*from droping box shadow at the bottom of header*/
	-moz-box-shadow: 1px 1px 3px #292929;
	-webkit-box-shadow: 1px 1px 3px #292929;
                 box-shadow: 1px 1px 3px #292929;
	color: #454545;
	text-shadow: 0 1px 0 white;

Arrow class for dropping shadow.

.arrow {
	 width: 0; height: 0;
	 line-height: 0;
	 border-left: 20px solid transparent;
	 border-top: 10px solid #c8c8c8;
	 top: 104%;
	 left: 0;
	 position: absolute;

Now just create a html Page and put a header and you have done assuming that you have written css in separate file named jstyle.css.

<html >
    <link rel="Stylesheet" type="text/css" href="jstyle.css" />
	<title>CSS Header</title>
	 <div id="container">
		<h1> H1 - Heading <span class="arrow"></span> </h1>

Live Demo of CSS Header

Note: This will not work on browsers which does not support CSS3.

About Author:
Jayant Bramhnakar
Sr. Web Developer
Sahyadri Technologies Pvt. Ltd(Satara)

Categorized as HTML Tagged