Cascading Style Sheet (CSS) is a Cascading Style Sheet that represents how HTML elements should be rendered on a web page: Cascading Style Sheet (CSS).
CSS can not only add color, size, location, and more to any element on an HTML page, it can also create advanced motion effects that make your pages more lively and interactive.
As developers continue to experiment with and contribute to advanced CSS technologies, browser compatibility is becoming standardized, making CSS increasingly dominant.
Let’s explore these CSS techniques.
Warning: Not all browsers fully support some of the technologies described below. Be sure to check browser compatibility before launching your site.
01. Background-repeat
CSS backgrounds (background-repeat)[1] is one of the most commonly used techniques by developers, but all developers may not be fully aware that there are multiple representations available.
The background-repeat property is used to set how the background image is repeated. It is used in combination with the background-image property.
By default, background-repeat attributes are repeated vertically and horizontally.
grammar
background-repeat: value;
Copy the codeparameter
<div class="container">
<div class="item">
<p class="text">background-repeat: repeat;</p>
<div class="img repeat"></div>
</div>
<div class="item">
<p class="text">background-repeat: repeat-x;</p>
<div class="img repeat-x"></div>
</div>
<div class="item">
<p class="text">background-repeat: repeat-y;</p>
<div class="img repeat-y"></div>
</div>
<div class="item">
<p class="text">background-repeat: space;</p>
<div class="img space"></div>
</div>
<div class="item">
<p class="text">background-repeat: round;</p>
<div class="img round"></div>
</div>
<div class="item">
<p class="text">background-repeat: no-repeat;</p>
<div class="img no-repeat"></div>
</div>
</div>
Copy the codep {
margin: 0;
padding: 0;
}
.container {
width: 600px;
height: 600px;
border: 1px solid red;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item {
margin: 20px 0;
padding: 10px;
border: 1px solid green;
flex: 0 0 44%;
display: flex;
flex-direction: column;
}
.img {
width: 100%;
height: 100%;
background-color: #eaeaea;
background-image: url('https://img2.baidu.com/it/u=151081824, 1042399778 & FM = 26 & FMT = auto&gp = 0. JPG');
background-size: 46px;
}
.img.repeat {
background-repeat: repeat;
}
.img.repeat-x {
background-repeat: repeat-x;
}
.img.repeat-y {
background-repeat: repeat-y;
}
.img.space {
background-repeat: space;
}
.img.round {
background-repeat: round;
}
.img.no-repeat {
background-repeat: no-repeat;
}
Copy the code
Browser compatibility
02. Mask-Image
When you are using an image and only want to show certain parts of it, you can use the mask-image[2] property to achieve this effect.
CSS masks are advanced CSS techniques that allow defined rules to be applied to images to achieve mask shapes.
Anything that appears outside of the mask shape is clipped out, showing only the image of the mask area.
It works much like a vector mask in Photoshop, covering an image with a cloth (mask) and then doing some effects.
In the image mask, 100% black means that the image will be fully displayed, whereas 100% transparency means that the image will be completely obscured. The transition from transparency to black (black to transparency) will be displayed in the mask.
Linear gradient mask
.img.one {
-webkit-mask-image: linear-gradient(to top, transparent 0, black 100%);
mask-image: linear-gradient(to top, transparent 0%, black 100%);
}
.img.two {
-webkit-mask-image: linear-gradient(to bottom, transparent 30%, black 80%);
mask-image: linear-gradient(to bottom, transparent 30%%, black 70%);
}
Copy the codeTo top(bottom) gradient direction: to top means bottom up, to bottom means top down.
Transparent position: 0 indicates that the image starts from the vertex and 30% indicates that the image starts from the top edge to 30%. (When this value is greater than 0, the image area less than this value is fully masked.)
Black position: 100% represents the vertex position in the target direction, 80% represents the furthest mask range that can be reached (when this value is less than 100%, the mask area from this value to 100% vertex position will be fully displayed).
Radial gradient mask
grammar
-webkit-mask-image: radial-gradientShape size at position, start-color... , last-color );Copy the codeparameter
The sample
At this point, set the radius to 25% and 50%. Combining with the radius in the figure above, it can be concluded that: 1/4 of x axis and 1/2 of Y axis.
The position is set to 100% 0%, which is equivalent to setting the center of the circle at the top right-hand corner of the image.
Browser compatibility
This function is still in the experimental stage, compatibility is relatively poor, and it seems to need to wait for a period of time to be officially launched.
03. TScroll-Snap-Type
Before mentioning this CSS, I have to mention one mouth: I believe there are a lot of front-end developers, there should be the need to develop the rotation chart, sliding, need to calculate the distance of each slide, in order to determine the user to stop operation, which screen of the rotation chart.
With the scrollsnap-type, the rebound effect is much easier, but now the compatibility is poor and needs to be popularized.
CSS Scrollsnap-type [3] is an advanced CSS technology that helps developers better control the scrolling experience.
Just set x or y of the scroll-snap-type property on the scroll container.
grammar
scroll-snap-type: [none | x | y] [mandatory | proximity]
Copy the codeparameter
The sample
<div class="container">
<div class="item">red</div>
<div class="item">green</div>
<div class="item">blue</div>
<div class="item">yellow</div>
</div>
.container {
width: 200px;
height: 200px;
border: 1px solid black;
overflow-x: scroll;
scroll-snap-type: x mandatory;
display: flex;
flex-wrap: nowrap;
}
.item {
flex: 0 0 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
.item:nth-child(1) {
background-color: red;
}
.item:nth-child(2) {
background-color: green;
}
.item:nth-child(3) {
background-color: blue;
}
.item:nth-child(4) {
background-color: yellow;
}
Copy the code
scroll-snap-align: start; Is used to set how the child element capture points are aligned when the user stops the operation, as shown below:
Browser compatibility
04. Shape Outside
Shape-outside allows content to wrap around elements that have the property set, rather than being limited to traditional rectangular layouts.
grammar
shape-outside: values;
Copy the codeThe sample
<div class="container">
<div class="item"></div>
<p> What is it50% black brush? Excuse me, what is50% black brush? Excuse me, what is50% black brush? Excuse me, what is50% black brush? Excuse me, what is50% black brush? Excuse me, what is50% black brush? Excuse me, what is50% black brush? Excuse me, what is50% black brush? Excuse me, what is50% black brush? Excuse me, what is50% black brush? Excuse me, what is50% black brush? Excuse me, what is50% black brush? </p>
</div>
.item {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
margin: 10px;
shape-outside: circle(a);background: url('https://pic2.zhimg.com/0ed287debc9096e9a128c8625227fa2c_xl.jpg') no-repeat;
background-size: 100%;
float: left;
}
Copy the code
Remove shape-outside: Circle ()
Note: This property applies only to floating elements.
Browser compatibility
05. CSS Grid
CSS Grid[4] can define a Grid layout of user-defined rows and columns. It not only supports the setting of Grid by level sub-items, but also supports the layout of Grid nested network.
This makes it surprisingly possible to create a multi-column grid layout on a page and use it to arrange nested related target content.
grammar
/* Parent element */
display: grid;
grid-template-columns: [number of lines (per line)];/ * or the grid - the template - the columns: [repeat (number of rows, row of | 1 fr)]; * /
grid-template-rows: [ repeat(the number of columns, column of |1fr) ];
/* Child element */The grid - column: [start/end | starting line Numbers rows]; The grid - row: [column number starting number of columns | start/end columns];Copy the codeThe sample
<div class="container">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">
<div class="item a">333</div>
<div class="item b">444</div>
</div>
</div>
.container {
background-color: red;
color: white;
display: grid;
/ * 2 * /
grid-template-columns: repeat(2.1fr);
/ * 2 * /
grid-template-rows: repeat(2, auto);
}
.item {
padding: 10px;
border: 1px solid white;
/* grid-column-start: 2; grid-column-end: 4; * /
}
.item:nth-child(1) {
/* column 1 */
grid-column: 1;
/* lines 1 through 3, but not line 3 */
grid-row: 1 / 3;
}
.item:nth-child(2) {
/* from column 2 to column 3, but not column 3 */
grid-column: 2 / 3;
/* Line 1 */
grid-row: 1;
}
.item:nth-child(3) {
/ * * /
grid-column: 2;
grid-row: 2;
/* Grid layout */
display: grid;
}
.item.a {
/ * * /
grid-column: 1;
grid-row: 1;
}
.item.b {
/ * * /
grid-column: 2;
grid-row: 1;
}
Copy the code
Grid-column is the abbreviation of grid-column-start and grid-column-end. Grid-column indicates the proportion of the current column from column start to column end.
Grid-row is the abbreviation of grid-row-start and grid-row-end. Grid-row indicates the proportion of the current row from the beginning to the end.
Display: subgrid, can be set more semantically subgrid nested other grids. But it is now slightly less compatible and only works with older versions of Firefox. You can use display: grid instead.
In addition, the Grid grid layout has excellent performance on responsive devices, for example, it can be displayed as equal or unequal columns.
<div class="container">
<div class="item"></div>... Several child elements </div>
@color-base : #3bafdA;
@triadic-secondary : spin(@color-base, -(360 / 3));
@triadic-tertiary : spin(@color-base, (360 / 3));
.container {
display: grid;
grid-template-columns: repeat(4.1fr);
grid-auto-rows: calc((100vw - 4em) / 4);
grid-auto-flow: row;
grid-gap: 1em;
}
.item {
background-color: @color-base;
}
.item:nth-child(3n) {
background-color: @triadic-secondary;
}
.item:nth-child(3n + 2) {
background-color: @triadic-tertiary;
}
Copy the code
Browser compatibility
06. HTML/CSS : Smart Quotes
CSS smart quotes (also known as smart quotes) not only increase the semantics of web pages, but also greatly improve readability and user experience.
Use special tags to indicate that a piece of content belongs to the highlighted, quoted content, rather than the HTML string “”, “. And so on.
<qAre you a man or a woman? You <qClass = "two" > gender < /qWord-wrap: break-word! Important; "> < p style =" max-width: 100%; </q>
.one {
quotes: "$" "%";
}
Copy the code
Quotes has two points to make:
Inheritance-all child elements
inherit the quotes text set by the parent element. Quotes must be set as values. Do not use quotes alone or they will be invalid. That is, the values must be even, not odd.
.one {
quotes: "$" "%" "@";
}
Copy the code
The figure above invalidates the odd pair of values, showing only the default single and double quotes.
.one {
quotes: "$" "%";
}
.two {
quotes: "@" The '@';
font-size: 20px;
color: red;
}
Copy the code
You can also use single and double quotation marks together.
Browser compatibility
07. Quickly locate the cause of the horizontal scroll bar
Sometimes when debugging the web page will occasionally encounter a horizontal scroll bar, which is absolutely not allowed in the user experience. All we need to do at this point is locate the cause and unscroll the horizontal bar.
In general, horizontal scrollbars occur because one or more elements are larger than the available screen width. The diagram below:
So, we just need to find the element and fix the width. The following method can quickly locate the element:
* {
border: 1px solid red;
}
Copy the codeBy adding a 1px red border to all elements, it is easy to determine which element is responsible for the horizontal scroll bar.
08. Aspect-Ratio
When we set up a square with CSS, we usually set the width and height to solve the problem.
When we have the aspect-ratio property, we can completely set the positive mode or rectangle by setting the background color, the desired width (height), and the aspect ratio. We do not need to set the width and height at the same time.
Aspect-ratio is defined by width/height.
<div class="container"></div>
.container {
margin: 0 auto;
margin-top: 50px;
width: 100px;
background-color: red;
aspect-ratio: 1 / 1;
/* aspect-ratio: 1; I can just write */
}
Copy the code
Set the width to 100px, width to 1/1, which equals 100px width and 100px height, so it’s a square.
.container {
margin: 0 auto;
margin-top: 50px;
width: 100px;
background-color: red;
aspect-ratio: 3 / 2;
}
Copy the code
Width 100px, width/height ratio 3/2 is equal to 100px width, height 100/3 * 2 = 66.6666px.
.container {
margin: 0 auto;
margin-top: 50px;
height: 100px;
background-color: red;
aspect-ratio: 1 / 3;
}
Copy the code
Height 100px, 1/3 width/height ratio is equal to 100/3 * 1 = 33.3333px, height 100px.
Browser compatibility
Summary: Use the set type value/corresponding ratio * other ratio.
09. Scroll-Behavior
When we click on an anchor and need to scroll smoothly to the target area of an element, JQ can do this:
/ / pseudo code
$('.one').on('click'.function() {
if(! $('body, html').is(':animated')) {$('body, html').animate({
scrollTop: $('.one_area').offset().top
}, 300); }});Copy the codeIt’s a lot of code, it’s not intuitive, it’s just uncomfortable.
We all know that the anchor point function of the A tag allows the browser to reach the target area of the specified element, but it has no dynamic effect and looks like A stiff scroll.
Is there any way to smooth things out when you don’t need to write JavaScript and let the A anchor function slide?
The answer is yes, you can use scroll behavior[5], for example:
<div class="btns">
<a href="#pageA"> work < /a>
<a href="#pageB"> work < /a>
<a href="#pageCResignation "> < /a>
</div> <scroll container> <scroll page id="pageA"> </scroll page> <scroll page id="pageB"> </scroll page> <scroll page Id ="pageC"> </scroll-page> </scroll-container>.btns {
display: flex;
font-size: 24px;
margin-bottom: 10px;
}
.btns a {
color: red;
margin: 0 6px;
}
scroll-container {
width: 200px;
color: # 333;
font-weight: bold;
font-size: 30px;
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
overflow-y: scroll;
scroll-behavior: smooth;
}
scroll-page {
flex: 0 0 100%;
display: flex;
justify-content: center;
align-items: center;
}
scroll-page:nth-child(1) {
background-color: #ef476f;
}
scroll-page:nth-child(2) {
background-color: #ffd166;
}
scroll-page:nth-child(3) {
background-color: #06d6a0;
}
Copy the code
Browser compatibility
10. :where pseudo-class functions
If you have a complex structure and want to set the same style for multiple elements (header, main, footer) at the same time, CSS might say something like this:
<div class="container">
<div class="one">
<header> I am the head </header>
</div>
<span>
<mainI am the subject </main>
</span>
<div class="test">
<aHref ="#" class="link"> link a </a>
<footer> I am the bottom </footer>
</div>
</div>
.container header..container main..container footer {
color: red;
}
Copy the codeIn fact, in the actual work of the young whale, there are more complicated, less readable than this… I won’t say it. It’s all tears.
The :where() pseudo-class function is used to solve this problem:
The: WHERE () pseudo-class function takes a list of one or more selectors so that each of the selectors in the list can be selected.
.container :where(header.main.footer) {
color: red;
}
/* less */
.container {
header.main.footer {
color: red; }}Copy the code
The: Where () syntax is somewhat similar to the less syntax sugar, simplifying the coding effort while improving readability.
Browser compatibility
11. ::Selection pseudo-element
When you are browsing the web, you will often use the mouse to select one or more paragraphs of text, and the default highlight of the selection area is usually white text with a blue background.
If you want to customize the highlighted state, you can use :: Selection pseudo-elements to do this.
/* Change global highlighting state */
::selection {
color: red;
background-color: yellow;
}
/* Change the highlighting state of only one element */
.container::selection {
color: red;
background-color: yellow;
}
Copy the code
Browser compatibility
12. Caret-Color
The black color of the cursor in the input box. How about a change of color for a change of mood?
You just need to set the input element caret-color attribute, and enter the color you want to change the cursor invariable appearance!
input {
caret-color: red;
}
Copy the code
Browser compatibility
13. Drop Shadow
Box-shadow is called a box shadow.
grammar
box-shadow: [Outer (inner) shadow x offset Y offset intensity diffusivity color]Copy the codeRemember that any tag element is rendered as a box model, depending on the actual content.
For example: IMG, input, select, etc.
After setting a box-shadow on an element, the shadow will render the shadow in the box itself, so that it is perfectly normal.
<img src="https://mbdp01.bdstatic.com/static/landing-pc/img/logo_top.79fdb8c2.png" /> img { width: 200px; padding: 10px 20px; border: 1px solid red; box-shadow: 10px 16px 4px 0px rgba(0, 0, 0, .5); }Copy the code
grammar
Drop shadow: [x axis offset | y offset radius | | shadow color]Copy the codeDrop-shadow [6] can render the corresponding shadow shape according to the corresponding image itself.
Drop-shadow and box-shadow are similar, but different:
- Box-shadow is a property that creates a rectangular shadow over the entire box model.
- Drop-shadow is a filter function that creates a transparent channel shadow that matches the shape of the image itself.
- Box-shadow allows you to use inset to set the inner shadow, but drop-shadow does not allow the inset parameter.
img {
width: 200px;
padding: 10px 20px;
border: 1px solid red;
filter: drop-shadow(10px 16px 4px # 264653);
}
Copy the code
As you can see, drop-shadow can render not only the shape of the image itself, but also the borders we set.
Isn’t that cool
CSS has become more and more powerful over time, and today it is visually stunning on the web. \
Let’s look forward to more powerful features that make it easier to implement requirements that were never possible before.
The relevant data
[1] Background – repeat – developer.mozilla.org/zh-CN/docs/…
[2] Mask – Image – developer.mozilla.org/zh-CN/docs/…
[3] Scroll – Snap – Type – developer.mozilla.org/zh-CN/docs/…
[4] the Grid – developer.mozilla.org/en-US/docs/…
[5] Scroll – behaviors – developer.mozilla.org/zh-CN/docs/…
[6] the Drop Shadow – developer.mozilla.org/en-US/docs/…
The last
Thank you for taking the time to read this article. I hope it will be helpful.
If you have any questions or suggestions, welcome to exchange more, we make progress together.
In the process of reading, if there is any incorrect place, I hope you can mention, I will try to correct and provide better quality articles.
conclusion
“Whale selection, a focus on the use of vernacular technology to explain the public account, pay attention to the public account, more dry goods waiting for you oh!”
- Reply after attention
dataFree access to study materials - Reply after attention
Into the group ofGet you into the tech community - Reply after attention
welfareCheck out the latest and upcoming benefits on a first come, first served basis - Welcome to attention
Whale is selectedAnd more"Welfare Dry Goods"Timely delivery