Here are are my last 4 CSS CodePen examples, small things which you can use today in your own project.
CSS Position:Sticky; with top:0; and bottom:0;
🤓 Did you know that there is an excellent reason to use CSS Position Sticky with top and bottom combined, if the sticky element is stacked in the middle.
.sticky-item{
position:sticky;
top:0;
bottom:0;
}
Trimming Multi-Line Text in CSS
These days trimming multi-lines of text are easy to implement with the “line-clamp” property
.cont{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
Background-clip: text with Animated Emoji
Playing with “background-clip: text” while using Emoji with a little bit of CSS Animations
CSS :fullscreen Pseudo Class
Have you ever met the “:fullscreen” CSS pseudo-class? (Which has full browsers support)
Follow me on Twitter @eladsc to see more CSS stuff that I’m doing.