10 Best Tips To Make Your Site Mobile Friendly - Infographics

On 9/19/2017 Be the first to comment!

Hi! Here we have the infographics that gives you the 10 best tips to make your site mobile friendly and improve the mobile user experience. Smartphones are not just used to make calls and send messages. Millions of mobile users use them to surf internet, search for news, information, and to shop and purchase.

The fact that your site can be viewed on a mobile device does not make it mobile-friendly. If you have not properly optimized your website / e-commerce site for mobile traffic you could loss leads and sales.

Studies shows that more than half of the internet traffic is through mobile devices and the rate increases day by day. Almost 60% of mobile users said to have trouble accessing websites and face navigation problems.

Even though your site looks perfect and beautiful from desktop, the mobile user experience could be totally different. So many websites have separate mobile sites and its fine if you have small static sites. But responsive websites are much more preferred these days and provide uniform user experience for both desktop pc and mobile users.

Leveraging responsive technology frameworks like Bootstrap will help you build responsive mobile friendly websites. They follow the mobile-first approach and create a similar experience for users regardless of whether they access the site from the desktop, tablet or smartphone.

In addition to the better user experience across devices, you also don't need to have separate mobile url and redirect to mobile site. This gives you SEO benefits and makes the site much easier to manage.

10 Best Tips To Make Your Site Mobile Friendly - Infographics

For your website to be friendly and optimized for mobile traffic, follow the 10 best suggestions that appear in the below infographic. It will help you build a positive experience for your mobile customers.

best tips to make your site mobile friendly

10 Best Tips To Make Your Site Mobile Friendly - An Infographic by kodingmadesimple.com

To embed this infographic on your site: Copy and Paste the Below Code


SMS Gateway API Integration in PHP - Sending Text Messages

On 9/11/2017 Be the first to comment!

Hi! In this tutorial, we'll look at how to integrate sms api in php and send bulk text messages using simple php script. These days, increasing number of web applications uses SMS feature for product promotions, user authentication or sales and event notifications directly through their mobile phones. To send sms via php, you need to integrate an appropriate SMS gateway provider in your application. There are a number of SMS Service providers in the market and they offer APIs in various programming languages.

Here I'm going to show you how to integrate Textlocal SMS gateway in PHP.

sms gateway integration in php

Read: How to Create AJAX Search Engine using PHP and MySQL

Textlocal SMS API:

Textlocal is a bulk sms gateway that offers an easy and powerful messaging platform. It helps you maintain massive contact lists, compose rich multi-media messages and send sms in bulk. It has flexible APIs supporting different programming platforms.

Register with SMS Gateway:

In order to use Textlocal sms gateway in your web app, you must first register with their service and get your hash code.

Visit this link and signup for the sms service. It is necessary to provide details such as email address, mobile number and password for registration. At the beginning you will get 10 free sms credits which you can use for testing.

Read: User Login and Registration System using PHP and MySQL

Once you finish signing up, login and go to the Dashboard.

From there, navigate to 'Help' > 'All Documentation' page and get your API hash code.

You also need to download the API library textlocal.class.php. For that go to http://api.textlocal.in/docs/phpclass and click on 'Download' link on the righ side of the page.

SMS API Integration in PHP:

Extract and move 'textlocal.class.php' to your root folder. You have to include this class in your php code and use the sendSms() function to send text messages. To test the service, you can send sms from localhost. Here's the php code to do it.

<?php
require('textlocal.class.php');

$username = 'myemail@example.com'; // change this to your email address
$hashcode = 'xxxxxxx'; // change this to yours

$textlocal = new Textlocal($username, $hashcode);
$numbers = array(919999999999); // separate multiple numbers by comma
$sender = 'TXTLCL';
$message = 'Hi! This is a test message!!!';

try {
    $result = $textlocal->sendSms($numbers, $message, $sender);
    $data = json_decode($result, true);
    if($data['status'] == 'success'){
        echo 'SMS sent successfully!';
    }
} catch(Exception $e) {
    die('Error: ' . $e->getMessage());
}
?>

To send sms in bulk, use comma-delimited array list of mobile numbers. Also make sure the numbers are in international format i.e. country code followed by 10-digit mobile no. A maximum of 10,000 numbers are allowed at a time.

Run the above code and if all goes well, you will see success message. I received the sms within couple of seconds. Remember that you will only get ten sms credits under free account. So use it wisely to test the code and not run it in a loop.

Read: How to Import JSON into MySQL using PHP

By default, the Textlocal API will send the response as JSON. This is the response I received from the API.

{
    "balance": 8,
    "batch_id": 302329336,
    "cost": 1,
    "num_messages": 1,
    "message": {
        "num_parts": 1,
        "sender": "TXTLCL",
        "content": "Hi! This is a test message!!!"
    },
    "receipt_url": "",
    "custom": "",
    "messages": [
        {
            "id": "1200053892",
            "recipient": 919999999999
        }
    ],
    "status": "success"
}

The API returns a status field containing the message 'Success' or 'Failure'. You can use it to check if sms is sent or not.

You can also display the entire api response this way,

<?php
$result = $textlocal->sendSms($numbers, $message, $sender);
print_r($result);
?>

Read: Store and Retrieve Image from MySQL Database using PHP

Likewise you can send bulk sms in php via the Textlocal sms gateway. The entire process is simple and with few lines of code you can send bulk messages from your website. You can also use the cURL method and send an HTTP request to the sms server. I hope you like this tutorial. Please don't forget to share it in social media.

PHP Login and Registration Script with MySQL Example

On 9/07/2017 58 Comments so far

PHP Login and Registration Script: User Login/registration system is one of the key components of any membership driven websites and the ability to build them is a must have skill for any web developer. In this post, let us see how to create a complete login and registration system using php and mysql database.

This tutorial is fairly simple and easy to understand, but it covers as much as required to build advanced login/registration system - right from data validation to maintaining php sessions for authenticated access.

MySQL Database for Login/Registration Module

Before entering into the coding part, first let us build the database required for this example.

