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.
Related
I am using vis.js and would like to align the buttons displayed when using the "navigationButtons" option to the top of the canvas.
I understand this is done using CSS, I was wondering if anyone had any examples?
Thank you in advance,
Anadi.
Preferable some HTML would be nice to work with. However you mention you'd like to update the "alignment" of the buttons. Therefore I would assume the "bottom:" and "right:" attributes is what you are looking for. However, since you want the alignment towards the top, you may want to use the "top:" attribute instead of "bottom:" and "left:" instead of "right:"...
E.g... The following should align these 4 buttons horizontally across the top... update the "left:" attribute to suit your preferred gutter width.
div.vis-network div.vis-navigation div.vis-button.vis-up {
background-image: url("...png");
top:10px;
left:50px;
}
div.vis-network div.vis-navigation div.vis-button.vis-down {
background-image: url("...png");
top:10px;
left:100px;
}
div.vis-network div.vis-navigation div.vis-button.vis-left {
background-image: url("...png");
top:10px;
left:150px;
}
div.vis-network div.vis-navigation div.vis-button.vis-right {
background-image: url("...png");
top:10px;
left:200px;
}
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;
}
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.
I've been implementing Mega Menu Reloaded On to my website, and I am unable to properly align the div tags on different screen resolutions!
Here's: what it should look like
Here's: what it looks like after I've rewritten parts of the css of Mega Menu.
I've tried for a few hours to fix this issue, but as a beginner to css I can not seem to manage to fix it.
I believe this is the css needed pertaining to its placement
.megamenu_fixed {
width:960px;
height:44px;
position:fixed;
right:0;
margin:0 auto 0 -480px;
z-index:2;
background-image:url("../img/bg.png");
background-color: #3d3d3d;
padding-left:12px;
}
.megamenu {
position:absolute;
margin:0;
width:960px;
font-size:0.982em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
top:41px;
padding-left:42%;
}
and here's the code of it's position with the correct placement
#nav-main { right:0; top:55px; list-style: none;}
#nav-main li {list-style: none; float:left; position:relative; padding-left:20px; }
Thanks in advance for any help, or pointing me in any right directions. :)
try using relative instead of absolute positioning.
also, failing that, try specifying left as a percentage (i.e. approx 50% is where the menu starts), and width also as a percentage (100% should make it use only from the left-most point of the div to the right-most side of the screen. if not, try 50% width).
The problem is in your HTML, not your CSS (I think. Well, I fixed the part where 'Adults' was hiding, that was a syntax error)
the span where Adults is declared is mistyped. I replaced <span class="drop"><adults< span=""> (problem code) with <span class="drop">adults</span> and 'Adults' displays properly. However, it is a little squashed to the right, but I believe that would be because of the images top left of the page of 'bad' version, which are not there on the 'good' version
PS: I've left the old answer there as people may have similar issues, where it is in fact the CSS at fault. If you think it's considered "off-topic" let me know, I'll remove it
UPDATE: Oh, and something I forgot to mention, to fix the squashed megamenu, just edit the location in the CSS, that should bring it back to normal
Alternatively, you can scrap div (almost) entirely and use tables instead. can be confusing sometimes, but in my opinion it's totally worth it. You just can't merge/split cells (to split just create a table within a table). Use microsoft word or openoffice writer or something like that and create tables within tables for graphical "base layout" to help you figure out the necessary code. Here's a starting point: Formatting layout with tables on gitHub
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/