Skip to content

Instantly share code, notes, and snippets.

View Lego2012's full-sized avatar

Leo Merkel Lego2012

15 followers · 4 following
View GitHub Profile
@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.
input:checked {
border: 1px solid;
}
@Lego2012
Lego2012 / animating-gradient-background.css
Created September 26, 2016 20:15
Background Gradient animieren
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
Lego2012 / background-transparency.css
Created September 26, 2016 20:16
Transparent Background Color
.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)";
}
@Lego2012
Lego2012 / blurry-text.css
Created September 26, 2016 20:17
Blurry Text
.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
@Lego2012
Lego2012 / boxshadow-only-on-side.css
Created September 26, 2016 20:17
Boxshadow only on one or more sides
.box-shadow {
background-color: #AC92EC;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
@Lego2012
Lego2012 / centering-div-unknown-width.css
Created September 26, 2016 20:19
Centering a DIV with unknown width
.content {
margin: 0 auto 8px;
display: table;
}
.content div {
display: table-cell;
}
<!--[if IE]>
@Lego2012
Lego2012 / change-text-selection-style.css
Created September 26, 2016 20:19
Change Text Selection Style
::selection {
color: white;
background-color: red;
}
::-moz-selection /* Firefox needs an extra attention for this */ {
color: white;
background-color: red;
}
@Lego2012
Lego2012 / clearfix-css-hack.css
Created September 26, 2016 20:20
Clearfix CSS Hack
/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
@Lego2012
Lego2012 / cross-browser-opacity.css
Created September 26, 2016 20:20
Cross Browser Opacity
selector {
filter: alpha(opacity=50); /* internet explorer */
opacity: 0.5; /* fx, safari, opera */
}
@Lego2012
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
/*
<figure class='logo'>
<span></span>
<img class='photo'/>
</figure>
*/
.logo {
display: block;
text-align: center;