March 23, 2015

3D text Customizable

3D text Customizable

On one of my previous post i have discussed how to get the 3D effect of the text and a user can see their own text in 3D form. Now i have added a new version where the user can customize the text. The customizable option is fully responsive.

Here a user can change the color of text and background, size, font family, style, remove reflection of the text. I have used angular.js for major parts.

I have used jscolor.js for the color picker. It works on cross browsers.

The ng-model directive binds an input value to a property on the scope using NgModelController. The ng-change directive evaluates the given expression when the user changes the input. The expression is evaluated immediately, unlike the JavaScript onchange event which only triggers at the end of a change.

<input type="text" class="color" ng-model="textColor" ng-change="myTextColor={'color':'#'+textColor}">

The ng-style directive allows you to set CSS style on an HTML element conditionally. Here the color is set by the value of the color chosen by the user using the color picker.

<span class="render changeMe" ng-style="myTextColor">{{name}}</span>

Same way i have added color picker for background color too. Just there is changes in the ng-change directive.

<input type="text" class="color" ng-model="textColor" ng-change="myTextColor={'background-color':'#'+textColor}">

I have added ng-style directive to the body as i want the background color of the whole body to be changed.

<body ng-style="myBgColor">

The ng-class directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added. I have given user a option to add bold, italic, underline, strike to the text.

<span class="render" ng-style="myTextColor" ng-class="{bold: textBold, italic: textItalic, underline: textUnderline, strike: textStrike}">{{name}}</span>

When these values are selected the text changes accordingly as the ng-class directive defines the CSS class written in CSS.

<input type="checkbox" ng-model="textBold" /> Bold
<input type="checkbox" ng-model="textItalic" /> Italic
<input type="checkbox" ng-model="textUnderline" /> Underline
<input type="checkbox" ng-model="textStrike" /> Strike

Here is the predefined CSS written.

.bold {
    font-weight: bold;
.italic {
    font-style: italic;
.underline {
    text-decoration: underline;
.strike {
    text-decoration: line-through;

Then i have added another option where the user can select the font size. This is done using jQuery.

$("#size").change(function() {
   $('.changeMe').css("font-size", $(this).val() + "em")

The value selected by the user is fetched by the above code and the value is executed to the text with the class name changMe as defined.

     <option value="6">6</option>
     <option value="8">8</option>
     <option value="10">10</option>
     <option value="12">12</option>

<span class="changeMe">{{name}}</span>

Same way the font family of the text also can be changed.

$("#family").change(function() {
   $('.changeMe').css("font-family", $(this).val());

     <option value="Agency FB">Agency FB</option>
     <option value="Arial">Arial</option>
     <option value="Arial Black">Arial Black</option>
     <option value="Bree Serif">Bree Serif</option>

Additionally i have added buttons to show or hide the reflection. This is done using jQuery.


No comments:

Post a Comment

Popular Posts