Ask your WordPress questions! Pay money and get answers fast! (more info)

CSS Question - PNG drop shadow on a video WordPress

  • SOLVED

I'm trying to add a PNG drop shadow image to a video and I'm hoping someone can help. Before and After pictures are attached. One more thing is, and this is important I believe, the video size may change. The width will stay the same but the height might change. I have 2 different size videos that I use. 640x360 which is currently the one in the picture. It might change to 640x480, which should pull the drop shadow down even further. Also, the drop-shadow has a transparent background, not white. I will need the php and the css. Never done one of these so I'm not sure how to approach it.

PHP Code

<div style="margin-top:8px;width:640px; height:360px; border: 1px #A1BD11 solid;" align="left"><? echo stripslashes($svp_featured_index_video); ?></div><div style="clear:both;"></div><? } ?>


Before and After images.

http://www.flickr.com/photos/[email protected]/8100013777/in/photostream
http://www.flickr.com/photos/[email protected]/8100013829/in/photostream/
http://www.flickr.com/photos/[email protected]/8100013699/in/photostream/

Thanks.

Answers (4)

2012-10-18

Jatin Soni answers:

The php code you posted is incomplete. However here is the way you can achieve what you want.

Wrap one more div around your video ( this is because you can freely use your video div and never interfere with shadow div else you can use same div as well )

Example:

<div class="shadow-div">
<div your video div>
your php content
</div><!-- video div end -->
</div> <!-- shadow-div end -->


Now write css like below

.shadow-div{
background:url(images/your-shadow.png)no-repeat center bottom;
padding:0 10px 50px /* this you need to play according to your image */
}


Karlo Rihoo comments:

Question:

What if I need to change the size of the video which will bring it down on the page. Should I readjust the CSS everytime I change the height of the video?


Jatin Soni comments:

If you will set background for shadow

background: url(image/shadow.png)no-repeat center bottom;

than it will automatically stretch div according to the video height.


Karlo Rihoo comments:

So one more question before I put this to use later; Does the div ending go before or after the div with clear both:


<div style="clear:both;"></div>


Jatin Soni comments:

I don't understand what you mean. Can you please post your code? Where exactly you want to place this code <div style="clear:both;"></div>


Karlo Rihoo comments:

My code is one line no matter what editors I use (Notepad++ or Aptana 3), so I'm having a hard time reading it. I've also tried downloading in ASCII mode which someone else recommended (Doesn't work either). That's why the code is incomplete and I'm having a hard time explaining that part. Either way, I'll try this out and let you know. I'll come back to that last question if this doesn't work out.

Thanks.


Jatin Soni comments:

Okay no problem.

In share try to wrap shadow div around your entire video code (div or iframe or whatever) and use the css I provide you and it should work. Just let me know if you have any question regarding.


Karlo Rihoo comments:

Sure thing.

Thanks.


Karlo Rihoo comments:

Well, this is the result so far.

http://www.flickr.com/photos/[email protected]/8101514508/in/photostream

Both sides get cutoff.

This is what my css looks like.


.shadow-div{background:url('images/bottom-shadow-with-corners.png')no-repeat center bottom;padding:0 1px 87px;}


If I change my code to this:


.shadow-div{background:url('images/bottom-shadow-with-corners.png')no-repeat center bottom;padding:0 0px 87px;}


It doesn't go any farther to the right. Not sure why the image gets cut off.

Let me know.


Jatin Soni comments:

Change this padding value padding:0 1px 87px; to something like padding:0 10pc 87px means change 1px value till you get proper shadow on both side


Karlo Rihoo comments:

I tried that. It doesn't work. I keeps going farther to the right. But both sides are still cut off.

Also, if I add the width and height attribute to the shadow-div class, it shows the full drop-shadow BUT it never lines up. I've tried every possible combination with padding.


Jatin Soni comments:

There should be something which is not lining up that div. Check child div css if there is something which causing this issue. May be your video div may have some margin or so. You need to check each respective elements. If you can't do than please post html, php and css code or at least your site URL.

If that is also not possible than add me on Skype ID "pixelandgrain" and will check directly on your screen.


Karlo Rihoo comments:

Here's the code:


<div style="margin-top:8px;" class="maintitle_noborder">Welcome to <span id="blog-name"><?php bloginfo('name'); ?></span></div>

<div style="margin-top:8px;" align="left"><p><? echo stripslashes($svp_index_welcome); ?></p></div><? } ?>

