Manejo de color

Clase 11 de 21 • Diseño web con PostCSS, el futuro de CSS

Clase anteriorSiguiente clase

Erick Neftalí Sarmiento Cortes

student•

wooow de verdad esto esta tremendo, super emocionado.

Rafnix Gabriel Guzmán Garcia

student•

Despues de ver todas estas clases me digo a mi mismo porque no sabias esto xD creo que el css no sera igual para mi despues de esto! saludos!

Erick Neftalí Sarmiento Cortes

student•

Así es esta genial verdad

Franklin Lucero

student•

He quedado impresionado con lo aprendido! Si que no se para de aprender!

Usuario anónimo

user•

Alguien me podria ayudar lo que pasa es que el boton no me cambio es estilo, ya probe con cambiarle el nombre a el elemento btn por bot y hasta llame otro copy y le coloque el elemento bot y tampoco aca esta mi codigo gracias.

:root{
  --bgBody: #fafafa;
  --bgHeader: #466173;
  --bgFooter: #273b47;

  --bot-gradient: #fd324e;
  --bot-gradient-start: color(var(--bot-gradient) blackness(30%));
  --bot-gradient-end: color(var(--bot-gradient) lightness(+10%) hue(10%));

  --fontSize: 18px;
}

@custom-media --mobile(max-width: 500px);
@custom-media --tablet(max-width: 650px);
@custom-media --desktop(max-width: 800px);
@custom-media --retina(-webkit-min-device-pixel-ratio: 2);

.InvieHero{
  background: url('../images/fonpo.png') var(--bgHeader);
  padding: 20px;
  height: 500px;

  @media(--retina){
    background-image: url('../images/background2x.png');
  }

  &-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  &-copy{
    &-title{
      font-size: calc(var(--fontSize) * 3);
    }
  }

  &-copy{
    &-bot{
      border-radius: 12px;
      border: none;
      color: var(--bgBody);
      padding: 7px 12px;
      cursor: pointer;
      font-size: var(--fontSize);
      text-decoration: none;
      background: var(--bot-gradient);
      background: linear-gradient(to left, var(--bot-gradient-start), var(--bot-gradient-end));
    }
  }
}

.InvieFooter{
  background-color: var(--bgFooter);
}

Diego Forero

Team Platzi•

Que clase le tienes puesta a tu boton, por lo que veo debe ser InvieHero-copy-bot

Usuario anónimo

user•

compañero gracias me di cuenta que habia escrito el nombre de la clase en un lugar incorrecto.

MUCHAS GRACIAS.

Bautista Moran

student•

No me funciona la parte en donde se agregan los colores, solo se agrega al boton el color blanco y el text-decoration.

:root {
	--bg-body: #fafafa;
	--bg-header: #466173;
	--bg-footer: #273b47;

	--btn-gradient: #fd324e;
	--btn-gradient-start: color(var(--btn-gradient) blackness(30%));
	--btn-gradient-end: color(var(--btn-gradient) lightness(+10%) hue(10%));

	--fontSize: 18px;
}

/* -- Custom media queries */
@custom-media --mobile (max-width: 500px);
@custom-media --tablet (max-width: 650px);
@custom-media --desktop (max-width: 800px);
@custom-media --retina (-webkit-min-device-pixel-ratio: 2);


.InvieHero {
	background: url('../images/background.png') var(--bg-header);
	padding: 20px;
	height: 500px;

	@media (--retina) {
		background-image: url('../images/background2x.png');
	}

	&-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	&-copy {
		&-title {
			font-size: calc(var(--fontSize) * 3.5);
		}
		&-btn {
			border-radius: 12px;
			border: none;
			color: var(--bg-body);
			padding:  7px 12px;
			cursor: pointer;
			font-size: var(--fontSize);
			text-decoration: none;
			background: var(--btn-gradient);
			background: linear-gradient(to left, var(--btn-gradient-start), var(--btn-gradient-end));
		}
	}
}

