Leo Merkel Lego2012
Lego2012
/ active-checkbox.css
Last active
July 16, 2017 23:27
Aktive Checkboxen oder Radioboxen werden mit einem Rand dargestellt. Werden diese abgewählt, verschwindet der Rahmen automatisch. Folgend gibt es auch noch die Pseudoklassen :enabled und :disabled, die deaktivierte oder aktivierte Elemente selektiert.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| input:checked { | |
| border: 1px solid; | |
| } |
Lego2012
/ animating-gradient-background.css
Created
September 26, 2016 20:15
Background Gradient animieren
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| button { | |
| background-image: linear-gradient(#FC6E51, #E9573F); | |
| background-size: auto 200%; | |
| background-position: 0 100%; | |
| transition: background-position 0.5s; | |
| } | |
| button:hover { | |
| background-position: 0 0; | |
| } |
Lego2012
/ background-transparency.css
Created
September 26, 2016 20:16
Transparent Background Color
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .rgba { | |
| background-color: transparent; | |
| background-color: rgba(200,200,200,0.8); | |
| filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)"; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .blurry-text { | |
| color: transparent; | |
| text-shadow: 0 0 5px rgba(0,0,0,0.5); | |
| } |
Lego2012
/ boxshadow-only-on-side.css
Created
September 26, 2016 20:17
Boxshadow only on one or more sides
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .box-shadow { | |
| background-color: #AC92EC; | |
| width: 160px; | |
| height: 90px; | |
| margin-top: -45px; | |
| margin-left: -80px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| } |
Lego2012
/ centering-div-unknown-width.css
Created
September 26, 2016 20:19
Centering a DIV with unknown width
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .content { | |
| margin: 0 auto 8px; | |
| display: table; | |
| } | |
| .content div { | |
| display: table-cell; | |
| } | |
| <!--[if IE]> |
Lego2012
/ change-text-selection-style.css
Created
September 26, 2016 20:19
Change Text Selection Style
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ::selection { | |
| color: white; | |
| background-color: red; | |
| } | |
| ::-moz-selection /* Firefox needs an extra attention for this */ { | |
| color: white; | |
| background-color: red; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* slightly enhanced, universal clearfix hack */ | |
| .clearfix:after { | |
| visibility: hidden; | |
| display: block; | |
| font-size: 0; | |
| content: " "; | |
| clear: both; | |
| height: 0; | |
| } | |
| .clearfix { display: inline-block; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| selector { | |
| filter: alpha(opacity=50); /* internet explorer */ | |
| opacity: 0.5; /* fx, safari, opera */ | |
| } |
Lego2012
/ cross-browser-vertically-and-horizontally-centered.css
Created
September 26, 2016 20:23
This centers an image of unknown size vertically and horizontally within a box. The wrapper box has an explicit width and height. The is a hack for internet explorer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| <figure class='logo'> | |
| <span></span> | |
| <img class='photo'/> | |
| </figure> | |
| */ | |
| .logo { | |
| display: block; | |
| text-align: center; |
OlderNewer