Skip to main content

How to Give Box shadow in css


In css3, Provide Drop shadow or box shadow and that you can use to create better look website for other.

HTML file Is :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>krButani</title>
<style>
.t1 {

margin:10px;
padding:20px;
height:200px;
width:200px;

font-size:24px;
font-family:Verdana, Arial, Helvetica, sans-serif;

background:#5886F1;
color:#fff;
border:5px solid #fff;

/*
*
* First offset Indicates x position.
* Second offset Indicates y Position.
* Third offset Indicates the size of the shadow.
* Fourth offset Indicates the darkness of the shadow.
* And Last Give the Color Of The Shadow
*
*/

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

/* Box Shadow have Two Prefix is below */

-moz-box-shadow:0px 0px 3px 2px #999; /* -moz is mozila */
-webkit-box-shadow:0px 0px 3px 2px #999; /* -webkit is Chrome */
}

/* if you can give diffent proerties of all side apply like below */

.t2 {

margin:10px;
padding:20px;
height:200px;
width:200px;

font-size:24px;
font-family:Verdana, Arial, Helvetica, sans-serif;

background:#5886F1;
color:#fff;
border:5px solid #fff;

box-shadow:2px 0px 5px green, -2px 0px 5px blue,0px -2px 5px red,0px 2px 5px black;
}
</style>
</head>

<body>
<div class="t1">
Title
</div>
<div class="t2">
Title
</div>
</body>
</html>

Output Is :


Popular posts from this blog

My new Jquery Plugin name is krDailog

This is my new jquery plugin i hope this is use full to you if you require this plugin than contact me

 /*
    krDailog Version 1.0
    Author: krButani
    email: butanikartik1108@gmail.com
*/


Require to use this function
    - bootstrap.css new version
    - bootstrap.js new version
    - jquery.js new version
    - jquery-ui.js new version
    - glyphicons font by bootstrap

# you can use new version of all and also use min file also

# include file first this way

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/krDailog.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <s…

Intent demo pass with text demo in Android

First Create Two acitvity layout file name firstscreen.xml second_screen.xml java filename FirstScreen.java SecondScreen.javafirstscreen.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/firstscreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.krbutani.intentpasswithdatademo.Firstscreen">

<Button
android:text="Goto Second"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignPare…