Unschärfeeffekt mit CSS

Unschärfeeffekte lassen sich in CSS über die Filter-Property realisieren. Sobald die Style-Klasse festgelegt wurde, kann man diese auf ein DIV oder beliebiges Element anwenden.

Screenshot

Code:

.blurout {
            /* Transparenz festlegen */
            opacity: 0.85;
           
            /* Postition festlegen */
            position: absolute;
            top: 0;
            left: 0;    
            right: 0;
            bottom: 0;    
           
            /* Unschärfe festlegen */
            filter: blur(5px;);
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
}

Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <style>
       
        .blurout {
            /* Transparenz festlegen */
            opacity: 0.85;
           
            /* Postition festlegen */
            position: absolute;
            top: 0;
            left: 0;    
            right: 0;
            bottom: 0;    
           
            /* Unschärfe festlegen */
            filter: blur(5px;);
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
        }
       
        </style>
    </head>
    <body>
        <div class="blurout">
       
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
            sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
            justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit amet.  
       
        </div>
    </body>
</html>

Schreibe einen Kommentar