Counter Increment y pseudoSelectores

Clase 25 de 67 • Curso de HTML5 y CSS3 2015

Christian David Ramírez Bolívar

student•

Hola a todos, antes de que todo el mundo sodomize a Platzi y a nuestra maestra, trataré de explicar básicamente lo que se hizo para el centrado del contenido Gatos:

En la sección, se hizo una especie de tabla así:

una fila con una columna de 10 espacios en grilla. que conetenía el texto

            <div class="row">  
                <div class="col-10">  
                    <h2>Lista de Gatos en Memes favoritos</h2>  
                    <p>Haz click para conocer acerca de ellos</p>  
                </div>  
            </div>

Luego se hizo otra fila con 4 columnas para las imágenes que se colocaron para representar los gatitos

            <div class="row">  
                <div class="col-3">  
                    <img src="assets/gatos/git/git-1.png" class="same-height" />  
                </div>  
                <div class="col-3">  
                    <img src="assets/gatos/nyan/nyan-1.png" class="same-height" />  
                </div>  
                <div class="col-3">  
                    <img src="assets/gatos/grumpy/grumpy-1.png" class="same-height" />  
                </div>  
                <div class="col-3">  
                    <img src="assets/gatos/maru/maru-1.jpg" class="same-height" />  
                </div>  
            </div>

Se manejó una clase llamada same-height, lo que hace esto, es dar una misma altura a todas las imágenes, para que queden organizadas, mediante este fragmento en el css

        .same-height {  
            max-height: 154px;  
            overflow: hidden;  
        }

Y al final se manejó una fila con 4 columnas donde se alojó la lista ordenada

            <ol class="row">  
                <li class="col-3">  
                    <a href="git.html">Git, el gato</a>  
                </li>  
                <li class="col-3">  
                    Nyan Cat  
                </li>  
                <li class="col-3">  
                    Grumpy Cat  
                </li>  
                <li class="col-3">  
                    Maru  
                </li>  
            </ol>

Todo dentro de un section con la clase full-height que da un alto del 100% de la página y un padding del 20% arriba y abajo

.full-height {  
    height: 100%;  
    padding: 20% 0;  
}

Espero que les haya servido, y de verdad, no crean que es fácil pararse a una cámara a brindar conocimientos para todos, los profeores también son humanos. Saludos Platzi.

Rafael Ernesto Alfaro Contreras

student•

muchas gracias , vere de realizar lo que acabas de publicar, y no estoy criticando a la maestra ni nada por el estilo, si no a la edición del video como tal a la hora de hacer los recortes de escena , por que no se reviso que siguiera un orden y a causa de eso , las personas que no vimos el curso en vivo , nos perdimos totalmente

Cristina Luengo Maravert

student•

Gracias ;)

Erick Orlando Velasco Martínez

student•

Que frustrantes son sus equivocaciones ¬¬

Cristina Luengo Maravert

student•

¿Soy yo o entre este vídeo y el anterior hay una diferencia? Los elementos no estaban centrados y alineados aún...

Cristina Luengo Maravert

student•

Con diferencia me refiero a que parece que falta un fragmento o algo, o soy yo que me he perdido... :S

Christian David Ramírez Bolívar

student•

Si te interesa Cristina, escribí una explicación, lo mejor que pude en los comentarios de lo que se hizo.

Victor Garcia Civera

student•

El pseudoSelector ::before crea un elemento nuevo antes de que el DOM ( Document Object Model ), el navegador, lo cree.

Jhonatan Ferney Ospina

student•

Le dejo un articulo donde puede conmprender un poco mejor lo de los pseudo-selectores

Rafael Ernesto Alfaro Contreras

student•

que mala, edición señores, por favor , si van a editar favor hacerlo en una secuencia que se entienda no que de un momento se pasa a otro y no se entiende nada

Christian David Ramírez Bolívar

student•

Rafael, mira el comentario que hice arriba con una breve explicación lo mejor que pude, si no entiendes algo pregunta, que trataré de explicartelo lo mejor que pueda.

