Shade out sector of circular image using css and javascript - javascript

I have a simple circular image with an overlaying div of same dimensions and opacity of 0.4. I want to shade out only part of the image i.e. if I give it 100 degrees, I want it to show a circular section of the overlaying semi-transparent div of only 260 degrees. I have searched a lot but am not sure how to do this.
Here is the CSS for the overlaying div:
.shade {
position: absolute;
text-align: center;
width: 50px;
height: 50px;
border-radius: 100%;
background-color:#ffffff;
opacity: 0.4
}

This may help out a ton. It's for CSS3 Pie Charts, but maybe you can use some of these techniques to accomplish what you want with straight CSS.
http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/

Related

Full width slider with responsive items inside

I'm trying to do a slider that have two links inside, the problem is:
This slider have two hexagons inside, they are links, in different window sizes the positioning of this hexagons change and they need to be at same positioning following the image when resizing.
My jsFiddle: http://jsfiddle.net/wtkd/7qr5w511/2/
Fullscreen view: http://jsfiddle.net/wtkd/7qr5w511/2/embedded/result/
This two hexagons are positioned correctly, but this image still not getting full width, if i put background-size:100%in my <div class="img-slider> will get full width, but the hexagons don't follow the position, someone can help me to find a way to maintain hexagons positioned at the same point ever?
I guess this is what you wanted. Little number magic and it's done.
.carousel .item .hexagon{
height: 64%;
left: 9.5%;
position: absolute;
top: 1.5%;
width: 22.5%;
}
.carousel .item .right{
right: 13.5%;
height: 64%;
bottom: 1.8%;
width: 22.5%;
}
and here's
DEMO

Creating a colored margin without changing DOM, because border affects the markup like padding

