Skip to content

Instantly share code, notes, and snippets.

View 0632347878's full-sized avatar

Den 0632347878

2 followers · 7 following
View GitHub Profile
@0632347878
0632347878 / if you use bootstrap add 1px to min-width
Created December 9, 2017 11:09
Breakpoints
/*begin all media*/
/*------- begin Media ----------*/ /*1200*/
@media screen and (max-width: 1200px) and (min-width: 992px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (max-width: 1200px) {
@0632347878
0632347878 / btn hover
Created December 2, 2017 09:37
/* case1 */
/*to right*/
.btn:hover {
box-shadow: inset 100px 0 0 0 #e0e0e0;
color: #fff;
}
/*to left*/
.btn:hover {
box-shadow: inset -100px 0 0 0 #e0e0e0;
color: #fff;
@0632347878
0632347878 / gist:4c9cd91ad719487390e40a3aa4fe8469
Created November 11, 2017 08:59
Background linear-gradient for hidden height
background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "";
display: block;
height: 40px;
left: 0;
position: absolute;
right: 0;
z-index: 6;
@0632347878
0632347878 / SASS crossbrowser mixin for flexbox
Created November 9, 2017 13:45
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
@0632347878
0632347878 / fullwidth bg
Created November 7, 2017 10:56
position: relative;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 100vw;
@0632347878
0632347878 / gist:16eaab6a9ef73dff4b20057fe3a45f4a
Created September 22, 2017 14:30
pseudo white on height delimiter
background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
@0632347878
0632347878 / gist:466b5e6122df32fb340b3da46acab855
Created September 12, 2017 08:31
reset.css
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: button;
}
@0632347878
0632347878 / animate transition text on hover effect
Created August 16, 2017 13:28
animate transition text on hover effect
/* begin animate transition text in block on hover effect */
.tile-section .sppb-col-md-4 .sppb-addon-single-image:hover > .sppb-addon-title {
transition: .4s;
transform: translateY(0);
opacity: 1;
}
.tile-section .sppb-col-md-4 .sppb-addon-content {
position: relative;
z-index: -1;
transition: .9s;
@0632347878
0632347878 / gist:81c8d5974be0628b446884b3f1062726
Created August 9, 2017 14:22 — forked from realmyst/gist:1262561
Склонение числительных в javascript
function declOfNum(number, titles) {
cases = [2, 0, 1, 1, 1, 2];
return titles[ (number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5] ];
}
use:
declOfNum(count, ['найдена', 'найдено', 'найдены']);
@0632347878
0632347878 / Font awesome trough CSS
Created July 22, 2017 09:26
http://astronautweb.co/snippet/font-awesome/ list with codes
.element {
position: relative;
}
/*replace the content value with the
corresponding value from the list below*/
.element:before {
content: "\f000";
font-family: FontAwesome;