Read Also:
CREATE DATABASE `testdb`;
USE `testdb`;

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(8) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) NOT NULL,
  `email` varchar(60) NOT NULL,
  `password` varchar(40) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `email` (`email`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Run this sql file in phpmyadmin interface and create the database and table.

PHP Script for Login and Registration System

To build the login/registration system we need to create the following files.

  • index.php - This is the home page of our application
  • register.php - It contains the user sign up form
  • login.php - It contains the login form
  • logout.php - This contains the user logout script
  • dbconnect.php - MySQL database connection script

System Flow for User Login Registration Module

These are the steps breakdown of the user registration/login module we are going to build.

  1. The Home page (index.php) contains links for login and sign up process in top navigation menu.
  2. For new users » click on sigup link » user redirected to registration form » fill up the form and submit » validate the form input » registration succeed » notify user and redirect to login page.
  3. For registered users » click on login link on index.php » user redirected to login page » user provide login credentials » authenticate user and redirect to index page.
  4. For signed in users » show user's name and logout link on navigation bar.
  5. User clicks on logout » delete user details from session variable and destroy session » redirect to Home page.

Note: This tutorial uses twitter bootstrap framework for css. I prefer to use this as it's readily available and you can easily integrate bootstrap with HTML. But if you prefer custom style sheet then you can simply attach one and replace all the class selectors used in the html tags with your own. However the program functionality remains the same and will not be disturbed.

Dbconnect.php

This is where we connect to the mysql database. Keeping database connectivity in a separate file is very handy. This way you can get access to database across multiple files by simply including the file once and access it anywhere.

<?php
//connect to mysql database
$con = mysqli_connect("localhost", "myusername", "mypassword", "testdb") or die("Error " . mysqli_error($con));
?>

Register.php

This php file contains the code for the user registration process. The access to this page will be restricted for signed in user. We do this by checking out the session variable.

<?php
session_start();

if(isset($_SESSION['usr_id'])) {
    header("Location: index.php");
}

include_once 'dbconnect.php';

//set validation error flag as false
$error = false;

//check if form is submitted
if (isset($_POST['signup'])) {
    $name = mysqli_real_escape_string($con, $_POST['name']);
    $email = mysqli_real_escape_string($con, $_POST['email']);
    $password = mysqli_real_escape_string($con, $_POST['password']);
    $cpassword = mysqli_real_escape_string($con, $_POST['cpassword']);
    
    //name can contain only alpha characters and space
    if (!preg_match("/^[a-zA-Z ]+$/",$name)) {
        $error = true;
        $name_error = "Name must contain only alphabets and space";
    }
    if(!filter_var($email,FILTER_VALIDATE_EMAIL)) {
        $error = true;
        $email_error = "Please Enter Valid Email ID";
    }
    if(strlen($password) < 6) {
        $error = true;
        $password_error = "Password must be minimum of 6 characters";
    }
    if($password != $cpassword) {
        $error = true;
        $cpassword_error = "Password and Confirm Password doesn't match";
    }
    if (!$error) {
        if(mysqli_query($con, "INSERT INTO users(name,email,password) VALUES('" . $name . "', '" . $email . "', '" . md5($password) . "')")) {
            $successmsg = "Successfully Registered! <a href='login.php'>Click here to Login</a>";
        } else {
            $errormsg = "Error in registering...Please try again later!";
        }
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>User Registration Script</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" >
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- add header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.php">Koding Made Simple</a>
        </div>
        <!-- menu items -->
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="login.php">Login</a></li>
                <li class="active"><a href="register.php">Sign Up</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4 well">
            <form role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="signupform">
                <fieldset>
                    <legend>Sign Up</legend>

                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" name="name" placeholder="Enter Full Name" required value="<?php if($error) echo $name; ?>" class="form-control" />
                        <span class="text-danger"><?php if (isset($name_error)) echo $name_error; ?></span>
                    </div>
                    
                    <div class="form-group">
                        <label for="name">Email</label>
                        <input type="text" name="email" placeholder="Email" required value="<?php if($error) echo $email; ?>" class="form-control" />
                        <span class="text-danger"><?php if (isset($email_error)) echo $email_error; ?></span>
                    </div>

                    <div class="form-group">
                        <label for="name">Password</label>
                        <input type="password" name="password" placeholder="Password" required class="form-control" />
                        <span class="text-danger"><?php if (isset($password_error)) echo $password_error; ?></span>
                    </div>

                    <div class="form-group">
                        <label for="name">Confirm Password</label>
                        <input type="password" name="cpassword" placeholder="Confirm Password" required class="form-control" />
                        <span class="text-danger"><?php if (isset($cpassword_error)) echo $cpassword_error; ?></span>
                    </div>

                    <div class="form-group">
                        <input type="submit" name="signup" value="Sign Up" class="btn btn-primary" />
                    </div>
                </fieldset>
            </form>
            <span class="text-success"><?php if (isset($successmsg)) { echo $successmsg; } ?></span>
            <span class="text-danger"><?php if (isset($errormsg)) { echo $errormsg; } ?></span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4 text-center">    
        Already Registered? <a href="login.php">Login Here</a>
        </div>
    </div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Read: How to Use Google reCAPTCHA in PHP Form

This is how the registration form looks like.

php-sign-up-script

Registration form requires user to fill up name, email id and password and confirm password fields. All the fields are mandatory and user will be asked to provide the data if it is left blank like this.

php-registration-form-validation

Once the user fills out the details and submits the form for sign up, we sanitize the received data to avoid sql injection and validate the form input. If validation fails the user will be shown with the appropriate error message below each form input like this.

php-registration-form-validation-error
php-registration-password-validation

If the validation succeeds the data will be stored in the database and user will be shown with the login link.

Login.php

This file contains the php code for user login process. The access to login form will be restricted for signed in users by checking if the php session is set or not.

<?php
session_start();

if(isset($_SESSION['usr_id'])!="") {
    header("Location: index.php");
}

include_once 'dbconnect.php';

//check if form is submitted
if (isset($_POST['login'])) {

    $email = mysqli_real_escape_string($con, $_POST['email']);
    $password = mysqli_real_escape_string($con, $_POST['password']);
    $result = mysqli_query($con, "SELECT * FROM users WHERE email = '" . $email. "' and password = '" . md5($password) . "'");

    if ($row = mysqli_fetch_array($result)) {
        $_SESSION['usr_id'] = $row['id'];
        $_SESSION['usr_name'] = $row['name'];
        header("Location: index.php");
    } else {
        $errormsg = "Incorrect Email or Password!!!";
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>PHP Login Script</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" >
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- add header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.php">Koding Made Simple</a>
        </div>
        <!-- menu items -->
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="login.php">Login</a></li>
                <li><a href="register.php">Sign Up</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4 well">
            <form role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="loginform">
                <fieldset>
                    <legend>Login</legend>
                    
                    <div class="form-group">
                        <label for="name">Email</label>
                        <input type="text" name="email" placeholder="Your Email" required class="form-control" />
                    </div>

                    <div class="form-group">
                        <label for="name">Password</label>
                        <input type="password" name="password" placeholder="Your Password" required class="form-control" />
                    </div>

                    <div class="form-group">
                        <input type="submit" name="login" value="Login" class="btn btn-primary" />
                    </div>
                </fieldset>
            </form>
            <span class="text-danger"><?php if (isset($errormsg)) { echo $errormsg; } ?></span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4 text-center">    
        New User? <a href="register.php">Sign Up Here</a>
        </div>
    </div>
</div>

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

This file produces a login form similar to this.

php-login-system-script

Login form requires users to provide login credentials (email & password). Both the input fields are mandatory and notify user to fill out if left blank.

php-login-system-form-validation

Here too we sanitize the data and check for user authentication against database records. If it fails, we notify the user with error message like this,

php-login-system-form-validation-error

If the user credentials are legitimate then we create session and store user's id and name in the session variable and redirect to index.php.

Read: How to Upload & Watermark Images with PHP

Index.php

This is the home page of our application and shows login and sign up menu links for visitors and for signed in members will show their name and logout link respectively.

<?php
session_start();
include_once 'dbconnect.php';
?>
<!DOCTYPE html>
<html>
<head>
    <title>Home | Koding Made Simple</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" >
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.php">Koding Made Simple</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="nav navbar-nav navbar-right">
                <?php if (isset($_SESSION['usr_id'])) { ?>
                <li><p class="navbar-text">Signed in as <?php echo $_SESSION['usr_name']; ?></p></li>
                <li><a href="logout.php">Log Out</a></li>
                <?php } else { ?>
                <li><a href="login.php">Login</a></li>
                <li><a href="register.php">Sign Up</a></li>
                <?php } ?>
            </ul>
        </div>
    </div>
</nav>

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Logout.php

This file will be fired up when the user clicks on the logout link. The user logout process is fairly simple. It destroy session and unset the user data from the session.

<?php
session_start();

if(isset($_SESSION['usr_id'])) {
    session_destroy();
    unset($_SESSION['usr_id']);
    unset($_SESSION['usr_name']);
    header("Location: index.php");
} else {
    header("Location: index.php");
}
?>

Once you created all the above files, run the app and you will see the home page like this,

php-login-registration-system-home
index.php - Home Page

Now click on the sign up link and you will be redirected to the user registration form,

php-registration-form

Now enter the form details and submit the sign up button. If everything goes right then you will be registered and notified with a message like this,

php-registration-success

Now go to the login form through the login link.

Provide the login credentials and you will be signed in and redirected to the index page.

signed-in-user-home-page
index.php as signed-in user

Click on logout to sign out the session and you will be taken back to the index page again.

home page
After Log out

Download

That's it. You have successfully created user login and registration system in php and mysql.

Read Also:

I hope you find this php login/registration script useful. Meet you in another interesting tutorial!

Last Modified: 7-Sep-2017

5 Star Rating System using jQuery, CSS and Font Awesome

On 8/29/2017 Be the first to comment!

Hey! Today I'm going to show you how to create a simple 5 star rating system using jquery and pure css. Star Rating System is very popular online and is used in most of the websites these days. It allows users to rate contents, comments, reviews etc. and let others know if it is good or bad. There is a wide range of star rating plug-ins available in the market. But I'm going to show you a dead simple way to implement this 5-star rating system without using any plug-ins. All we need is jquery library and css.

star rating system jquery css font awesome

Building jQuery 5-Star Rating System:

To implement the star rating system, we must create a list of stars that looks empty or gray by default. The stars should be highlighted when the mouse hover over them and turn to gray when it exit to a different area of the webpage. And the rating should be counted when the user clicks on the stars and the value should be preserved in a hidden text field.

Read: Create Fullscreen Video Background using HTML5 & CSS

For the stars I'm not going to use images, but the vector icon library, 'Font Awesome'. I have already used it in a tutorial about creating social sharing buttons. The library is easy to use and can create scalable vector icons which you can style with css.

Step 1) Load Required Libraries

We'll need two libraries for building the star rating system, one is jquery and the other is font awesome. Hence we'll first load them in our web page.

<head>
    <link href="path/to/font-awesome.css" rel="stylesheet" type="text/css" />
    <script src="path/to/jquery-1.10.2.js"></script>
</head>

Step 2) Creating HTML List of Stars

Next we have to add a set of stars to the page. For that we will use the html list and add the 'star' icon from font-awesome lib.

<input id="star_rating" name="star_rating" type="hidden" />
<ul>
    <li><i class="fa fa-star fa-fw"></i></li>
    <li><i class="fa fa-star fa-fw"></i></li>
    <li><i class="fa fa-star fa-fw"></i></li>
    <li><i class="fa fa-star fa-fw"></i></li>
    <li><i class="fa fa-star fa-fw"></i></li>
</ul>
<div id="msg" name="msg"></div>

In the above markup we have also included a hidden text box to store the user rating and a placeholder to display the notification to users.

Step 3) Add Some CSS Styling

It's time to add some css styles to prettify the plain looking stars.

<style type="text/css">
ul {
    margin: 0;
    padding: 0;
}

li {
    font-size: 30px;
    color: #F0F0F0;
    display: inline-block;
    text-shadow: 0 0 1px #666666;
}

#msg {
    color: #A6A6A6;
    font-style: italic;
}
</style>

Okay! The above styles will produce a page with 5 stars like this one,

star rating tutorial jquery css

As I have said before, stars should be highlighted when the user clicks or hover mouse over it. So we need to add css style for highlighting stars in yellow.

.highlight-stars {
    color: #F4B30A;
    text-shadow: 0 0 1px #F4B30A;
}

Read: How to Store Image into Database with PHP & MySQL

Step 4) jQuery Script

