JQuery
Introduction to PHP
Control Structure (Decision and Loop)
String Matching with Regular Expression PHP
Math Functions in PHP
Generating Graphics and Images with PHP
Form and Method in PHP
Self & Sticky Forms / Pages
PHP XML Parser
Working with file and Directories
Function/Method in PHP
Classes and Objects in PHP
Const / Define
Encapsulation
Inheritance in PHP
Magic Methods in PHP
Abstract Class in PHP
Interface in PHP
Traits in PHP
Namespaces in PHP
Introspection in PHP
Exception Handling in PHP
Include / Require
Generating Graphics and Images with PHP
MySQL Database (PHPMyAdmin)
PHP Database Connectivity with MySQL
XML
simplexml PHP XML Parser
DOM PHP XML Parser
AJAX
AJAX with PHP
File Upload
JSON WebService with PHP
Domain and Hosting
Images Manipulation Background Settings
PHP Developer

PHP Developer

Cascade Stylesheet (CSS)

Color Manipulation
Introduction to Color Manipulation

Color manipulation is used as RGB, RGBA, HSL, HSLA.

RGB stands for Red, Green, Blue color. rgb(255,0,0) for red color,

rgb(0,255,0) for green color, rgb(0,0,255) for blue color.

Same as RGBA is stands for RGB with alpha. Alpha means opacity of color.

HSL stands for Hue, Saturation, and Lightness.

Hue 0 or 360 for red, 120 for green and 240 for blue.

Saturation and lightness values are in percentage.

hsl(0,100%,30%)

HSLA is same as HSL with alpha means opacity.

RGBA
                                
                                

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

*{

   box-sizing: border-box;

    float: left;

}

.red{

background-color: rgba(255,0,0,0.3);

height: 100px;

width: 333px;

}

.green{

background-color: rgba(0,255,0,0.3);

height: 100px;

width: 333px;

}

.blue{

background-color: rgba(0,0,255,0.3);

height: 100px;

width: 333px;

}

.col-4 {width: 33.33%;}

</style>

</head>

<body>

<div class="col-4">

<div class="red"></div>

<div class="green"></div>

<div class="blue"></div>

</div>

</body>

</html>

HSL
                                
                                

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

.body-content{

   box-sizing: border-box;

    float: left;

}

.hsl{

background-color: hsl(0,100%,30%);

height: 100px;

width: 333px;

}

.hsl1{

background-color: hsl(0,100%,50%);

height: 100px;

width: 333px;

}

.hsl2{

background-color: hsl(0,100%,90%);

height: 100px;

width: 333px;

}

.col-4 {width: 33.33%;}

</style>

</head>

<body class="body-content">

<div class="col-4">

<div class="hsl"></div>

<div class="hsl1"></div>

<div class="hsl2"></div>

</div>

</body>

</html>

HSLA
                                
                                

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

.body-content{

   box-sizing: border-box;

    float: left;

}

.hsla{

background-color: hsla(0,100%,30%,0.2);

height: 100px;

width: 333px;

}

.hsla1{

background-color: hsla(0,100%,30%,0.5);

height: 100px;

width: 333px;

}

.hsla2{

background-color: hsla(0,100%,30%,0.9);

height: 100px;

width: 333px;

}

.col-4 {width: 33.33%;}

</style>

</head>

<body class="body-content">

<div class="col-4">

<div class="hsla"></div>

<div class="hsla1"></div>

<div class="hsla2"></div>

</div>

</body>

</html>

Best PHP Training in Nashik. Learn from very basic upto Live Website Development.

Comment is Only Available for registered users! Create Account or Login Now!