CSS HTML

Fancy Neon Text Effects with CSS3

September 23, 2018 Web Design Comments(18)

Did you ever want to create fancy neon effects? No? Well…to bad I’ll explain how to create them anyways. Neon text mostly is achieved by using the CSS3 property “text-shadow” on multiple layers and a saturated colour, as well as some animations to look more realistic.

Live Example

The most important are the “text-shadow” – We won’t use it for an actual shadow but for the glow effect of the text. Each line in the value represents one of the radiuses of the glow (i.e. The first line creates the glow with a 10px radius). In most cases we want the inner shadows to be a brighter version of the colour or even white, while the outer ones have the neon-color.

body{
  background-color:#424242;
}
.neon{
  text-align:center;
  font-size:40px;
  margin:20px 0 20px 0;
  color:#ffffff;
  /*Glow*/
  text-shadow: 0 0 10px #ffffff,
             0 0 20px  #ffffff,
             0 0 30px  #ffffff,
             0 0 40px  #228DFF,
             0 0 70px  #228DFF,
             0 0 80px  #228DFF,
             0 0 100px #228DFF,
             0 0 150px #228DFF;
}

body{

background-color:#424242;

}

.neon{

text-align:center;

font-size:40px;

margin:20px 0 20px 0;

color:#ffffff;

/*Glow*/

text-shadow: 0 0 10px #ffffff,

0 0 20px #ffffff,

0 0 30px #ffffff,

0 0 40px #228DFF,

0 0 70px #228DFF,

0 0 80px #228DFF,

0 0 100px #228DFF,

0 0 150px #228DFF;

}

If we want, we can also animate this!

We want to use an “animation” attribute here for the glow effect, don’t forget the vendor prefixes “-webkit-” and “-moz-“! Right now the animation still needs its key frames to work

.neon{
  text-align:center;
  font-size:40px;
  margin:20px 0 20px 0;
  color:#ffffff;
  text-shadow: 0 0 10px #ffffff,
             0 0 20px  #ffffff,
             0 0 30px  #ffffff,
             0 0 40px  #228DFF,
             0 0 70px  #228DFF,
             0 0 80px  #228DFF,
             0 0 100px #228DFF,
             0 0 150px #228DFF;
  /*Animation*/
  -webkit-animation: neonAnimation 1.5s ease-in-out infinite alternate;
  -moz-animation: neonAnimation 1.5s ease-in-out infinite alternate;
  animation: neonAnimation 1.5s ease-in-out infinite alternate;   
}

.neon{

text-align:center;

font-size:40px;

margin:20px 0 20px 0;

color:#ffffff;

text-shadow: 0 0 10px #ffffff,

0 0 20px #ffffff,

0 0 30px #ffffff,

0 0 40px #228DFF,

0 0 70px #228DFF,

0 0 80px #228DFF,

0 0 100px #228DFF,

0 0 150px #228DFF;

/*Animation*/

-webkit-animation: neonAnimation 1.5s ease-in-out infinite alternate;

-moz-animation: neonAnimation 1.5s ease-in-out infinite alternate;

animation: neonAnimation 1.5s ease-in-out infinite alternate;

}

For the key frames we need to use the vendor prefixes again, like this:

