Dock Shadow

2 posts, 0 answers
  1. Andy Ho
    Andy Ho avatar
    41 posts
    Member since:
    May 2010

    Posted 12 Aug 2010 Link to this post

    Hi,

    Any quick way to add shadow to a rad dock?

    Thanks.
  2. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 12 Aug 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top