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..

    How to make certain text not selectable with CSS [duplicate]

    How to Create 3 Column Layout with CSS Only?

    How to delay one transition but not the other?

    How to offset content under a navbar when using height:100%?

    How to center banner with jquery mobile?

    How to fix layout to browser window without scroll

    How to change the background color of an input field when text is entered?

    CSS Z-Index: How to show element above parent's sibling? (and have cousin above parent)

    How to make CSS border show on radio button click

    How to make submit input and text input equally spaced

    How to style Zend Checkboxes

    How to display source code with indent in a web page? HTML? CSS?

    How do I add another tab using CSS3? Noy Hadar

    How do I maintain modularity with mixins?

    How to add more css properties into an CSS rule without remove other existing properties

    how to space 4 images equally within a div?

    How to match an element's background colour with 2 semi-transparent element background colours

    How to create a progress dialog when switching the webpages?

    How to use jQuery and CSS to write vertical drawer

    How to show css div depending upon model value?

    How to display only the first few lines of a div (clamping)?

    How to play a video inside a logo

    How to get conditional css to work on Blogger/Blogspot?

    How to edit CSS style of a div using C# in .NET

    How to prevent a p:menubar from being overlapped by the contents of a CSS template?

    HTML/CSS: how to put text both right and left aligned in a paragraph

    How to change class of all children with jquery?

    How do I install and use Groundwork CSS

    How can I turn a bullet image into a link?

    How to create this image using CSS?