Warp Shadow using CSS 3


It’s an old time to create an effect of drop shadow using Photoshop or any other image editing tool for web page.

Thanks to CSS 3 which enable us to apply nice shadow effect through easy way.
It increase the speed of page load and downloads the lesser bytes compare to images for shadow effect.

In this blog our main focus will be on applying warp shadow effect using CSS 3.
Basically there is not any direct style which can be applied as a warp shadow to any block. We are going to apply some trick here, using shadow and border curve.

CSS 3 user must be aware of Box Shadow and border radius.
Following is the syntax for
Box Shadow

Browser

-webkit-box-shadow                  Webkit
-moz-box-shadow                       Firefox
box-shadow                                  Standard

Syntax

5px             5px           5px       #000000
x-ofset,      y-ofset,    blur,      color

For more detail on Box Shadow visit the following link.
http://www.css3.info/preview/box-shadow/

Border Radius

Browser

-webkit-border-radius                 Webkit
-moz-border-radius                      Firefox
border-radius                                 Standard

For more detail on Border Radius visit the following link.
http://www.css3.info/preview/rounded-border/

Let’s take a div element to apply warp shadow.

First we are going to apply basic style class (i.e. .box) like dimensions, padding etc.
.box
{

padding-top: 50px;
padding-bottom: 50px;
padding-left: 100px;
width: 200px;

}

Now, we are going to apply some color to the div. As it’s all about CSS 3 why not to try some gradient color.
For more detail on Gradient color style visit the following link.
http://css-tricks.com/css3-gradients/

