F-F-F-Fade Away Text …

January 24, 2019

In a responsive app design, the height of an HTML tag containing text will vary as the text wraps to fill the available display width. When a number of these tags are placed side by side in a grid, the different text content lengths can cause the tag container heights to vary.

The tag

p {
	font-size: 0.825rem;
	height: 7rem;
	line-height: 1.5;
	overflow: hidden;
	position: relative;
}

The ::after pseudo element

p:after {
	background: -webkit-gradient(linear, left top, right top,from(rgba(255, 255, 255, 0)), to(white), color-stop(90%, white));
	background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 90%, white);			
	background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 90%, white);
	background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 90%, white);
	background: linear-gradient(to right, rgba(255, 255, 255, 0), white 90%, white);
	bottom: 0;
	color: transparent;
	content: "\02026"; 
	font-size: 0.825rem;
	position: absolute;
	right: 0;
	width: 12rem;
	/*
	background-size: 100% 100%;
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	*/
}
  • Overflow cuts off extra text.
  • Position-relative sets the container for the position absolute, bottom and right to place the ::after pseudo element.
  • Content activates the pseudo element.
  • Background sets the transparency curve and color, while width sets the gradient length (assumes IE10+)
  • Match tag and pseudo element fonts, and coordinate font-size, height and line-height settings for cleanly cutting the chosen number of lines.
  • Add margin and padding to taste.
  • Add background-size and box-sizing if needed.

Here’s an example of a card suitable for a grid with fade away applied to heading and paragraph tags.

fade awar card - F-F-F-Fade Away Text …

Leave a Reply

Your email address will not be published. Required fields are marked *