Finally we have to add some jquery functions for the rating system to work. Even though we have stars and everything, nothing will happen unless we have some UI interactive functions. Here we have to write mouse handlers to highlight / un-highlight the stars when the user hover over the stars or leave them. And when they click on the stars the rating should be stored in the hidden field and notified to the user with a message.

<script type="text/javascript">
$(document).ready(function(){
    $('li').mouseover(function(){
        obj = $(this);
        $('li').removeClass('highlight-stars');
        $('li').each(function(index){
            $(this).addClass('highlight-stars');
            if(index == $('li').index(obj)){
                return false;
            }
        });
    });

    $('li').mouseleave(function(){
        $('li').removeClass('highlight-stars');
    });

    $('li').click(function(){
        obj = $(this);
        $('li').each(function(index){
            $(this).addClass('highlight-stars');
            $('#star_rating').val((index+1));
            $('#msg').html('Thanks! You have rated this ' + (index+1) + ' stars.');
            if(index == $('li').index(obj)){
                return false;
            }
        });
    });

    $('ul').mouseleave(function(){
        if($('#star_rating').val()){
            $('li').each(function(index){
                $(this).addClass('highlight-stars');
                if((index+1) == $('#star_rating').val()){
                    return false;
                }
            });
        }
    });
});
</script>