.boxColor
{

background: -webkit-gradient(linear, left top, left bottom, from(#FFDB4D), to(#EABB00));
background: -moz-linear-gradient(top,  #FFDB4D,  #EABB00);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFDB4D’, endColorstr=’#EABB00′);

}

It’s time to apply shadow effect to our div.
.shadow_box
{

-moz-box-shadow: 0px 10px 5px #9C9C9C;
-webkit-box-shadow: 0px 10px 5px #9C9C9C;
box-shadow: 0px 10px 5px #9C9C9C;
position: relative;

}

After applying all those above css classes our div will look as per the following screen shot.
<div class=”box boxColor shadow_box”>
Warp Shadow
</div>

To give a nice warp shadow effect lets first move to border radius effect. I will apply shadow and border radius effect to span tag.
span
{
background-color:#671209;
color:#fff;
box-shadow: 0px -10px 5px # 8F8F8F;
-moz-box-shadow: 0px -10px 5px # 8F8F8F;
-webkit-box-shadow: 0px -10px 5px # 8F8F8F;
border-radius: 50% / 20px;
-moz-border-radius: 50% / 20px;
-webkit-border-radius: 400px 80px; /* webkit browsers apparently can’t use a % for ellipse border radius */
}

<span class=’warp’>&nbsp;&nbsp;&nbsp;&nbsp;Span&nbsp;&nbsp;&nbsp;&nbsp;</span>
Our span will look like following screen shot.

As you can see in the above sample as per the curve border shadow is also curved.

Here it’s a trick. Assume that there is no color in span and the shadow color is white (or same as the outer background color) and this span has the same width of our div and it is placed after the div height then it will cut the shadow of the div in curved shape. That will give look of the warp shadow. Below is the concept which shows creating new shape by overlapping two different shapes.

Bellow screenshot shows how the div will look after cutting it’s shadow by the curved border of the span tag.

For the above example CSS for the Span would be
.shadow_box span.warp
{

width: 100%;
height: 13px;
position: absolute;
bottom: -26px; /* ~equal to the height + shadow y offset + shadow blur radius */
right: 0px;
box-shadow: 0px -10px 5px #fff;
-moz-box-shadow: 0px -10px 5px #fff;
-webkit-box-shadow: 0px -10px 5px #fff;
border-radius: 50% / 20px;
-moz-border-radius: 50% / 20px;
-webkit-border-radius: 400px 20px;

}

HTML would be
<div class=”box boxColor shadow_box”>
Warp Shadow
<span class=’warp’>Span</span>
</div>

Following is the complete code for CSS and HTML.
CSS Code
<style>
.box
{

padding-top: 50px;
padding-bottom: 50px;
padding-left: 100px;
width: 200px;

}

.boxColor
{

background: -webkit-gradient(linear, left top, left bottom, from(#FFDB4D), to(#EABB00));
background: -moz-linear-gradient(top,  #FFDB4D,  #EABB00);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFDB4D’, endColorstr=’#EABB00′);

}

.shadow_box
{

-moz-box-shadow: 0px 10px 5px #9C9C9C;
-webkit-box-shadow: 0px 10px 5px #9C9C9C;
box-shadow: 0px 10px 5px #9C9C9C;
position: relative;

}

.shadow_box span.warp
{

width: 100%;
height: 13px;
position: absolute;
bottom: -26px; /* ~equal to the height + shadow y offset + shadow blur radius */
right: 0px;
box-shadow: 0px -10px 5px #fff;
-moz-box-shadow: 0px -10px 5px #fff;
-webkit-box-shadow: 0px -10px 5px #fff;
border-radius: 50% / 20px;
-moz-border-radius: 50% / 20px;
-webkit-border-radius: 400px 20px;

}
</style>

HTML Code

<div class=”box boxColor shadow_box”>

Warp Shadow
<span class=’warp’></span>

</div>

Posted in CSS 3 | Tagged , , , , , , , , , | 15 Comments

Add your own shortcut key functionality in Enhanced rich text box of SharePoint 2010


In SharePoint 2010 we have one more multiline textbox editor type i.e. enhanced rich text box. This RTE provides much more facility to format your content. Many of the functionalities can be performed through short keys of your keyboard. For e.g. to apply Bold style on your selected text one can use “Ctrl + B”, same way to insert hyperlink shortcut key is “Ctrl + K”. Keyboard short cut functionality saves user’s efforts and time to perform certain task. Sometime we might have a requirement to add our own short cut key combination to perform certain functionality in RTE. Here, I am going to demonstrate that how we can insert current date time in RTE at current cursor position using shortcut key combination.

There are many ways to achieve this but I am going to explain the simplest approach by modifying the SharePoint javascript file used for rich text box. For Enhanced Rich Text box Editor SharePoint uses “SP.UI.Rte.js” file (minified version) and it uses “SP.UI.Rte.debug.js” for the debugger. You can find these two files at following path.

“C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS”

“SP.UI.Rte.js” is a compressed script file so that we will use here “SP.UI.Rte.debug.js” file to understand the Rte’s short cut functionality. After that we have to apply those changes in compressed file also.

In “SP.UI.Rte.debug.js” file at line no 6200 you will find the method to detect the shortcut key. See the following screenshot.
*It is not necessary that  you find at line no 6200, it might be somewhere else as per the version #of your SharePoint 2010. Try to search for RTE.ShortcutKeys.getShortcut method.

In the above code it checks the pressed keys and returns available action / method to be performed on that key combination. This is the place where we are going to write our custom code for our required key combination.

We are going to insert current date time in the text area at current cursor position. We are going to use “Ctrl + L” combination to perform this task.

In above code you can see “$p0” object which holds the key pressed event data in RTE. Following screen shot shows the various properties of the object “$p0”.

For us following are the main useful properties.

altKey
ctrlKey
shiftKey
keyCode

True value of either altKey or ctrlKey or shiftKey indicates that one or combination of those keys are pressed in keyboard either left or right keys. keyCode indicates the ASCII code of the pressed key along with the alt or ctrl or shift keys. If you have pressed only ctrl key then it will give ASCII code of ctrl in keyCode. For e.g. if user has pressed “Ctrl + B” then ctrlKey will be true and keyCode will contain the ascii value of B i.e. “66”

Let’s start some code to detect “Ctrl + L” to insert current date time.

Before “return RTE.ShortcutKeys.$Z_0[$v_0];” (at line # 6205) we are going to check whether pressed key combination is “Ctrl + L” is or not. 76 is an ascii value of L

//— Begening of the Code
if ($p0.ctrlKey && $p0.keyCode == 76) {
//Now we are going to fetch the current object of the RTE.
var $v_3 = RTE.Cursor.get_range(); //current text object of the RTE
var $v_4 = $v_3.parentElement();

if (!$v_4) {
return;
}

var $v_5 = $v_4.ownerDocument.createElement(‘SPAN’); // Create new element to add SPAN tag in the content text area which will hold the current date time as text.

var currentDate = new Date(); //date object which will be used to get the current date time.

var y = currentDate.getYear(); // Current year

var m = currentDate.getMonth()+1; // Current month and added + 1 because in javascript it starts with index 0

var d = currentDate.getDate(); // Current Date

$v_5.innerHTML = d + ‘/’ + m + ‘/’ + y + ‘ ‘ + currentDate.getHours() + ‘:’ + currentDate.getMinutes(); // Assign current date and time as a html conent of the SPAN tag.

if ($v_3.isEmpty()) { // if selected text of the RTE is empty then insert new element before the cursor
$v_3.insertBefore($v_5);
}

else { // if there is some text is selected then replace that text with the current date time
if ($v_5.innerHTML.trim() !==) {
$v_3.replaceHtml();
}
$v_3.wrapRange($v_5);
}

$v_3.moveToEndOfNode($v_5);

RTE.Cursor.update();// Update the RTE content

}

//— End of the Code

Now, test the code in RTE. Set focus on the Enhanced RTE and press the “Ctrl + L” key. See, following screen shot.

Now add some text and select some part of it, see the following screen shot.



Now, press the “Ctrl + L” key and replace the selected text with current date time.

Your final code will look like following screen shot.

Posted in SharePoint 2010 | Tagged , , , , , , , , , , , , | 6 Comments