This is a migrated thread and some comments may be shown as answers.

Dock Shadow

1 Answer 54 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Andy Ho
Top achievements
Rank 1
Andy Ho asked on 12 Aug 2010, 10:35 AM
Hi,

Any quick way to add shadow to a rad dock?

Thanks.

1 Answer, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 12 Aug 2010, 03:39 PM
Hello Andy,

Unfortunately there is no quick way to add shadows to an element just by using CSS. Actually CSS3 allows us to apply shadows to any HTML element, but all available Internet Explorer versions (6,7,8) does not support it. The expectations are, that Internet Explorer 9 will support CSS3, but the problem with previous versions still exists. Please, find bellow a sample code, showing how to add a shadow to RadDock using CSS3. It will work in latest version of Firefox, Opera, Safari and Chrome:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <style type="text/css">
        .RadDock
        {
            /* applies shadow to the element */
            -moz-box-shadow: 0 0 8px #666;
            -webkit-box-shadow: 0 0 8px #666;
            box-shadow: 0 0 8px #666;
            /* applies rounded corners to the element in order not to be seen some unwanted white parts in the sprite image */
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadSkinManager runat="server" ID="rsm1" Enabled="true" ShowChooser="true">
    </telerik:RadSkinManager>
    <telerik:RadDock ID="rd1" runat="server" Width="300" Height="300" Top="40" Left="40" Title="Shadows and Rounded Corners"
        EnableRoundedCorners="true" Skin="WebBlue">
        <ContentTemplate>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a velit urna, eu
                dictum enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
                ridiculus mus. Vivamus at risus nec eros pellentesque tempus. Quisque cursus purus
                sed odio faucibus nec faucibus risus commodo. Cum sociis natoque penatibus et magnis
                dis parturient montes, nascetur ridiculus mus. Quisque rutrum consectetur nisl,
                et tempus nisl aliquet in. Nam vitae mauris lobortis velit euismod rhoncus. Nullam
                dui sem, sollicitudin id volutpat tempus, vestibulum eu urna. Pellentesque tortor
                orci, pretium et imperdiet eu, feugiat sit amet magna. Ut tempor sem quis orci facilisis
                commodo.
            </div>
        </ContentTemplate>
    </telerik:RadDock>
    </form>
</body>
</html>

As for Internet Explorer, I would suggest you to take a look at a new technique, that allows developers to use some CSS3 rules in all IE versions. It is called CSS3 PIE. PIE is a utility for Internet Explorer (currently versions 6-8) which gives it the ability to parse and render a number of the most useful CSS3 properties.

We do not use it for our controls and of course we do not support it, and it will be your decision to use it or not. I have tested it, and it seems it really allows you to apply CSS3 properties to IE.  However, this is still beta version and I don`t know how stable it would be.

Greetings,
Bojo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Dock
Asked by
Andy Ho
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Share this question
or