CSS puede hacer eso?

-

Una lista de cosas increíbles que CSS puede hacer!
EDITAR: algunas de estas propiedades no funcionarán en algunos navegadores debido a la compatibilidad. Podemos verificar el uso del navegador @supportsy agregar estilos de respaldo según corresponda. Por favor use Chrome para ver los ejemplos 🙂

1. box-decoration-break

Esta propiedad CSS especifica cómo se deben representar los fragmentos de un elemento cuando se dividen en varias líneas, columnas o páginas.

2. attr()

Podemos recuperar los valores del elemento seleccionado en CSS utilizando attr(). Este método podría ser realmente útil con fines de accesibilidad.

3. backface-visibility

Esta propiedad CSS establece si la cara posterior de un elemento es visible cuando se gira hacia el usuario. Pensando en una tarjeta de inversión de la interfaz de usuario?

4. conic-gradient

Los gradientes son una cosa maravillosa Es posible que haya usado estilos de fondo con degradados lineales, pero ¿sabe que podemos usar css puros para crear gráficos circulares con la ayuda de conic-gradient!
Para entender mejor cómo conic-gradients, haga referencia a los documentos de MDN en él.

5. filter

¿Quién necesita efectos de filtro de Photoshop cuando tienes filtros CSS. Functions Las 
funciones de filtro aplican cambios gráficos a la apariencia de una imagen de entrada. Los efectos que podemos lograr son los siguientes - blur, brightness, contrast, grayscale, hue-rotate, opacity, invert, sepia, saturate, drop-shadow.
drop-shadowEl filtro es bastante sorprendente. Te permite aplicar sombra a la imagen de entrada.

6. mix-blend-mode

Esta propiedad CSS establece cómo el contenido de un elemento debe mezclarse con el contenido del fondo del elemento o su elemento primario.

Se pueden lograr cosas asombrosas mezclando modos de mezcla y filtros con imágenes y texto. Obtenga más información en MDN Docs.

7. first-letter

Una de mis cosas favoritas en libros y revistas son las bonitas gorras. Podemos crear drop con first-letterpseudo-elementos.

8. shape-outside

Esta propiedad CSS proporciona una forma de personalizar el contenido de líneas adyacentes en torno a objetos complejos en lugar de simples cajas rectangulares.

Abra el ejemplo en una pestaña diferente e intente cambiar el ancho de la ventana y observe cómo el texto se ajusta a la imagen.

9. writing-mode

Esta propiedad CSS establece si las líneas de texto están dispuestas horizontal o verticalmente. Podemos tener estos valores-
  • horizontal-tb - El contenido fluye horizontalmente de izquierda a derecha, verticalmente de arriba a abajo.
  • vertical-lr - El contenido fluye horizontalmente de izquierda a derecha, verticalmente de arriba a abajo.
  • vertical-rl - El contenido fluye horizontalmente de derecha a izquierda, verticalmente de arriba a abajo.
Echa un vistazo a este ejemplo para verlo en acción.

10. Agregar gradiente al texto

Esto se logra con la combinación de -webkit-background-clip: texty -webkit-text-fill-color: transparentpropiedades CSS.

11. Suave desplazamiento de desplazamiento

scroll-snap-type La propiedad CSS establece cómo se aplican los puntos de ajuste en el contenedor de desplazamiento.
Este ejemplo muestra ydesplazamiento vertical ( ) con valor mandatory. MDN docs hace un gran trabajo explicando cómo usar otros valores como proximityy scroll horizontal ( x).
Estas son solo algunas de las grandes cosas que CSS puede hacer. Las posibilidades son infinitas! 🥳

Comentarios

Publicar un comentario

Entradas populares de este blog

Instalar Ruby on Rails en Ubuntu 13.04

-
Los pasos a seguir son los siguientes: 1. Actualizar repositorios de paquetes: sudo apt-get update 2. Instalar  Git . Git es un sofware de control de versiones: sudo apt-get install git 3. Instalación de  Curl . Curl es una herramienta de línea de comandos para automatizar transferencias de archivos con sintaxis url: sudo apt-get install curl 4. Antes de instalar Ruby, es necesario instalar  Ruby Version Manager , que nos permite tener diferentes versiones de Ruby instaladas: curl -L get.rvm.io | bash -s stable Es necesario que RVM se ejecute como una función en la shell. Primero verificamos si ya es así: type rvm | head -1 Todo irá correcto si la salida es: rvm: es una función En caso contrario, hay que editar el fichero ~/.bashrc y añadirle la siguiente linea: [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" # Load RVM into a shell session *as a function* Y se recarga la shell: source ~/.bashrc 5. Instalación de depende...
Leer más

Instalar Ruby on Rails en Ubuntu 13.04

-
Imagen
Bien esto es lo que tienes que hacer: primero que todo habre la terminal de Ubuntu sudo apt-get update sudo apt-get install curl \curl -L https://get.rvm.io | bash -s stable source ~/.rvm/scripts/rvm rvm requirements Dependencias Adicionales para Ruby apt-get --no-install-recommends install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev libgdbm-dev ncurses-dev automake libtool bison subversion pkg-config libffi-dev si surge algun problema el anterior grupo de dependencias entonces pruebas con este... sudo apt-get --no-install-recommends install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev libgdbm-dev ncurses-dev automake libtool bison subversion pkg-config libffi-dev Instalamos Ruby rvm install 1.9.3 u...
Leer más

¿Cómo ver sqlite3 en interfaz gráfica rápidamente?

-
Si estás en Ubuntu 12.10 y quieres usar sqlite3 para la gestión de bases de datos debes hacer lo siguiente: Ejecutar un terminal y primero escribir: sudo apt-get install sqlite3 Después de esto, si queremos manejar sqlite3 desde la interfaz gráfica, debemos escribir lo siguiente en la terminal sudo apt-get install sqlitebrowser Y listo! ya podremos ejecutar SQLite Database en interfaz gráfica! Artículos relacionados:
Leer más