How achieve rounded shadow behide a rounded element using css3


Tags: html,css,css3

Problem :

i want to make a element look like in this image

Round shadow on element

i have tried a a lot to do this kind of shadow in css, and finally think why not ask to community about it, whether its possible or not.

i know in box-shadow means shadow on box. is there something like round-shodow

i want it in css3 without any images. is it possible? if yes then how is it possible? if no than ok.

i know box-shadow and border-radius very so please don't tell me about that things, check again its different kind of shadow



Solution :

Here's a starting point at least. You can use the before (and after) pseudo elements. http://jsfiddle.net/FHLJM/

div {
    background-color: #f00;
    border-radius: 50%;
    height: 250px;
    width: 250px;
    margin: 30px auto;
    position: relative;
    z-index: 1;
}
div:before {
    content: '';
    height: 150px;
    width: 250px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#fff));;
    position: absolute;
    top: 100px;
    right: 50px;
    -webkit-transform: rotate(45deg);
    z-index: -1;
}
div:after {
    content: '';
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: #f00;
    position: absolute;
    z-index: 1;
}

Again, it's not a perfected method by any means, but it is able to accomplish what you're looking for to some degree.


    CSS Howto..

    Show background image out of the div [closed]

    How to fade gradient, image or texture as background?

    How do you organize your template structure in CodeIgniter?

    How to get the perticluar image from large set images in one image using css

    site only shows half screen on mobile? Rest of screen is just body background?

    How do I emulate a page break with CSS and HTML?

    How to center the navigation on a drop down menu?

    How do I restrict style to affect content only in modal?

    How to change text color (and background) on nav bar links when hovering? [duplicate]

    How do I use -moz-element() to Create a Reflection?

    how do you center columns/rows

    How to test a CSS parser?

    How to make images always relative to a div using CSS

    How to provide default font height or content when

    or has no characters?

    How to select, focused textarea?

    How do I make a CSS triangle with smooth edges?

    How can I insert text before an item with CSS?

    How can I stay organized when writing CSS? [duplicate]

    how to set a path to the static files which is surver independnet

    How to grows up a div height with a table that has your rows added dynamically?

    CSS - want to remove a blank space but have no idea how to get rid of it?

    How to add a Google icon font to pseudo :before

    html/css: how to on a single line center “title” and have on right buttons

    How can I keep the progress bar number value centered and on top?

    How to prevent selecting text on double click?

    How to format f.submit with css, glyphicons, and symbol?

    How to avoid gaps using Isotope with Masonry layout sortby random

    How do you override CSS applied by jQuery UI theme properly?

    How to inspect precompiled minified SASS code

    How to make a border colorful using CSS?