Category Archives: CSS3

Coloring Bullets & Numbers – CSS3


ul{
    list-style: none
  }

li{
    position: relative
  }

li::before{
    content: '';
    background: orange;
	position: absolute;
    top: 18px;
    left:0;
    width: 7px;
	height: 7px;    
    border-radius: 100%;
	-o-border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-ms-border-radius: 100%	
  }

Example:

  • List Item 01
  • List Item 02
  • List Item 03

ol {
    list-style: none;
	counter-reset: li
}
ol li {
	counter-increment: li
}
ol li:before {
	content: counter(li);
	color: orange
}

Example:

  1. List Item 01
  2. List Item 02
  3. List Item 03

Text Rotation in CSS3

In the old days we had faced big issue to rotate the text. But these days it’s a very simple through CSS3 “Transform” property. See the below example.


.text-rotation {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

Example:

Text Rotation