I'm trying to emulate the way this site does their shadow gradient inside divs ( http://zeroturnaround.com/software/jrebel/roi-calculator/#headline )
Check this picture
Not sure how to get the border shadow portion that the arrows point to
Thanks !
It's an image they are using to do it. This is their source sprite sheet
That specific border image in near the bottom.
I agree with you though, it looks good and I wish it was possible in pure code but I'm sure if that's possible yet, or else I'd be able to help you more.
By the way, I suggest you get the Firebug add on for Firefox. All I had to do was right click in that area and inspect with firebug and it told me right away what exactly that border was created from.
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...
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.
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.
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
Anyone know if there's a bullet-proof (standards-compliant to XHTML1.1 strict, cross-browser, non-javascript) way to use CSS and background images to turn an inline link into a visual button that will stretch to accommodate different amounts of text (or text resizing)?
I'm thinking I need to use background images as the designer's buttons have rounded corners with a different coloured border. It must work in IE6 (Government job).
Im pretty sure the answer is no, but as always thought it worth a check.
Amongst other things, I've already tried variations on the sliding doors technique, but can't make it work as the solution needs to work inline (i.e. within a paragraph) and I can't set a fixed width.
EDIT: There are several buttons, each of which has a different colour for foreground, border and background. They also have a gradient 'face', but no need for transparency or anything else 'unorthodox'. Unfortunately I can't link to examples as I'm under an NDA.
I'm not sure if this will fit your needs, but I helped someone with hoverable rounded buttons in this post... it uses only HTML and CSS.
I don't think you can do this within your restrictions. The problem is that you have one element, but to properly do stretching, you need three (unstretched left side, stretched center, unstretched right side).
Yeah, you probably need to make image buttons for this.
Just as an aside in future, here's a page on CSS button styling.