Category: CSS
Neat trick for CSS object-fit fallback on IE:
Animated text elements on slick slider:
Equal height blocks on slick slider:
.slick-track{
display: flex;
.slick-slide{
display: flex;
height: auto;
align-items: center; //optional
justify-content: center; //optional
}
}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/
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: ";
}
}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