Skip to content

Instantly share code, notes, and snippets.

@codigoconjuan
Last active January 4, 2022 22:42
Show Gist options
  • Save codigoconjuan/c70d8f047c3d8c99abfbb1c92f6f4e5e to your computer and use it in GitHub Desktop.
Save codigoconjuan/c70d8f047c3d8c99abfbb1c92f6f4e5e to your computer and use it in GitHub Desktop.
Materiales proyecto Cotizador
<option value="">-- Seleccione --</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
html {
box-sizing: border-box;
}
body {
background: #e96443; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #904e95, #e96443); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #904e95, #e96443);
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style: none;
padding: none;
margin: none;
}
span.resultado {
position: relative;
width: 100%;
}
.resultado-enter {
transition: .5s;
}
.resultado-enter.resultado-enter-active{
transform: translateY(0%);
}
.resultado-exit{
transform: translateY(0);
transition: .5s;
position : absolute;
left: 0;
bottom : 0;
right: 0;
}
.resultado-exit-active{
opacity: 0;
transform: translateY(-10%);
}
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Slabo+27px" />
@asciito
Copy link

asciito commented May 12, 2020

Solo quiero reportar que en la tag html hay un problema con el box-sizing, ya que este propiedad debe de ser utilizado de esta forma:
*, *::before, *::after { box-sizing: border-box }
¿Por que digo debe?, pues en este caso para que se respete el propiedad en todos los elementos del documento HTML pues en video 92. Validando el Formulario de la sección 7 de proyectos hay un mensaje de error y este se desborda por uno de los laterales, más especifico el lado derecho, para solucionar esto y posibles inconsistencias en tamaños es recomendado que se aplique a todos los elementos.
Aunque no se por que no la aplica si en términos de la documentación dice que se lo aplicara a todo el contenido del padre, así que esta raro pero creo que para evitar este error creo que es más beneficioso su uso como lo especifico arriba.

Gracias Juan por todos tus aportes y conocimientos, realmente me gustaría conocerte algún día amigo de GDL, me gusta aprender de ti.

@asciito
Copy link

asciito commented May 12, 2020

Al fijarme mejor en la documentación dice que al contenido del elemento, esto quiere decir que a los descendientes mas internos no aplica esto. Me parece que se refiere a que solo a los hijos directos del contenedor aplicara esta propiedad, por esta razón a elementos más internos de la etiqueta html no tendrá efecto alguno.

@ManuSandoval
Copy link

cuando pego tu

Solo quiero reportar que en la tag html hay un problema con el box-sizing, ya que este propiedad debe de ser utilizado de esta forma:
*, *::before, *::after { box-sizing: border-box }
¿Por que digo debe?, pues en este caso para que se respete el propiedad en todos los elementos del documento HTML pues en video 92. Validando el Formulario de la sección 7 de proyectos hay un mensaje de error y este se desborda por uno de los laterales, más especifico el lado derecho, para solucionar esto y posibles inconsistencias en tamaños es recomendado que se aplique a todos los elementos.
Aunque no se por que no la aplica si en términos de la documentación dice que se lo aplicara a todo el contenido del padre, así que esta raro pero creo que para evitar este error creo que es más beneficioso su uso como lo especifico arriba.

Gracias Juan por todos tus aportes y conocimientos, realmente me gustaría conocerte algún día amigo de GDL, me gusta aprender de ti.

Me da un error del Eslint en la primer coma, "expected }", como debería quedar exactamente el tag? html{*, *::before, *::after { box-sizing: border-box }? tal vez lo estoy poniendo mal

@asciito
Copy link

asciito commented May 17, 2020

cuando pego tu

Solo quiero reportar que en la tag html hay un problema con el box-sizing, ya que este propiedad debe de ser utilizado de esta forma:
*, *::before, *::after { box-sizing: border-box }
¿Por que digo debe?, pues en este caso para que se respete el propiedad en todos los elementos del documento HTML pues en video 92. Validando el Formulario de la sección 7 de proyectos hay un mensaje de error y este se desborda por uno de los laterales, más especifico el lado derecho, para solucionar esto y posibles inconsistencias en tamaños es recomendado que se aplique a todos los elementos.
Aunque no se por que no la aplica si en términos de la documentación dice que se lo aplicara a todo el contenido del padre, así que esta raro pero creo que para evitar este error creo que es más beneficioso su uso como lo especifico arriba.
Gracias Juan por todos tus aportes y conocimientos, realmente me gustaría conocerte algún día amigo de GDL, me gusta aprender de ti.

Me da un error del Eslint en la primer coma, "expected }", como debería quedar exactamente el tag? html{*, *::before, *::after { box-sizing: border-box }? tal vez lo estoy poniendo mal

Hola, el problema es que estas usando un selector de html y dentro de ese selector estas usando el selector de *. Lo que yo puse debe ser el remplazo del selector html. Y por lo que se aprecia en el error te dice que falta un simbolo de } llave para cerrar el selector.

Debe quedar así:

*,
*::before,
*::after {
    box-sizing: border-box;
}

Lamento si en una sola linea no se aprecia bien, es mi forma de acomodar las cosas si el selector/es tiene solo una propiedad CSS.
Te comento que son tres selectores. Uno es el selector universal, el cual selecciona todas las etiquetas html, y los otros dos son el mismo selector universal pero con la diferencia de que seleccionan de todos los pseudo-elementos de todas las etiquetas.

@ManuSandoval
Copy link

cuando pego tu

Solo quiero reportar que en la tag html hay un problema con el box-sizing, ya que este propiedad debe de ser utilizado de esta forma:
*, *::before, *::after { box-sizing: border-box }
¿Por que digo debe?, pues en este caso para que se respete el propiedad en todos los elementos del documento HTML pues en video 92. Validando el Formulario de la sección 7 de proyectos hay un mensaje de error y este se desborda por uno de los laterales, más especifico el lado derecho, para solucionar esto y posibles inconsistencias en tamaños es recomendado que se aplique a todos los elementos.
Aunque no se por que no la aplica si en términos de la documentación dice que se lo aplicara a todo el contenido del padre, así que esta raro pero creo que para evitar este error creo que es más beneficioso su uso como lo especifico arriba.
Gracias Juan por todos tus aportes y conocimientos, realmente me gustaría conocerte algún día amigo de GDL, me gusta aprender de ti.

Me da un error del Eslint en la primer coma, "expected }", como debería quedar exactamente el tag? html{*, *::before, *::after { box-sizing: border-box }? tal vez lo estoy poniendo mal

Hola, el problema es que estas usando un selector de html y dentro de ese selector estas usando el selector de *****. Lo que yo puse debe ser el remplazo del selector html. Y por lo que se aprecia en el error te dice que falta un simbolo de } llave para cerrar el selector.

Debe quedar así:

*,
*::before,
*::after {
    box-sizing: border-box;
}

Lamento si en una sola linea no se aprecia bien, es mi forma de acomodar las cosas si el selector/es tiene solo una propiedad CSS.
Te comento que son tres selectores. Uno es el selector universal, el cual selecciona todas las etiquetas html, y los otros dos son el mismo selector universal pero con la diferencia de que seleccionan de todas las etiquetas solo los pseudo-elementos before y after.

No podría haber quedado más claro. Muchas gracias por tomarte el tiempo de responder geni@!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment