Tag: css

Remplazar imagen con CSS

La técnica es sencilla, pero eficaz. Lo que tenemos que hacer es ocultar la imagen aplicando un ancho de 0px (width:0) y luego utilizando las propiedades de background (img y size) + padding para añadir la nueva imagen.

Esta es una buena técnica para realizar la acción remplazar una imagen utilizando sólo CSS, pero tenemos un «contra» y es que tendremos que ir jugando con @media-queries para poder adaptar la imagen a cada uno de los dispositivos.

Sustituir icono radio button bootstrap 4

Vamos a sustituir el icono standard del radio button por algo más visible. En este caso práctico vamos a cambiar el modo de visualización de un listado, por lo que vamos a hacer que los iconos sean visiblemente más acorde a lo que se sugiere que es cambiar la vista a modo «Bloque» o modo «Listado».

Para realizar la estructura HTML he usado – bootstrap 4

Para los iconos – fontawesome 5

La estructura CSS tiene que estar bien anidada para no machacar otros estilos.

Efecto Inclinado (Skew Effect) HTML + CSS

La inclinación de bordes con CSS (css skew effect) es el efecto en el que los laterales (izquierda y/o derecha) aparecen inclinados. Ejemplo:

El efecto lo logramos utilizando la propiedad transform: skew.  Con esto y un poco más de estilos obtenemos el resultado.

HTML:

<div id="user-config-1" class="square-skew square-dark-blue text-white">
<span>
<label>Config 1</label>
<i type="btn" class="edit-config fas fa-pencil-alt" title="Editar"></i>
<i type="btn" class="remove-config fa fa-times"></i>
</span></div>

CSS:

.square-skew {
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
    padding: 0.2rem 0;
    position: relative;
    left: 10px;
    float: left;
}

.square-skew label {
    margin: 0 !important;
    font-weight: bold;
}

.square-skew span {
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
    display: inline-block;
    font-size: 0.625rem;
    padding: 0 0.5rem;
    text-transform: uppercase;
}

.square-dark-blue {
    background-color: #007cb6;
    margin-right: 0.625rem;
}

CSS Media Queries

Una media query consiste de un media type y una o más expresiones, que implican media features, que se resuelve en true o false. El resultado de la consulta es verdadero si el media type especificado en el media query coincide con el tipo de dispositivo sobre el que el documento está siendo mostrado y todas las expresiones del media query son verdaderas. Cuando un media query es verdadero, se aplica la hoja de estilo correspondiente o las reglas de estilo, siguiendo las reglas normales en cascada.

Media Types

screen Intended for non-paged computer screens.

tty Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.

tv Intended for television-type devices (low resolution, color, limited scrollability).

projection Intended for projectors.

handheld Intended for handheld devices (small screen, monochrome, bitmapped graphics, limited bandwidth).

print Intended for paged, opaque material and for documents viewed on screen in print preview mode.

braille Intended for braille tactile feedback devices.

aural Intended for speech synthesizers.

all or empty value Suitable for all devices.

Ejemplo de Media Queries

Añadir Google Fonts en tu Página Web (CSS)

Todos hemos empezado creando páginas web con nuestras fuentes típicas: Arial, Times New Roman, Century Gothic, Verdana, etc... Estas son las llamadas fuentes seguras. Son accesibles desde cualquier navegador y no necesitan librerías externas para ser cargadas.

Hoy en día podemos encontrar varios recursos que nos facilitan dar un look personalizado a nuestra web instalando otros tipos de fuentes o tipografías.

Google Fonts es la más accesible y fiable. Nos da la posibilidad de utilizar filtros para encontrar el tipo de fuente que buscamos según las necesidades y el tipo de página web que estemos diseñando.

Hasta aquí todo bien, pero también hay que tener en cuenta el lado negativo. Al ser un recurso externo también nos penaliza el tiempo de carga de nuestra web. Lo recomendable es utilizar como máximo 3 fuentes diferentes: una para los títulos, otra para el texto de nuestra web y la última para textos que queremos resaltar o utilizar en casos especiales. Además, la homogeneidad es uno de los principios del diseño web y si empezamos a mezclar tipos de fuentes y tamaños estaremos infringiendo esta ley universal.

Instalar una fuente de Google Fonts es fácil. Utilizaremos como ejemplo la fuente ROBOTO y MODAK. La herramienta ya nos da información de como instalarlo. Lo haremos paso a paso:

INSTALACIÓN STANDARD

Añadiremos a nuestro html entre la etiqueta <head></head> este código:

<link href="https://fonts.googleapis.com/css?family=Modak|Roboto" rel="stylesheet">

