Una de las funciones más poderosas de Blocs es la capacidad de utilizar clases personalizadas dentro de sus proyectos. Si tiene experiencia en diseño gráfico, piense en las clases personalizadas como estilos de capa que puede asignar a cualquier elemento en Blocs para darle un aspecto y una sensación específicos. Las reglas de estas clases se pueden ajustar para que parezcan diferentes en computadoras de escritorio, tabletas y dispositivos móviles, lo que significa que tiene la capacidad de ajustar cada detalle de un elemento específicamente para el dispositivo en el que se está viendo. El siguiente video cubre los conceptos básicos de las clases personalizadas y cómo se pueden usar en sus diseños.
Aplicar una clase personalizada
Para aplicar una clase personalizada a un elemento dentro de Blocs, primero seleccione el elemento en el lienzo de diseño principal Clic izquierdo eso. Ahora en las opciones de la barra lateral ubique el campo etiquetado Clases y haga clic dentro de este campo para activarlo.
Una vez activado, usando su teclado, escriba el nombre que desea darle a su clase o el nombre de una clase que ya existe en su proyecto y luego presione regresar. Esto creará una etiqueta de clase personalizada en el campo de clases, esto significa que esta clase ahora está asignada a este elemento. Puede repetir este proceso para agregar varias clases al mismo elemento.
Acceder a los valores de una clase personalizada
Hay varias formas de acceder a los valores de una clase personalizada dentro de Blocs. La forma más sencilla es haga clic derecho un elemento que mostrará el menú contextual. En este menú, seleccione Clases personalizadas y luego Click izquierdo la clase que desea ver en el menú desplegable. Esto abrirá la clase seleccionada en el editor de clases para que pueda ver y editar sus valores.
También puede acceder a los valores de una clase personalizada mediante Clic izquierdo en una de las etiquetas de clase que se encuentran dentro del campo de clase, ubicado en las opciones del inspector de la barra lateral principal.
Editar una clase personalizada
Blocs viene con un potente editor de clases integrado que le permite editar clases visualmente con facilidad.
El editor de la clase se divide en Secciones 9 para que la edición de diferentes tipos de reglas y valores sea más manejable y clara.
1. métrica
Este conjunto de opciones contiene los controles de medición, por ejemplo, ancho, alto.
2. Caja
Este conjunto de opciones contiene los controles del cuadro, por ejemplo, margen, relleno, borde.
3. Tipografía
Este conjunto de opciones contiene los controles de tipografía, por ejemplo, tamaño de fuente, espaciado entre letras.
4. Fondo
Este conjunto de opciones contiene los controles de fondo, por ejemplo, imagen de fondo, degradado.
5. Posicionamiento
Este conjunto de opciones contiene los controles de posicionamiento, por ejemplo, flotar, mostrar, borrar.
6. Sombras
Este conjunto de opciones contiene los controles de sombra, por ejemplo, sombra de texto, sombra de cuadro.
7. filtros
Este conjunto de opciones contiene los controles de filtro CSS, por ejemplo, desenfoque, saturación, contraste.
8.SVG
Este conjunto de opciones contiene los controles SVG, por ejemplo, color de trazo, límite de línea.
9. Flexionar
Este conjunto de opciones contiene los controles flexibles, por ejemplo, dirección, alineación.
Dentro de cada una de las cuatro secciones, hay una serie de elementos etiquetados de la interfaz de usuario que le permiten aplicar valores específicos para las reglas CSS3 estándar.
Editar una clase para un punto de interrupción específico
In Blocs es posible ajustar los valores de cualquier clase en función del punto de interrupción en el que se ve. Esto es extremadamente útil ya que le permite crear una experiencia completamente única para sus usuarios dependiendo del dispositivo que estén usando cuando visitan su sitio web.
Para editar los valores de una clase en un punto de interrupción específico, simplemente cambie a ese punto de interrupción usando el vista de punto de ruptura opciones que se encuentran en el centro de la barra de herramientas principal de la aplicación y luego edite los valores de esa clase personalizada.
Puede obtener más información sobre cómo funcionan los controles de la vista de punto de interrupción aquí.
También recomendamos ver la lección en video a continuación que cubre los conceptos básicos para trabajar con clases receptivas.
Estados de clase
Además de poder establecer el estilo visual de un elemento en función del dispositivo en el que se ve, el Blocs Class Editor también le permite establecer el estilo de un elemento en función de su estado actual. Hay tres estados disponibles dentro Blocs.
Para Tanque Empotrado o Alto
El estado predeterminado de un artículo.
Flotar
La :flotar El estado se muestra cuando el cursor del mouse está sobre el elemento.
Active
La :activo selector se utiliza para seleccionar y diseñar el enlace activo.
Focus
La : enfoque selector se utiliza para seleccionar el elemento que tiene el foco.
Visitó
La :visitó selector se utiliza para seleccionar enlaces visitados.
Aprovechar estos estados significa que puede hacer cosas como cambiar el color de un botón cuando el mouse está sobre él o cambiar el tamaño del texto de un enlace cuando se hace clic en él. El uso de estados le permite cambiar dinámicamente la forma en que se ve cualquier elemento en su página web cuando un usuario interactúa con él, puede ser excepcionalmente útil cuando necesita transmitir un mensaje con respecto a la usabilidad.
Estados cambiantes
Para editar los valores de un estado específico de una clase personalizada, simplemente Click izquierdo el botón del menú desplegable ubicado a la izquierda del campo del nombre de la clase principal y seleccione el estado que desea editar.
Eliminar una clase personalizada
Para eliminar una clase personalizada de cualquier elemento, simplemente seleccione el elemento y luego, desde las opciones de la barra lateral, navegue hasta el campo de clase personalizada y Click izquierdo el pequeño x símbolo situado a la derecha del etiqueta de clase desea eliminar. Esto eliminará la clase del elemento seleccionado.
Eliminar clases de un objeto no eliminará la clase personalizada por completo de su proyecto a menos que sea un clase a mano alzada, puede obtener más información sobre la eliminación de clases personalizadas en este artículo sobre la Gerente de clase.