/*Webkit prefix*/
      @-webkit-keyframes neonAnimation {
        from {
          text-shadow: 0 0 10px #ffffff,
                     0 0 20px  #ffffff,
                     0 0 30px  #ffffff,
                     0 0 40px  #228DFF,
                     0 0 70px  #228DFF,
                     0 0 80px  #228DFF,
                     0 0 100px #228DFF,
                     0 0 150px #228DFF;
        }
        to {
          text-shadow: 0 0 5px #ffffff,
                     0 0 10px #ffffff,
                     0 0 15px #ffffff,
                     0 0 20px #228DFF,
                     0 0 35px #228DFF,
                     0 0 40px #228DFF,
                     0 0 50px #228DFF,
                     0 0 75px #228DFF;
        }
      }

      /*Moz prefix*/
      @-moz-keyframes neonAnimation {
        from {
          text-shadow: 0 0 10px #ffffff,
                     0 0 20px  #ffffff,
                     0 0 30px  #ffffff,
                     0 0 40px  #228DFF,
                     0 0 70px  #228DFF,
                     0 0 80px  #228DFF,
                     0 0 100px #228DFF,
                     0 0 150px #228DFF;
        }
        to {
          text-shadow: 0 0 5px #ffffff,
                     0 0 10px #ffffff,
                     0 0 15px #ffffff,
                     0 0 20px #228DFF,
                     0 0 35px #228DFF,
                     0 0 40px #228DFF,
                     0 0 50px #228DFF,
                     0 0 75px #228DFF;
        }
      }

      /*No prefix*/
      @keyframes neonAnimation {
        from {
          text-shadow: 0 0 10px #ffffff,
                     0 0 20px  #ffffff,
                     0 0 30px  #ffffff,
                     0 0 40px  #228DFF,
                     0 0 70px  #228DFF,
                     0 0 80px  #228DFF,
                     0 0 100px #228DFF,
                     0 0 150px #228DFF;
        }
        to {
          text-shadow: 0 0 5px #ffffff,
                0 0 10px #ffffff,
                0 0 15px #ffffff,
                0 0 20px #228DFF,
                0 0 35px #228DFF,
                0 0 40px #228DFF,
                0 0 50px #228DFF,
                0 0 75px #228DFF;
  }
}

/*Webkit prefix*/

