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/
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;
}
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.
I'd like to achieve the shape I've posted in link below for all my h2s on a page. I have a rough idea how I could do it using png background images with a couple of spans inside the heading perhaps.
http://vurtmedia.net/header.png
Any ideas on if this would be possible in pure CSS? I'd much prefer this, as I am not bothered about IE9 or lower in this instance.
Sorry if my post description isn't the best, not sure how to describe this shape!
Thanks in advance :)
Pat
You could just set a padding, border radius and use absolute positioning in order to get the positions of the elements straight, see this jsFiddle
HTML:
<h1 class="shaded">lorem</h1>
<h2 class="shaded bottomright">ipsum</h2>
CSS:
.shaded
{
padding:10px;
background-color:#000;
border-radius:12px;
font-family:verdana;
}
.topleft
{
}
.bottomright
{
position:absolute;
left:40px;
top:6px;
}
h1
{
font-size:20px;
color:#FFF;
display:inline-block;
}
h2
{
font-size:60px;
color:#FFF;
display:inline-block;
}
But that does not allow you to smooth the corners between the two elements, which is not possible to achieve in CSS only.
You could smooth the corners out with pictures, but that would leave you with some positioning problems.
I need a div with picture bg to overlay an image (with some amount transparency) when hovered on. I need to be able to have one transparent overlay that can be used and reused throughout the site on any image. My first attempt was round-about to say the least. Because I found out you cannot roll-over an invisible div I devised a sandwhich system in which the original image is the first layer, the overlay is the second layer, and the original image is third layer again. This way, when you roll-over, the original image disappears revealing the overlay image over the original image:
http://www.nightlylabs.com/uploads/test.html
So it works. Kinda. Because of you cannot interact with an visibility:invisible element (why?!) the roll-over flickers unless you rest the cursor on it.
Any help? This method is bad so if anyone has a better one please comment.
I used the following css and its fine.
#container { position:relative; width:184px; height:219px;}
.image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:2;}
.overlay { background-image:url(aligo.png); position:absolute; top:0; left:0; width:184px; height:219px; z-index:3;}
.top-image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:4;}
.top-image:hover { background-image:none;}
The image flickers because you can't hover over something that isn't there.
It will work if you have it layered normally (no z-index necessary) and make it transparent, so that it is still being displayed and can be hovered over.
The second image won't flicker, and you can control the styling with the span tag. Here's some of the CSS I used:
img.side
{position:absolute;
border:1px solid black;
padding:5px 5px 5px 5px;
float:center;}
/*normal base images*/
img:hover+span
{display:block;}
/*new images. automatically display beneath base/hover image*/
.side:hover
{opacity:0;}
/*base images again, only when hovered over*/
span
{display:none;
cursor:pointer;}
The hover tag determines the styling of the base img (and base div), and hover+span defines the styling of the img that only appears when hovering.
Here is the html showing the div entirely:
<div class="only" id="one">
<img class="side" id="ach" src="ach.svg">Academic</a>
<span>
<img class="hovering" id="hach" src="Hach.svg">Academic</a>
</span>
</div>
Hope this helps.