Ugly edge when using gradient - html

I'm trying to create a 2 coloured background to use it as the background for my text container. To get two different colours I've used a gradient. Let me show you what it looks like now.
If you look closely, you can see the line in the middle looks kind of, I don't know what to call it, lets just say it doesn't look smooth.
Here's my css:
.btn {
background:#8a8a8a;
background: linear-gradient(to right bottom, #000000 50%, #8a8a8a 50%);
display:inline-block;
padding:0.75em 2.0em;
font-size:18px;
text-align:center;
margin:0.25em 0;
color:#ffffff;
font-weight:normal;
font-family:sans-serif;
}

Giving a small gap between the two color stops points (like 49.5% and 50.5%) did the trick.

You can try this style here: https://jsfiddle.net/dnn02d64/4/
.btn {
background:#8a8a8a;
background: linear-gradient(to right bottom, #000000 49.99%, #8a8a8a 50.99%);
display:inline-block;
padding:0.75em 2.0em;
font-size:18px;
text-align:center;
margin:0.25em 0;
color:#ffffff;
font-weight:normal;
font-family:sans-serif;
}

Related

CSS - Change css background of class text without sub element

I'm working on a project based on a wordpress theme that is regularly updated so I can't change the HTML (without making maintenance hell anyway). I added a stylesheet that allows me to change the appearance of the site and all I have to do is add an "include" with each update.
I have an availability calendar that shows as follows:
As you can see, the "31" is barely visible.
The html output:
<td class="calendar-end" data-curent-date="1564531200">
31
</td>
I want to edit the text's css to add a reversed gradient (white on the red section, grey on the white section) so that the text is properly readable. See my css below
background: linear-gradient(135deg, #ffffff 0%,#ffffff 48%,#4d5567 48%,#4d5567 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
This gives the following result (when adding <p> tags to the element via chrome inspector and giving it the css rule)
My issue is, I don't know how to create a rule for the text as it's not a subelement.
Normally I would engulf the 31 with <p> tags so I could create a rule for .calendar-end p but thats not possible because of the HTML restrictions...
Is there a way that I am not aware of to affect the text inside the td via a specific css rule?
If I try to apply my code to the .calendar-end class it causes a conflict with the background gradient and I end up with completely invisible text (same gradient as background)
I am not sure what I am asking is even possible but css isn't my strong suit and I'm hoping someone here is more knowledgeable than I am on the subject :D
Thanks for any help all!
With chrome you can consider multiple background like below (doesn't work on firefox, raised a bug)
.calendar-end {
color: transparent;
background:
linear-gradient(135deg, #ffffff 48%, #4d5567 48%),
linear-gradient(135deg, red 48%, #fff 48%);
-webkit-background-clip:
text,
padding-box;
background-clip:
text,
padding-box;
width:100px;
height:100px;
font-size:100px;
}
<div class="calendar-end" data-curent-date="1564531200">
31
</div>
For the other browser consider a pseudo element. Simply make sure to not specify any z-index to main element to have the pseudo element behind (related: Why can't an element with a z-index value cover its child?)
.calendar-end {
background:
linear-gradient(135deg, #ffffff 48%, #4d5567 48%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
width:100px;
height:100px;
font-size:100px;
position:relative;
}
.calendar-end:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background: linear-gradient(135deg, red 48%, #fff 48%);
}
<div class="calendar-end" data-curent-date="1564531200">
31
</div>
In case the gradient will be the same for text and background you can optimize the code like below:
.calendar-end {
background-image:
linear-gradient(135deg, #ffffff 49%, #4d5567 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
width:100px;
height:100px;
font-size:100px;
position:relative;
}
.calendar-end:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-image: inherit;
transform:rotate(180deg);
}
<div class="calendar-end" data-curent-date="1564531200">
31
</div>

Button text position differs from browser

Button text position differs whether it in firefox/chrome or opera/ie.
I have a button and text in it. In opera it goes little bit lower than in firefox.
HTML:
<button>
some
</button>
CSS:
button {
width:145px;
height:36px;
border: 0;
color:#fff;
}
How can I prevent this "jumping" of text button?
Also a bonus question: may be someone knows how to prevent this different visions of font-weight in browsers?(see the images)
P.S. I googled it - hadn't found the answer
EDIT: FIDDLE
EDIT_2: Browsers are updated to the last versions. (May be excluding the IE, but the issue is in opera too). OS: Windows 8.1 Industry Pro
You haven't defined the font-size and font-weight, so the different browser is taking button font as it's own. Setting these explicitly solves the problem:
button {
width:145px;
height:36px;
border: 0;
color:#fff;
font: 16px normal Arial;/*change as per your requirement*/
}
Update:
I came to the across solution for the key problem with button tag. The default style for button is display: inline-block;.
And the different browsers do have different vertical-aligning (top, middle, ...), thus fixing vertical-align to the button will fix the issue.
So, far for the button css, add this line of code:
vertical-align: middle;
In Explorer Windows and Opera there turns out to be a difference
between font-weight: 600 and font-weight: bold...
http://www.quirksmode.org/css/tests/iewin_fontweight.html
Use font-weight: 700;.
button {
position: relative;
width:145px;
height:36px;
line-height: 36px;
border: 0;
color:#fff;
font-size:16px;
font-weight:700;
border-radius: 10px;
font-family:"Myriad Pro", "Verdana", sans-serif, serif;
background: -moz-linear-gradient(top, #00a885 49%, #009979 54%);
background: -o-linear-gradient(top, #00a885 49%, #009979 54%);
background: -webkit-linear-gradient(top, #00a885 49%, #009979 54%);
background: -ms-linear-gradient(top, #00a885 49%, #009979 54%);
margin:0;
margin-top:14px;
box-shadow: 1px 1px 4px rgba(0,0,0,0.64);
text-shadow: 1px 1px 5px rgba(0,0,0,0.74);
padding: 0;
}
<button>some</button>
So I found the problem.
I used font-family "Myriad Pro" which was installed with Photoshop. Every browser seems like renders different this font, so after font-family change the problem has gone.
Quite tricky to find but easy solution...

Two color border

I know it is possible to have the effect of a double border with one below the other but is it possible using css to have part of the width of a border one color and the rest another color?
Here is an example of an image that I would like to recreate as a border using css only:
I think I figured out one way to do it. Check this out http://jsfiddle.net/RE4A7/
html
<ul>
<li><h3>Mission</h3>
</li>
</ul>
css
ul h3 {
font-size:1.2em;
font-family:arial;
border-bottom:1px solid #333;
padding-bottom:10px;
position:relative;
width:250px;
}
ul li {
list-style:none;
}
ul h3:after {
border-bottom:1px solid #ff4800;
bottom:-1px;
left:0px;
content:"";
position:absolute;
width:55px;
}
UPDATE:
Seeing that the line in the post is actually a two colored line you can use the border-image property to achieve a similar effect (example showing only the principle but is not adjusted for perfect match):
ONLINE DEMO
CSS:
div {
border-top:0;
border-bottom:1px;
-webkit-border-image: -webkit-gradient(linear, left bottom, right bottom, from(#07f), to(#000), color-stop(0.3, #07f), color-stop(0.31, #000)) 21 20 30 21;
/* ... */
}
For other browsers:
-moz-border-image:
-webkit-border-image:
-o-border-image:
border-image: /* standard */
Note that the gradient parameter varies from browser to browser apparently so this need to be adjusted as well. Demo provided will only work with webkit browsers.
Old
Do you mean something like this:
For this you can use the following CSS:
.myClass {
height:40px;
width:60px;
border:5px solid #00a;
box-shadow:0 0 0 5px #f00 inset;
padding:5px;
}
Here the box.shadow set to inset with no blur acts as the second part of the border. The padding should prevent content from overlapping.
ONLINE DEMO

Simulate image "overlay" with CSS

Basically I'm trying to simulate Photoshop's image overlay thing using images and CSS for a menu.
There are 2 versions of the menu background image: one is the normal state (pink), and one the active state (blue). The entire menu is wrapped in a DIV with the normal (pink) image as background.
How can I make it so each active menu link uses the corresponding slice of the blue image?
Like this:
My code so far
Do you think this is possible with CSS?
CSS Only solution for modern browsers:
ul {
background-color:#ff00ff;
background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -o-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
background-image: radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
height:50px;
width:400px;
margin:0;
padding:0;
border-radius:25px;
overflow:hidden;
}
li {
width:100px;
height:50px;
float:left;
}
li:hover {
background-color:rgba(0,0,255,0.2);
}
Click to see a working demo: http://jsfiddle.net/AlienWebguy/ZLg4B/
If you need to support older browsers and can't use css3, there is a number of ways to do this. One of them:
You can cut out the blue image of the entire thing (you can actually make it wider)
then
li.active {
background: url('path/to/yourImage.png') no-repeat -50px 0;
/* 50px or however wide that rounded tip is */
}
li.active.first {
background-position: left top;
}
li.active.last {
background-position: right top;
}
/* you'll need to add 'active', 'first' and 'last' classes accordingly. */
Are you ever going to have links at the rounded parts? If not, you could just take a pixel-wide slice of the blue image and set that to the :hover state background with repeat-x.
There are definitely other ways to do this but this is the most straightforward IMHO.
Edit: After seeing your fiddle, perhaps this isn't the case. I would consider using JavaScript to calculate appropriate x-offsets for each link, and using a slice of the overlay image in that way. Or you could just make the first link a "special case" and use a generic different-color background for the rest of the links.

How to implement this button in HTML / CSS?

This is a button that has been originally implemented and styled in Silverlight.
How to implement this button in HTML/CSS? Note the different gradients in the border and the button background and also the rounder corners in the border. The border width should be adjustable but uniform size around the button.
The red colour in the example picture is page background, not part of the button.
Button screenshot http://i52.tinypic.com/2vsetlw.png
UPDATE: Forgot to mention, I would prefer a solution without images, ie. pure-css. Css3 is fine, I don't need to support IE6-8 for example.
I know it's not the most helpful thing to spoon-feed sometimes, but I had needed a break from work.
Demo: http://jsfiddle.net/wesley_murch/SzHQZ/
Looks nice in FF4 and Chrome, IE falls back to decent looking (though you could fix it with PIE).
Here's the CSS I used, I got the gradient code from some random online generator so it might not be optimal. There's too much contrast as well compared to your image, so just fine tune it.
<button>
<span>
Sign in
</span>
</button>
button {
border:0;
padding:3px;
background:#735544;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.18, #271D1B),
color-stop(0.59, #735544)
);
background-image: -moz-linear-gradient(
center bottom,
#271D1B 18%,
#735544 59%
);
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
--- Needed this break to get markdown to behave...
button span {
display:block;
color:#fff;
font:900 18px arial;
text-transform:uppercase;
padding:.35em 1.3em;
background:#382B25;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.18, #382B25),
color-stop(0.59, #C2A489)
);
background-image: -moz-linear-gradient(
center bottom,
#382B25 18%,
#C2A489 59%
);
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
Looks like the boring version of http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba :)
you can take the example from there and just change the colors, probably want to replace
border-bottom: 1px solid #222;
with something like
border: 3px solid brown;
The example above uses an alpha-blended png for the gradient, but you can also go for css3 gradients, see http://css-tricks.com/examples/CSS3Gradient/ for a good cross-browser example.
Just save the image as a background
<input type="submit" class="btnSqueareInput" name="commit" value="SIGN IN"/>
btnSqueareInput {
background:transparent url(../images/sqaure.png) no-repeat;
border:medium none;
color:#FFFFFF;
cursor:pointer;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
height:32px;
margin:0;
padding:0;
text-align:center;
text-decoration:none;
vertical-align:top;
width:79px;
}
where square.png is rge image of the button w/o 'SIGN IN'