how to create css gradients and shadow


Tags: html5,css3,svg,gradient

Problem :

I am trying to create a border bottom gradient similar to the image below..Click here Just wondering if this can be achieved using css ?



Solution :

    .myshadow
    {
        position:relative;
        width: 100px;
      height: 80px;
        -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
           -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    .myshadow:before, .myshadow:after
    {
        content:"";
        position:absolute;
        z-index:-1;
        -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
        -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
        box-shadow:0 0 20px rgba(0,0,0,0.8);
        top:0;
        bottom:0;
        left:10px;
        right:10px;
        -moz-border-radius:100px / 10px;
        border-radius:100px / 10px;
    }
    .myshadow:after
    {
        right:10px;
        left:auto;
        -webkit-transform:skew(8deg) rotate(3deg);
           -moz-transform:skew(8deg) rotate(3deg);
            -ms-transform:skew(8deg) rotate(3deg);
             -o-transform:skew(8deg) rotate(3deg);
                transform:skew(8deg) rotate(3deg);
    }
<div class="myshadow"></div>


    CSS Howto..

    How to implement small text list search functionality using CSS attribute selectors

    How can I remove a parent with a certain child inside of it (media queries)

    How have icons/lines change color on scroll down using Jquery/CSS?

    How to reduce my code in both jQuery and CSS

    How do I add quotes to a CSS Variable value, to use it in ::before/::after content? [duplicate]

    How to style a table cell in JavaFX2 using CSS (without removing hover/selection etc.)

    How to replicate this button in CSS

    CSS - how to put divs in the correct position on a webpage [closed]

    Javascript - How to alter a property of a css class

    How do I format text to wrap onto a second line using bootstrap?

    How to apply rounded borders to highlight/selection

    How to include stylesheet file only for one div?

    how to get this modal window to work correctly?

    How can I manage the dimansions of #homeSub in CSS so it won't diappear when I move my mouse from homeBox to homeSub?

    How to prevent mobile browser micro-shrinking HTML block level elements?

    How do I displaying a list of multiple objects, one below the other, in HTML using Django?

    Parsley.js 2.0 How to use the provided css file

    How to show reply and retweet icons using hover effect with css?

    How to center CSS-shapes within a wrapper in a row

    How to set the text absolutely (CSS) in the middle of a div despite a changing width div behind him?

    how to fix the css padding in this situation?

    How to get rid of css inherited from a css file?

    How to find dependand JS and CSS

    how can I center this menu with CSS

    how can I hide an element inside iFrame using Jquery or CSS

    How to use CSS with Django forms?

    How can I keep percentage-based elements from overlapping?

    How to fix this arrow shape created using CSS in IE9

    Show a gif image over a section to take up the space

    jQuery how to click a pseudo class element :after [duplicate]