Css Archives | Page 2 of 4 | Codeexecute

Difference between Blur and spread in Box -shadow

Box-Shadow property in css is for defining the shadow of any div or block element.
A quick look of all attributes assigned to the box-shadow property:-

Box-shadow: offset-x | offset-y | blur-radius | spread-radius | color | inset;

Value Description Requierd/Optional
offset-x The horizontal displacement of the shadow from the div or block Requierd
offset-y The vertical displacement of the shadow from the div or block. Requierd
blur-radius The blur effect on shadow Optional ,Default value is 0
spread-radius Size of the shadow,Positive values to grow,negative values to shrink Optional ,Default value is 0
inset If inset keyword is specified then the shadow will be within border optional, Default shadow is assumed to be a drop shadow

Hence the blur radius (optional) is for blurring the shadow , for 0 value the shadow will be sharp, while the spread radius (optional) increase the size of the shadow and if negative then decreases the size of shadow.

If spread radius is 0 ,i.e. no size has been defined for shadow then the shadow will be same size as that of blur radius.

box-shadow:2px 2px #000;

No Spread , No Blur

box-shadow:2px 2px 3px #000;

No Spread , Only Blur

box-shadow:2px 2px 0px 3px #000;

Only Spread , 0 Blur

box-shadow:2px 2px 3px 3px #000;

No Spread , Only Blur

box-shadow:2px 2px 3px 3px #000;

Spread & Blur

box-shadow:2px 2px 3px -3px #000;

Negative Spread

box-shadow:0px 0px 3px 3px #000;

Spread and Blur with homogeneous shadow

box-shadow:0px 0px 3px 3px #000 inset ;

Inset shadow


Bootstrap contextual classes

The bootstrap is all about defined classes,that we can use in our HTML template to beautify it without much hard work.So here in this series we will discuss about Bootstrap contextual classes.The contextual classes are the classes defined by bootstrap design team to indicate about some context.

Bootstrap contextual classes :-

  • .success >> Indicates a successful or positive action
  • .info >> Indicates a neutral informative change or action
  • .warning >> Indicates a warning that might need attention
  • .danger >> Indicates a dangerous or potentially negative action

These contextual classes can be used throughout the HTML template with many HTML elements.

For example in button elements :-

<button type="button" class="btn btn-success">Success</button> <br>
<button type="button" class="btn btn-info">Info</button> <br>
<button type="button" class="btn btn-warning">Warning</button> <br>
<button type="button" class="btn btn-danger">Danger</button> <br>

For Table elements:

<table class="table">

<tr class="success">
<td>Sucess Class</td>


<tr class="info">
<td>info Class</td>


<tr class="warning">


<tr class="danger">


Sucess Class
info Class

Or even in background color:-

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>


Full screen div at any screen and resolution

Add this in your javascript file and call this file after jquery file

function fullsize() 
	var new_height = window.innerHeight; // get new height of window
	var fullsize = new_height; 
	fullsize = parseInt(fullsize) + 'px'; // concatenate string get output in px format  
	jQuery("div").css('height',fullsize); // changing height of div
	jQuery(window).bind('resize', fullsize); // event is call at screen change ( resolution changes )

Note: you can replace ‘jQuery’ with ‘$’ if there is any issue due to ‘jQuery’ Keyword.


Masonry Infinite Scroll With Mysql

$aHost = 'HOSTNAME';
$aUser = 'DBUSER';
$aPass = 'DBPASS';
$aDb   = 'DBNAME';
$aCon  = mysqli_connect($aHost,$aUser,$aPass);

$limit = 15;
$page  = isset($_REQUEST['page']) ? $_REQUEST['page'] : 1;
$start = ($page - 1) * $limit;

$aLimit = "LIMIT {$start},{$limit}";
$aSql = "SELECT * FROM wp_posts WHERE 1 {$aLimit}";
$aResult = mysqli_query($aCon,$aSql);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Infinite Scroll With Mysql</title>
<link rel="stylesheet" href="css/style.css" />
<div id="gridConainer" class="">
	while($aRow = mysqli_fetch_assoc($aResult))
		<div class="box">
			<h1><?php echo $aRow['post_title']; ?></h1>
			<h2><?php echo date("d/m/Y",strtotime($aRow['post_date'])); ?></h2>
			<p><?php echo $aRow['post_name']; ?></p> 
<nav id="page-nav">
  <a href="index.php?page=<?php echo $page; ?>"></a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>

	var $container = $('#gridConainer');
			itemSelector: '.box',
	navSelector  : '#page-nav',    
	nextSelector : '#page-nav a', 
	itemSelector : '.box',     
	loading: {
	finishedMsg: 'No more pages to load.',
	img: 'http://i.imgur.com/6RMhx.gif'
	function( newElements ) {
		var $newElems = $( newElements ).css({ opacity: 0 });
			$newElems.animate({ opacity: 1 });
			$container.masonry( 'appended', $newElems, true );



Download source code Here