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 stop CSS element style from getting into my class style?

    How to modify css in OpenERP 7?

    How can we customize vs2010 css editor template?

    How to make text disappear when HTML5 Video has finished loading?

    How can I show an attribute as text with CSS?

    how to make a text ele to the right of a left floated ele automatically occupy the rest width?

    How to style CGI python with CSS?

    How to style child components from parent component's css file?

    How can I make a color background that expands out of the 960 grid system?

    How to change css on multiple elements

    How do I make current menu item active in asp.net webforms

    CSS - How to Affect All Images EXCEPT for One Particular Image

    How can I ensure that my absolutely positioned div is tall enough to meet my sticky footer?

    How to add jQuery file to navigation website?

    This should be simple but want to do it right. CSS display:none; how to turn back on according to @media

    How to make hover gradient on a div element like on Wella.com?

    Only show one hidden table row at a time

    How to open links in a new tab/window using CSS? [duplicate]

    how do i change a div background when you hover over a button in another div?

    How to load a apply jQuery function upon appending a
    via Ajax?

    when hovering on iframe, how do I trigger a class on element outside of iframe?

    HTML+CSS: How to force div contents to stay in one line?

    How do I make buttons that have the same transitions and some of the same properties, but then also have some differing properties?

    How to resize divs based on screen width with any approach [closed]

    In CSS, how can I make a div as high as the entire page?

    how to change size of the element using css?

    Hide one div when showing another with JavaScript

    How to display “a” to full of the line

    How do I make a placeholder for a 'select' box?

    How to make CSS color transition time correctly with transform perspective?