[CSS] Tipps and Tricks

[Ravenstorm]

Hey,

hier eine kleine Sammlung von CSS-Tricks, welche euch Browserunabhängig das Leben leichter machen können. Ich werde das ganze hier einfach ab und zu mal updaten.

Background auf die Bildschirmgröße strecken:

PHP Code:

.background{
  background: url(background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
} 


Bild spiegeln:

PHP Code:

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
} 


Verwischter Text:

PHP Code:

.blur{
   color:transparent;
   text-shadow: 0 0 2px rgba(0,0,0,0.5);
} 


3D Text-Shadow:

PHP Code:

.shadow{
  margin-top:-70px;
  font-family: sans-serif;
  font-size:16em;
  text-align:center;
  text-shadow: 0 -3px 0 #333,
    0 6px 8px rgba(0,0,0,.4),
    0 9px 10px rgba(0,0,0,.15),
    0 30px 10px rgba(0,0,0,.18),
    0 15px 10px rgba(0,0,0,.21);
} 


 Beispiel

Der erste Buchstabe des Paragraphen vorheben:

PHP Code:

#caps:first-child:first-letter { 
    float: left; 
    color: #903; 
    font-size: 75px; 
    line-height: 60px; 
    padding-top: 4px; 
    padding-right: 8px; 
    padding-left: 3px; 
    font-family: Georgia; 
} 


Bsp.:

Fixed Footer:

PHP Code:

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
} 


Shadow am oberen Rand der Seite:

PHP Code:

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;

          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);

} 


[PDDStudio]

Bild spiegeln

PHP Code:

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
} 


Wer's brauch

[Ravenstorm]

Originally Posted by PDDStudio

Bild spiegeln

PHP Code:

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
} 


Wer's brauch

Hab's mal hinzugefügt. Wäre cool wenn sich noch mehr Leute melden würden, könnte dann ne richtige Sammlung werden.

[PDDStudio]

Originally Posted by Ravenstorm

Hab's mal hinzugefügt. Wäre cool wenn sich noch mehr Leute melden würden, könnte dann ne richtige Sammlung werden.

Habe noch ein paar Snippets auf meiner alten Platte liegen.
Wenn ich morgen drann denke kann ich die mal anschließen, da hab ich auch noch ein paar Snippets =)

[Ravenstorm]

Originally Posted by PDDStudio

Habe noch ein paar Snippets auf meiner alten Platte liegen.
Wenn ich morgen drann denke kann ich die mal anschließen, da hab ich auch noch ein paar Snippets =)

Geht klar, werde ja ebenfalls immer mal ein paar hinzufügen.

[Mete]

Nice 3D Text-Shadows
Vorschau | Preview:

 Spoiler

Sample HTML w/ inline css

 Spoiler

<!-- The CSS Code -->
<style>
.shadow{
  margin-top:-70px;
  font-family:Mr Dafoe, sans-serif;
  font-size:16em;
  text-align:center;
  text-shadow: 0 -3px 0 #333,
    0 6px 8px rgba(0,0,0,.4),
    0 9px 10px rgba(0,0,0,.15),
    0 30px 10px rgba(0,0,0,.18),
    0 15px 10px rgba(0,0,0,.21);
}</style>
<!-- Importing Fonttype -->
<link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css'>
<!-- Our 3D TextShadow -->
  <div class="shadow">Nice 3D TextShadow</div>