Posts

Showing posts from 2019

CSS Gradients

Image
CSS gradients let you display smooth transitions between two or more specified colors. Types of gradients Linear Gradients(down/up/left/right/diagonally) Radial Gradients Syntax for linear gradients:- background-image: linear-gradient( direction , color-stop1 , color-stop2, ... ); CSS Linear Gradients To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect. CSS Radial Gradient A radial gradient is defined by its center. Syntax for radial gradients:- background-image: radial-gradient( shape size at position, start-color, ..., last-color ); For example:- <!DOCTYPE html> <html> <head> <style>  *{   padding: 0px;   margin: 0px;  } #grad1 {   height: 400px;   background-color: red;   background-image: linear-gradient(to right, #65f7f7, yellow); } <

Create Transparent Drop Down Navigation Menu with CSS and HTML

Image
                                                                                                       HTML AND CSS CODE :- <html>  <head>   <style>   BODY{  background-image: url(../image/background-blur-clean-531880.jpg);  padding: 0px;  margin: 0px; } #menu{  background-color: black;  opacity: 0.5;  height: 80px;  width: 100%; } #menu ul{  text-align: center;  font-size: 19px; } #menu ul li{  list-style-type: none;  float: left;  display: block; } #menu ul li a{  color: white;  text-decoration: none;  padding: 30px;  display: block; } #menu ul li a:hover{  color: red;  text-decoration: underline;  background-color: aquamarine;  border-radius: 10px; } #menu ul li ul li{  display: none;  width: 100%;  height: 70px; } #menu ul li:hover ul li{  display: block; }   </style>  </head>  <body>   <div id="menu">    <ul>     <li><a href="#">HOME</a></li>     <li><a href="#&quo

Gradient Background Animation Using Only HTML & CSS

Image
HTML AND CSS CODE :- <!doctype html> <html>  <head>   <style>    body{  margin:0px;  padding: 0px;  background-color: #0a0a0a; } h1{  width: 100%;  text-transform: uppercase;  text-align: center;  top:70%;  font-size: 65px;  font-family: monospace;  background:linear-gradient(to right, #0a00ff,#4c9a4c,#a4a4fd,#fcfc46);  -webkit-text-fill-color:transparent;  -webkit-background-clip:text; }   </style>  </head>  <body>   <h1>    hello everyone........   </h1>  </body> </html>

Client Side Scripting Vs Server Side Scripting

Client Side Scripting  Client-side scripting is used when the users’ browser already has all the code and the page is altered on the basis of the user's input. Client-side scripting cannot be used to connect to the databases on the web server. Client-side scripting is possible to be blocked by the user. The Web Server executes the server side scripting that produces the page to be sent to the browser.  The browser receives the page sent by the server and executes the client-side scripts. Client-side scripting can’t access the file system that resides at the web server. The files and settings that are local at the user’s computer can be accessed using Client-side scripting.  Response from a client-side script is faster as compared to a server-side script because the scripts are processed on the local computer. Examples of Client side scripting languages : JavaScript, VB script, etc.