@-webkit-keyframes neonAnimation {

from {

text-shadow: 0 0 10px #ffffff,

0 0 20px #ffffff,

0 0 30px #ffffff,

0 0 40px #228DFF,

0 0 70px #228DFF,

0 0 80px #228DFF,

0 0 100px #228DFF,

0 0 150px #228DFF;

}

to {

text-shadow: 0 0 5px #ffffff,

0 0 10px #ffffff,

0 0 15px #ffffff,

0 0 20px #228DFF,

0 0 35px #228DFF,

0 0 40px #228DFF,

0 0 50px #228DFF,

0 0 75px #228DFF;

}

/*Moz prefix*/

@-moz-keyframes neonAnimation {

from {

text-shadow: 0 0 10px #ffffff,

0 0 20px #ffffff,

0 0 30px #ffffff,

0 0 40px #228DFF,

0 0 70px #228DFF,

0 0 80px #228DFF,

0 0 100px #228DFF,

0 0 150px #228DFF;

}

to {

text-shadow: 0 0 5px #ffffff,

0 0 10px #ffffff,

0 0 15px #ffffff,

0 0 20px #228DFF,

0 0 35px #228DFF,

0 0 40px #228DFF,

0 0 50px #228DFF,

0 0 75px #228DFF;

}

/*No prefix*/

@keyframes neonAnimation {

from {

text-shadow: 0 0 10px #ffffff,

0 0 20px #ffffff,

0 0 30px #ffffff,

0 0 40px #228DFF,

0 0 70px #228DFF,

0 0 80px #228DFF,

0 0 100px #228DFF,

0 0 150px #228DFF;

}

to {

text-shadow: 0 0 5px #ffffff,

0 0 10px #ffffff,

0 0 15px #ffffff,

0 0 20px #228DFF,

0 0 35px #228DFF,

0 0 40px #228DFF,

0 0 50px #228DFF,

0 0 75px #228DFF;

}

Web Design

CSS HTML MYSQL PHP WEB DEVELOPMENT

Contact form with mail function and Storing data in the database

August 25, 2018August 25, 2018 Web Design

Contact form with mail function and Storing in the database project has two module : User Module admin Module User Module Sql table structure for tblcontactdata table where we will store our data

CREATE TABLE `tblcontactdata` (
  `id` int(11) NOT NULL,
  `FullName` varchar(200) DEFAULT NULL,
  `PhoneNumber` char(12) DEFAULT NULL,
  `EmailId` varchar(200) DEFAULT NULL,
  `Subject` varchar(255) DEFAULT NULL,
  `Message` mediumtext,
  `UserIp` varbinary(16) DEFAULT NULL,
  `PostingDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `Is_Read` int(1) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `tblcontactdata`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

CREATE TABLE `tblcontactdata` (

`id` int(11) NOT NULL,

`FullName` varchar(200) DEFAULT NULL,

`PhoneNumber` char(12) DEFAULT NULL,

`EmailId` varchar(200) DEFAULT NULL,

`Subject` varchar(255) DEFAULT NULL,

`Message` mediumtext,

`UserIp` varbinary(16) DEFAULT NULL,

`PostingDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,

`Is_Read` int(1) DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `tblcontactdata`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

Now create a HTML for user inputs. index.php

<form name="ContactForm" method="post">
 
<h4>your name</h4>
<input type="text" name="name" class="user" placeholder="Johne"  autocomplete="off" required>
 
<h4>your phone number</h4>
<input type="text" name="phonenumber" class="phone" placeholder="0900.234.145678" maxlength="10" required autocomplete="off">
 
<h4>your email address</h4>
<input type="email" name="emailaddres" class="email" placeholder="Example@mail.com" required autocomplete="off">
 
<h4>your subject</h4>
<input type="text" name="subject" class="email" placeholder="Subject" autocomplete="off">
 
<h4>your message</h4>
<textarea class="mess" name="message" placeholder="Message" required></textarea>
<input type="submit" value="send your message" name="submit">
</form>

<h4>your phone number</h4>

<h4>your email address</h4>

<h4>your subject</h4>

<h4>your message</h4>

</form>

MYSql database connection

<?php 
// DB credentials.
define('DB_HOST','localhost');
define('DB_USER','root');
define('DB_PASS','');
define('DB_NAME','contactdb');
// Establish database connection.
try
{
$dbh = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME,DB_USER, DB_PASS,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
}
catch (PDOException $e)
{
exit("Error: " . $e->getMessage());
}
?>

<?php

// DB credentials.

define('DB_HOST','localhost');

define('DB_USER','root');

define('DB_PASS','');

define('DB_NAME','contactdb');

// Establish database connection.

try

{

$dbh = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME,DB_USER, DB_PASS,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));

}

catch (PDOException $e)

{

exit("Error: " . $e->getMessage());

}

Insert Data into Database

include('config.php');
if(isset($_POST['submit']))
{
// getting Post values	
$name=$_POST['name'];
$phoneno=$_POST['phonenumber'];
$email=$_POST['emailaddres'];
$subject=$_POST['subject'];
$message=$_POST['message'];
$uip = $_SERVER ['REMOTE_ADDR'];
$isread=0;
// Insert quaery
$sql="INSERT INTO  tblcontactdata(FullName,PhoneNumber,EmailId,Subject,Message,UserIp,Is_Read) VALUES(:fname,:phone,:email,:subject,:message,:uip,:isread)";
$query = $dbh->prepare($sql);
// Bind parameters
$query->bindParam(':fname',$name,PDO::PARAM_STR);
$query->bindParam(':phone',$phoneno,PDO::PARAM_STR);
$query->bindParam(':email',$email,PDO::PARAM_STR);
$query->bindParam(':subject',$subject,PDO::PARAM_STR);
$query->bindParam(':message',$message,PDO::PARAM_STR);
$query->bindParam(':uip',$uip,PDO::PARAM_STR);
$query->bindParam(':isread',$isread,PDO::PARAM_STR);
$query->execute();
$lastInsertId = $dbh->lastInsertId();
if($lastInsertId)
{
//mail function for sending mail
$to=$email; 
$headers .= "MIME-Version: 1.0"."\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";
$headers .= 'From:PHPGurukul Contact Form Demo<info@phpgurukul.com>'."\r\n";
$ms.="<html></body><div>
<div><b>Name:</b> $name,</div>
<div><b>Phone Number:</b> $phoneno,</div>
<div><b>Email Id:</b> $email,</div>";
$ms.="<div style='padding-top:8px;'><b>Message : </b>$message</div><div></div></body></html>";
mail($to,$subject,$ms,$headers);
echo "<script>alert('Your info submitted successfully.');</script>";
}
else 
{
echo "<script>alert('Something went wrong. Please try again');</script>";
}
}

include('config.php');

if(isset($_POST['submit']))

{

// getting Post values

$name=$_POST['name'];

$phoneno=$_POST['phonenumber'];

$email=$_POST['emailaddres'];

$subject=$_POST['subject'];

$message=$_POST['message'];

$uip = $_SERVER ['REMOTE_ADDR'];

$isread=0;

// Insert quaery

$sql="INSERT INTO tblcontactdata(FullName,PhoneNumber,EmailId,Subject,Message,UserIp,Is_Read) VALUES(:fname,:phone,:email,:subject,:message,:uip,:isread)";

$query = $dbh->prepare($sql);

// Bind parameters

$query->bindParam(':fname',$name,PDO::PARAM_STR);

$query->bindParam(':phone',$phoneno,PDO::PARAM_STR);

$query->bindParam(':email',$email,PDO::PARAM_STR);

$query->bindParam(':subject',$subject,PDO::PARAM_STR);

$query->bindParam(':message',$message,PDO::PARAM_STR);

$query->bindParam(':uip',$uip,PDO::PARAM_STR);

$query->bindParam(':isread',$isread,PDO::PARAM_STR);

$query->execute();

$lastInsertId = $dbh->lastInsertId();

if($lastInsertId)

{

//mail function for sending mail

$to=$email;

$headers .= "MIME-Version: 1.0"."\r\n";

$headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";

$headers .= 'From:PHPGurukul Contact Form Demo<info@phpgurukul.com>'."\r\n";

$ms.="<html></body><div>

<div><b>Phone Number:</b> $phoneno,</div>

<div><b>Email Id:</b> $email,</div>";

$ms.="<div style='padding-top:8px;'><b>Message : </b>$message</div><div></div></body></html>";

mail($to,$subject,$ms,$headers);

echo "<script>alert('Your info submitted successfully.');</script>";

}

else

{

echo "<script>alert('Something went wrong. Please try again');</script>";

}

HTML MYSQL PHP

How to insert data into MySql using PHP

August 21, 2018 Web Design

In this tutorial i will explain how to insert data into MySql using PHP. [aio_button align=”none” animation=”none” color=”red” size=”small” icon=”play” text=”View Demo” target=”_blank” relationship=”dofollow” url=”https://phpgurukul.com/demos/mysqlinsert/”] First Create a database with name demo. Now create a table with name data. Here the strcuture of table

CREATE TABLE IF NOT EXISTS `data` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `contactno` bigint(20) NOT NULL,
  `gender` varchar(255) NOT NULL,
  `education` varchar(255) NOT NULL,
  `address` longtext NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `data` (

`id` int(11) NOT NULL,

`name` varchar(255) NOT NULL,

`email` varchar(255) NOT NULL,

`contactno` bigint(20) NOT NULL,

`gender` varchar(255) NOT NULL,

`education` varchar(255) NOT NULL,

`address` longtext NOT NULL

) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

Code for mysql connection with php

<?php
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'demos');
$conn = mysql_connect(DB_SERVER,DB_USER,DB_PASS)
or
die('localhost connection problem'.mysql_error());
mysql_select_db(DB_NAME, $conn);
?>

<?php

define('DB_SERVER','localhost');

define('DB_USER','root');

define('DB_PASS' ,'');

define('DB_NAME', 'demos');

$conn = mysql_connect(DB_SERVER,DB_USER,DB_PASS)

die('localhost connection problem'.mysql_error());

mysql_select_db(DB_NAME, $conn);

Create a HTML Form for user inputs

<form name="insert" action="" method="post">
<table width="100%"  border="0">
<tr>
<th height="62" scope="row">Name </th>
<td width="71%"><input type="text" name="name" id="name" value=""  class="form-control" required />
</td>
</tr>
<tr>
<th height="62" scope="row">Email id </th>
<td width="71%"><input type="email" name="email" id="email" value=""  class="form-control" required />
</td>
</tr>
<tr>
<th height="62" scope="row">Contact no</th>
<td width="71%">
<input type="text" name="contactno" id="contactno" value=""  class="form-control" maxlength="10" required /></td>
</tr>
<tr>
<th height="62" scope="row">Gender</th>
<td width="71%"><input type="radio" name="gender" value="Male" checked >Male
<input type="radio" name="gender" value="Female" >female</td>
</tr>
<tr>
<th height="62" scope="row">Education</th>
<td width="71%"><select name="education" id="email" class="form-control" required >
<option value="">Select your Education</option>
<option value="Post Graduate">Post Graduate</option>
<option value="Graduate">Graduate</option>
<option value="Intermediate">Intermediate</option>
<option value="High School">High School</option>
<option value="Other">Other</option>
</select></td>
</tr>
<tr>
<th height="62" scope="row">Address</th>
<td width="71%"><textarea name="addrss" class="form-control"  required></textarea> </td>
</tr>
<tr>
<th height="62" scope="row"></th>
<td width="71%"><input type="submit" name="submit" value="Submit" class="btn-group-sm" /> </td>
</tr>
</table>
</form>

<tr>

</td>

</tr>

<tr>

<th height="62" scope="row">Email id </th>

</td>

</tr>

<tr>

<th height="62" scope="row">Contact no</th>

</tr>

<tr>

<th height="62" scope="row">Gender</th>

<td width="71%"><input type="radio" name="gender" value="Male" checked >Male

<input type="radio" name="gender" value="Female" >female</td>

</tr>

<tr>

<th height="62" scope="row">Education</th>

<option value="">Select your Education</option>

<option value="Post Graduate">Post Graduate</option>

<option value="Graduate">Graduate</option>

<option value="Intermediate">Intermediate</option>

<option value="High School">High School</option>

<option value="Other">Other</option>

</select></td>

</tr>

<tr>

<th height="62" scope="row">Address</th>

</tr>

<tr>

</tr>

</table>

</form>

Now get […]

18 Replies to “Fancy Neon Text Effects with CSS3”

Ashli Ferguson says:

April 15, 2019 at 3:21 pm

OHHH I like this a lot!! I am going to have to figure this out!

Reply
Tammie Reinhart says:

May 4, 2019 at 5:20 pm

My son loves this kind of stuff. I’m going to show it to him later so he can give it a try!

Reply
1. Web Design says:
  
  May 5, 2019 at 2:14 pm
  
  he is very mush welcome to try.
  
  Reply
Krysten Quiles says:

May 5, 2019 at 11:39 am

Oh I really like that. Thanks so much for sharing this with all of us!

Reply
1. Web Design says:
  
  May 5, 2019 at 2:12 pm
  
  THANKS For stopping by
  
  Reply
Lyosha says:

May 5, 2019 at 5:18 pm

I have to admit I love neon. Clothes, details, design and website text as well. This effect is wonderful!

Reply
sudipa says:

May 5, 2019 at 11:00 pm

Simple and easy to follow steps.People with no knowledge of coding can also follow this

Reply
Owen G says:

May 5, 2019 at 11:39 pm

Nice tutorial. I run an 80s retro site that might benefit from a bit of Neon! Pretty cool effects in CSS.

Reply
Jackline A says:

May 6, 2019 at 1:43 am

Thanks for sharing all this code. I find it very interesting

Reply
Adriana says:

May 6, 2019 at 5:51 am

Neon is the thing right now! This tutorial looks pretty simple. Ill try it.

Reply
maysz says:

May 6, 2019 at 9:19 am

Wow, I like this! I would love to try these codes thanks for sharing!

Reply
1. Web Design says:
  
  May 7, 2019 at 8:43 am
  
  fee free to try and give me feedback. thank you.
  
  Reply
Bree says:

May 6, 2019 at 8:50 pm

This is really helpful! I love neon!

Reply
1. Web Design says:
  
  May 7, 2019 at 8:42 am
  
  thanks a million.
  
  Reply
Lydia Smith says:

May 6, 2019 at 9:30 pm

This is very useful and sounds cool. Would definitely try it out.lynda

Reply
1. Web Design says:
  
  May 7, 2019 at 8:12 am
  
  thanks Lyndia, do well to give feedback when you try it out, our support team is online 24/7 to attend to you.
  
  Reply
Riana says:

May 7, 2019 at 8:00 pm

I definitely want to try this sometime! Thanks so much for this tutorial

Reply
1. Web Design says:
  
  May 7, 2019 at 9:04 pm
  
  feel free to do so, do well to give feedback when you finally try.
  
  Reply