I am working on a div which should show a drop shadow at the bottom and right. Here is the link to the html page. I dont know why the classes are not getting applied to the div. Your help is highly appreciated.
Tooltip.html
Here is the image mock-up which shows the Drop shadow affect
Image-mockup
This might help...
You can also drew shadows using css3 in the browser that supported it. Like:
-moz-box-shadow
Related
I'm embedding a YouTube <iframe> in my website. I would like to delete the gray gradient shadow under the title of the video but can't seem to find how.
I did a lot of research on this but found that you can't remove the title anymore. I was wondering if you can still remove the gray shadow under the title. I just want the video to look clean with a play button and I'd add a drop shadow behind it. I need this because this is in line with my design of my website.
Playing with inspect element I found that .ytp-gradient-topis the class that causes the gradient shadow, I just don't know how to get rid of it.
Any help is appreciated!
Gradient shadow I want to remove
You can't change the CSS of an element within the iframe due to the same origin policy.
At the .shadow class add text-shadow:none and remove the remaining tags that are not working. There are no shadows for that iframe after you add this !
Hope this is what you are looking for...
I am working on a single page website. Framework used by me is Bootstrap. My question is regarding navigation bar. I want my navigation-bar to be transparent on first-page and as I scroll down it should become visible and be fixed as I continue to scroll down.
I am able to make it transparent on first-page but I am unable to make it appear on second page. It remains transparent.
Pls help me. I am a newbie.
Thanks in advance
You can make two navbars one will be transparent and one will be the fixed one and then use JavaScript onScroll and display CSS property for removing and adding your navigations.
Sounds like you have to use JavaScript. If I understand right and you want the navbar on top transparent and if you begin to scroll no more transparent and then fixed to top?
i was wondering if anyone could help me with css. ive been stuck on using background-attachment:fixed;
it just doesn't seem to work. im basically trying to make an image a link, but i don't want it to scroll so i made it into a bg image.
i have...
when i take out background-attachment:fixed, i see the image, but once i put it in, it disappears. i deliberately left out text between the anchor tags so the image is like a clickable link : D
ive been super stuck. help would be much appreciated. thanks! css syntax is confusing...
Simply add a character to your anchor tag. A non breaking space will do the trick.
See my example on the very useful tool, jsfiddle.net.
After all these years, I still haven't learned CSS layout, so bear with me. I'm trying to create a container with rounded corners that I generated in Photoshop. The background of the container is white, so I have eight images: top-left-corner, top, top-right-corner, right, bottom-right-corner, bottom, bottom-left-corner, and left.
The edges have a drop shadow around them so yes, I do need 8 sides. How would I lay this out in CSS? I tried and failed miserably to do it with a table + CSS. How would I do it using divs?
EDIT:
Simply speaking, how would I lay something out like the pseudo code below
[IMG][IMG WIDTH="100%"][IMG]
If I write this in HTML, my images are split over three lines. How do I get it all to fit on one line?
I like the tutorials that have been put together by Matthew James Taylor. These tutorials won't help much with rounded corners, but they are great for CSS layout ideas.
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths
Check out: Curvy Corners, it's a jQuery plugin that will look at your CSS and find any CSS3 properties for webkit: -webkit-border-radius: 10px; and make any corners with that CSS property round, in every browser.
I use it for IE and it works great! All you have to do is add the .js file to your directory and link it at the bottom of your HTML and it does all the work for you :)
There are a bunch of ways to do this, http://www.devwebpro.com/25-rounded-corners-techniques-with-css/.
In the bottom cap of this page (bottom with corners) I seem to be having a weird IE6 issue. I've tried Google with no luck, as really, how do you ask this question.
In IE6, the corner images that are floated left and right seem to cause the whitespace to drop.
http://www.duncanhadleytriathlon.ca/
Any suggestions for why this may be?
Are you using paddings? If so, you must subtract the padding from your other values (left/right).
I don't know if it helps or not but I noticed that there is also an issue (probably the same one that you said) in Firefox 3.6.3.
I suggest you use the DD_roundies javascript for making rounded corners in IE browsers. It can be found at:
www.dillerdesign.com/experiment/DD_roundies/
[Edit]: The issue that i said is about the green panel's rounded corner at the bottom of the page.
My suggestion would be to use position: absolute to place the images instead.
Other ideas would be:
Drop #mtmi and just make the background of #mtm white (you'd need to modify the images to make the background black instead of transparent.
Even possibly drop #mtm and but the images directly in #main
Ignore old browers and use CSS3 rounded corners.