trabslate css code example

Example 1: antialiasing css

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
//Also use webfonts: https://www.fontsquirrel.com/

Example 2: text transform in css

/*HTMl*/
<p >Initial String
  <h2>Lorem ipsum dolor sit amet</h2>
</p>
<div class="heading">
  This will be capitalize
</div>

 /*CSS*/
.heading {
  text-transform: capitalize;
}
/*OTHER TEXT TRANSFORM*/ 
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kan

Example 3: transform rotate css

<!DOCTYPE html>
<html>
<head>
<style> 
div.a {
  width: 150px;
  height: 80px;
  background-color: yellow;
  -ms-transform: rotate(20deg); /* IE 9 */
  transform: rotate(20deg);
}

div.b {
  width: 150px;
  height: 80px;
  background-color: yellow;
  -ms-transform: skewY(20deg); /* IE 9 */
  transform: skewY(20deg);
}

div.c {
  width: 150px;
  height: 80px;
  background-color: yellow;
  -ms-transform: scaleY(1.5); /* IE 9 */
  transform: scaleY(1.5);
}
</style>
</head>
<body>

<h1>The transform Property</h1>

<h2>transform: rotate(20deg):</h2>
<div class="a">Hello World!</div>
<br>

<h2>transform: skewY(20deg):</h2>
<div class="b">Hello World!</div>
<br>

<h2>transform: scaleY(1.5):</h2>
<div class="c">Hello World!</div>

</body>
</html>

Tags:

Javascript Example

Recent Posts