Schlagwort: CSS

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);
}

Unschärfeeffekt mit CSS weiterlesen

Responsive Design: Media Query

Unter Responsive Design versteht man die dynamische Anpassung des Webseiten-Layouts an das Darstellungsmedium. Beispielsweise wird das GitHub-Ribbon in der oberen rechten Ecke erst ab einer Breite von 500 Pixeln angezeigt. Dafür ist dieser Code verantwortlich:

Style-Angabe

<style type="text/css"> @media all and (max-width: 500px) { #github_ribbon { display:none; } } </style>

HTML

<a href="https://github.com/sklueh"><img id="github_ribbon" style="z-index:2; position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>

50 hilfreiche Werkzeuge zum Thema Responsive Design:
50 fantastic tools for responsive web design