CSS Recipes

gistfile1.txt

//border gradient:
.box {
  margin: 80px 30px;
  width: 200px;
  height: 200px;
  position: relative;
  background: #fff;
  float: left;
}
.box:before {
      content: '';
      z-index: -1;
      position: absolute;
      width: 220px;
      height: 220px;
      top: -10px;
      left: -10px;
      background-image: linear-gradient(90deg, yellow, gold);
}
// effect contact
// background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);


//filter image
web 2.0 to use it http://ilyashubin.github.io/FilterBlend/
.blend {
    background: #fff;
}
.blend img {
    mix-blend-mode: darken; 
}

//hover with z-index to hide the element one by one
http://zomigi.com/demo/z-index_transition.html

// don't use background-size anymore
.image__contain {
  object-fit: contain; 
} 
.image__fill {
  object-fit: fill; 
}
.image__cover {
  object-fit: cover; 
}
.image__scale-down {
  object-fit: scale-down;
}

//form
// style a checkbox
 <input type="checkbox" id="check" name="check" />
 <label for="check">Checkbox</label>
 input[type=checkbox] {display: none;}

input[type=checkbox] + label:before {  
    content: "";
    border: 1px solid #000;
    font-size: 11px;    
    line-height: 10px;
    margin: 0 5px 0 0;
    height: 10px;
    width: 10px;
    text-align: center;
    vertical-align: middle;
}

input[type=checkbox]:checked + label:before {  
    content: "\2713";
}
//Let's add some animation to our checkbox:
input[type=checkbox] + label:before {  
    content: "\2713";
    color: transparent;
    transition: color ease .3s;
}
input[type=checkbox]:checked + label:before {  
    color: #000;
}
// animate to our radio
input[type=radio] + label:before {  
    content: "\26AB";
    border: 1px solid #000;
    border-radius: 50%;
    font-size: 0;    
    transition: font-size ease .3s;
}
input[type=radio]:checked + label:before {  
    font-size: 10px;    
}

//Counters in CSS
<ol class="list">  
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>  

.list {
    counter-reset: i; //reset conunter
}
.list > li {
    counter-increment: i; //counter ID
}
.list li:after {
    content: "[" counter(i) "]"; //print the result
}
//advanced counter
<div class="languages">  
  <input id="c" type="checkbox"><label for="c">C</label>
  <input id="C++" type="checkbox"><label for="C++">C++</label>
  <input id="C#" type="checkbox"><label for="C#">C#</label>
  <input id="Java" type="checkbox"><label for="Java">Java</label>
  <input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>
  <input id="PHP" type="checkbox"><label for="PHP">PHP</label>
  <input id="Python" type="checkbox"><label for="Python">Python</label>
  <input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>
</div>  
<p class="total">  
  Total selected:
</p>  
.languages {
  counter-reset: characters;
}
input:checked {  
  counter-increment: characters;
}
.total:after {
  content: counter(characters);
} 


//How do yout think, what will be if you put visibility: visible block into another one with visibility: hidden?

.hidden {
  visibility: hidden;
}
.hidden .visible {
  visibility: visible;
}
//You might think that all will be hidden but parent will hide all excepting it's child. Please look at the demo.
http://codepen.io/CSSKing/pen/lxBfk


position: sticky
We've discovered a new feature that now you can create "sticky" blocks. They will be working the same as fixed blocks but won't hide another blocks. You'd better see it. 
Right now only Mozilla and Safari support it but you can still use it this way:

.sticky {
  position: static;
  position: sticky;
  top: 0px;
}
We will get a sticky block in browsers which support it and a regular block in other programs. 
It is rather useful for mobile sites where you need to create a movable block which won't substitute others.


We can change text selection color with a couple lines of code:

*::selection {
    color: #fff;
    background: #000;
}
*::-moz-selection {    
    /*Only Firefox still needs a prefix*/
    color: #fff;
    background: #000;
}
You can define not only a color for selection, but shadows and backgrounds too.