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.
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;
}
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);
}
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;
}
Fixed Footer:
PHP Code:
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
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);
}
