CSS3 spotlight-Effekt mit einem abgerundeten Rechteck mit einem Gefälle

Ich Schreibe ein interaktives tutorial für eine web-app, die bedeutete, zu markieren die verschiedenen Teile der Benutzeroberfläche. Das tutorial ist gedacht, um die spotlight-ein Teil zu einer Zeit und sagen Sie dem Nutzer, wie Sie mit ihm interagieren. Sie haben wahrscheinlich gesehen etwas ähnliches auf smartphone-apps.

Für spezielle CSS verwendet werden könnten, um spotlight eine vorhandene Schnittstelle, die beste Lösung, die ich gefunden habe, ist mit so etwas wie dieses, das ist nur ein div auf der vorhandenen Schnittstelle, die es erlaubt Teile hervorgehoben werden:

https://web.archive.org/web/20120414095101/http://svay.com/experiences/css3-spotlight

Jedoch die CSS - radial-gradient erlaubt nur für Kreise und Ellipsen, die ist seltsam für user-interface-Elemente, die sind in der Regel rechteckig. Gibt es eine Möglichkeit, den gleichen Effekt erzielen, aber mit abgerundeten Rechtecke (Grau dargestellte Bereich ist alles, was außerhalb des Rechtecks)?

InformationsquelleAutor Andrew Mao | 2013-10-14
  1. 5

    Vals gab eine ausgezeichnete Antwort, und gab mir einen tollen Tipp, um herauszufinden, eine einfache Möglichkeit, genau das zu bekommen, was ich wollte. Dieser Effekt kann erreicht werden mit einem inset box shadow plus der gewöhnliche, und hat den zusätzlichen Vorteil, dass die spotlight-box müssen nur neu positioniert werden, um markieren Sie einen bestimmten Bereich, anstatt Neuzeichnen einer CSS-Farbverlauf.

    Hier der code:

    .overlay {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
  border-radius: 20px;  
  box-shadow: 0px 0px 4px 10px rgba(0,0,0,0.5) inset, 0px 0px 0px 1000px rgba(0,0,0,0.5)
}

    Zur individuellen Anpassung der Parameter, um den Verlauf der Grenze weicher oder mehr dramatisch, und wie viel es steckt in den Vordergrund.

    Schauen Sie sich die folgenden:

    InformationsquelleAutor Andrew Mao
  2. 2

    Können Sie tun, mit Steigungen, aber die Erreichung des abgerundeten Rechtecks wird schwer sein.

    Ein einfacher Weg ist nur mit box-shadow

    .overlay {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
  border-radius: 20px;

  box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.5);
}

.overlay:after {
  content: '';
  position: absolute;
  left: -25px;
  top: -25px;
  right: -25px;
  bottom: -25px;
  border: solid 1px gray;
  border-radius: 25px;
  box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.6);
}

    Diese Weise die abgerundeten Ecken sind einfach. Ich habe ein pseudo-element zu machen, mehr elegant; auf diese Weise erhalten Sie 2 Stufen von Transparenz. Sie könnte aufwendig es weiter mit den restlichen pseudo-element, und auch mit einem inset-Schatten.

    demo

    einen alternativen Ansatz verwenden von Farbverläufen (keine abgerundeten Ecken, aber nicht einen schlechten Einfluss sowieso):

    .overlay2 {
  position: absolute;
  left: 40px;
  top: 50px;
  width: 200px;
  height: 200px;
  border-radius: 40px;
  border: solid 1px gray;
  background-image: linear-gradient(90deg,white,transparent 25%, transparent 75%, white), linear-gradient(0deg,white,transparent 25%, transparent 75%, white);
  background-size: 100% 50%, 50% 100%;
  box-shadow: 0px 0px 0px 1000px white;
}

    demo2

    InformationsquelleAutor vals
  3. 1

    Dies ist die nicht CSS3-Lösung. Die Lösung verwendet eine 10% ige Transparenz schwarzen hintergrund von png, der Scheinwerfer ist nun als Bild unten.

    HTML

    <div class="spotlightContainer">
    <div class="imageContainer">
        <img src="/images/tuinderlusten.jpg" alt="de tuin der lusten"/>
    </div>
    <div class="darkCover">
        <div class="dark darktop"> </div>
        <div class="darkmiddle">
            <div class="dark darkleft"> </div>
            <div class="spotlight"> </div>
            <div class="dark darkright"> </div>
        </div>
        <div class="dark darkbottom"> </div>
    </div>
</div>

    JavaScript

    var darkRight, darkLeft, darkBottom, darkTop, darkMiddle, containerHeight, containerWidth;

$(function(){
    containerWidth = $(".spotlightContainer").width();
    containerHeight = $(".spotlightContainer").height();
    darkTop = $(".darktop");
    darkBottom = $(".darkbottom");
    darkLeft = $(".darkleft");
    darkRight = $(".darkright");
    darkMiddle = $(".darkmiddle");
    darkTop.height(100-50);
  darkBottom.height(containerHeight-100-50);
  darkLeft.width(100-50);
  darkRight.width(containerWidth-100-50);
    setSpotlight(100, 100);
    $(".spotlightContainer").on("mousemove", function(e){
        setSpotlight(e.pageX, e.pageY);
    });
});

var setSpotlight = function(pageX, pageY){
    var radius = 100;
        darkMiddle.height(radius*2);
        if(pageX < radius){
            pageX = radius;
        } else if (pageX > containerWidth -radius){
            pageX = containerWidth -radius;
        }
        darkTop.height(pageY-radius);
        darkBottom.height(containerHeight-pageY-radius);
        darkLeft.width(pageX-radius);
        darkRight.width(containerWidth-pageX-radius);
}

    CSS

    html, body{
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

div{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0;
}

body{
    overflow: hidden;
}

.dark{
    background: url("/images/darkcover.png");
}

.darktop{
    width: 100%;
    height: 100%;
}

.darkbottom{
    width: 100%;
    height: 0px;
}

.darkmiddle{
    height:0px;
    width: 100%;
}

.darkmiddle div{
    float: left;
    height: 100%;
}

.darkleft{
    width: 200px;
}

.darkright{
    width: 200px;
}

.spotlight{
    width: 200px;
    background: url("/images/spotlight.png");
    background-size: cover;
}

.spotlightContainer{
    width: 100%; height: 100%; z-index: 500; position: fixed;
}

.spotlightContainer .imageContainer, .spotlightContainer .darkCover{
    width: 100%; height: 100%; position: absolute; top: 0; left: 0;
}

.spotlightContainer .imageContainer{
    max-height: 100%;   max-width: 100%; width: 100%;
}

    Die spotlight-Bild

    CSS3 spotlight-Effekt mit einem abgerundeten Rechteck mit einem Gefälle

    Getestet habe ich diese und es funktioniert auf allen modernen und IE7+ desktop-Browser.

    InformationsquelleAutor Bart Burg
  4. 0

    Ich haben schreiben Sie eine kleine jQuery-plugin, das erstellen von vier div-Element und legen Sie es um Ihre zone /element.

    Selbst wenn es nicht die Antwort, die Sie wollen, nicht niederstimmen es ist eine erste Idee für Ihr futur Skript.

    var element = $("#element1").intro();
$("#element1").click(function() {
    element.intro('moveTo', $("#element2"), 500);
});

    http://jsfiddle.net/DoubleYo/DQ6jj/

    InformationsquelleAutor Yoann
Schreibe einen Kommentar