.InvieFooter {
	background-color: var(--bg-footer);
}```

Diego Forero

Team Platzi•

Revisa si no hay errores al compilar el css, también revisa que el archivo css se este actualizando de la manera correcta.

Puedes compartir que versión tienes instalada de cssnext ya que un cambio en la versión pudo haber cambiado el uso de esta característica.

Bautista Moran

student•

Como hago para encontrar la version de cssnext que tengo?

:root{
  --bgBody: #fafafa;
  --bgHeader: #466173;
  --bgFooter: #273b47;

  --bot-gradient: #fd324e;
  --bot-gradient-start: color(var(--bot-gradient) blackness(30%));
  --bot-gradient-end: color(var(--bot-gradient) lightness(+10%) hue(10%));

  --fontSize: 18px;
}

@custom-media --mobile(max-width: 500px);
@custom-media --tablet(max-width: 650px);
@custom-media --desktop(max-width: 800px);
@custom-media --retina(-webkit-min-device-pixel-ratio: 2);

.InvieHero{
  background: url('../images/fonpo.png') var(--bgHeader);
  padding: 20px;
  height: 500px;

  @media(--retina){
    background-image: url('../images/background2x.png');
  }

  &-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  &-copy{
    &-title{
      font-size: calc(var(--fontSize) * 3);
    }
  }

  &-copy{
    &-bot{
      border-radius: 12px;
      border: none;
      color: var(--bgBody);
      padding: 7px 12px;
      cursor: pointer;
      font-size: var(--fontSize);
      text-decoration: none;
      background: var(--bot-gradient);
      background: linear-gradient(to left, var(--bot-gradient-start), var(--bot-gradient-end));
    }
  }
}

.InvieFooter{
  background-color: var(--bgFooter);
}

:root {
	--bg-body: #fafafa;
	--bg-header: #466173;
	--bg-footer: #273b47;

	--btn-gradient: #fd324e;
	--btn-gradient-start: color(var(--btn-gradient) blackness(30%));
	--btn-gradient-end: color(var(--btn-gradient) lightness(+10%) hue(10%));

	--fontSize: 18px;
}

/* -- Custom media queries */
@custom-media --mobile (max-width: 500px);
@custom-media --tablet (max-width: 650px);
@custom-media --desktop (max-width: 800px);
@custom-media --retina (-webkit-min-device-pixel-ratio: 2);


.InvieHero {
	background: url('../images/background.png') var(--bg-header);
	padding: 20px;
	height: 500px;

	@media (--retina) {
		background-image: url('../images/background2x.png');
	}

	&-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	&-copy {
		&-title {
			font-size: calc(var(--fontSize) * 3.5);
		}
		&-btn {
			border-radius: 12px;
			border: none;
			color: var(--bg-body);
			padding:  7px 12px;
			cursor: pointer;
			font-size: var(--fontSize);
			text-decoration: none;
			background: var(--btn-gradient);
			background: linear-gradient(to left, var(--btn-gradient-start), var(--btn-gradient-end));
		}
	}
}

.InvieFooter {
	background-color: var(--bg-footer);
}```

Manejo de color

El futuro de CSS con PostCSS y CSSNext

Bienvenidos al modulo de PostCSS

¿Qué es PostCSS ?

Nomenclatura BEM ( Bloque, Elemento, Modificador )

Configurando nuestras tareas en Gulp: Servidor, Procesamiento de CSS y Watch

Autoprefixer: Cómo añadir vendor prefixes usando CSS standard

Anidando clases de CSS con Nested

Configurando CSSNext en nuestro archivo Gulp

Propiedades personalizadas

Usando Calc

Media queries personalizadas

Manejo de color

Manejo de filtros

Mixins: Cómo reutilizar estilos de CSS

Separando nuestros archivos CSS y uso de @import

Implementando un carousel con CSS Scroll Snap

Grids responsive con Lost

Minificando archivos con CSSWring

Fuentes responsive con rucksack

Unificando media-queries con Mqpacker

Conclusiones de PostCSS

Desafio 1

Desafio 2