CSS – Snippets

CSS link/button/loader effects

tadej — Thu, 26 Sep 2019 14:33:17 +0000

https://cssfx.dev/

Object-fit IE Polyfill

tadej — Sat, 21 Sep 2019 18:16:00 +0000

Neat trick for CSS object-fit fallback on IE:

https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3

Slick Slider Animated

tadej — Sat, 21 Sep 2019 18:11:14 +0000

Animated text elements on slick slider:

Slick slider – Equal Height

tadej — Sun, 11 Aug 2019 18:36:44 +0000

Equal height blocks on slick slider:

.slick-track{
    display: flex;

    .slick-slide{
        display: flex;
        height: auto;
        align-items: center; //optional
        justify-content: center; //optional
    }
}

CSS Hover

tadej — Tue, 09 Apr 2019 18:51:00 +0000

Circle Hover Effects:
https://tympanus.net/Tutorials/CircleHoverEffects/index.html

Box Caption Hover:
https://tympanus.net/Tutorials/CaptionHoverEffects/index.html

Image Effects:
https://freefrontend.com/css-image-effects/

CSS Browser target

tadej — Sat, 16 Feb 2019 15:18:21 +0000

Targeting browsers to style with CSS:

@supports (-ms-ime-align: auto) {
  /* Microsoft EdgeV13&14 CSS styles go here */
  .edge1314 {
    background: green;
  }
  .edge1314::before {
    content: "Active: ";
  }
}
@supports (-ms-accelerator: true) {
  /* Microsoft EdgeV13 CSS styles go here */
  .edge13 {
    background: green;
  }
  .edge13::before {
    content: "Active: ";
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10 & IE11 CSS styles go here */
  .ie1011 {
    background: green;
  }
  .ie1011::before {
    content: "Active: ";
  }
}

Slick Slider load first image

tadej — Thu, 31 Jan 2019 14:55:59 +0000

Display only first image of slick on page load

.slick_slider {
    overflow: hidden;
    
    .slick_slider__element:nth-child(n+1) {
        display: none;
    }
    
    .slick-initialized,
    .slick_slider__element:first-child { 
        display: block;
    }
}

CSS

tadej — Tue, 01 Jan 2019 19:48:47 +0000

Css