I'm trying to overlap some text fields with transparency over a background that also has transparency, the problem is that the text fields appear opaque, as if they had no transparency applied, how can I manage for both the field and background to appear with a certain transparency?
This is the div that contains everything:
#wrapper {
width: 940px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
}
And this is my input field:
input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 30px;
padding-top: 5px;
background: rgba(0, 0, 0, 0.8);
color: white;
border: 1px solid black;
}
This is how it looks:
Your code seems to be working great, it just doesn't look all that transparent as the .8 transparency of the black background creates a dark grey which perhaps you aren't quite distinguishing from fully opaque. If you want to check this on your local copy, apply a basic background image (e.g. http://purelycss.com/data-uri-tileable-transparent-patterns/) and you should be able to just about see it below your wrapper and input field.
EDIT: If you're looking to reduce the "black on black" effect, you might want to just reduce the opacity of the 'rgba' - so something more like rgba(0, 0, 0, 0.5) for example. If not this, changing the colour of the base RBG colour might help you out here. It's one of those things you probably just want to play with and tweak.
it looks like it a problem with the stacking of your transparency, to ahcieve a 0.8 transparency on the input box you jsut need to add a further 0.2 transparency to the input (as it has effectively inherited 0.6 of the 0.8 you require from its containing element. see here:
http://jsfiddle.net/e6Z8N/1/
html:
<div id="wrapper">
<input type="text" />
</div>
css:
#wrapper {
width: 940px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
padding:50px;
}
input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 30px;
padding-top: 5px;
background: rgba(0, 0, 0, 0.2);
color: white;
border: 1px solid black;
}
You may need to clear the default browser styles applied to input elements.
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
Related
I'm trying to create a box shadow for underneath my header similar to the one on the https://github.com/RaghavMangrola/the-brighton-times project-mockup.
I've already tried adding the property and value
.header {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
but I'm unsuccessful in getting the box shadow to appear.
Could anyone tell me what am i doing wrong? https://gist.github.com/webdevchris/dd10c3e0c585ad94edb0eef793a092c5 Suggestions are greatly appreciated. Thank-You! :)
Your shadow is under your navigation now.
If you remove the background color of .topnav
.topnav {
overflow: hidden;
// background-color: #333;
width: 100%;
}
You will see what I mean. Your shadow actually is there, on it's place ( .header class )
May be you would like to use it like that ?
.topnav {
overflow: hidden;
background-color: #333;
width: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
I try to remove the blue box that appears on click in front of buttons as you can see below:
Before asking, I have made a lot of research, I have tried the solutions given by the following topics:
How to remove focus border (outline) around text/input boxes? (Chrome)
Remove blue box around buttons. HTML
How to remove the blue box shadow border in button if clicked
How do I remove blue "selected" outline on buttons?
How do I remove blue "selected" outline on buttons?
Remove blue border from css custom-styled button in Chrome
How to remove focus around buttons on click
I have tried all the answers! It works on computer but not on mobile.
If you are using a computer, you can try by simulating mobile with the inspector. Here is the button: https://jsfiddle.net/t4ykshst/
#add {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
outline: none;
cursor: pointer;
padding: 10px;
overflow: hidden;
border: none;
-webkit-border-radius: 50%;
border-radius: 50%;
color: rgba(255, 255, 255, 0.9);
text-align: center;
background: #1abc9c;
-webkit-box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
}
#add:active {
opacity: 0.85;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
}
<input type="button" id="add" value="+" title="" style="position: absolute; left: 0px; top: 0px; width: 52px; height: 52px;" />
You can add:
-webkit-tap-highlight-color: transparent;
You can also add this to your stylesheets to define it globally:
input,
textarea,
button,
select,
a {
-webkit-tap-highlight-color: transparent;
}
Refer to here for more information.
* {
-webkit-tap-highlight-color: transparent;
}
Test it.
You just need to add
style="-webkit-tap-highlight-color: transparent;"
There will be no highlighting (at least in Chrome 88+) at all if you remove cursor: pointer from #add selector. And if you need it in the "desktop" mode, use something like this:
#media (min-width: 768px) {
#add {
cursor: pointer;
}
}
-webkit-tap-highlight-color is a non-standard feature (mdn). It won't work in browser like safari 14.
Instead, you can use
{ outline: none; }
or apply it specifically through selector
a:focus,a:visited,a:active{
outline: none;
}
Try it
add to the button style "cursor: default;"
This will make a cursor:pointer; it turns into a "default", but will remove the blue shadow on the buttons on the mobile screen as you want
In addition to all the answers here, you have to also specify the background css property explicitly yourself to the button.
I'm trying to position an element (a button) relative to the element 2 elements before it (a picture). There is a varying amount of text between the picture and the button. Take a look at my site:
http://gorilla-gym.com/product-category/fitness-attachments/
What I'm trying to achieve is having the "Shop Now" buttons align horizontally for each product listing regardless of how much text is underneath the picture.
It seemed to me the most logical way to do this way to position the button relative to the picture, but I can't figure out how to do this. Let me know if you guys have an idea of how to do this, or if there's a better way to achieve what I want to do.
Thanks in advance.
check this one i think you want something like this
http://jsfiddle.net/FWzzR/1/
css
ul.products {
display:table;
width:100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:10px;
}
.products > li {
background-color: #4F81BD;
border:2px solid #385D8A;
position: relative;
width: 22.05%;
display: table-cell;
padding:10px;
padding-bottom:50px;
text-align:center;
vertical-align:top;
}
.products > li >a {
display:block;
}
.products a.button {
position:absolute;
bottom:10px;
left:50%;
margin-left:-40px;
font-size: 100%;
line-height: 1em;
cursor: pointer;
text-decoration: none;
padding: 6px 10px;
font-family: inherit;
font-weight: bold;
color: #FFF;
text-shadow: 0 1px 0 #FF6311;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
border: 1px solid #973100;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #FD5200;
background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100));
background: -webkit-linear-gradient(#FD5200, #CA4100);
background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%);
background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}
If all you want is to center align the "Shop Now" button at the bottom, then
.shopnow_button{
display: block;
margin: 0 auto; //something was overriding so I had to do !important here
width: 57px; // can be any value < the width of the parent container(Ofcourse !)
}
If there is a varying amount of text underneath the picture, then the elements will all be of varying height and you cannot align the "Shop Now" button horizontally beneath the picture. The only way to accomplish this is by making sure that all the divs are the same height, then you just position the shop now button as follows:
<div class="shop-now-div">
<img src="yourimage.jpg">
Lorem ipsum....
<a class="button" href="#">Shop Now</a>
</div>
.button { position: absolute; bottom: 5px; right: 5px; }
.shop-now-div { position: relative; }
There are two ways to make your div's the same height
1) JavaScript (not recommended, it's a pain)
2) A table (do it in CSS so you aren't messing with semantics)
UNFORTUNATELY, some modern browsers (Firefox, I believe) will not support position: relative on table-cell's (which you will need), so you are stuck with having to use JS to make your div's the same height....
Easiest solution:
Stick your shop now button on top of the image - that way you can easily align them horizontally. :)
This question is better answered here How to set relative position with Grandfather! element? simply setting position: relative on the grandfather element and position: absolute on the subject element.
That solution does rely on there being no positioning set on intermediate elements.
I noticed that the buttons on unfuddle.com use a layer of noise, i was just wondering what the purpose of this is, i can't visibly notice the difference, but perhaps this is some cross browser hack?
It seems silly to build such an awesome CSS3 button that uses no images only to still load a noise image anyway.
Here is their CSS that goes with the buttons in question, note the gnoise.png?cbv-1346878364
.gp_button, a.gp_button, input.gp_button:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
color: #FFFFFF;
display: inline-block;
font-family: "Lato","Arial",sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 34px;
margin-right: 1px;
padding: 0 1em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.gp_button:hover, a.gp_button:hover, input.gp_button:hover:not([type="radio"]) {
background-color: #A5C416;
background-image: radial-gradient(at center center , #85C700 20%, #7EBD00 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
}
.gp_button:visited, a.gp_button:visited, input.gp_button:visited:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
}
.gp_button:active, a.gp_button:active, input.gp_button:active:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #90D900;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
}
.oldie .gp_button, .oldie a.gp_button, .oldie input.gp_button:not([type="radio"]) {
background-color: #7EBD00;
border-color: #7FBF00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
color: #FFFFFF;
display: inline-block;
font-family: "Lato","Arial",sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 34px;
margin-right: 1px;
padding: 0 1em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.oldie .gp_button:hover, .oldie a.gp_button:hover, .oldie input.gp_button:hover:not([type="radio"]) {
background-color: #85C700;
}
.oldie .gp_button:visited, .oldie a.gp_button:visited, .oldie input.gp_button:visited:not([type="radio"]) {
background-color: #7EBD00;
}
.oldie .gp_button:active, .oldie a.gp_button:active, .oldie input.gp_button:active:not([type="radio"]) {
background-color: #7EBD00;
border-color: #90D900;
}
gnoise.png goes on top of the background-color (along with the radial gradient) to add some visual complexity to an otherwise flat image. The effect is barely visible on a.gp_button, but you can see it if you zoom in on a screenshot using Photoshop, or use the eyedropper to compare pixel colors. The effect is more visible on the <footer> element, because of its darker background color.
By re-using one image on top of solid colors, they get a variety of colors while avoiding multiple HTTP requests which might slow down page loading.
It's just a guess, but the get parameter (?cbv=1346878364) could be used to ensure that, after an update to the image files, a new image file is actually pulled from the server instead of using a browser-cached version.
My guess is that it could have been there for browsers that don't support CSS3. However when I inspect the button in chrome it is overwritten by another image, which makes me believe that is not the case.
If it is not there for older browsers then chances are it is just a coding error. maybe they used it at some point and forgot to take it out.
But to answer your question. It isn't used for anything because it is been overwritten by this image. And if you are looking to replicate what they are doing then I would just remove it.
background-image: -webkit-radial-gradient(center center, #7ebd00 20%,#77b300 80%),url('/images/gnoise.png?cbv=1346878364');
I am new to the designing/programming world so I am sure the issue is easy to solve. I am trying to add the moz-box-shadow effect to my header. But as soon as I add that component, the header which is taking up space horizontally shortens up. I want the header to be like Twitter's, where they use a shadow effect.
#header {
background-color: #990000;
width:101.3%;
margin-left:-8px;
margin-top:-8px;
height:40px;
-moz-box-shadow: 1px 1px 10px #D7D7D7;
}
Also, the way i have set the width is it likely going to create cross browser issues?
Here's a version similar to what Twitter has:
This is Twitter's version, more or less:
Live Demo (edit)
HTML:
<div id="top-fixed">
<div id="top-bar"></div>
</div>
CSS:
html, body {
margin: 0; padding: 0
}
body {
padding-top: 50px;
background: #c0deed
}
#top-fixed {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
#top-bar {
height: 40px;
width: 100%;
background-color:#00a0d1;
background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8));
background-image:-moz-linear-gradient(#00a0d1,#008db8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')";
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
The trick that Twitter is using, is putting in an absolutely positioned box and giving that box a width of 100% and the shadow. Using overflow-x: hidden on it´s parent, you get the effect that you are looking for.
I've been doing shadows with .png's. I see no benefit of using this (esp. since I would assume browsers started supporting .png prior to supporting box shadowssee, for example, Mozila's statement that FF started supporting box shadows in FF3.5,) but of course, if this is better than doing shadows via .png, feel free to leave a comment proving me wrong!