1001st way to make a block with rounded edges and shadow without using pictures

    I'll start with an example

    How it works?

    For "normal" browsers, a substrate layer is used from the embedded svg file (using the data protocol).
    Internet Explorer uses the VML layer as a conditional comment.

    And in the first and second cases, the shadow is a set of translucent rounded rectangles.

    Benefits

    • Cross-browser solution
    • No additional server requests

    disadvantages

    • Not a universal solution
    • Complex implementation
    • Fixed width block
    • Animation Artifacts
    Enjoy using those who liked it :)

    Also popular now: