Tile with colorgradient

2 posts, 0 answers
  1. Thomas Luck
    Thomas Luck avatar
    38 posts
    Member since:
    Jun 2006

    Posted 12 Feb 2015 Link to this post

    Hello Telerik team

    I am curious whether i can create a color gradient like windows 8 tiles have it.

    Greetings
    Thomas Luck
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3599 posts

    Posted 12 Feb 2015 Link to this post

    Hi Thomas,

    Have you tried overriding the background CSS property of the desired tile? Here is an example I built by using an online gradient generator:

    <telerik:RadTextTile runat="server" ID="RadTextTile1" CssClass="myGradientTile"></telerik:RadTextTile>
    div.RadTile.myGradientTile
    {
        background: #a90329; /* Old browsers */
        background: -moz-linear-gradient(top#a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top#a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top#a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top#a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
        background: linear-gradient(to bottom#a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
    }


    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top