I was trying to see if there was a way to do something like changing the color of margins in CSS, without changing the DOM, but i am unsure as to how to figure it out. Margin itself takes only things like "auto|inherit|number (px|$|vs|vh)" so i did not know if it was a combination of a few things.
How would i accomplish such a thing?
My bet seems to be on actually doing DOM manipulation.
Is my goal achievable with CSS alone?
My reasoning is that i am doing some scaling for a visual demo, and want to add a black border, similar to that of IPads and other Tablets. The issues i noticed is that adding a border which scales everything a little more (not what i wanted).
The reason why i am tagging javascript is because there might be a trick within javascript, outside the scope of css that would resolve the issue (while not changing DOM around).
Is this possible? Had anyone ever tried this?
You can create colored borders without using any extra dom elements... You have a couple of different options -- probably more.
Using box shadow:
.foo {
width: 250px;
height: 250px;
background: green;
box-shadow: 0 0 0 10px black;
}
Using a linear gradient on a pseudo-element:
.bar {
margin-top: 50px;
width: 250px;
height: 250px;
background: orange;
}
.bar:before {
content: '';
position: absolute;
width: 250px;
height: 50px;
background: linear-gradient(90deg, #000, #000)
}
DEMO
Hopefully I'm not misunderstanding what you're after...

smooth opacity transition on an element with a filter applied

so I have a DIV with a blur filter applied to it. I am trying to "fade in" the DIV using CSS opacity (0 to 1) over a one second transition. The DIV does fade in, but it is very glitchy. I tried increasing the transition time, but it still glitches between blurred states. any idea how to smooth this transition? here is the code I am using:
SVG code:
<svg>
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="15" />
</filter>
</svg>
CSS code:
#testdiv
{
background: url('images/background-buildpresentation.jpg') fixed;
border-radius: 30px;
color: white;
filter: url(#blur-effect-1);
font-family: arial;
font-size: 40px;
height: 80%;
left: 10%;
opacity: 0;
position: absolute;
top: 10%;
transition: all 1s;
width: 80%;
}
HTML code:
<div id="testdiv">Display some text here</div>
JavaScript creates the transition:
setTimeout(function(){testdiv.style.opacity="1"},2000);
This may just be a limitation of the browser. I am testing in firefox 27 currently. thanks in advance.
doug
A stdDeviation of 15 is very large. That is the equivalent to a blur radius of 45. That means for every pixel in the div, it is doing 4 x (45 + 45)^2 multiplications. For a div that is 80% of the page (I am guessing from your CSS), that could be something like 800 x 800 x 4 x 90^2. Assuming my maths is correct, that's over 20 billion calculations per step of the opacity transition. Even with graphics hardware, that probably isn't going to be that smooth.
There are possible alternatives. You could draw the blurred div into a canvas and then fade that. See
converting div and its associated elements to canvas jquery?
or
http://html2canvas.hertzen.com/

How to create google plus circle with mouseover effect?

Those of you who have seen google plus may know what Im taking about...
Essentially my problem is this. I would like to have a circle with radius for example of some number of pixels with text in the center. On mouseover, the outline of the circle expands by whatever it was plus 5. When I mouse out, the circle gradually shrinks back to its original size. If the text in the middle of the circle is clicked then an alert box of some sort pops up.
What is a good way to do this and how? Does it involve div tags?
Use CSS3 border-radius to create your circle and some JS to do the animations...or you could try to do them with CSS3 as well.
http://jsfiddle.net/DOSBeats/cE6Yb/
This version uses JS.
Here is the CSS code they use:
.eswd {
background: url("/images/experiments/nav_logo78.png") repeat scroll 0 -243px transparent;
}
.esw {
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
display: inline;
height: 15px;
margin-left: 5px;
overflow: hidden;
vertical-align: 6px;
width: 24px;
}
HTML:
<button g:pingback="/gen_204?atyp=i&ct=plusone&cad=S0" title="Recommend this page" g:undo="poS0" g:type="plusone" g:entity="http://anewyorkthing.com/" onmouseover="window.gbar&&gbar.pw&&gbar.pw.hvr(this,google.time())" onclick="window.gbar&&gbar.pw&&gbar.pw.clk(this)" class="esw eswd" style="" id="gbpwm_0"></button>

Raphael canvas overrides css

I'm using Raphael to create a vector based map. The map is biggish so I'm using RaphaelZPD to allow zooming and panning while fitting the image in to a smaller frame. I've used html5 to create a div set as a table-cell with rounded corners and some inset box-shadows set in the css file. I've id'd my Raphael canvas the same as the div and while it loads nicely, shows all the graphics right, has all the animated elements working properly, stays within the boundaries etc. there's still a slight a problem. The SVG overrides the rounded corner and inset box-shadow attributes set in the css. So instead of rounded corners I get sharp corners. If I pan the map so that there is no Raphael produced graphics overlaying the corner, the rounded corner appears again. Same goes for the shadows.
So is there a way to make the js stay behind these effects? Or should I try to go around it by creating inversed rounded corners as absolute elements which stay on the top layer and just forget about the shadows?
I hope I was clear with my problem, got a good week of programming experience of any kind so bit shaky with my terminology still.
http://jsfiddle.net/cgnrh/4/ <- with practice images, also very messy
#map {
display: table-cell;
position: absolute;
margin-top: 104px;
margin-left: 350px;
border-radius: 0 2em 2em 0;
box-shadow: inset 3px 0 7px #777;
width: 550px;
height: 900px;
background: #FFFFFF;
}
var paper = Raphael('map');
I wrapped a div around your map div:
<div id="frame">
<div id="map">
</div>
</div>
Then I changed position from absolute to relative on #map and added styles for the frame:
#frame {
position: relative;
top: 104px;
left: 350px;
overflow:hidden;
border-radius: 0 2em 2em 0;
}
By applying the rounded corner to the wrapping div and hiding overflow, it creates the rounded corner on the map image. I believe you're assumption is correct that the Raphael SVG is rendering over the effects of the div on which is is painting, so you just have to constrain it with a surrounding div. Changing position from absolute to relative and using positioning on the wrapping div was necessary to get it to layout in the same place it was before. I don't think you're going to be able to achieve the inset box shadow.
http://jsfiddle.net/9w2ub/

Categories