CSS Nav Element Hover With Bottom Border - css

I am trying to replicate the following effect : http://amplifiedvideodesign.com/capture.png
I can set the background color for hover but how can i do the border and the little arrow that are on the bottom?
Thanks.


For the border you can just use the same code you just have to set a border and update its color. You can try my example on jsFiddle
.tabs a:hover {
background-color: #444;
border-bottom-color: #484;
color: #484;
}
As for the arrow/diamond/triangle whatever: That's something you can't setup that easily, but the easiest solution would be adding a background rather than using plain HTML/CSS.
Update: Here's an animated example.

Related

Set background color to transparent in safari in css

is there a way to set background-color in safari to transparent? Currently my png is displayed with a white background instead of transparent.
I've tried:
background-color: transparent;
background-color: rgba(255,255,255,0);
appearance: none;
and even
-khtml-background-color: transparent;

Nothing wrong with your CSS, but if you've saved your image with a colored background (e.g. red/white/yellow) it's not possible to "overwrite" this color using CSS. Therefore you need to make sure the background of the image is transparent.
Take a look at the following page to get an idea of what I described.
https://www.causevox.com/blog/using-the-right-logo-image-transparent-png/

How do you style the scrolling part in jScrollPane?

I have no idea how to style the box that you drag to scroll on jScrollPane. I have tried .jspScrollBar; no luck.
Fiddle

I updated your fiddle with the solution I think you are looking for.
Specifically, you change the color of the "drag" portion of the scrollbar using the jspDrag class like so:
.jspDrag {
background-color: #000; /*Changes drag box to black */
}
Updated fiddle: http://jsfiddle.net/n8Xgz/16/

onmouseover change div text color

On mouseover a div the background color is changing but not the div text color.
Can you please let me know if it is possible?
It's just a plain css and html.
my css code is
.divTable-row:hover{
background:#65A3B8;
color:#ffffff;
}

Try to force the style, with !important , like this:
.divTable-row:hover{
background:#65A3B8;
color:#ffffff !important;
}
this could fixed the issue when overlapping with another css rule.
Example fiddle with an overlapping problem: http://jsfiddle.net/dSGf7/2/
Fixed example using !important : http://jsfiddle.net/dSGf7/3/

Transparent menu/navigation bar

I cannot solve a css problem.
I have a nav bar which should be transparent. But the links on it also get transparent due to the opacity attribute and because they are child elements of the transparent navigation bar.
can u help me to solve this?

If you dont want your link text to be affected you should modify the rule for the .container selector to look like this
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
it will keep your background color design without affecting your text
Opacity , as well said here several times , affect the element and its children
Using opacity . Text is affected
Using rgba(255,255,255,0.5), children not affected
Take care of the other rules that can take action due your javascript and hover situations
Fiddle here
Bis spater

The solution is easy. Just set the background-color CSS property to transparent.
.nav {
background-color: transparent;
}

In css3 you can use transparent backgrounds instead of making the whole panel transparent.
To add a transparent color you can do: rgba(255,255,255,.5) where the .5 is the opacity.

You should try just a simple css background property.
.navbar
{
background-color: transparent;
}

I use transparent png image (bg.png) with the desired opacity, and call it like this:
.menu
{
background: url('bg.png') repeat;
}
The png image can be small, even 1x1 pixel. The repeat is to fill the background space entirely.

its as simple as this
background: none;

Blur div css issue

I have a div that has transparent background-color. I want to blur its background color so the transparent color is blurred and the text on the div is more easy to see.
I appreciate your help.

You can't blur a color. That wouldn't do anything.
What I think you'd want to do is add a text-shadow enough that the text is blurred and maybe darken the background. Try this:
#not-selected {
text-shadow: 1px 1px 2px #<slightly darker text color>;
}
#text-background {
background-color: #<a little darker>;
}

CSS doesn't have the ability to blur, you can however, simulate the effect using background images.
Also, you may want to look into filters, but these only work in IE.

Resources