Share a few CSS tips – second wave

preface

“Share a few CSS tips” has been updated to the second post, please click this link for previous posts: Share a few CSS tips – first wave.

“Requirements” are the first productivity of programmers, and it is the strange requirements of PM and UI that make our programming skills (CSS) continue to climb.

This time, I’m going to introduce you to some useful CSS techniques that may solve your problems or expand your knowledge.

Since the Nuggets editor doesn’t support iframe, I couldn’t embed the CodePen example directly (my personal blog can preview it directly), so I posted each of the renderings and tested them in Chrome.

Enclose text

Typically, the border attribute is a good choice for putting a border around an HTML element, but this border is based on the box model, which is rendered around the element and does not apply to text inside the box.

Let’s say I want the text to have a 1px black border. Text-shadow is preferred. It sets multiple text shadows to create a visual border.

The HTML code is as follows:

<div class="text">I Like CSS World</div>
Copy the code

The CSS code is very simple. Set the blur value of text-shadow to 0 and offset it by 1px to the bottom right, top left, top right, and bottom left, respectively.

.text {
  color: white;
  font-size: 4em;
  text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px
      1px 0px black;
}
Copy the code

CodePen online preview address

Text-shadow is compatible with all modern browsers, but if you look closely, you’ll notice that the edges are jagged. After all, it’s an analog implementation that doesn’t work very well.

The second method uses the -webkit-text-stroke attribute, which literally means enclosing text.

It is an abbreviation of the -webkit-text-stroke-width and -webkit-text-stroke-text attributes.

.text {
  color: white;
  font-size: 4em;
  -webkit-text-stroke: 1px black;
}
Copy the code

CodePen online preview address

– Webkit-text-stroke is easy to use and delivers great results.

However, you may have noticed that “WebKit” is generally not compatible with prefixed properties, or properties that are not officially recognized by CSS (implemented by the browser vendor), so it is best not to use it in production.

Add borders to irregular shapes and images

In one demand, I needed to draw a “trapezoid” with black border on the page. After thinking about it, I really didn’t want to use Canvas and SVG, which were overqualified.

Fortunately, clip-path clips HTML elements, and with the polygon() key, custom polygon clipping can be achieved.

Most importantly, the border effect can be achieved by superimposing two polygons of different sizes, as shown in the example I wrote

<div class="shape"></div>
Copy the code

.shape {
	position: relative;
	width: 200px;
	height: 100px;
	background: black;
	clip-path: polygon(10% 0%.90% 0.100% 100%.0% 100%);
}

.shape::after {
	position: absolute;
	top: 2px;
	left: 2px;
	display: block;
	content: "";
	width: 196px;
	height: 96px;
	background: greenyellow;
	clip-path: polygon(10% 0%.90% 0.100% 100%.0% 100%);
}
Copy the code

CodePen online preview address

Width = parent element width -2 * left, height: parent element height -2 * top, left and top offset is the width of the border.

If I’m given an image now, how do I put a border around it?

With the aid offilter: drop-shadow()Easily achieve overlay image border, its thought and overlaptext-shadowMore of the same.

<img class="border" src="https://cdn.baobangdong.cn/react.png" alt="" />

<img src="https://cdn.baobangdong.cn/react.png" alt="" />
Copy the code

img {
	width: 200px;
	object-fit: cover;
}

.border {
	filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black)
		drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black);
}

Copy the code

CodePen online preview address

I have to say, CSS is really Cool

Automatically add “-” when word is folded and cut.

In my daily development process, some projects need to be online in multiple countries and regions, so international copywriting is indispensable. Some words are ok in Chinese and English languages, but in German and Russian languages, the same words become very long after translation.

To keep the text from exceeding the container width and affecting the display, I add a CSS declaration: word-break: break-all.

It is used to forcibly truncate the words at the end of a sentence when a paragraph of text triggers a line break to prevent text overflow.

<div class="text cut-off">Punkte-Bestenliste des Tages</div>

<div class="text">Punkte-Bestenliste des Tages</div>
Copy the code

.text {
	width: 60px;
	border: 1px solid;
}

.cut-off {
	word-break: break-all;
	margin-bottom: 20px;
}
Copy the code

CodePen online preview address

As you can see from the example, the word “Bestenliste” is forcibly truncated, effectively preventing overflow.

However, my local Russian colleague was not satisfied with it. He believed that “Bestenliste” should be truncated to “Besten-liste” if it was in line with local reading habits.

In the spirit of humanitarian concern, I resolutely accepted this optimization point, remember our concept is what?

Anything that can be solved with CSS will be solved with CSS

After going through the MDN documentation, one CSS property named 登 记 got my attention.

There are two critical values: hyphens: manual | auto.

Let me just go 登 记 : Manual, which means to manually set the location to which the hyphen appears. There are two ways to do this:

• U+2010 (HYPHEN), will & HYPHEN; Inserting text forces a hyphen at the insertion position, whether or not a newline is triggered

• U+00AD (SHY) : insert & SHY into the text. When line feed is triggered, the hyphen is displayed in the insertion position. Otherwise, the hyphen is not displayed

Look directly at the codepen example:

<div class="text">Punkte-Besten&shy;liste des Tages</div>

<div class="text">Punkte-Besten&hyphen;liste des Tages</div>

<div class="text break">Punkte-Besten&shy;liste des Tages</div>
Copy the code

.text {
	width: 100px;
	border: 1px solid;
	margin-bottom: 20px;
}

.break {
	width: 60px;
}

Copy the code

CodePen online preview address

Moving still to Auto, which means to automatically hyphenate a word that is truncated, it will do a “smart” judgment about the word based on the lang attribute on < HTML lang=”en”>.

Not very easy to understand, or the example to support:

<div class="text">extraordinary</div>

<div class="text auto">extraordinary</div>
Copy the code

.text {
	width: 70px;
	border: 1px solid;
}

.auto {
	margin-top: 20px;
	hyphens: auto;
}

Copy the code

CodePen online preview address

The default lang of codepen is equal to en, so “extraordinary” is split into ex-traordi-nary by line feed in English syntax.

It’s important to note that browser support for each language varies from browser to browser, but this “intelligence” is based on the fact that browsers have a number of language dictionaries built into them to figure out where the best place to put a hyphen in a word is.

At the end

Four years ago, I was attracted by the wonderful world of CSS when I was studying web design and couldn’t stop.

Time flies, I still do not forget the small front end!

Reference

• CSS TRICKS – Adding Stroke to Web Text
• stackoverflow – How to add border in my clip-path: polygon()