Original link:22 Essential CSS Recipes
More translations will be released one after another. Welcome to praise+collection+attentionMy columnTo be continued.
Hello everyone, today we will introduce some very practical CSS tips, let’s get started!
Mixed mode
Not long ago Firefox and Safari browsers started to support Photoshop-like mixed modes, but prefixes need to be added to Chrome and Opera browsers. Take a chestnut:
//You can also try different styles
.blend {
background: #fff;
}
.blend img {
mix-blend-mode: darken;
}
Gradient border
Now, you can even use gradients in the borders.
To use a gradient border is very simple, just set a lower one.z-index
The pseudo element of:
.box {
margin: 80px 30px;
width: 200px;
height: 200px;
position: relative;
background: #fff;
float: left;
}
.box:before {
content: '';
z-index: -1;
position: absolute;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
background-image: linear-gradient(90deg, yellow, gold);
}
Specific examples can be seenHereOr lookHereWhat is used isbackground-clip
Andbackground-origin
Property. In the near future, perhaps all browsers will support it.border-image
Property, the final code will look like the following:
.box {
border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%);
border-image-slice: 1; /* set internal offset */
}
Transition of z-index
Maybe you don’t knowz-index
Also support the transition! In each step of the transition, its value does not change, so you think it does not support the transition-but in fact it does.
Take a chestnut
currentColor
We can use this method to detect the current color to avoid defining it repeatedly.
This method is very useful when using SVG icons because their colors are determined by their parent elements. Usually we do this:
.button {
color: black;
}
.button:hover {
color: red;
}
.button:active {
color: green;
}
.button svg {
fill: black;
}
.button:hover svg {
fill: red;
}
.button:active svg {
fill: green;
}
But we can use itcurrentColor
To do this:
svg {
fill: currentColor;
}
.button {
color: black;
border: 1px solid currentColor;
}
.button:hover {
color: red;
}
.button:active {
color: green;
}
Attach other examples with pseudo elements:
a {
color: #000;
}
a:hover {
color: #333;
}
a:active {
color: #666;
}
a:after,
a:hover:after,
a:active:after {
background: currentColor;
...
}
Object Fit
Do you remember setting up a background map to solve some problemsbackground-size
What about the time of the attribute? Now you can use itobject-fit
Property, webkit browser supports it, Firefox will also support it in the near future.
.image__contain {
object-fit: contain;
}
.image__fill {
object-fit: fill;
}
.image__cover {
object-fit: cover;
}
.image__scale-down {
object-fit: scale-down;
}
Style of radio and check boxes
Let’s style the check boxes together without using pictures:
<! -- html -->
<input type="checkbox" id="check" name="check" />
<label for="check">Checkbox</label>
<! -- css -->
input[type=checkbox] {display: none; }
input[type=checkbox] + label:before {
content: "";
border: 1px solid #000;
font-size: 11px;
line-height: 10px;
margin: 0 5px 0 0;
height: 10px;
width: 10px;
text-align: center;
vertical-align: middle;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
}
As you can see, we have hidden the original check box and used pseudo elements and pseudo classes instead.:checked
(IE9+) to show it. When it is selected, one is set tocontent
Unicode-encoded characters in will be displayed.
It is worth noting that Unicode encoding is written differently in CSS and HTML. In CSS it is a hexadecimal number starting with a backslash, while in HTML it is decimal, for example
✓
.
Then add some animation effects to our check boxes:
<! -- checkbox -->
input[type=checkbox] + label:before {
content: "\2713";
color: transparent;
transition: color ease .3s;
}
input[type=checkbox]:checked + label:before {
color: #000;
}
<! -- radio -->
input[type=radio] + label:before {
content: "\26AB";
border: 1px solid #000;
border-radius: 50%;
font-size: 0;
transition: font-size ease .3s;
}
input[type=radio]:checked + label:before {
font-size: 10px;
}
HereIs all Unicode encoding, and can be used inHereExperience.
Counters in CSS
It is well known that counters can be used in CSS:
<! -- html -->
<ol class="list">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<! -- css -->
.list {
counter-reset: i; //reset conunter
}
.list > li {
counter-increment: i; //counter ID
}
.list li:after {
content: "[" counter(i) "]"; //print the result
}
We have defined an ID in thecounter-reset
Property as the initial value (default is 0). You can set another value incounter-increment
Property as an incremental value for each step.
Advanced CSS counters
You can calculate how many check boxes have been checked by the user:
<! -- html -->
<div class="languages">
<input id="c" type="checkbox"><label for="c">C</label>
<input id="C++" type="checkbox"><label for="C++">C++</label>
<input id="C#" type="checkbox"><label for="C#">C#</label>
<input id="Java" type="checkbox"><label for="Java">Java</label>
<input id="JavaScript" type="checkbox"><label for="JavaScript">JavaScript</label>
<input id="PHP" type="checkbox"><label for="PHP">PHP</label>
<input id="Python" type="checkbox"><label for="Python">Python</label>
<input id="Ruby" type="checkbox"><label for="Ruby">Ruby</label>
</div>
<p class="total">
Total selected:
</p>
<! -- css -->
.languages {
counter-reset: characters;
}
input:checked {
counter-increment: characters;
}
.total:after {
content: counter(characters);
}
You can also make a simple calculator:
<! -- html -->
<div class="numbers">
<input id="one" type="checkbox"><label for="one">1</label>
<input id="two" type="checkbox"><label for="two">2</label>
<input id="three" type="checkbox"><label for="three">3</label>
<input id="four" type="checkbox"><label for="four">4</label>
<input id="five" type="checkbox"><label for="five">5</label>
<input id="one-hundred" type="checkbox"><label for="one-hundred">100</label>
</div>
<p class="sum">
Sum
</p>
<! -- css -->
.numbers {
counter-reset: sum;
}
#one:checked { counter-increment: sum 1; }
#two:checked { counter-increment: sum 2; }
#three:checked { counter-increment: sum 3; }
#four:checked { counter-increment: sum 4; }
#five:checked { counter-increment: sum 5; }
#one-hundred:checked { counter-increment: sum 100; }
.sum::after {
content: '= ' counter(sum);
}
It also works, please see the specificDEMOAndArticle.
Menu icons that do not use pictures
Do you remember how often you were forced to need a “hamburger” icon?
There are at least three ways to achieve it:
1、 Shadows
.shadow-icon {
position: relative;
}
.shadow-icon:after {
content: "";
position: absolute;
left: 0;
top: -50px;
height: 100%;
width: 100%;
box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000;
}
2、 Gradient
.gradient-icon {
background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);
}
3、 UTF-8
You can use standard symbols directly: (Unicode: U+2630, HTML:). You can also set its color or size as flexibly as other elements. LookExample.
You can also use SVG, font icons, or through pseudo-elementsborder
Border.
@Supports
This is a new one calledsupports
CSS expression for. As the name implies, it can detect whether certain settings are supported by browsers. Not all browsers support it, but you can still use it as a basic detection method:
@supports (display: flex) {
div { display: flex; }
}
/*You can check prefixes*/
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
float: none;
}
}
visibility: visible
According to your estimation, set one tovisibility: visible
The element of is placed in a set tovisibility: hidden
What will happen in the elements of?
.hidden {
visibility: hidden;
}
.hidden .visible {
visibility: visible;
}
You may think that neither element is displayed-but in fact the entire parent element is hidden, while the child element is not. Please look at itDEMO.
position: sticky
We have found a new feature, you can create a new one.sticky
The element of the attribute. Its operation effect andfixed
Same, but does not block any elements. You’d better have a look.Example
Only Mozilla and Safari browsers support this attribute, but you can also use it as follows:
.sticky {
position: static;
position: sticky;
top: 0px;
}
We will get one of the supported browsers.sticky
Attribute, which will be a common element in unsupported browsers. This is very useful when you need to create a mobile page of irreplaceable and movable elements.
New dimension unit
Not long ago, some new size units to describe the sizes of different elements came out. They are:
-
Vw (viewport width)-1% of the browser window width.
-
Vh (viewport height)-Same as above, only used to describe height.
-
Vmin and vmax set the maximum and minimum values between vh and vw.
Interestingly, almost all modern browsers can support them well, so you can use them with confidence.
Why do we need these new units? Because they can make different sizes easier to define, you don’t need to specify any percentage or anything else for the parent element, see the example:
.some-text {
font-size: 100vh;
line-height: 100vh;
}
Or you can set a beautiful pop-up box in the middle of the screen:
.blackSquare {
background: black;
position: fixed;
height: 50vh;
width: 50vw;
left: 25vw;
top: 25vh;
}
This looks cool. Look at the one at codepen.ExampleRight ~
However, there are still some deficiencies regarding these new units:
-
IE9 should use vm instead of vmin.
-
IOS7 may have bugs when using vh.
-
Vmax has not received full support so far.
Text modification
We can modify the effect when the text is selected through a few lines of code:
*::selection {
color: #fff;
background: #000;
}
*::-moz-selection {
/*Only Firefox still needs a prefix*/
color: #fff;
background: #000;
}
You can define not only the color when the text is selected, but also the shadow or background color.
Elements in Touch Screen Scroll
If you need to scroll through some element settings in the touch screen, you not only need tooverflow: scroll / auto
, also need to-webkit-overflow-scrolling: touch;
In fact, the mobile browser does not perform correctly at certain times.overflow: scroll / auto
, it may scroll through the page instead of the part you want.-webkit-overflow-scrolling
To solve this problem, you can experience it in your actual project.
Use hardware acceleration
Sometimes animation may cause users’ computers to jam. You can use hardware acceleration in specific elements to avoid this problem:
.block {
transform: translateZ(0);
}
You won’t notice any difference, but the browser will speed up the 3D hardware for this element inwill-change
This method is useful until this special attribute is fully supported.
Unicode Classes
You can use Unicode symbols to name class:
.❤ {
...
}
.☢ {
...
}
.☭ {
...
}
.★ {
...
}
.☯ {
...
}
But this is actually for fun. Never use it in large projects, because not all computers support Unicode symbols.
Percentage margin in vertical direction
In fact, the vertical alignment calculation is based on the width of the parent element, not the height. Define two elements:
<! -- html -->
<div class="parent">
<div class="child"></div>
</div>
<! -- css -->
.parent {
height: 400px;
width: 200px;
}
.child {
height: 50%;
padding-top: 25%;
padding-bottom: 25%;
width: 100%;
}
In theory, the height of the child element will be half that of the parent element, but look at what we actually get:
Remember, the percentage of child elements is relative to the width of the parent element.
Firefox browser button margins
Firefox uses its own way to calculate the button margins. This may sound strange, but it automatically adds some margins:
The following methods can be used to fix this problem:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: none;
padding:0;
}
Color + Border =Border-Color
Few people know that defining the text color of an element means that the border color of this element is also defined:
input[type="text"] {
color: red;
border: 1px solid;
}
The Egg of the Ancient Browser
If you still need to adapt IE7 or similar old browsers, you can use smiley face symbols when defining hack, like this:
body {
:) background: pink;
}
Isn’t it interesting?
If you think my translation is good, please praise the collection and pay attention to it.My column, I will introduce more wonderful content one after another. If you find any mistakes or omissions, please correct them and we’ll see you next time!