Member Avatar for kako13

I have a Blog and I would like to replicate the shadow effect that appear on Omgubuntu.co.uk. I had attached a screen-shoot.

Any idea?

Screenshot-1.png 389.07 KB
Edited by Ezzaral because: Snipped URL. Promotional urls are not allowed in the tech forum.
  • 2 Contributors
  • 5 Replies
  • 90 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by kako13

Dani AI

Generated

already found the right tool and pointed you in the right direction. For readers arriving later who want a closer match to the soft, modern shadow used on OmgUbuntu, here are a few practical refinements and pitfalls to watch for.

Use layered shadows to get a soft, natural falloff (a large, very blurred layer plus a smaller, sharper layer). Keep the shadow on the same element as the border-radius so the corners stay consistent. Avoid animating large blur radii — that is GPU/CPU expensive; prefer transforms or opacity for hover/focus transitions.

Example of a compact, modern approach:

/* subtle, layered card shadow */
.card {
  box-shadow: 0 10px 30px rgba(0,0,0,0.12),
              0 4px 12px rgba(0,0,0,0.08);
  border-radius: 6px;
}

If a parent has overflow: hidden and the shadow gets clipped, move the shadow to a wrapper element or create the shadow with a positioned pseudo-element (::before/::after). For very soft, “floating” shadows you can use a blurred radial gradient on a pseudo-element to mimic photographic drop shadow. For old-IE support, use a PNG shadow image or a conditional stylesheet — IE filters are legacy and not recommended.

Check current compatibility and syntax notes before dropping in vendor prefixes; modern browsers no longer need them. Useful references: MDN box-shadow and Can I Use: box-shadow.

Recommended Answers

All 5 Replies

Member Avatar for kako13

Any suggestion so far? :)

Member Avatar for Kraai

I am trying to figure out what do you mean? You are pointing to something in the screenshot that looks like the border of the container that holds the post. To edit that, you will have to change the content border settings on the html or css file of your site.

If your blog is similar software to the one in your screenshot, then you can see if you can get the same template for that.

Member Avatar for kako13

I am trying to figure out what do you mean? You are pointing to something in the screenshot that looks like the border of the container that holds the post. To edit that, you will have to change the content border settings on the html or css file of your site.

If your blog is similar software to the one in your screenshot, then you can see if you can get the same template for that.

I found it. It is called the box-shadow property... It is a beatiful addon to CSS.

-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.15);
	box-shadow: 0px 0px  10px 5px rgba(0,0,0,0.15); 
        box-shadow: 0px 0px 10px 5px rgba(0,0,0); /* The Fallback */

More info: http://www.w3.org/TR/2010/WD-css3-background-20100612/#box-shadow

Member Avatar for Kraai

Cool, glad your problem is solved

Good Luck

Member Avatar for kako13

Thank for your help! :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.