Creating Rounded Divs with CSS
The possibilities of CSS3's border-radius are endless when it comes to design. One interesting usage involves creating a round div acting as an image spotlight, overlaying the main image and adjusting its position based on mouse movements. Check out this JSFiddle Demo for a visual representation.
In the realm of CSS3, achieving softened edges in spotlights is not straightforward; it demands support for opacity gradients which can be emulated by incorporating multiple elements with varying radius and opacity levels. An example showcasing softened edges can be viewed in this Updated demo with softened edges.
The adjusted variables in the updated demo dictate the spotlight's size and level of softness:
var spotlightDiameter = 150; // Base size (excluding soft edge)
var numSpotlightLayers = 6; // Increased layers result in softer edges
var spotlightLayerThickness = 2; // Thinner thickness yields subtle softening
To witness ripples in the spotlight effect, refer to this modified demo. By enhancing layer thickness, the functionality becomes more evident.
A simplified version of the code featuring sharp-edged spotlights is depicted below:
HTML
<div class="content">
<div class="spotlight"></div>
</div>
CSS
.content {
position: relative;
width: 640px;
height: 480px;
background: url(desaturated.jpg) no-repeat 0 0;
overflow: hidden;
}
.spotlight {
display: none;
position: absolute;
background: url(overly_saturated.jpg) no-repeat 0 0;
}
jQuery
var spotlightDiameter = 150;
// Update the spotlight position on mousemove
$('.content').on('mousemove', function(e){
var center = {x: e.pageX - this.offsetLeft,
y: e.pageY - this.offsetTop};
var x = center.x - (spotlightDiameter >> 1);
var y = center.y - (spotlightDiameter >> 1);
$('.spotlight').css({left: x + 'px', top: y + 'px',
backgroundPosition: -x + 'px ' + -y + 'px'}).show();
});
// Hide the spotlight on mouseout
$('.content').on('mouseout', function(e){
$('.spotlight').hide();
});
// Initialize the spotlight
$(document).ready(function(){
$('.spotlight').width(spotlightDiameter + 'px')
.height(spotlightDiameter + 'px')
.css({borderRadius: (spotlightDiameter >> 1) + 'px'});
});
Variations Using Different Technologies
The concept can also be approached utilizing HTML5 Canvas or SVG. Below is a comparison of browser support across diverse implementations:
In summary, for solutions including border-radius and HTML5 Canvas, compatibility is unattainable with IE8 and predecessors. Though Android backing may not be crucial considering the mouse-centric nature of the operation.