Done! Now we have everything in place. Run the page in the browser and you'll see 5-star rating system. Hover over the stars and click on them to rate it and you can see a message on the rating you have provided.

jquery 5 star rating system

Store User Rating into Database:

In case you want to store user rating in the database, you need to do it with the help of some server scripts like php.

Remember we have retained the rating in a hidden text box? You can simply submit the form using ajax and access the rating field value with php.

Here is a rough php script to get the user rating and store it in mysql database.

<?php
// store user rating into mysql db
$rating = $_POST["star_rating"];
$con = mysqli_connect("localhost", "root", "", "db_rating") or die("Error " . mysqli_error($con));
$sql = "INSERT INTO tbl_rating(rating, timestamp) VALUES('" . $rating . "', '" . @date('Y-m-d H:i:s') . "')";
mysqli_query($con, $sql) or die("Error " . mysqli_error($con));
?>

Read: How to Lazy Load Images using PHP and JavaScript

That's how you can implement 5 star rating system using jquery, css and font awesome. There's no need to use third party plug-ins to add user rating system to your website. I hope you find this tutorial useful. Please don't forget to share it in social media.

Best Monitors for Eyes (To Avoid Strain & Fatigue) 2017 - Buyer's Guide

On 8/24/2017 Be the first to comment!

Computers are inevitable these days. People look at screens all day regardless of work or game. However, when you continue to look at the monitor for hours it will lead to eye strain and fatigue. Especially professionals like computer programmers, web designers, video editors and bloggers are prone to eye problems due to long hours of working on computers. Therefore, it is important to choose eye-friendly monitors to keep your eyes healthy.

Nowadays monitors are designed with eye care technology to help people with eye problems. Even if you are on tight budget, there are affordable monitors for eyes in the market. To maintain good eye-health you must be choosy with the monitor you use with your desktop pc or laptop. With a wide range of choices, it is definitely a tedious task to choose the best monitor for eyes. This buying guide gives you a good insight into eye care technology and helps you choose the right eye monitor in 2017.

Top 10 Best Monitors for Eyes in 2017

Here are our top 10 best recommended monitors for good eye health.

1. ASUS PB279Q 4K Eye Care Monitor

asus pb279q

With IPS Panel display and excellent 3840 x 2160px screen resolution, ASUS PB279Q is one of the best monitor for eyes. This 27-inch monitor comes with a good ergonomic design and can be used in portrait mode as well. It is built with ASUS Eye Care Technology and supports features like Flicker Free display and Blue Light Filter thus preventing eye strain and fatigue.

And the Smart Dynamic Backlight Adjustment ensures a smooth and eye-friendly user experience. It comes with various height level adjustments and different on-screen filter settings for eye protection. Picture-in-Picture and Picture-by-Picture functions are available and four 4K sources can be viewed on the monitor.

In addition, the ASUS PB279Q packs several types of ports, including a Display Port 1.2, a Mini Display Port and four HDMI 1.4 / MHL ports. Taking into account all of its powerful features ASUS PB279Q is one of the best monitors to avoid eye fatigue out there.

Check Price on Amazon


2. BenQ GW2765HT 27-inch IPS Monitor

benq gw2765ht

BenQ GW2765HT is another good eye monitor with a great ergonomic design. The monitor is 27" in size with a resolution of 2560 x 1440 IPS display. The WQHD panel provides 109 ppi making it suitable for watching movies and games.

For added viewing comfort, it is equipped with an eye-care technology called "Revolution Eyes". This includes features like Zero Flicker and Low Blue Light to prevent eye fatigue.

Being a high-end monitor, BenQ GW2765HT offers a wide range of options to choose from, such as standard, sRGB, movie, echo, game, photo and reading mode. And choosing the Eco mode will result in less energy consumption which is another good thing. It comes with many ports such as VGA, HDMI, DVI-D, and display port. Overall BenQ GW2765HT is a great monitor to consider buying.

Check Price on Amazon


3. ASUS MX27AQ Eye Care Frameless Monitor

asus mx27aq

ASUS MX27AQ is another great choice for eye care monitor with thin and frameless design. The monitor is 27" in size and has good ergonomics with various height adjustments. It comes with 2560 x 1440 px screen resolution and the AH-IPS panel has wide viewing angles of 178 degrees for a minimum color shifting.

The monitor features ASUS Eye Care Technology and comes with Flicker Free display and Blue Light Filtering to reduce eye strain and fatigue. In addition, you can choose between different levels of brightness and blue light with the help of the OSD menu which is suitable for long hours of work.

