Add Leading Zero to Values in a MySQL Column

Jennifer Nicholas
Updated on 29-Jun-2020 07:16:38

6K+ Views

To add leading zero to some value, use the LPAD() function of MySQL. The syntax is as follows −select lpad(yourColumnName, lengthofColumnValue+1, 0) from yourTableName;Here is an example of LPAD().mysql> select lpad('98765432', 9, 0);The following is the output −+----------------------+ | lpad('98765432', 9, 0) | +----------------------+ | 098765432            | +----------------------+ 1 row in set (0.00 sec)To check it in a live example, let us first create a table −mysql> create table leadingZeroDemo −> (    −> Id varchar(200) −> ); Query OK, 0 rows affected (0.63 sec)Now insert some records into the table with the help of ... Read More

Wobble Animation Effect with CSS

Jennifer Nicholas
Updated on 29-Jun-2020 07:16:24

330 Views

To create a wobble animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: ... Read More

Flatten Color Depth with CSS

Samual Sam
Updated on 29-Jun-2020 07:15:42

298 Views

To flatten the color depth, you need to create an X-Ray.The following parameter is used in this filter −S.NoParameter & Description1XrayGrayscales and flattens the color depth.ExampleYou can try to run the following code to create an X-Ray effect −Live Demo                   CSS Tutorials    

Get MySQL Random Integer Range

Rishi Rathor
Updated on 29-Jun-2020 07:15:17

524 Views

To get the random integer range, use the rand() function. The query to create a table −mysql> create table RandomIntegerDemo −> (    −> Number int −> ); Query OK, 0 rows affected (0.61 sec)Inserting records into table. The query is as follows −mysql> insert into RandomIntegerDemo values(1), (2), (3), (4), (5), (6), (7), (8), (9), (10), (11), (12), (13), (14); Query OK, 14 rows affected (0.14 sec) Records: 14 Duplicates: 0 Warnings: 0Now you can display all records with the help of select statement. The query is as follows −mysql> select *from RandomIntegerDemo;The following is the output displaying integers ... Read More

Rotate In Down Right Animation Effect with CSS

Chandu yadav
Updated on 29-Jun-2020 07:14:08

72 Views

To create a rotate in down animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateInDownRight {             0% {                -webkit-transform-origin: right bottom;                -webkit-transform: rotate(90deg);                opacity: 0;             }             100% {                -webkit-transform-origin: right bottom;                -webkit-transform: rotate(0);                opacity: 1;             }          }          @keyframes rotateInDownRight {             0% {                transform-origin: right bottom;                transform: rotate(90deg);                opacity: 0;             }             100% {                transform-origin: right bottom;                transform: rotate(0);                opacity: 1;             }          }          .rotateInDownRight {             -webkit-animation-name: rotateInDownRight;             animation-name: rotateInDownRight;          }                           Reload page                function myFunction() {             location.reload();          }          

Rotate In Animation Effect with CSS

Lakshmi Srinivas
Updated on 29-Jun-2020 07:13:32

298 Views

To create a rotate in animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateIn {             0% {                -webkit-transform-origin: center center;                -webkit-transform: rotate(-200deg);                opacity: 0;             }             100% {                -webkit-transform-origin: center center;                -webkit-transform: rotate(0);                opacity: 1;             }          }          @keyframes rotateIn {             0% {                transform-origin: center center;                transform: rotate(-200deg);                opacity: 0;             }             100% {                transform-origin: center center;                transform: rotate(0);                opacity: 1;             }          }          .rotateIn {             -webkit-animation-name: rotateIn;             animation-name: rotateIn;          }                           Reload page                       function myFunction() {             location.reload();          }          

Insert Content After an Element with CSS

Rishi Rathor
Updated on 29-Jun-2020 07:13:02

339 Views

Use the :after element to add some content after an element. ExampleYou can try to run the following code to insert some content after an element with CSS −Live Demo                    p:after          {             content: url(/images/bullet.gif)          }                     This line will be succeeded by a bullet.       This line will be succeeded by a bullet.       This line will be succeeded by a bullet.    

CSS Volume Property

karthikeya Boyini
Updated on 29-Jun-2020 07:12:20

130 Views

Volume refers to the median volume of the voice. It can have following values −numbers − Any number between '0' and '100'. '0' represents the minimum audible volume level and 100 correspond to the maximum comfortable level.percentage − These values are calculated relative to the inherited value, and are then clipped to the range '0' to '100'.silent − No sound at all. The value '0' does not mean the same as 'silent'.x-soft − Same as '0'.soft − Same as '25'.medium − Same as '50'.loud − Same as '75'.x-loud − Same as '100'.ExampleLet us see an example −     Read More

Rotate In Down Left Animation Effect with CSS

Nancy Den
Updated on 29-Jun-2020 07:11:44

107 Views

To create a rotate in down animation effect with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rotateInDownLeft {             0% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(-90deg);                opacity: 0;             }             100% {                -webkit-transform-origin: left bottom;                -webkit-transform: rotate(0);                 opacity: 1;             }          }          @keyframes rotateInDownLeft {             0% {             transform-origin: left bottom;             transform: rotate(-90deg);             opacity: 0;             }             100% {                transform-origin: left bottom;                transform: rotate(0);                opacity: 1;             }          }          .rotateInDownLeft {             -webkit-animation-name: rotateInDownLeft;             animation-name: rotateInDownLeft;          }                           Reload page                function myFunction() {             location.reload();          }          

Roll Out Animation Effect with CSS

Lakshmi Srinivas
Updated on 29-Jun-2020 07:06:22

225 Views

To create a rollout animation effect with CSS, you can try to run the following code −Example                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes rollOut {             0% {                opacity: 1;                -webkit-transform: translateX(0px) rotate(0deg);             }             100% {                opacity: 0;                -webkit-transform: translateX(100%) rotate(120deg);             }          }          @keyframes rollOut {             0% {                opacity: 1;                transform: translateX(0px) rotate(0deg);             }             100% {                opacity: 0;                transform: translateX(100%) rotate(120deg);             }          }          .rollOut {             -webkit-animation-name: rollOut;             animation-name: rollOut;          }                           Reload page                function myFunction() {             location.reload();          }          

Advertisements