Code Demos: CSS Position Sticky, Line-Clamp, background-clip: text; and :fullscreen Pseudo Class

Posted on by Elad Shechter Posted in CodeTagged

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.