This bar identifies the tab below a top menu to add some color to the layout. The gradient works without the % value thrown in but what I wanted to do is stretch the solid color at the edge a bit to better define the menu. What changes should I make?
#tabLower {
background:linear-gradient(90deg,rgba(204,147,90,1) 10%,rgba(204,147,90,.5),rgba(204,147,90,1) 10%);
width:1440px;
height:10px;
position:fixed;
left:0;
top:50px;
z-index:220
}
Linear gradients are one of those anomalies. They are coded differently for different browsers. Its sometimes easier to use a generator, something like http://www.colorzilla.com/gradient-editor/
I found a cheep answer which does what i like so it fine this way. I had the opacity of the gradient at .5, I changed it to .7 and it ended up fading the color a bit slower making the edges longer.
#tabLower {
background:linear-gradient(90deg,rgba(204,147,90,1),rgba(204,147,90,.7),rgba(204,147,90,1));
width:1440px;
height:10px;
position:fixed;
left:0;
top:50px;
z-index:220;
}
Related
When adding transitions to an element and altering the width and/or height and -webkit-transform:translate3d, the transition animation stutters. It appears to animate the width/height change first, as well translate it partially, then snaps to the final translated position. When returning to the original style, however, the animation is smooth. I'm only seeing this in Safari (version 8.0.6 tested). Here's some example css
#foo{
width:100%;
height:200px;
border:1px solid black;
position:relative;
}
#poop{
width:25px;
height:25px;
background-color:green;
position:absolute;
right:50%;
top:50%;
-webkit-transition: all 1s;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
}
#foo .blah{
transform:translate3d(-100%,-100%,0);
-webkit-transform:translate3d(-100%,-100%,0);
width:100px;
height:100px; }
And a jsfiddle http://jsfiddle.net/84w4hj99/4/
I'm using jquery to add a class to the element on a button click for the sake of demonstration, but first noticed it when using :hover to get the same effect. Am I missing something here or is it just a problem with Safari, and does anyone know a workaround? Thanks.
Try using transform: scale() instead of changing the width and height. You will have a smooth transition in this case. However, you will have to adjust the top & right or transform: translate3D() properties to position your object back to the correct position. Should be easy.
See http://jsfiddle.net/y3xqak1z/
Trying to create a box-shadow that will be on the bottom side of the div only, and will be darker in the center, and fade out towards the sides.
The closest tutorial I can find for what I am looking to do is: http://www.paulund.co.uk/creating-different-css3-box-shadows-effects (effect #6)
However, I don't want any shadow on the sides at all. Is this possible? Or will I have to create this through imagery?
You can modify the effect #6 to handle your query
.effect6 {
position:relative;
}
.effect6:before, .effect6:after {
content:"";
position:absolute;
z-index:-1;
box-shadow:0 0 15px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
Here's a Fiddle
There is no direct solution , so you have to tweak settings little bit to create what you are looking for.
If you want something similar to the effect 6 but want to change things slightly, I've created a tool that uses these effects.
http://coveloping.com/tools/css-box-shadow-generator
You can modify the settings and see in real time the effect it has on the styling.
I'd like to create an ambilight effect by using gradients.
In css3 you can let a gradient move from top to bottom, bottom to top, left to right or from right to left and you can use multiple colors. but only for one direction.
I want to combine 4 areas of an image, by calculating an average or dominant color for each area and then create a background for the image by using gradients.
I thought about using multible gradients but it would not look good when you create an gradient ac and another one bd and just place both behind the picture. (I marked the critical area.).
Do you have any Idea how this could be done?
EDIT: I don't want to mix the colors between the gradients, like in the picture. I'm satisfied with a smooth float between all colors.
EDIT2: I uploaded a demo of my problem here: http://jsfiddle.net/HJtnG/
Edit3: we've learned this can't be accomplished with CSS3 but maybe with SVG. After some reaearching I've found this picture:
So I'll go with a colored circle like the one on the picture.
In 2020, you have more possibilities to achieve what you want considering new gradients and mask.
using conic-gradient()
html {
min-height:100%;
background:conic-gradient(from 45deg,red,blue,green,yellow,red);
}
Using linear-gradient and mask:
html {
min-height:100%;
background:linear-gradient(to right,red,blue);
}
html::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:linear-gradient(to right,green,gold);
-webkit-mask:linear-gradient(#fff,transparent);
mask:linear-gradient(#fff,transparent);
}
Using radial-gradient with mask
html {
background:radial-gradient(120% 120%,red 30%,#000);
}
html:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:radial-gradient(120% 120%,blue 30%,#000);
-webkit-mask:linear-gradient(transparent,#fff);
mask:linear-gradient(transparent,#fff);
}
.full {
height:100vh;
position:relative;
background:radial-gradient(120% 120%,green 30%,#000);
-webkit-mask:linear-gradient(to right, transparent,#fff);
mask:linear-gradient(to right, transparent,#fff);
}
.full:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:radial-gradient(120% 120%,gold 30%,#000);
-webkit-mask:linear-gradient(transparent,#fff);
mask:linear-gradient(transparent,#fff);
}
body {
margin:0;
}
<div class="full"></div>
Forgive me if I do not understand the question, but I believe what you want is a rectangular gradient. And unfortunately SVG does not support this. The closest you could get would be to have multiple linear gradients with some alpha fading out while behind that is another linear gradient fading in.
Have you tried colorzilla its free and you can do a lot of stuff with it. hope this can help.
Is it possible to make a "hole" in an element (div, span) like this using CSS. I know I can do it with a transparent image but I'm just curious to know if it's possible in CSS.
body {padding:70px; background:url(http://ipadinsight.com/wp-content/uploads/2011/11/AirPlayMirroring_thumb.jpg)}
div {background:red;border-radius:10px;width:400px;height:100px}
Try at jsfiddle here http://jsfiddle.net/xqEV2/
Yes; you can do it with pure css.
Like this:
body {padding:70px; background:url(http://ipadinsight.com/wp-content/uploads/2011/11/AirPlayMirroring_thumb.jpg);}
.parent {background:red;border-radius:10px;width:400px;height:100px;position:relative;}
.circle{
float:right;
position:absolute;
right:-50px;
top:0;
bottom:0;
width:50px;
overflow:hidden;
}
.circle:after{
content:"";
width:40px;
height:40px;
-moz-border-radius:100px;
display:block;
border:red 50px solid ;
margin-left:-45px;
margin-top:-20px;
}
Check this live example
http://jsfiddle.net/xqEV2/4/
No, A DIV is a "solid object".
You can on the other hand use a transparent picture(png or gif) to make something look like a hole.
you wont be able to interact with the layer underneth as long as you havent changed the z-index..
You maybe could use borders to make it look like a box and keep the background-color:transparent
You can simulate a hole by setting the same background image for the hole as the underlying element. That does not make it really transparent.
http://jsfiddle.net/VJRFh/2/
Is there a way to have a diagonal gradient in IE? In Chrome I could do something like this:
body{
background-image:-webkit-gradient(
linear,
left top,
right bottom,
color-stop(0%,#f00),
color-stop(50%,#0f0),
color-stop(100%,#00f));
}
but this doesn't work in IE.
Yes, it is possible! Although it does not work as well as a real diagonal gradient in other browswers.
There are two important aspects of this solution that make it work:
Two divs with the same position and different z-index values (one on top of/in front of the other) and different gradient directions (one horizontal, one vertical)
Transparent/translucent colors in gradients (you can read about this in CSS3 Transparency + Gradient)
Simply place the div with the vertical gradient behind the div with the horizontal gradient (or vice-versa, it doesn't really matter), and make sure the coloring of the topmost gradient is not opaque.
The result looks like this (Internet Explorer 8):
And the CSS:
//left sample
.back
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType="0", startColorstr='#880088', endColorstr='#110011');
z-index:0;
}
.front
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr='#55ffa885', endColorstr='#55330000');
z-index:1;
}
//right sample
.diaggradientback
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#ffa885', endColorstr='#330000');
}
.diaggradientfront
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#bbffa885', endColorstr='#bb330000');
}
Update:
The documention on this filter does say that multiple filters may be applied together. However, as it turns out, applying more than one gradient filter results in only the last one being applied, so simply applying both filters to one layer doesn't work, and two layers are necessary.
The short answer is, unfortunately, no, you can't. Microsoft's gradient filter is binary - only left to right or top to bottom.
You might, however, be able to use CSS3 PIE to do what you want. Keep in mind that PIE's support for gradients in IE9 is somewhat sketchy, though, and may or may not work, even if IE7 and 8 do (see their forums for some more info).