I noticed I am not the first to ask about CSS sliding doors. However this seems (at least to me) to be a rather odd problem which I have not seen an answer for.
Trying to create a simple rounded corner link button:
html:
<span>Add A New Somthing</span>
css:
.link_button {
background: transparent url('img/backgrounds/bg-buttonRight.png') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial;
height: 41px;
margin-right: 6px;
padding-right: 14px;
text-decoration: none;
}
.link_button span {
background: transparent url('img/backgrounds/bg-buttonLeft.png') no-repeat top left;
display: block;
line-height: 31px;
padding: 5px 0 5px 14px;
}
.link_button:active {
background-position: bottom right;
color: #000;
outline: none;
}
.link_button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px;
}
results:
alt text http://www.codefruition.com/sandbox/img/buttonProblems/problemImageOne.jpg
The two images are overlapping, which is what I want, but why the discoloration? Why would one be darker? I tried using png jpg, gif, with and without transparency.
I posted the code here, along with another attempt using only one jpg instead of two, but still the same results.
Did I miss something?
Thanks in advance.
Your problem isn't your CSS. It's that the images generated for use in the CSS aren't seamless. The edges have a darker color that doesn't fade out in less than 14px, the width of the right "door."
There seems to be a bevel or an inner shadow on the button. If you are the designer and have the Photoshop document, check what the styling is on the button; you may have to shrink the aforementioned styles.
ethyreal, the two images are completely different colours, hence the discolouration. I suggest you actually try physically doing it yourself.
Open bg-buttonLeft.png and bg-buttonRight.png separately in Photoshop or some form of image editing software, then place bg-buttonRight.png over bg-buttonLeft.png and you should notice the two are actually different colours.
If you still can't see it, move your head vertically up and down to see you monitor from different angles.
Are you on a Mac using Safari? Mac's have 1.8 gamma value that wouldn’t match with (files created on) Windows’ 2.2 gamma value. This was fixed in Snow Leopard, which now has 2.2 by default.
Try previewing in Firefox and let us know if its the same?
Your image has a transparency set to the button. Look at your layer - maybe it is set to 90% transparency or something. When they overlap you get a little darker on the overlap image?
Related
I'm working with the designer and he sent me the following design for the search bar on our webpage:
I'm very much against using images in webpage design unless completely necessary, so I'm hoping that I can recreate the whole search bar widget in CSS. I know how to do border-radius, gradients, box-shadows, etc, so that's not a problem.
Question: Assuming CSS3 browser compatibility, how can I go about recreating the actual search button (the magnifying glass portion) with the double curved edge, and the slight drop shadow on the bottom left?
Thoughts: My initial feeling was that the search button would be circular and free-standing, then overlap the search input div with a negative left-margin, but then I was unsure how I would get that drop shadow.
Edit: I'm not completely opposed to using an image for the magnifying glass, but I've seen a similar icon created in CSS before. Would an image vs. pure CSS end up loading at the same speed, or should I do all I can do in pure CSS?
Solving the problem a different way, you could use a font to render the magnifying glass. There are some free ones here that you could load via JS or by creating an #font-face with a service like FontSquirrel. This one comes with all the necessary files to do so and it includes the magnifying glass pointing in either direction: http://www.tenbytwenty.com/sosa.php
From there, you should be able to style it with CSS to make it look the way your designer wants.
Something like this will manage
<style type="text/css">
form {
background-image: url(1noty.png);
height: 50px;
width: 240px;
}
input {
background-image: url(bg.png);
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 17px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
</style>
I'm working on a project to upgrade a system to use the button tag rather than regular submit buttons. For the formatting of the buttons, I have the following CSS classes:
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button {
background: transparent url('images/greenrightbutton.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
font: normal 12px arial, sans-serif;
height: 25px;
padding-right: 8px; /* sliding doors padding */
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
text-decoration: none;
border: 0px;
overflow: visible;
}
#loginbox button {
float: right;
}
button span {
background: transparent url('images/greenleftbutton.png') no-repeat top left;
display: block;
line-height: 18px;
padding: 4px 5px 5px 12px;
margin: 0px;
border: 0px;
}
They work absolutely perfectly in every browser except IE8.
In IE8, the buttons work in most places, but then I find a page where the two background images don't quite line up and no amount of tweaking padding, line spacing etc fixes it.
Does anyone know why this might be the case?
Demo page: http://test6.placement.co.uk/demo/test.asp
---Update---
After some fairly extensive testing and trying things, I've now got a pretty fair idea of what's causing the problem in page 1, but no idea how to fix it, while another page with the same issue has a completely different cause (which I haven't found) but where I HAVE stumbled on a fix...
The problem on the first page appears to relate to a ul entered further up the page. Take that out and everything behaves - unfortunately, that's not an option as the ul is part of user-entered content, so I'm scratching my head about that. Particularly given...
Page 2 has no uls to cause an issue, but randomly sticking two break tags in just before my button code resolves the problem.
Naturally, THAT fix doesn't work on page 1.
I'm just about ready to give in and find some alternative way of rendering these buttons, because whatever the actual problem is, it's clearly so deep in either my CSS or my basic HTML that I'm probably never going to find it.
I don't see any difference between IE8 and other browser. Could you pleas mention bit more clear what you want to do?
I’ve been asked to create a CSS (non-HTML5) based site that has a filled div with a cutout that shows an image underneath it.
There are additional overlays and other images which makes using static images a pain. Plus, I suspect that I am going to need to be able to scale the background as the browser window changes size.
I realize that I can create an image of the GROW text and simply place it on top of the background image, but I would rather see if this effect can be accomplished “for real.”
This needs to work in IE8, 9, and FF 4. I can fallback to another effect for older browsers.
Any suggestions?
That affect can be achieved using CSS 3 image masking. However, at the moment, only webkit supports the property. I would implement something like this, then use a fallback for other browsers until everybody catches up to speed.
As a side note:You can also increase the CSS adoption be using ChromeFrame, or something similar
An Example from that link:
SVG images can be used as masks. For example, a partially transparent
circle can be applied as a mask like so:
<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">
I ended up using two images without any holes or transparency. It's a hack but works in all browsers.
html5 or something like a gpd as php gui. But html5 doesnt work with ie8 or before, at least if the client doesnt have the chrome frame of google inc.
If you can play with mix-blend-mode property, there is simple solution that work on all modern browsers.
http://codepen.io/sajijohn/pen/OXEgkj
HTML
<h1>SUPER-FLY</h1>
CSS
#import url(https://fonts.googleapis.com/css?family=Raleway:900);
*{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center;
background-size: cover;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: raleway, sans-serif;
font-size: 80px;
line-height: 60px;
text-align: center;
padding: 20px;
/*/////////MAGIC//HERE////////*/
background: #fff;
color: #000;
mix-blend-mode: color-dodge;
/*////////////////////////////*/
}
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
I need to make a white background 50% transparent without affecting anything else. How do I do it?
Use rgba():
.transparent {
background-color: rgba(255,255,255,0.5);
}
This will give you 50% opacity while the content of the box will continue to have 100% opacity.
If you use opacity:0.5, the content will be faded as well as the background. Hence do not use it.
This works, but all the children of the element with this class will also become transparent, without any way of preventing that.
.css-class-name {
opacity:0.8;
}
If you want to make transparent background is gray, pls try:
.transparent{
background:rgba(1,1,1,0.5);
}
Good to know
Some web browsers have difficulty to render text with shadows on top of transparent background. Then you can use a semi transparent 1x1 PNG image as a background.
Note
Remember that IE6 don’t support PNG files.
DO NOT use a 1x1 semi transparent PNG. Size the PNG up to 10x10, 100x100, etc. Whatever makes sense on your page. (I used a 200x200 PNG and it was only 0.25 kb, so there's no real concern over file size here.)
After visiting this post, I created my web page with 3, 1x1 PNGs with varying transparency.
Dreamweaver CS5 was tanking. I was having flash backs to DOS!!! Apparently any time I tried to scroll, insert text, basically do anything, DW was trying to reload the semi transparent areas 1x1 pixel at a time ... YIKES!
Adobe tech support didn't even know what the problem was, but told me to rebuild the file (it worked on their systems, incidentally). It was only when I loaded the first transparent PNG into the css file that the doc dove deep again.
Then I found a post on another help site about PNGs crashing Dreamweaver. Size your PNG up; there's no downside to doing so.
Although dated, not one answer on this thread can be used universally. Using rgba to create transparent color masks - that doesn't exactly explain how to do so with background images.
My solution works for background images or color backgrounds.
#parent {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 19px;
text-transform: uppercase;
border-radius: 50%;
margin: 20px auto;
width: 125px;
height: 125px;
background-color: #476172;
background-image: url('https://unsplash.it/200/300/?random');
line-height: 29px;
text-align:center;
}
#content {
color: white;
height: 125px !important;
width: 125px !important;
display: table-cell;
border-radius: 50%;
vertical-align: middle;
background: rgba(0,0,0, .3);
}
<h1 id="parent">Example</h1>
div.main{
width:100%;
height:550px;
background: url('https://images.unsplash.com/photo-1503135935062-
b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
background-position:center;
background-size:cover
}
div.main>div{
width:100px;
height:320px;
background:transparent;
background-attachment:fixed;
border-top:25px solid orange;
border-left:120px solid orange;
border-bottom:25px solid orange;
border-right:10px solid orange;
margin-left:150px
}
This is simple and sort. Use hsla css function like below
.transparent {
background-color: hsla(0,0%,4%,.4);
}
Try this:
.transparent
{
opacity:.50;
-moz-opacity:.50;
filter:alpha(opacity=50);
}
I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...
I want to style certain <a />s and <input type="submit" />s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)
This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.
(source: muonlab.com)
Anyone got any ideas?
Thanks
<div class="buttons">
« Back
<input type="submit" class="button btn-large-green" value="Save changes" />
</div>
.button
{
cursor: pointer;
border: 0;
background-color: #fff;
color: #fff;
font-size: 1.4em;
font-weight: bold;
outline: 0;
font-family: Arial, Verdana, Sans-Serif;
}
a.button
{
display: block;
float: left;
text-align: center;
text-decoration: none;
padding: 5px 0 0 0;
height: 22px;
margin-right: 1em;
}
.btn-small-grey
{
height: 27px;
width: 96px;
background-position: 0 -81px;
background-image: url(/assets/images/buttons/buttons-small.gif);
}
.btn-large-green
{
height: 27px;
width: 175px;
background-position: 0px -54px;
background-image: url(/assets/images/buttons/buttons-large.gif);
}
I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
I hope this helps.
I have same problem every time I need to style form buttons. Sorry, quite busy at the moment so only brief description how I usually fix it.
In FF Text is usually a bit lower, exactly like on the image you attached and so then I simply apply "padding-bottom" on the button itself. It moves the text on the button number of pixels up.
The problem is it also moves text in IE and now IE looks a bit off. To fix that I apply "line-height" to the same button with exactly same value as the height of the button. That makes IE to ignore padding completely and positions the text right in the middle. Below is sample HTML code:
<input type="submit" value="SEARCH" class="search"/>
and CSS:
.search
{
background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
height: 29px;
width: 104px;
border: 0;
/* centering text on button */
line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
padding-bottom: 2px; /* IE will ignore but works for FF */
}
Sorry I didn't applied it directly to your code but I'm a bit busy at the moment, hope you got the idea and it helps though.
ps. just checked in IE8 and all above moves text few pixels up. So it means more (endless?) mocking around with padding top/bottom.. I lost my patience now though and I think I'll be putting all this in separate stylesheet from now on that is until I find some fairly easy and universal solution for all this
Inputs are formatted not following the W3 box model convention in different browsers, you might want to include:
input /*Content follows box model*/
{
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height:24px;
}
Also include for firefox (which Shelly pointed out):
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
Otherwise you could use button
I collected all these solutions from various sources, they deserve the credit
I had the same problem and I've solved (only for FF and Safari) by fixing the width but not the height and playing with the values: padding (top and bottom), line-height and if needed setting the vertical-align to middle. However all it's more easy to do if you set all the values (even the font size) in pixel.
EDIT: I think that there isn't a cross-browser solution, because the problem is due to the text rendering of the browsers. To solve completely the problem you could draw a background img with text and apply that image to the link or the button.
Even if with this solution you lose in accessibility.
Alternatively you can use conditional CSS statements to improve the layout for each browser.
You could also consider replacing the the button with a different element altogether. The anchor element works perfectly. Just add a 'submit' function to it's 'onClick' event and you'll be good to go. I think this is a better (and simpler) cross browser solution.