Another good thing about ASUS MX27AQ is its built-in speakers. With Band & Olufsen ICEpower the audio quality is good for entertainment and games. There are 2 HDMI ports, HML ports and a display port on the monitor. Overall ASUS MX27AQ could be another good option to avoid strain on the eyes.

Check Price on Amazon


4. ASUS MX259H 25" IPS Eye Care Frameless Monitor

asus mx259h

ASUS MX259H comes with a 25-inch LED display with 1920 x 1080 px screen resolution. It is built ultra thin and without frame and has an incredible viewing angle of 178 degrees wide for stunning visuals. With ASUS SonicMaster technology, the built-in speakers have a very good sound quality.

It is one of the best monitors for eyes since it is designed with ASUS eye care technology and features TUV certified flicker-free and blue light filter display for less eye strain.

The monitor controls are very sensitive. Plus the audio jack is on the rear side so you have to turn it around to connect the jack which is a slight discomfort.

Besides ASUS MX259H comes with a good ergonomic design and allows you to adjust height level, screen brightness, sharpness etc. As for connectivity, it supports dual VGA and HDMI ports and let you connect other devices to it.

Check Price on Amazon


5. BenQ BL2711U 27" IPS 4K Monitor

benq bl2711u

BenQ BL2711U is a 27-inch monitor with IPS Panel and 4K HD resolution display. It has a dynamic contrast ratio of 20,000,000: 1 for amazing color accuracy. The screen colors are rendered professionally with 100% sRGB and Rec 709 color space.

The monitor comes with Zero Flicker and Low Blue Light technology to avoid eye fatigue and strain. The display is great especially for designers and graphic artists, as it offers CAD/CAM mode for enhanced color contrast in 3D color lines. There is also this animation mode that delivers excellent user experience for animators and designers.

BenQ BL2711U is highly ergonomic as you can adjust height and rotation for better viewing angle. Plus the availability of PIP and PBP makes it even better. And it sports various ports like HDMI, Display & DVI-D ports for connectivity.

Check Price on Amazon


6. BenQ EW2750ZL 27-Inch Full HD IPS Monitor

benq ew2750zl

BenQ EW2750ZL is a thin bezel monitor with a 27-inch wide screen and 1920 x 1080px display resolution. Its base is constructed with the shiny plastic slab with a light metal bracket and looks attractive.

It is designed with eye care features such as TUV Rheinland Certified Flicker-free display and Low Blue Light filtering and regarded as the best eye monitor. Thus, even with a high level of brightness, it reduces blinking and prevents eye fatigue.

There are four preset modes for low blue light and let you set it up for multimedia, reading, working or surfing the Internet. The display panel is especially good for multimedia.

The only downside is OSD navigation menu is a bit inconvenient. Otherwise BenQ EW2750ZL is lightweight, attractive with solid color contrast and reproduction.

Check Price on Amazon


7. ASUS VX24AH IPS WQHD Eye Care Monitor

asus vx24ah

ASUS VX24AH is a 23.8" monitor with frameless bezel screen. It features IPS panel display for excellent color contrast with 2560 x 1440 px resolution. The anti-glare screen also makes it easy on the eyes while working. This is a must have feature if you have light sensitive eyes.

To prevent eye strain and fatigue it supports Asus Eye-care features like zero flicker and blue light filter. Plus the display has nice viewing angles up to 178 degrees as well.

ASUS VX24AH includes a VGA port and two HDMI ports with MHL support. Being bezel-less and light the monitor will be aptly suitable if you plan to go with multi monitor set up. Overall VX24AH is a decent eye monitor on budget which is best for pc gaming and everyday use.

Check Price on Amazon


8. Dell UltraSharp U2412M

dell u2412m

Dell UltraSharp U2412M is a 24-inch monitor with excellent color rendering and wide angle viewing. The screen has a resolution of 1920 x 1200 pixels and comes with amazing features for long hours of work.

The monitor has robust built but at the same time looks slim and elegant. It offers easy-to-navigate OSD menu for an excellent user experience. There are as many connectivity ports on the monitor such as five USB ports, VGA, Display Port and DVI so you can connect it to other devices.

But there is no HDMI port which is little disappointing. Apart from that, Dell UltraSharp U2412M comes with so many good features including excellent color contrast and energy efficient.

Check Price on Amazon


9. ViewSonic VA2855SMH 1080p LED Monitor

viewsonic va2855smh

ViewSonic VA2855SMH offers 28-inch screen with Full HD display supporting 1080p resolution. The Super Clear Pro imaging technology offers incredible wide viewing angles. And the color rendering is pretty good with true 8-bit color and a static contrast ratio of 3000: 1.

The monitor is equipped with eye care features such as blue light filtering and flicker less display to reduce eye strain. It also comes with various display modes for preferred color choice such as image, movie, gaming, browsing etc.

It comes with built-in dual-speakers. Although the speakers are small, their audio quality is good and optimal for entertainment. The only downside is the lack of USB port on ViewSonic VA2855SMH.

Check Price on Amazon


10. ASUS ROG SWIFT PG279Q 27" Eye Care Gaming Monitor

asus rog swift pg279q

ASUS ROG SWIFT PG279Q is a 27-inch monitor with support for 2560 x 1440 px resolution. The monitor is built with IPS LCD panel and offers 178 degrees of wide viewing angles for minimal distortion and color change. It has a very fast response time and supports G-Sync and FreeSync adaptive refresh rates.

Built with ASUS eye care technology, the monitor supports low blue light filter and flicker free display for less eye fatigue. The display is smooth, eye-friendly and offers a rich multimedia experience.

ASUS ROG SWIFT PG279Q is very ergonomic and can be adjusted tilt, height, swivel and pivot for comfortable viewing. The monitor comes with two usb ports, a display port and hdmi ports. Although it is a bit pricey, you get what you pay for. This is an amazing eye monitor for the best gaming experience.

Check Price on Amazon


How to Choose the Best Eye Monitor - Buying Guide