Camilo Lira Munizaga

student•

se saltaron caleta de pasos pa posicionar las cajas. la edicion mala pa puro ganar tiempo

Christian David Ramírez Bolívar

student•

Es cierto, hubo un error de edición, por si acaso intenté responderlo lo mejor que pude por los comentarios, dale una chequeada si quieres, saludos =)

Miguel Mendoza Molina

student•

/*A la solución que se dio falta poder agregarle en la parte de editorial lo siguiente */  
  
  
h2{  
    font-size: 48px;  
    text-transform: uppercase;  
    font-weight: 700;  
    margin-bottom: 30px;  
  
}  
/*con ello se logra cambiar el tamaño de la etiqueta*/

Alexander Hurtado

student•

Buenas noches, quisiera saber cuál es la diferencia de usar los puntos ":" y "::" en pseudoselectores.

Grazie.

Homero Benavides

student•

"::" es nuevo estilo para diferenciar entre pseudoselector(:) y pseudocontenido(::), pero no afecta en funcionalidad (solamente a la hora de la compatibilidad sí afecta).
IE 8 es el único navegador actual que solamente comprende ":", si no planeas dar soporte a IE 8, entonces usa "::" para to pseudocontenido y ":" para tus pseudoselectores. Si planeas dar soporte a IE 8 usa ":" para ambos casos.

Yafté Roberto Muñoz Lujano

student•

A mi me funciono mejor esto, y me sirvio para Chrome y Firefox.

ol {  
    counter-reset: section;  
}  
  
ol li::before {  
    counter-increment: section;  
    content: counter(section) ".";  
}

pero primero tienen que hacer lo que dice Ramses2815.
I
I
I
v

            <div class="row">  
                <div class="col-10">  
                    <h2>Lista de Gatos en Memes favoritos</h2>  
                    <p>Haz click para conocer acerca de ellos</p>  
                </div>  
            </div>

            <div class="row">  
                <div class="col-3">  
                    <img src="assets/gatos/git/git-1.png" class="same-height" />  
                </div>  
                <div class="col-3">  
                    <img src="assets/gatos/nyan/nyan-1.png" class="same-height" />  
                </div>  
                <div class="col-3">  
                    <img src="assets/gatos/grumpy/grumpy-1.png" class="same-height" />  
                </div>  
                <div class="col-3">  
                    <img src="assets/gatos/maru/maru-1.jpg" class="same-height" />  
                </div>  
            </div>

            <ol class="row">  
                <li class="col-3">  
                    <a href="git.html">Git, el gato</a>  
                </li>  
                <li class="col-3">  
                    Nyan Cat  
                </li>  
                <li class="col-3">  
                    Grumpy Cat  
                </li>  
                <li class="col-3">  
                    Maru  
                </li>  
            </ol>

/*A la solución que se dio falta poder agregarle en la parte de editorial lo siguiente */  
  
  
h2{  
    font-size: 48px;  
    text-transform: uppercase;  
    font-weight: 700;  
    margin-bottom: 30px;  
  
}  
/*con ello se logra cambiar el tamaño de la etiqueta*/

Counter Increment y pseudoSelectores

Materiales

Descarga el código del proyecto

Introducción a HTML5 y CSS3

Preguntas antes de la clase

Diferencias entre Backend y Front-end

¿Qué es un Frontend?

¿Qué es HTML y CSS?

Semántica en HTML5

Metodología BEM

Introducción a CSS I

Introducción a CSS II

Developer Tools en navegador I

Developer Tools en navegador II

Preguntas Y Respuestas

Selectores CSS y flexbox

Preguntas antes de la clase

Flexbox

Imports en CSS

Retícula

Selectores en CSS y Pseudo selectores

Páginas internas

Preguntas y respuestas en clase

Listas Ordenadas, Float y Display

Preguntas antes de la clase

Listas ordenadas

Float y display

Preguntas y respuestas en clase

SASS y workflow profesional

Status HTTP