When I am trying to set opacity in css, mouse over event is not getting fired. my css code is-
.dropmenudiv_a{
position:absolute;
top: 0;
border: 1px solid white; /*THEME CHANGE HERE*/
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
font:normal 12px Arial;
line-height:18px;
z-index:100;
background-color: lightgray;
width: 200px;
visibility: hidden;
opacity:0.9;
filter: alpha(opacity = 50); // for IE
}
.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
background:url(media/menuover.jpg) repeat-x top;
color: white;
}
background image on mouse over is getting changed in MOZILA but not in IE?When I remove filter: alpha(opacity = 50);, it is workin fine in IE also but then opacity is not coming in IE......????
For IE you have to remove/reset the filter style, like this:
.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
filter: none; /* resets the filter */
background:url(media/menuover.jpg) repeat-x top;
color: white;
}
Tried it in IE8 (Windows 7) with success.
What you're probably seeing is the IE bug where links within a container that has a filter applied become unclickable and unfocusable.
A fix that sometimes works is to add a z-index to your links:
.dropmenudiv_a a {
position: relative;
z-index: 1;
}
Related
I'm trying to recreate these arrows in CSS for a website I'm redesigning to be responsive. These two guys were done with static images but I'd like them to be pure CSS.
This is a sprite that was used for mouseover replacement. The bottom is the mouseover state. The background behind the arrow needs to be transparent.
I thought it would be a simple div with a p or heading tag inside:
<div class="arrow_box">
<p>UTILITIES</p>
</div>
I've searched for examples everywhere and everything I've tried to modify never lets me seem to have full control of the width and height of the element. The width (with the arrow) is 114px. The height (of a single state) would be 29px.
I've played with this for the better part of an hour trying to get it properly sized but nothing seems to work. http://codepen.io/anon/pen/bpBGQL My lack of knowledge on how this works is partially to blame.
So the trick, here, is being able to control the height correctly. Here, I've got the text in a span with a line-height : 0, and padding:15px. Now, we have precisely 30px of height, and can use an ::after pseudo element to fabricate the arrow. The width will be set by the text content, but can be defined with an explicit width rule, as well.
<div class="arrow"><span>text</span></div>
.arrow{
display:inline-block;
height:auto;
background-color:orange;
}
.arrow span{
display:inline-block;
line-height:0;
padding:15px;
color:white;
}
.arrow::after{
width: 0;
height: 0;
position: absolute;
right:0
top: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid orange;
content: "";
}
Add whatever colors / hover states you require. You can see some basic rules in the working fiddle.
Fiddle
You can do this with :after pseudo element. You can change color of pseudo element on hover state like this .arrow_box:hover:after
* {
box-sizing: border-box;
}
p {
margin: 0;
padding-left: 10px;
}
.arrow_box {
background: #627680;
display: block;
color: white;
position: relative;
height: 30px;
line-height: 30px;
width: 114px;
transition: all 0.3s ease-in;
}
.arrow_box:after {
content: '';
height: 0;
width: 0;
position: absolute;
top: 0;
right:0;
transform: translateX(100%);
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;
border-left: 20px solid #627680;
border-right: 15px solid transparent;
transition: all 0.3s ease-in;
}
.arrow_box:hover {
background: #2A92C2;
}
.arrow_box:hover:after {
border-left: 20px solid #2A92C2;
}
<div class="arrow_box">
<p>UTILITIES</p>
</div>
did you consider gradient backgrounds ?
body {
background: linear-gradient(45deg, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray);
/* demo purpose only */
}
.arrow {
text-transform: uppercase;
/* optionnal */
padding: 3px 1.5em 3px 0.5em;
color: white;
background: linear-gradient(225deg, transparent 0.6em, #627680 0.6em) top no-repeat, linear-gradient(-45deg, transparent 0.6em, #627680 0.6em) bottom no-repeat;
background-size: 100% 50%;
/* each gradient draws half of the arrow */
}
.arrow:hover {
/* update gradient color */
background: linear-gradient(225deg, transparent 0.6em, #2A92C2 0.6em) top no-repeat, linear-gradient(-45deg, transparent 0.6em, #2A92C2 0.6em) bottom no-repeat;
background-size: 100% 50%;
}
<span class="arrow"> Utilities</span> <span class="arrow"> testing</span>
You may also want to take a look at Responsive Arrow Breadcrumb Navigation for breadcrumbs and imbricated arrows or Create dynamic arrow-like shape with CSS
Does this pen provide what you need?
http://codepen.io/anon/pen/dMOPmV (may require some pixel pushing to get it perfect)
It just required adjusting:
border-width: 27px;
margin-top: -35px;
and adding a hover state for the main element and before element.
I'd like to apply opacity to the white rectangle on top of the screen (.header) but for some reason the opacity is applied to all the elements (logo and menu items). I tried to play with z-index but that didn't help. How could I fix this? Many thanks
http://jsfiddle.net/ycLqqsgr/1/
body {
background-image: url('http://lorempixel.com/output/sports-q-c-1141-1113-2.jpg');
}
.header {
z-index: 999;
position: absolute;
background: #fff;
opacity: 0.4;
top: 35px;
right: 0;
left: 0;
margin: 0 auto;
width: 90%;
max-width: 1200px;
}
.header-wrapper {
padding: 54px 60px;
}
.header-logo {
position: absolute;
margin-top: -40px;
}
.header_nav {
float: right;
clear: none;
font-family: 'Maven Pro', sans-serif;
font-weight: normal;
}
.header_nav-wrapper {
list-style: none;
}
.header_nav-item {
margin-left: 22px;
float: left;
clear: none;
}
.header_nav-item-a {
color: #474032;
text-decoration: none;
}
.header_nav-item-a:hover {
color: #eee;
}
.header_nav-item-a--btn {
padding: 16px 18px;
border-radius: 5px;
border: 1px solid #474032;
background-color: transparent;
}
.header_nav-item-a--donate {
margin-top: -18px;
}
.header_nav-item-a--btn:hover {
border: 1px solid #eee;
}
That's a common problem. The opacity is applied to all child elements. A workaround is to use rgb color codes. I will give an example with a black background at 0.6 opacity.
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";
Remove the opacity: 0.4 and the background-color:#FFF from .header and instead apply:
.header {
background-color:rgba(255,255,255,0.4);
background-color:rgb(133,231,211);
}
Opacity styles the entire element and its descendants, setting the background color to contain an alpha component fixes this.
Using my translucent color equivalence tool, you can find an appropriate fallback color for browsers which do not support alpha transparency (although today, almost all modern browsers have support for this feature, if they don't, it's likely your site will appear broken regardless). Simply mix white with 0.4 opacity against your green background and you'll be able to reasonably simulate a translucent color.
I don't have access to your background image color, but given it's roughly lime-colored, my tool figured an appropriate fallback of:
rgb(133,231,211)
So I am having a problem. I have looked around and looked around but no luck. I would like to make the background of my body transparent but leave the text non transparent. As it is right now I keep making both the same opacity. Here is my code:
#charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
opacity:1;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 750px;
margin: 0 auto;
}
.content {
padding:20px;
width:710px;
position:relative;
background:#CCC;
opacity: 0.5;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.header {
top:0%;
width: 750px;
height: 200px;
background-image: url(images/header.png);
background-repeat:no-repeat;
background-position:center;
}
.navbar {
height: 50px;
width: 750px;
position: relative;
z-index: 2;
}
#bg {
position: fixed;
top: 25%;
left: 15%;
z-index: -1;
}
div {
display: block;
}
Here is my website (click the link dont type "tccraft.net" in your url it will take you to a facebook page): http://tccraft.net/index.php
Thank you!
Don't use opacity for this, set the background to an RGBA-value instead to only make the background semi-transparent. In your case it would be like this.
.content {
padding:20px;
width:710px;
position:relative;
background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
background: rgba(204, 204, 204, 0.5);
}
See http://css-tricks.com/rgba-browser-support/ for more info and samples of rgba-values in css.
For a fully transparent background use:
background: transparent;
Otherwise for a semi-transparent color fill use:
background: rgba(255,255,255,0.5); // or hsla(0, 0%, 100%, 0.5)
where the values are:
background: rgba(red,green,blue,opacity); // or hsla(hue, saturation, lightness, opacity)
You can also use rgba values for gradient backgrounds.
To get transparency on an image background simply reduce the opacity of the image in an image editor of you choice beforehand.
opacity will make both text and background transparent. Use a semi-transparent background-color instead, by using a rgba() value for example. Works on IE8+
Use alpha value instead of using opacity. See code below:
background: rgba(255,255,255,0.2);
If you use RGBA for modern browsers you don't need let older IEs use only the non-transparent version of the given color with RGB.
If you don't stick to CSS-only solutions, give CSS3PIE a try. With this syntax you can see exactly the same result in older IEs that you see in modern browsers:
div {
-pie-background: rgba(223,231,233,0.8);
behavior: url(../PIE.htc);
}
To make the background of your body transparent please try this style, it worked for me, add "ad" at the end of your desired color code
background-color: #42413Cad !important;
I would add Hex color code for transparency
background-color: #42413C+hexcode
https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
It would be somethin like this:
background-color: #42413C2E
It is equal to that color + 18% alpha
I found a way with z-index.
The watermark class (you can use an example from #19531361) does the job. All input tags are non transparent, but they sit "behind" the watermark. To make them active, use following css modifications (inputs are then "on top").
input {
position:relative;
z-index:10;
}
.watermark {
position: absolute;
opacity: 25%;
z-index:0;
}
box-shadow: inset 1px 2000px rgba(208, 208, 208, 0.54);
I am building a site for a friend (http://pasionesargentas.com/sm/) with the fullscreen gallery with thumbnail flip (http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/). I didn't quite like the idea of the flip thing so I simply preferred to disable it and add a menu instead. The menu div css is something like
#top {
position:fixed;
background: transparent;
display: block;
z-index: 99999;
}
It works fine in Chrome, Safari, Explorer and Opera. But for some reason she can't see the menu on her iPad. Since I don't have an ipad I downloaded the Ripple Mission Control and it works fine too so I have no clue what's going on.
Now, the question: Do I have to do css different for tablet browsers (iPad)? Or it is the gallery that's messing up with the menu and covering it?
Had the same problem, wanted to use an overlaying div with a transparent png on top of another div. Found out that z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative. Fixed my ipad z-index problem instantly.
.topbar {
display:block;
background: transparent;
height: 60px;
width: 1024px;
display: block;
margin: 0;
padding: 0;
z-index:6;
position:relative;
}
.middlebar {
display:block;
background: transparent;
height: 60px;
width: 1024px;
display: block;
margin: 0;
padding: 0;
z-index:5;
position:relative;
}
.bottom {
display:block;
background: transparent;
height: 758px;
width: 1024px;
display: block;
margin: 0;
padding: 0;
z-index:4;
position:relative;
}
.description {
position: fixed;
top: 5px;
left: 50px;
text-shadow: 1px 1px 1px black;
z-index: 5;
}
#nav:hover {
background: #829FB0;
opacity: 1.0;
filter: alpha(opacity=100);
z-index: 10;
}
#nav {
align: center;
background: #829FB0;
padding: 3px 7px;
display: inline;
opacity: 1.0; //change this later
filter: alpha(opacity=65);
-moz-border-radius: 9px;
border-radius: 9px;
z-index: 10;
}
The problem could be transparent overlying divs, so first replace your code with this code, where the divs/nodes that have to be placed higher are not transparent and then see, also use z-indexes that I have given, you do not need too much high values
When checking for errors in css make sure you make nodes visible and remove their opacity and never give too high values for z-indexes. Try this, if it does not work I will look closely.
I was designing a nav bar button, when I got a specificity conflict in the opacity. I used the !important override, but that doesn't seem to be working. Any clues as to the reason?
HTML:
<body>
<div class="container">
<span id="text">Lorem Ipsum</div>
</div>
</body>
CSS:
.container {
background-color: #000;
opacity:0;
height: 30px;
width: 122px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position:absolute;
top:40%;
left:43%;
}
#text {
color: #fff;
-moz-user-select: none;
-webkit-user-select: none;
font-family: Courier;
position:absolute;
top: 5px;
left: 5px;
width: 122px;
opacity:1; !important;
}
body {
background-color: #808080;
}
After this all I get is a blank gray background (due to the background-color styling). I know it makes much more sense to not nest the span in the div, but I need to do that for animation purposes.
must be like that :
opacity:1 !important;
no ; before !important
if .container have opacity:0 then all elements inside this div will not be visible, even if you add opacity:1 !important; to #text
First
Declare !important write this opacity:1 !important; instead of this opacity:1; !important;.
Second
you define Opacity to #text parent that's why it's take it's parent opacity. So, instead of opacity you can use RGBA().
Write like this:
.container {
background-color:rgba(0,0,0,0);
}
Filter for IE
background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000); /* IE6 & 7 */
zoom: 1;