In order to choose the right eye monitor, you must clearly understand about eye care technology and its positive impact on maintaining good eye health. Features like blue light filter, zero-flicker, refresh rate, anti-glare screen are important for an eye-friendly monitor. And there are other general factors like resolution, ergonomics to be considered as well. So here we present the detailed buying guide to help you choose the best monitor to prevent eye strain.

What are Eye Care Technologies?

Working extended period of time on computer can cause eye fatigue. This is because you look at the screen from a very close distance which obviously leads to Computer Vision Syndrome (CVS). So the solution to this problem is to work on monitors that are easy on the eyes. And brands like ASUS, BenQ, Viewsonic etc. have developed some technologies for designing eye-friendly monitors which include features like low blue-light, flicker free, anti-glare, ergonomics etc.

1. Blue Light Filter

The first and foremost important feature to look for in an eye-friendly monitor is the low blue light filter. Blue light is the harmful blue-violet radiation from the monitor and can cause eye damage, strains, headaches, and sleeping disorders. Children are most prone to eye damage than adults due to this blue light. If you are serious about your eye health then you must definitely choose a monitor designed with low-blue light technology. And the monitors we have recommended above have this feature and provides easy to access OCD menu to choose from various levels of blue light to use throughout the day.

2. Flicker-Free

The second important eye technology to look for in a monitor is flicker-free display. In general, flickering is the state of the LED backlight rapid on/off cycle and this is how the screen maintains brightness level. When you work on low-brightness flicker can be noticed. When the display flickers, the pupil of the human eye expands and contrasts according to the frequent change in brightness. In case of prolonged use, flickering can cause eye strain, fatigue and headache. So how could you avoid this problem? The monitor with dynamic backlighting will be gentle on the eyes and will give you a better working experience. So pay attention to the "Flicker-free" screen when selecting the monitor.

3. Anti-Glare/Matte Display

A monitor with anti-glare or matte display will dissipate reflected light, thus reducing eye strain and fatigue. Smooth, glossy screen reflects light directly backwards and causes unwanted glare. They are distracting and put strain on your eyes. So make sure your eye monitor comes with anti-glare panel that you will definitely like.

4. Ergonomic Build

Ergonomics is important. Monitor with good ergonomic design will be convenient to work for long hours. It lets you adjust the height level according to your preferences. Viewing the monitor from the wrong angle or height is the main cause for eye problems. So go for ergonomically designed monitor when you shop for the best eye monitor.


Other Factors to Look for in Eye-Monitor

Monitor Size is Important