INSTALACIÓN VÍA @IMPORT

Esta es la forma más recomendada de hacerlo. Insertamos en primera línea donde tengamos nuestro CSS el código generado:

@import url('https://fonts.googleapis.com/css?family=Modak|Roboto');

 

UTILIZACIÓN

Para el body utilizaremos la fuente ROBOTO:

body { font-family: 'Roboto', sans-serif; }

Para las etiquetas de títulos h1, h2 y h3 la fuente MODAK:

h1, h2, h3 {font-family: 'Modak', cursive;}

RESULTADO

Para los títulos:

Título H1, Título H2, Título H3

Para el body:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a dictum erat. Nullam lobortis non metus eget ultrices. Phasellus commodo dictum purus sed fermentum.

WooCommerce My Account CSS

Es la primera vez que trabajo con WooCommerce. Hoy en día es la herramienta más completa a la hora de realizar una web de compras con WordPress. Es complejo pero tienes muchas utilidades y un sin fin de opciones.

En este caso se encuentra instalado como parte de un template llamado EduGate que se utiliza ofrecer cursos educacionales online. Es un template muy completo pero, como todos los templates, hay que dedicar tiempo a dejar un diseño limpio y dejar bien configurados los valores por defecto.

A la hora de configurar la visualización de la zona de usuarios me he encontrado con esto:

No sé si es algo habitual, pero buscando por internet WooCommerce My Account Css me he encontrado gente con el mismo problema.

Encontré un CSS que se adaptaba a lo que buscaba que era simplemente crear un menú de navegación sencillo. Le he dado otro aire y he añadido unas cuantas modificaciones más para poder visualizar de mejor manera el menú:

Mucho más descente para mi gusto 😉

Aquí dejo el CSS:


.section-padding {padding: 10px 0;}
@media only screen and (min-width: 769px) {
.woocommerce-account .woocommerce-MyAccount-navigation {width: 22%;}
.woocommerce-account .woocommerce-MyAccount-content {width: 75%;}
}
nav.woocommerce-MyAccount-navigation ul {
list-style-type: none;
padding-left: 0;
font-size: 1em;
line-height: 26px;
float:left;
width:100%;
margin:25px auto;
}
nav.woocommerce-MyAccount-navigation ul li {
padding: 8px 20px;
background-color: rgba(0,0,0,0.05);
border-bottom: 1px solid rgba(0,0,0,0.05);
float:left;
}
nav.woocommerce-MyAccount-navigation ul li.is-active {
background-color: rgba(0,0,0,0.1);
}
nav.woocommerce-MyAccount-navigation ul li.is-active a {
color: rgba(0,0,0,0.8); cursor: default;
}
nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover {
background-color: rgba(0,0,0,0.07);
}
.woocommerce .woocommerce-error, .sw-woocommerce .woocommerce-message, .woocommerce .woocommerce-message, .sw-woocommerce .woocommerce-error, .sw-woocommerce .woocommerce-info, .woocommerce .woocommerce-info{
float: left;
}
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before{
left: 0.5em;
}

Como aprender Flex CSS fácilmente

Hay muchísimas guías, tutoriales y vídeos que podemos encontrar en la web para aprender como utilizar Flexbox. ¿Pero cual es la manera más fácil de aprender a hacer algo? Empecemos.

¿Qué es Flexbox?

Flexbox te ayuda a crear páginas «flexibles» y «adaptativas» utilizando CSS.

Puedes encontrar información más completa para entender lo que es Flexbox y como funciona en http://www.emenia.es/flexbox-la-caja-flexible-css3/

Ahora que has leído un poco y ya sabes de que va la historia, imagina que quieres crear una página donde quieres añadir varias imagenes y quieres que auotmaticamente se adapten al contenedor según vayas redimensionando tu página o accedas a ella en dispositivos distintos.

¿Como lo harías? Yo antes utilizaba porcentajes, nth-childs, float left, clear left, margins… Unas cuantas opciones para poder hacer que un contenedor pueda adaptarse según el número de items y estos se adapten al dispositivo o al tamaño de la pantalla.

Esto ya queda en el pasado. «El futuro es ahora viejo», usa FLEXBOX.

La manera de aprender facilmente como funciona Flexbox y todas las opciones que te ofrece es jugando. Así es amigo, JUGAR es lo que mejor se nos da a todos y si aprendes jugando, mejor que mejor, ¿NO?.

Pero para aprender de verdad, tienes que entrar a esta página http://flexboxfroggy.com. Empieza desde cero con una explicación breve y una guía fácil en cada paso.

REQUERIMIENTOS: Saber CSS y saber inglés.