I have the following markup:
.hero{
padding: 100px;
background: lightgrey;
border: 1px solid black;
}
.gradient{
background: linear-gradient(195deg, transparent 31%, #FFFFFF 31.2%), linear-gradient(90deg, #79CAF0 0%, #79CAF0 100%);
}
<div class="hero gradient"></div>
Which renders fine on Chrome, Firefox etc. However, on Safari or devices running Mac OS, there's a thin (but noticeable) border being rendered. Like so:
Notice that line at the bottom of the gradient? Why is that occurring?
Change the last value from the first gradient from 31.2% to 31% and the line should disappear.
I don’t think you can avoid this with linear-gradient at certain angles and color combinations. I’ve run into this myself in the past and had to switch to using SVGs. Let me know if you would like an example of how to do that.
FYI, you can simply the CSS to use a single linear gradient:
.hero{
padding: 100px;
background: lightgrey;
border: 1px solid black;
}
.gradient{
background: linear-gradient(195deg, #79CAF0 31%, transparent 31%);
}
<div class="hero gradient"></div>
Related
I am working on this project
https://www.frontendmentor.io/challenges/todo-app-Su1_KokOW
I am having problem to get the mixed color into the round img for checking the note as in the picturecheck
Maybe there is some kind of properties that I miss ??
Can please anyone give me some advice?
.circle-image {
display: inline-block;
border-radius: 50%;
overflow: hidden;
width: 100px;
height: 100px;
background-color: hsl(237, 14%, 26%);
margin-left: 6%;
margin-top: 20%;
background-color: ??????;
border-color: white;
border: .1px white solid;
}
.circle-image img {
width: 100%;
height: 100%;
object-fit: none;
}
<a href="#" id="check"> <span class="circle-image"> <img id="img" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" /> </span>
You can use CSS gradient. It can generated in any "CSS Gradinet Generator" in Google. You don't need a image for this task.
Its look like this:
background: rgb(255,255,255);
background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
Probably the easiest and best solution here is to use a background gradient.
I'm probably not spot on with your colors, but if you change background-color in your CSS to be a gradient, it will work:
background: linear-gradient(45deg, #9d78e5 0%, #7eb8ef 100%);
I think you're looking for gradient background.
You can add background with linear-gradient property:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Here you play with it:
https://cssgradient.io/
I've been having some trouble properly displaying a couple of inline-block div's in Microsoft Edge. The second div loses the border or is just shown as a big black box. I'm using Windows 10 on an HTML5 page. Internet Explorer and other browsers seem to work fine. After some fiddling around I narrowed the problem down to the following lines:
div {
background-color: #f5f5f5;
border: 1px solid #ddd;
display: inline-block;
padding: 10px;
}
div button {
color: #fff;
border: 0;
background: #428a00;
background: -moz-linear-gradient(top, #428a00 0%, #4fa600 100%);
background: -webkit-linear-gradient(top, #428a00 0%, #4fa600 100%);
background-image: linear-gradient(to bottom, #428a00 0%, #4fa600 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#428a00', endColorstr='#4fa600', GradientType=0);
}
<div>
<button>Submit</button>
</div>
<div>Conditions</div>
JSFiddle
I can remove either of the border properties, the display: inline-block property, or the gradient properties and everything shows just fine. Now I'm wondering, is this an error in Edge? I've checked and re-checked the css gradients and everything seems to be in order. Am I missing something?
I'm looking to create a styled button for my app. The hope is to use css to generate a button which looks similar to:
The blue comes from the background so it's not relevant, its the shades of green I'm interested in. I'm not sure first if its possible to do it with CSS or how to do it if it is possible.
Can you start a gradient in the top left corner, move into a different colour from there and finish with a final colour at the bottom of the gradient?
If so are there any examples that you know of which I can refer too?
You can do this easily enough with a CSS-gradient using color stops. Here's a snippet example:
.gradientButton {
height: 50px;
width: 100px;
line-height:50px;
vertical-align:middle;
text-align:center;
font-family:arial;
font-size:26px;
font-weight:bold;
color:white;
text-shadow:2px 2px #336633;
box-shadow:2px 2px #336633;
border: 1px solid black;
border-radius:12px;
background: linear-gradient(to bottom right, LawnGreen 15%, green 85%, DarkGreen 90%);
}
.gradientButton:hover {
text-shadow:1px 1px #336633;
box-shadow:1px 1px #336633;
background: linear-gradient(to bottom right, LawnGreen 5%, green 80%, DarkGreen 85%);
}
<html>
<body>
<div class="gradientButton">log in</div>
</body>
</html>
Using things like gradients and shadows you can even provide hover effects like I've done here making it look like the button's depressed when you hover over it.
Below is an image of a button we use on our site, it's a .png.
We'd like to see if we can get really close to it with CSS on a standard button.
The gradient goes top: #E14C5B to middle: #D33742 to bottom: #B61C27 with a couple pixel radial of round corners.
Is that even possible in CSS?
I'll get ya started...
HTML
<button>Submit</button>
CSS with some background gradients
#import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
button {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 1.5em;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid transparent;
border-radius: 3px;
height: 50px;
width: 100px;
color: white;
background-repeat: repeat-x;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E14C5B), color-stop(0.5, #D33742), to(#B61C27));
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
DEMO
Screenshot:
If you want some kind of clicky feedback type look on click, you could also add:
button:active {
-webkit-transform: translate(1px, 1px);
box-shadow: none;
}
DEMO w/ :active
This is only prefixed for -webkit browsers. You'll need to provide the proper vendor prefixes for whatever you are supporting.
Here is the cross-browser version using css gradient.
I specified 4 colors for the gradient.
The first gradient from 0 to 50% and the second gradient from 51% to 100%.
Ex.
background: linear-gradient(to bottom, #f64757 0%,#f83b49 50%,#eb2735 51%,#ce0011 100%);
jsfiddle demo here
Please note that the red i took are brighter than in tour example.
Just play with the css to adjust colors that fit your needs.
I'm trying to do something like this for a client who has a blog.
She wanted a semi transparent border. I know that's possible with making it just a background. But I can't seem to find the logic/code behind this kind of css technique for banners. Does anybody know how to do this? It would be a lot of help because that's the look my client's wanting to achieve for his blog....
Well if you want fully transparent than you can use
border: 5px solid transparent;
If you mean opaque/transparent, than you can use
border: 5px solid rgba(255, 255, 255, .5);
Here, a means alpha, which you can scale, 0-1.
Also some might suggest you to use opacity which does the same job as well, the only difference is it will result in child elements getting opaque too, yes, there are some work arounds but rgba seems better than using opacity.
For older browsers, always declare the background color using #(hex) just as a fall back, so that if old browsers doesn't recognize the rgba, they will apply the hex color to your element.
Demo
Demo 2 (With a background image for nested div)
Demo 3 (With an img tag instead of a background-image)
body {
background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);
}
div.wrap {
border: 5px solid #fff; /* Fall back, not used in fiddle */
border: 5px solid rgba(255, 255, 255, .5);
height: 400px;
width: 400px;
margin: 50px;
border-radius: 50%;
}
div.inner {
background: #fff; /* Fall back, not used in fiddle */
background: rgba(255, 255, 255, .5);
height: 380px;
width: 380px;
border-radius: 50%;
margin: auto; /* Horizontal Center */
margin-top: 10px; /* Vertical Center ... Yea I know, that's
manually calculated*/
}
Note (For Demo 3): Image will be scaled according to the height and
width provided so make sure it doesn't break the scaling ratio.
You can also use border-style: double with background-clip: padding-box, without the use of any extra (pseudo-)elements. It's probably the most compact solution, but not as flexible as the others.
For example:
<div class="circle">Some text goes here...</div>
.circle{
width: 100px;
height: 100px;
padding: 50px;
border-radius: 200px;
border: double 15px rgba(255,255,255,0.7);
background: rgba(255,255,255,0.7);
background-clip: padding-box;
}
If you look closely you can see that the edge between the border and the background is not perfect. This seems to be an issue in current browsers. But it's not that noticeable when the border is small.
Using the :before pseudo-element,
CSS3's border-radius,
and some transparency is quite easy:
LIVE DEMO
<div class="circle"></div>
CSS:
.circle, .circle:before{
position:absolute;
border-radius:150px;
}
.circle{
width:200px;
height:200px;
z-index:0;
margin:11%;
padding:40px;
background: hsla(0, 100%, 100%, 0.6);
}
.circle:before{
content:'';
display:block;
z-index:-1;
width:200px;
height:200px;
padding:44px;
border: 6px solid hsla(0, 100%, 100%, 0.6);
/* 4px more padding + 6px border = 10 so... */
top:-10px;
left:-10px;
}
The :before attaches to our .circle another element which you only need to make (ok, block, absolute, etc...) transparent and play with the border opacity.
use rgba (rgb with alpha transparency):
border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity
The alpha transparency variate between 0 (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)