Monitor size depends purely on your nature of work and comfort level. Basically they come in three different sizes, small (17 - 18"), standard (19 - 24") and large (25 - 30") screen. Monitors with too wide screen may be inconvenient for some. In such case going for multi-monitor setup would be better. Instead of one big monitor you can get two small monitor and do the job faster.

If you are a graphic designer or a gamer, then a large screen monitor would be more convenient to fit so many windows at a time. On the other hand if you are copywriter or video editor, then you can use double or triple monitor setup where you can open up a reference web page on one screen and work with the application on the other.

Screen Resolution

The resolution of the screen has a direct impact on eye health. The popular screen resolutions are 1080p, 1440p, and 4K (2160p) monitor. Too high or too low resolution is not good for eye health. Therefore, in general, the text and icons should be large enough for a better view. For standard size monitor ranging between 22 to 24 inches, 1080p resolution is the best and gives you great picture quality. Anything above 24", it is better to choose 1440p or 4k resolution.

Display Panel

Another important factor to pay attention is the type of display panel a monitor uses. There are three main types of display panels available on the market today and are IPS, VA and TN panels. Of the three, the TN Panel (Twisted Nematic) is the cheapest and has a fast response time and a high refresh rate. This type of panel is used a lot in game monitors, but they are not best for the eyes. Second, VA (Vertical Alignment) Panels are a good mid-level option and are considered to have decent color accuracy, brightness and contrast ratio. On the other hand the In-Plane Switching (IPS) Panel has the eye-friendly display and has better viewing angles and color accuracy. Although little expensive, they are very suitable for intensive graphics work. Therefore it is highly recommended to go for a monitor with the IPS panel.

Brightness and Contrast Ratio

Brightness - Too much brightness may lead to visual strain. Most high-end monitors have a brightness level ranging between 300 and 350 cd/m2. But a brightness of 250 cd/m2 is considered to be good for eye health.

Contrast ratio - It is the difference between the luminance of the brightest white and the darkest black that a monitor can produce. The higher the contrast ratio, the better the color accuracy.

Viewing Angle

A monitor with a larger viewing angle let you see from the sides of a screen without a change in color and brightness level. Generally monitors with viewing angle above 170 degrees will be easy on the eyes.

Refresh Rate

Monitors with 60Hz refresh rate are more common these days and means that the display is capable of producing 60 frames per second. It is true that low refresh rate monitors may cause eye problem. But as for LCD monitors, 60Hz refresh rate is more than enough to avoid eye fatigue. You don't need to go beyond that, but it doesn't hurt to go with higher refresh rate monitors since they are not expensive. Monitors with a 120Hz or 144Hz refresh rate can be much smoother and offer a very good gaming experience.

Response Time

It defines how fast a monitor display transition takes place and is measured in mille seconds. In general the monitor with lower response time is good.

I/O Ports

Often a feature overlooked at first but people regret later. Make sure your monitor has a sufficient number of I/O Ports and has convenient access to it. There must be at least two USB ports, a HDMI port and a Display port on a monitor. If you plan to connect monitor to the laptop, then verify what kind of port the laptop has. Most laptops come with HDMI port. Therefore, the monitor you choose must also have a compatible compatible port on it to connect the device.

Over to You

We hope this guide has helped you get an idea of what to look for in the best eye monitor. As a professional I work at the computer all day and know the importance of maintaining good eye health. So when you shop for a monitor, do yourself favor and buy an eye-friendly monitor.

Best Kali Linux Compatible Wireless Adapters/Dongles 2017

On 8/20/2017 Be the first to comment!

Here are the best kali linux compatible wireless adapters and usb dongles for 2017. Kali Linux is a Linux distribution mainly used for Penetration Testing, accessing N/W Security & Ethical Hacking. The process of choosing a wireless adapter or usb dongle to work with Kali Linux is not an easy task. It's just because the Operating system doesn't support all kinds of wifi adapters.

For example Pentesting requires a card to go into monitor mode and do packet injection which all cards can't do it. The Card's chipset and drivers is what determines if an adapter is compatible with kali or not.

Below I have listed out the most popular chipsets for Kali linux and Wireless adapters compatible with them. They work well for Penetration testing too.

Popular Kali Linux Compatible Chipsets:

  • Atheros AR9271
  • Ralink RT3070
  • Ralink RT3572

Best Kali Linux Compatible Wireless Adapters:

1. Alfa AWUS036NHA (Atheros AR9271 Chipset Compatible)

Check Price

Alfa-AWUS036NHA

Alfa AWUS036NHA is a best wifi adapter for pentesting. For penetration testing, Atheros AR9271 is a good chipset and you can go for Alfa AWUS036NHA card if you plan to run Kali as VM. Just get the job done without hassle.

  • Compatible with any 802.11b, 802.11g or 802.11n routers using 2.4Ghz band
  • Supports multiple input multiple output
  • High speed transfer TX data rate of up to 150 mbps
  • Includes 4" detachable antenna of 5 dbi which can be upgraded up to 9 dbi.
  • Works with 64/128-bit wep, wpa, wpa2, tkip, aes security protocols.
  • Supports Windows 2000, XP 32/64, vista 32/64 & Windows 7 Platform. So compatible with Kali Linux running as VM on these hosts.

Get It Now From Amazon »

2. TP-Link TL-WN722N (AR9271 Chipset Compatible)

Check Price

best wifi card for kali linux

Another great USB Wireless Adapter for cheapest price. TP-Link TL-WN722N uses AR9271 Chipset and has great range of up to 150Mbps. The card is easy to set up and works perfectly with Kali Linux.

  • Supports Wireless speed of up to 150Mbps
  • Works both on Infrastructure and Ad-Hoc Mode
  • Includes a detachable 4dbi omni directional antenna
  • Supports WPS & USB 2.0
  • Compatible with Windows XP, Windows Vista, Windows 7, 8, 8.1 platforms

Get It Now From Amazon »

3. Alfa AWUSO36NH (RT3070 Chipset Compatible)

Check Price

best alfa wifi adapter for kali

One of the best wireless dongle for pentesting. This 2 Watt 802.11n compatible Wi-fi dongle is quite powerful and supports Ralink RT3070 Chipset. It has very good range and perfect for packet monitoring.

  • Compatible with any 2.4GHz routers of 802.11n, 802.11b/g/n wireless standards
  • Includes removable 4" - 5 dBi antenna and can be be upgraded up to 9dBi
  • Supports 64/128-bit WEP, WPA, WPA2, TKIP, AES Protocols
  • Compatible with Windows 2000, XP 32/64, Vista 32/64, Windows 7, Linux (2.4.x/2.6.x),and Mac (10.4.x/10.5.x)

Get It Now From Amazon »

4. Alfa AWUS036NEH (RT3070 Chipset)

Check Price

Alfa-AWUS036NEH

This Wi-Fi Dongle is similar to Alfa AWUSO36NH in specs and covers long range. Alfa AWUS036NEH is exceptional for penetration testing and is good at packet injection and monitoring.

  • Works well with any 802.11b/g and 'N' routers
  • Includes removable 4" 5dBi antenna (upgradable up to 9dBi)
  • Supports packet injection & monitor mode
  • Protocols supported - 64/128-bit WEP, WPA, WPA2, TKIP, AES
  • Compatible with Windows 2000, 32/64 bit XP, Vista, Windows 7, Linux (2.4.x/2.6.x), Mac (10.4.x/10.5.x) Power PC& PC.

Get It Now From Amazon »

5. Panda PAU05 (RT3070 Chipset)

Check Price

Panda-PAU05

Panda 300mbps wireless n usb adapter is very reasonably priced and works with 802.11g/n standard and offers a data speed of up to 300 Mbps. It is exceptionally good considering the price but make sure to download and install the latest driver (alone) for Windows 7 and leave the rest of the setup to Windows itself.

  • Compatible with any 802.11g or 802.11n 2.4Ghz wireless routers
  • Wireless speed of up to 300Mbps
  • Works with both infrastructure and ad-hoc modes
  • Security protocol compliant: 64/128bit WEP, WPA, WPA2, 802.1x and 802.11i, Cisco CCS V1.0, 2.0 and 3.0
  • Supports 32/64-bit Windows 8/7/Vista, Mac OS 10.4/10.5/10.6/10.7/10.8/10.9 and latest version of 32/64-bit Mint, Ubuntu, Fedora, openSUSE, etc.

Get It Now From Amazon »

6. Alfa AWUS051NH (Ralink RT3572 Chipset)

Check Price

Alfa-AWUS051NH

Alfa AWUS051NH is little expensive but has amazing signal reception and works well on Kali Linux and in 5Ghz Monitor mode.

  • It is compatible with 802.11n draft 3.0, 802.11a/b/g wireless standards
  • Work with 2.4GHz and 5.8GHz band and MIMO (Multiple Input Multiple Output)
  • Supports wireless transfer RX data rate of up to to 300 Mbps
  • Allows wireless data encryption with 64/128-bit WEP, WPA, WPA2, TKIP, AES Protocols
  • Compatible with Windows 2000, 32/64 bit XP & Vista, Linux (2.4.x/2.6.x), Mac (10.4.x/10.5.x) Power PC& PC.

Get It Now From Amazon »

What Makes a Wireless Adapter Compatible with Kali?

Kali is a popular Linux Distro commonly used by security and penetrating testing professionals. Not all wireless adapters are made to work with Kali Linux. Only the drivers and chipsets decides if they are compatibile with the OS or not.

In addition, if you run it as a VM, the USB adapter must also be compatible with the host operating system.

Any of the above recommended devices will be good for pentesting, but you are called to decide which one is right for your configuration.

Long-range adapters with big dBi antenna are great for distance but not exactly compact. On the other hand smaller ones with built-in antenna are good for staying low profile.

Over To You:

So these are the best wireless adapters and usb dongles for kali linux. Though all these adapters works well with Kali, just make sure if it is the right one for your environment. For example if you wish to run Kali on Virtual box in Windows 7 host then make sure the card is compatible with Windows 7 OS. Also you must be cautious about the coverage range. Antenna with bigger dBi would be better for longer range. This helps you avoid future trouble. If you find this useful please share it with others to give them good suggestion.

Also Read:

Create Fullscreen HTML5 Video Background with CSS

On 8/15/2017 Be the first to comment!

Hi! Today I'm going to share a code snippet to create fullscreen html5 video background on websites. Full screen background has become a popular trend of web design and nothing grabs user attention than a good video background. It will make website visitors to stop and take notice thus increasing the time spent on a website. It is a great marketing tactic to get business leads as well. Here we will see how to add full screen background video using HTML5 and CSS. You don't need any plug-ins which is a huge plus of this method.

HTML5 Video:

HTML5 supports so many media objects and Video is one among them. The compatibility of HTML5 Video is very high and most modern browsers support it.

HTML5 has this <video> element to add videos to a webpage with several configuration attributes like 'autoplay', 'loop' etc. It acts as a placeholder for a video object and supports the 'poster' attribute which will be replaced by the first frame of the video on loading. Therefore it is a good practice to set the poster image as the first frame of a video.

Read: Quick PHP Form Validation using Parsley.js

Create Placeholder for HTML5 Video:

First create a html5 placeholder for the video and add the video source to it.

HTML Markup:

<video id="bgvideo" poster="images/malachite-kingfisher.jpg" playsinline autoplay loop muted>
    <source src="malachite-kingfisher.webm" type="video/webm">
    <source src="malachite-kingfisher.mp4" type="video/mp4">
</video>

Note that without the 'loop' attribute, the video will play only once.

Next add some css to set the video to full screen, center on page and place it behind all the html elements of the web page. Also add a fallback image to the background and this could be the first frame of the video.

CSS:

#bgvideo {
    background: url('images/malachite-kingfisher.jpg') no-repeat;
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transition: 1s opacity;
    background-size: cover;
    z-index: -100;
}

