Tilt or Slant Text Effect

Want to make normal text more fancy without resorting to image version of the text? Give “tilt” or “slant” effect to text using few lines of CSS for cooler looking text on your Squeezefunnels websites.

Preview of left and right tilt text effect

CSS to make tilt or slant text

1. Add the following CSS code in the CSS box in the SqueezeFunnel builder.  Go to SF builder and click on Tools > Layout CSS / Javascript.  Select CSS then copy and paste the code below.  Don't forget to click the save button.

 /**
 * Add tilt or slant text CSS effect
 *
 * @author Davinder Singh Kainth
 * @link http://probeaver.com/?p=967
 *
 */
 
.tilt-text-left {            
        transform: rotate(-12deg);
        -webkit-transform: rotate(-12deg);
        -moz-transform:rotate(-12deg);
}

.tilt-text-right {            
        transform: rotate(12deg);
        -webkit-transform: rotate(12deg);
        -moz-transform:rotate(12deg);
}

2. Open a new or one of your existing page and click on the Edit Settings of any text you would like to tilt/slant then go to "Advanced" tab.  Scroll down the pop-up box and enter the class name tilt-text-left to tilt/slant to left side or tilt-text-right for right direction tilt/slant.  Click save once done.

 

 

 

Have more questions? Submit a request