modo de mezcla de fondo
Se puede usar en CSS background-blend-mode para lograr la combinación de fondo de elementos:
.box1{
background-image:url('../public/img/bg/cloud.jpg');
width:800px;
height:500px;
background-size:cover;
}
.box2{
background-image: url("../public/img/bg/cloud.jpg");
width:800px;
height:500px;
background-color:green;
background-size:cover;
background-blend-mode:overlay;
}El efecto que se consigue es el siguiente:
La imagen de arriba es un fondo de imagen simple, y la imagen de abajo es una mezcla de la imagen de fondo y el color de fondo. background-blend-mode Las propiedades se utilizan para definir el modo de fusión (imagen y color) de la capa de fondo. Modos de fusión de fondo admitidos: Normal|Multiplicar|Pantalla|Superposición|Oscuro|Aclarar|Sobreexponer color|Saturación|Color|Brillo;
Efecto de texto de relleno de imagen
Para lograr el efecto de texto de relleno de imagen, puede configurar background-clip: text el fondo del texto como el fondo de toda el área, y el área fuera del texto se cortará. Con el color de texto transparente, puede lograr el efecto de texto de relleno de imagen:
h1 {
background-image: url('./flower.jpg');
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-color: white;
}
El efecto es el siguiente:
Tenga en cuenta que al usar esta técnica puede especificar un color de fondo como valor de respaldo en caso de que la imagen no se cargue por algún motivo.
efecto de trazo de texto
En CSS, puede usar la propiedad de trazo de texto para hacer que el texto sea más legible, agrega un efecto de contorno al texto.
h1 {
color: #fff;
font-size: 80px;
-webkit-text-stroke: 2px crimson;
text-stroke: 2px crimson;
}
El efecto es el siguiente:
Tenga en cuenta que text-stroke hay dos partes en el valor del atributo, la primera parte es el ancho del trazo de texto y la segunda parte es el color del trazo de texto.
Poner el texto en mayúsculas o minúsculas
No es necesario establecer letras mayúsculas o minúsculas en HTML. text-transformFamiliar se puede usar en CSS para forzar que cualquier texto esté en mayúsculas o minúsculas.
/* 大写 */
.upper {
text-transform: uppercase;
}
/* 小写 */
.lower {
text-transform: lowercase;
}
El efecto es el siguiente:
text-transform El atributo se usa especialmente para controlar las mayúsculas y minúsculas del texto. Cuando el valor es el valor, uppercaseel texto se convertirá a mayúsculas. Cuando el valor es el valor capitalize, el texto capitalizese convertirá a minúsculas.
pausar/reproducir pseudoclase
Las pseudoclases se pueden usar :paused para diseñar elementos multimedia que están en estado de pausa y, por supuesto, hay :playing pseudoclases que se pueden usar para diseñar elementos multimedia que están en estado de reproducción.
video:paused {
opacity: 0.6;
}
El efecto es el siguiente:
Tenga en cuenta que actualmente solo Safari admite esta pseudoclase :paused:
cursor personalizado
Podemos personalizar el estilo del cursor a través de las propiedades en CSS cursor, solo especifique la ruta de la imagen del cursor personalizado:
body{
cursor: url("path-to-image.png"), auto;
}
Además, cursorhay muchos estilos de mouse incorporados para que podamos elegir:
énfasis de texto
text-emphasis El énfasis se puede aplicar a elementos de texto usando atributos. Cualquier cadena de caracteres, incluidos los emoticonos, se puede especificar como una marca de énfasis.
h1 {
text-emphasis: "⭐️";
}
El efecto es el siguiente:
Tenga en cuenta que es una propiedad abreviada utilizada para establecer y text-emphasis en una declaración . El tamaño de fuente del decorador enfático es la mitad del tamaño de fuente del contenido del texto principal, por ejemplo, si el texto es , el tamaño del carácter enfatizado anterior es .text-emphasis-styletext-emphasis-color20px10px
Cambiar la dirección de escritura
Por lo general, el texto de nuestra página web común se presenta de izquierda a derecha. En CSS, writing-mode los atributos se pueden usar para especificar el diseño del texto en la página web, es decir, horizontal o vertical. Este atributo tiene varios valores de atributo:
-
horizontal-tb: Escritura de arriba hacia abajo en dirección horizontal. es decir, izquierda-derecha-arriba-abajo -
vertical-rl: Escritura de derecha a izquierda en dirección vertical. Eso es arriba-abajo-derecha-izquierda -
vertical-lr: El contenido en la dirección vertical es de arriba a abajo, y la dirección horizontal es de izquierda a derecha -
sideways-rl: El contenido se organiza verticalmente de arriba a abajo -
sideways-lr: El contenido se organiza verticalmente de abajo hacia arriba
h1 {
writing-mode: sideways-lr;
}
El efecto es el siguiente:
efecto de zoom flotante
.img-container {
height: 250px;
width: 250px;
overflow: hidden;
}
.img-container img {
height: 100%;
width: 100%;
object-fit: cover;
transition: transform 200m ease-in;
}
img:hover {
transform: scale(1.2);
}
El efecto es el siguiente:
transform La transformación 2D o 3D que el atributo aplica al elemento. Esta propiedad permite rotar, escalar, mover, sesgar, etc. Cuando el valor es escala, se puede realizar la transformación de escala 2D del elemento.
Corta varias formas
Los atributos se pueden usar clip-path para crear todo tipo de efectos visuales interesantes, como recortar elementos en formas personalizadas, como triángulos o hexágonos.
div {
height: 150px;
width: 150px;
background-color: crimson;
}
El triangulo es el siguiente:
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Los hexágonos son los siguientes:
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Se pueden hacer varios gráficos usando clip-path herramientas en línea: https://bennettfeely.com/clippy/
Detectar soporte de propiedad
Las reglas se pueden usar en CSS @support para detectar la compatibilidad con las características de CSS:
@supports (accent-color: #74992e) {
blockquote {
color: crimson;
}
}
Si se admite, esta propiedad ejecutará estilos definidos por el contenido.
estilo opcional
Las pseudoclases se pueden usar en CSS :optional para diseñar required campos de formulario sin atributos, como input, select y textarea.
*:optional{
background-color: green;
}
Lograr capitulares
Podemos utilizar ::first-letterpara lograr el hundimiento de la primera letra del texto:
p.texts:first-letter {
font-size: 200%;
color: #8A2BE2;
}
:first-letterEl selector se usa para especificar el estilo de la primera letra del elemento, que solo se aplica a los elementos a nivel de bloque. El efecto es el siguiente:
lograr plaza
Podemos lograr un cuadrado a través de la relación de aspecto en CSS, por lo que solo necesitamos establecer un ancho:
.square {
background: #8A2BE2;
width: 25rem;
aspect-ratio: 1/1;
}
aspect-ratio Las propiedades de los medios se pueden usar para probar la relación de aspecto de la ventana gráfica. Por supuesto, el ejemplo anterior es relativamente simple, echemos un vistazo al ejemplo de relación de aspecto dado en MDN:
/* 最小宽高比 */
@media (min-aspect-ratio: 8/5) {
div {
background: #9af; /* blue */
}
}
/* 最大宽高比 */
@media (max-aspect-ratio: 3/2) {
div {
background: #9ff; /* cyan */
}
}
/* 明确的宽高比, 放在最下部防止同时满足条件时的覆盖*/
@media (aspect-ratio: 1/1) {
div {
background: #f9a; /* red */
}
}
Aquí, las consultas de medios se utilizan para mostrar diferentes colores de fondo cuando la ventana gráfica de la página tiene diferentes relaciones de aspecto.