Irregular updates to the CSS bizarre techniques (2)

Drag longer, everyone little brother, little sister don’t mind, today would have died in the swaddle (draft stayed for a month) in the non-regular update of CSS strange lewd skills (2) finally out, this article may be too much water, if there is a problem welcome proposal I will gradually squeeze dry it

CSS absolute bottom

Code:

< span style = "margin-bottom: 0pt; margin-bottom: 0pt; padding: 0; } body { height: 100vh; }#wrap {
    height: auto; 
    min-height: 100%;
}
#main {padding-bottom: 150px; /* The same height as footer */}#footer {margin-top: -150px; /* footer */ height: 150px; background:#0c8ed9
}
</style>

<div id="wrap">
    <div id="main"</div> <div id="footer"</div> <! < span style> * {margin: 0; padding: 0; }#wrap {
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
}
#main {
    flex:1;
}  
#footer {
    height: 150px;
	background: #0c8ed9
}
</style>
<div id="wrap">
    <div id="main"> <div id="footer"Word-wrap: break-word! Important; "> < div style =" box-sizing: border-box;Copy the code

rendering

Eight, multi border

Start with the renderings

Solution a:`border + outline`(pseudo-element) scheme

Code:

<style> * { padding: 0; margin: 0; } body { margin: 150px; } .one-box { display: flex; justify-content: center; align-items: center; width: 310px; height: 310px; } one {width: 150px;} one {width: 150px;} one {width: 150px; height: 150px; position: relative; background-color:# 999;
    border: 10px double #ff0000;outline: 10px solid rgb(255, 136, 0); outline-offset: 0px; One ::before {content:' ';
    position: absolute;
    top: -40px;
    right: -40px;
    bottom: -40px;
    left: -40px;
    z-index: -1;
    background-color: #f7fc00;background-clip: content-box; */ border: 10px consolidates RGB (56, 252, 8); outline: 10px inset rgb(3, 194, 252); } .one::after { content:' ';
    position: absolute;
    top: -70px;
    right: -70px;
    bottom: -70px;
    left: -70px;
    z-index: -2;
    background-color: #fc000d;background-clip: content-box; /* outline: none */ outline: none */ outline: none */ outline: none */ outline: none */ outline: none */ outline: none; outline: 10px outset rgb(252, 3, 177); } </style> <div class="one-box">
    <div class="one"< div style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; white-space: inherit;"Copy the code

The characteristics of

outlineIs not affected byborder-radiusInfluence (can make a square border a rounded border)
outline 和 borderAs you canCustom border styles
Can be achieved byoutline-offsetControls the location of the outline
A limited number of borders (plus::before / ::after 的 background / border / outlineUp to 8 borders)

Scheme 2:`box-shadow`plan

Code:

<style>
* {
    padding: 0;
    margin: 0;
}
body {
    margin: 150px;
}
.two {
    width: 150px;
    height: 150px;
    padding: 110px;
    background-color: # 999;
    box-shadow:inset 0 0 0 10px #ff0000,inset 0 0 0 20px rgb(255, 136, 0), inset 0 0 0 30px rgb(166, 255, 0), inset 0 0 0 40px rgb(0, 102, 255), inset 0 0 0 50px rgb(255, 0, 221), inset 0 0 0 60px rgb(0, 255, 191), inset 0 0 0 70px rgb(225, 0, 255), inset 0 0 0 80px rgb(81, 255, 0), inset 0 0 0 90px rgb(255, 0, 106), inset 0 0 0 100px rgb(255, 153, 0), inset 0 0 0 110px rgb(30, 255, 0); Word-wrap: break-word! Important; "> < span style =" box-sizing: border-box; color: RGB (50, 50, 50)"two"></div>
Copy the code

The characteristics of

Single border style
You can make gradient borders
You can make rounded edges
The number of borders is not as limited as in Scheme 1

Suggestions:

Material need two border, the border can use a priority, when need gradient border, multilayer frame can use the second scheme, although the plan after using pseudo elements can be as high as 8 kinds of borders, but the style is numerous, code is not recommended, of course, specific usage for you little brother, little sister can according to actual needs, can also be combined with scheme 1 and scheme 2 to make more margin

Thanks @Vinsea for the offer

Nine, landing the

What is landing

W3C definition: Floating, absolutely positioned elements, inline-blocks, table-cells, table-captions, and overflow elements whose values are not visible (except when the value has been passed to the viewport) will create a new block-level formatting up and down

conditions

floatThe value of thenone
positionThe value of thestaticorrelative
displayThe value oftable-cell.table-caption.inline-block.flexOr,inline-flexOne of the
overflowThe value of thevisible
display:flow-root: the safest and no side effects (butCompatible withHave a headache)

features

The internal boxes are placed vertically, one after the other, starting at the top.
The vertical distance of Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap
Margin box for each element to the left, with the containing block border
The left side of the box touches (for left-to-right formatting, otherwise the opposite). This is true even if there is float.
The region of the BFC does not overlap with the float box.
The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements, and vice versa.
When calculating the height of the BFC, the floating element also participates in the calculation

Usage scenarios

Used to clear the float and calculate the BFC height

ul { overflow: hidden; /* create BFC */} li {float: left;
    width: 100px;
    height: 200px;
    background-color: #f7fc00;
    overflow: hidden;
}
li:first-child{
    background-color: #fc000d;
}
</style>
<ul>
    <li></li>
    <li></li>
</ul>
Copy the code

Adaptive two-column layout

<style>
.aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #ff0000;
}
.main {
    height: 200px;
    background: #f7fc00;overflow: hidden; /* create BFC */} </style> <div class="aside"></div>
<div class="main"></div>
Copy the code

Solve margin overlay problem

Space is limited to learn more can go to W3Cplus BFC detailed explanation

Thanks @Baicaoyuan for the offer

10, the new generation of variable SAO operation (CSS custom properties)

rendering

Sorry about the music player again, just because I like listening to music

Code (I use in music player)

The root element sets global custom attributes

:root {
	--THEME: var(--USER-THEME-COLOR, #e5473c);
	--THEME-COLOR: var(--USER-THEME-COLOR, #e5473c);
}
Copy the code

Set the global custom property toSASSvariable

$theme-color: var(--THEME);
$theme-bg: var(--THEME);
Copy the code

Why useSASSVariables serve as carriers for custom properties
1. Easy to manage (unified var.scss file to write topic variables)
1. Avoid modifying global custom properties directly

JS modifies global custom properties

const elm = document.documentElement
const colorArr = ['#e5473c'.'#31c27c'.'#0c8ed9'.'#f60']
elm.style.setProperty('--USER-THEME-COLOR', colorArr[i])
i = (i + 1) % colorArr.length
Copy the code

More about the CSS Custom Properties

Renderings Github address

Music player display address

11, PNG format small ICONS CSS arbitrary color assignment technology

Code:

<style>
.icon-color{
	display: inline-block;
	width: 144px;
	height: 144px;
	background: url('https://user-gold-cdn.xitu.io/2018/7/31/164f0e6745afe2ba? w=144&h=144&f=png&s=2780') no-repeat center / cover;
	overflow: hidden;
}
.icon-color:after{
	content: ' ';
	display: block;
	height: 100%;
	transform: translateX(-100%);
	background: inherit;
	filter: drop-shadow(144px 0 0 #42b983); // The color value to be modified
}
</style>

<i class="icon-color"></i>
Copy the code

rendering

Principle:

Run the drop-shadow command in filter CSS3.

drop-shadowFilters can add a shadow to an element or to an opaque area of an image
Applying a PNG icon with a transparent background to a shadow without blurring is equivalent to generating an icon of another color
throughoverflow:hiddenAnd displacement processing will hide the original icon

PS: I’ve tested most of the devices and it works, but the demo I wrote (react music Player) involves a lot of weird tricks, so I won’t use it as a reference

Original address: high yield zhang Xinxu big guy

Thank you

Zhang Xinxu’s personal homepage

W3cplus_ lead the web frontier, to create front-end quality tutorials

Tips

When you have a layout problem you can go to the UI framework and look at the code for the effect you want to achieve and see how they solve it, I have a style layout hole is basically the whole, unless it is very rare to usually solve it, right

The last link — not regularly updated CSS strange prostitute skills (1)

Irregular updates to the CSS bizarre techniques (2)

CSS absolute bottom

Code:

rendering

Eight, multi border

Start with the renderings

Solution a:border + outline(pseudo-element) scheme

Code:

The characteristics of

Scheme 2:box-shadowplan

Code:

The characteristics of

Suggestions:

Nine, landing the

What is landing

conditions

features

Usage scenarios

10, the new generation of variable SAO operation (CSS custom properties)

rendering

Code (I use in music player)

11, PNG format small ICONS CSS arbitrary color assignment technology

Code:

rendering

Principle:

Thank you

Tips

Related Posts

Vue-cli3 + TS +ant-design- Vue Summary

10 minutes to get you started on Vue3

Song Xiaocai fresh B2B front-end team building

Solution a:`border + outline`(pseudo-element) scheme

Scheme 2:`box-shadow`plan