Read: Detect and Redirect to Mobile Site using PHP and JavaScript

Add Text to the Webpage:

Now let's add some text in the foreground. This could be an excellent place to promote products or services.

HTML Markup:

<div id="bgtext"> 
    <h1>Malachite Kingfisher</h1>
    <p>One among the rarest birds in the World!!!</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
    <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac.</p>
    <p><a href="#">More Details Here »</a></p>
</div>

Simply adding the text won't do. We have to layer the text in front and position it in such a way that it does not hide the background video, but enough to catch user's attention. We can use css to do it.

CSS:

#bgtext {
 color: white;
 width: 33%;
 background: rgba(0,0,0,0.3);
 font-family: Arial Narrow, sans-serif;
 font-weight: 100;
 padding: 28px;
 margin: 28px;
 font-size: 19px;
 float: right;
 text-align: justify;
}

h1 {
 margin-top: 0;
 font-size: 42px;
 text-transform: uppercase;
 letter-spacing: 4px;
}

a {
 background:rgba(0,0,0,0.5);
 color: #FFFFFF;
 text-decoration: none;
 padding: 7px;
 transition: .6s background;
 display: inline-block;
}

a:hover {
 background: rgba(0,0,0,0.9);
}

#bgtext button {
 width: 80%;
 background: rgba(255,255,255,0.23);
 color: #FFFFFF;
 margin: 14px auto;
 font-size: 18px;
 padding: 6px;
 display: block;
 border: none;
 border-radius: 3px;
 cursor: pointer;
 transition: .3s background;
}

#bgtext button:hover {
 background: rgba(0,0,0,0.5);
}

That's it! We now have a nice full background video layered with text on the front.

fullscreen-html5-video-background-css

The following is the complete script of our example.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Fullscreen HTML5 Video Background</title>
    <link href="css/mystyles.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <video id="bgvideo" poster="images/malachite-kingfisher.jpg" playsinline autoplay loop muted>
        <source src="malachite-kingfisher.webm" type="video/webm">
        <source src="malachite-kingfisher.mp4" type="video/mp4">
    </video>
    <div id="bgtext">
        <h1>Malachite Kingfisher</h1>
        <p>One among the rarest birds in the World!!!</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac.</p>
        <p><a href="#">More Details Here »</a></p>
    </div>
</body>
</html>

mystyles.css

body {
    margin: 0;
    background: #000000;
}

#bgvideo {
    background: url('images/malachite-kingfisher.jpg') no-repeat;
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(-50%) translateY(-50%);
    transition: 1s opacity;
    background-size: cover;
    z-index: -100;
}

#bgtext {
    color: white;
    width: 33%;
    background: rgba(0,0,0,0.3);
    font-family: Arial Narrow, sans-serif;
    font-weight: 100;
    padding: 28px;
    margin: 28px;
    font-size: 19px;
    float: right;
    text-align: justify;
}

#bgtext button {
    width: 80%;
    background: rgba(255,255,255,0.23);
    color: #FFFFFF;
    margin: 14px auto;
    font-size: 18px;
    padding: 6px;
    display: block;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: .3s background;
}

#bgtext button:hover {
    background: rgba(0,0,0,0.5);
}

a {
    background:rgba(0,0,0,0.5);
    color: #FFFFFF;
    text-decoration: none;
    padding: 7px;
    transition: .6s background;
    display: inline-block;
}

a:hover {
    background: rgba(0,0,0,0.9);
}

h1 {
    margin-top: 0;
    font-size: 42px;
    text-transform: uppercase;
    letter-spacing: 4px;
}

Read: Currency Conversion in PHP using Google Finance API

With native HTML5 Video and little CSS code we can implement full screen video background on your website. Background video is a powerful feature, but it must be handled effectively. Too long or too short video wouldn't cut it. Also make sure to compress video and keep its size no more than 5 MB so that it takes less bandwidth. I hope you like this tutorial. Please don't forget to share it in social media.

Contact Form

Name

Email *

Message *