<? if ($svp_featured_index_video) { ?><div style="margin-top:8px;" class="maintitle_noborder"><span>Today's</span> Featured Video Pick</div>

<div class="shadow-div">

<div style="margin-top:8px;width:640px; height:360px; border: 1px #A1BD11 solid;" align="left"><? echo stripslashes($svp_featured_index_video); ?></div>

</div>



The maintitle_noborder class has nothing that I can see that will influence this.

I even tried removing the width and height from:


<div style="margin-top:8px;width:640px; height:360px; border: 1px #A1BD11 solid;" align="left"><? echo stripslashes($svp_featured_index_video); ?></div>


and nothing. I also tried using margins for the drop shadow and it would move the video across the page with it.

Let me know.

Thanks.


Jatin Soni comments:

I am looking now into your code and get back to you soon..


Karlo Rihoo comments:

Sure thing.

Thanks.


Jatin Soni comments:

Okay you wrote all css inline which is not good. I have done css for you just place into your theme style.css file

.shadow-div{
background:url(images/bottom-shadow-with-corners.png)no-repeat center bottom;
background-size:100%;
padding:20px 20px 87px;
margin:8px auto;
-moz-box=sizing:border-box;
-webkit-box=sizing:border-box;
box=sizing:border-box;
width:640px;
height:360px;
display:block;
}

.video-div{
margin:0;
padding:0;
width:640px;
height:360px;
border:1px solid #a1bd11;
display:block;
background:#f4f4f4; /* this just for testing you can remove once you done */
}


Now remove all inline style from Video div and assign class="video-div" to that div as below

<div class="shadow-div">
<div class="video-div">
<?php echo stripslashes($svp_featured_index_video); ?>
</div>
</div>


Width for the shadow div and video div is the same and I used box-sizing to keep width and height same for both divs. I also added background-size:100% which will always fits shadow with your shadow-div. However you may require to play with padding.according to you shadow.

If you still not getting what you want. I would strongly suggest you to come on skype to resolve your issue on the spot.


Karlo Rihoo comments:

OK.

I will try this later today and let you know.

Thanks.


Karlo Rihoo comments:

Hi,

That partially worked. It looks ok but it's not exactly what I'm looking for. Yes this is the
same drop shadow image. Weird I know. I think it has something to do with the size that it's being
declared as. It's being declared as 640x360 but the image is 736x311. The video is 640x360. When I change
the size of the image, it goes somewhere else on the page.

Here's a pic of what it looks like.

http://www.flickr.com/photos/[email protected]/8106336184/in/photostream

Here's a pic of what it should look like.

http://www.flickr.com/photos/[email protected]/8106330549/in/photostream

I'll try to figure this out.

Thanks.


Jatin Soni comments:

Try to change this css

.shadow-div{

background:url(images/bottom-shadow-with-corners.png)no-repeat center bottom;
background-size:100%;
padding:20px 20px 87px;
margin:8px auto;
-moz-box=sizing:border-box;
-webkit-box=sizing:border-box;
box=sizing:border-box;
width:640px;
height:360px;
display:block;
}


Karlo Rihoo comments:

I already tried. Is it any different from what you already gave me?


Jatin Soni comments:

I have changed padding value in that css


Karlo Rihoo comments:

I have the padding set at 5px 5px 77px and it looks like what i showed in the picture.

When I change it to 20px 20px 87px it doesn't look right and it moves the video along with it.


Jatin Soni comments:

Can you please come on skyep quickly? my id is "pixelandgrain"


Karlo Rihoo comments:

Hi Jatin,

Thanks to you, I figured out how to add another drop shadow within 5 minutes since that one wasn't going to work.

Thanks for your help.

2012-10-18

Jerson Baguio answers:

try to add this on your div style

border-left: solid 2px #000;
border-bottom: solid 2px #000;
box-shadow: 4px 5px 10px;

2012-10-18

Kyle answers:

You can do this with just css if you want. To do corner drop shadows or corner-lifted dropshadows there is a technique which will rotate the target object side to side, insert the shadows, then display the object normally. You do this with pseudo classes, that way you can assign the shadow :before and :after. You should probably assign a class to your divs. So if it was <div class="flickrimage">

.flickrimage:before, flickrimage:after {
-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}


By doing it this way the height of the shadow is relative to the height of the object being rotated. If you want to make the shadow bigger or smaller adjust the -3deg

http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

2012-10-18

Jim Dugan answers:

Something like:


.vidshadow { width: 800px; height: 400px; background-image: "dropshadow.png" }

<div class="vidshadowshadow">
<div style="margin-top:8px;width:640px; height:360px; border: 1px #A1BD11 solid;" align="left"><? echo stripslashes($svp_featured_index_video); ?></div><div style="clear:both;"></div>
</div>
<? } ?>