Lleva tus conocimientos de CSS a otro nivel

1

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

驴De d贸nde venimos y en d贸nde estamos?

2

驴C贸mo fue pensado CSS cuando se cre贸?

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

驴C贸mo se lleg贸 al concepto de CSS Grid?

5

驴CSS Grid es una idea nueva? La evoluci贸n de la especificaci贸n

6

驴Qu茅 significa Grid para CSS?

Control de alineamiento

7

T茅cnicas de alineamiento antes de CSS Grid: margin y line-height

8

T茅cnicas de alineamiento antes de CSS Grid: table-cell y positions

9

T茅cnicas de alineamiento de CSS Grid: pros y contras

10

Modos de escritura y ejes de alineamiento + Reto

11

Propiedades f铆sicas y l贸gicas en CSS + Quiz

12

T茅cnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

Grid y las relaciones padre e hijos inmediatos + Qu铆z

15

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

16

隆Iniciemos nuestro proyecto! Fase de creatividad e identificaci贸n de elementos

Propiedades y valores para el elemento padre

17

Creando nuestro contenedor: 驴display: grid o display: inline-grid?

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

Generaci贸n autom谩tica de tracks + Qu铆z

21

Funciones: repeat(), minmax() y fit-content()

Propiedades y valores para los elementos hijos

22

隆Manos al c贸digo! Fase de construcci贸n de la grid principal de nuestro proyecto

23

Ubicaci贸n + Reto

24

Alineamiento en los elementos hijos + Quiz

25

隆Manos al c贸digo! Fase de ubicaci贸n y alineamiento

26

Continuando con la fase de ubicaci贸n y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

Contin煤a con el Curso de Dise帽o Web con CSS Grid y Flexbox

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Modos de escritura y ejes de alineamiento + Reto

10/28
Recursos

Aportes 89

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Curioso, no conoc铆a lo de los modos de escritura 馃, si hubiese tenido que hacer un efecto similar, lo m谩s probable es que hubiese hecho alguna cosa rara con Flexblox y rotates jaja
.
Por cierto, la propiedad overflow: hidden; sirve para ocultar cualqueir elemento hijo que se salga del elemento padre (siempre y cuando el elemento padre tenga dicha propiedad). Por ejemplo, si tu elemento padre tiene una altura de 500px, pero dentro tienes un texto que rebasa esos 500px, con un overflow: hidden; en el padre puedes hacer que se oculte todo lo que se salga 馃槃.
.
Sin overflow: hidden:

.
Con overflow: hidden:

.
Tambi茅n es muy 煤til para usarla como m谩scaras de recorte 馃憖.

Un cuadro resumen de como se ver铆a cada propiedad writing mode aplicada.

  1. La propiedad writing-mode define si los renglones de texto se disponen horizontal o verticalmente y la direcci贸n en que avanzan los bloques.

horizontal-tb
El contenido fluye horizontalmente de izquierda a derecha y verticalmente de arriba hacia abajo. El pr贸ximo rengl贸n horizontal se posiciona debajo del rengl贸n anterior.

vertical-rl
El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de derecha a izquierda. El pr贸ximo rengl贸n vertical se posiciona a la izquierda del rengl贸n anterior.

vertical-lr
El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de izquierda a derecha. El pr贸ximo rengl贸n vertical se posiciona a la derecha del rengl贸n anterior.

sideways-rl
El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la derecha.

sideways-lr
El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la izquierda.

  1. Cosas a tener en cuenta a la hora de usar writing mode:
  • El modo de escritura.
    -La direcci贸n.
    -La orientaci贸n del texto.

Para esto hay que ver los elementos bloque y elementos en linea.

display-block: (horizontal)

  • Ocupan todo el espacio de su elemento padre (contenedor).
    -Fuerzan un salto de l铆nea (ocupan todo el ancho disponible).
    -Respetan el width, el height, el margin-top y el margin-bottom indicados por el usuario.
    -Algunos son:
    div, p, h1, h2, h3, h4, h5, h6, hr, ol, ul, table, li.

display-inline: (vertical)
-Son apilables.
-No tienen ni margin-top ni margin-bottom (por mucho que se lo indiques en el CSS).
-Si tienen margin-left y margin-right.
No respetan ni width ni height.
-Estas medidas depender谩n del tama帽o en p铆xels de su contenido.
-Algunos son: a, span, label, strong, br, input, textarea, abbr,

Aqu铆 hay un ejemplo con Amazon Arabia para que puedan checar como cambia la pagina dependiendo el pa铆s o el idioma. 馃榿

M谩s claro imposible 馃槈

https://developer.mozilla.org/es/docs/Web/CSS/overflow
visible
Valor por defecto. El contenido no es recortado, podr铆a ser dibujado fuera de la caja contenedora.
hidden
El contenido es recortado y no se muestran barras de posici贸n.
scroll
El contenido es recortado y el navegador web usa las barras de desplazamiento, se haya recortado contenido o no. Esto previene cualquier problema con las barras de desplazamiento apareciendo o desapareciendo en un entorno din谩mico. Puede que las impresoras impriman contenido excedente.
auto
Depende del agente de usuario. Navegadores de escritorio como Firefox proveen barras de desplazamiento si hay contenido excedente.

Podemos olvidarnos de todo y hacer todo Horizontal TB?

Nosotros por nuestro modo de escritura que es el sistema latin, que es de izquierda a derecha, el origen de nuestro navegador es el Top Left. Pero existen otros sistemas de escritura que pueden ser totalmente diferente. Por este tipo de cosas, surge una nueva propiedad llamada: 鈥淲riting Mode鈥. Donde tenemos diferentes valores como:

  • Horizontal TB
  • Vertical LR
  • Vertical RL
  • Sideways LR
  • Sideways RL

LAS ULTIMAS DOS LETRAS, DEFINEN DE QUE DIRECCION A QUE DIRECCION VA ESCRITO.

ESTA PROPIEDAD NO ES APTA PARA TABLAS, NI ROW, NI COLUMN

Las cosas que tenemos que tener en cuenta son:

  • Modo De Escritura
  • La Direccion
  • La orientaci贸n del texto.

Sabemos que en el display cuando es en Block es 猬囷笍 y cuando es Inline es 鉃★笍.

Este tipo de valores afectan a nuestros modelos en Flexbox y Grid.

Aqu铆 les dejo una documentaci贸n de writing-mode y direction respectivamente.

https://developer.mozilla.org/es/docs/Web/CSS/writing-mode

https://developer.mozilla.org/es/docs/Web/CSS/direction

TIP: Uno de los usos que se le puede encontrar a overflow: hidden; es cuando vamos a hacer una ventana modal, si el contenido de esta modal es muy grande y necesitamos hacerle scroll a ese modal podemos utilizar el overflow: hidden; para a帽adirselo al body cuando el modal aparezca, este se puede hacer dinamicamente con Javascript.

Pronto har茅 un un tutorial dentro de este curso para crear modales utilizando CSS grid, positions y overflows 馃槈馃槈馃挌

Queria hacer la tarjeta (adjunto imagen) asi, pero no me funcion贸 con sideways-lr, asi que encontr茅 esta manera de hacerlo, 馃馃

Checando el reto de la profesora, me top茅 que s贸lo funciona (por ahora) el sideways-rl y sideways-lr en Fire Fox, pero no en Edge ni Chrome, digo hablando de los navegadores m谩s usados. 馃槷

Bueno hasta donde entend铆:
Overflow: Controla el contenido cuando este es m谩s grande que las dimensiones de su contenedor.
La propiedad overflow:hidden:
Lo que hace es ocultar el contenido que sobrepasa o rebasa las dimensiones del contendor, como Cortandolo.

hoverflow: hidden: En otras palabras permite que el contenido NO se muestre fuera de su caja contenedora.
Modos de escritura: Totalmente nuevo para m铆, no lo hab铆a conocido. Esto se pone interesante.

El overflow hidden sirve para ucultar las barras de posicion cuando el contenido se recorta.

Les comparto esto para que puedan ver los modos de escritura y las direcciones:
https://criniguez-curso-css-grid-layout.netlify.app/alineamiento/modos-escritura.html

Aqu铆 esta el reto:
![](

El c贸digo HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modos de escritura</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="wrapper">
        <div class="card writemode1">
            <div class="card__header">Direccin left to right</div>
            <div class="card__main">Horizontal top to bottom</div>
        </div>
        <div class="card writemode2">
            <div class="card__header">Direccin left to right</div>
            <div class="card__main">Vertical left to right</div>
        </div>
        <div class="card writemode3">
            <div class="card__header">Direccin left to right</div>
            <div class="card__main">Vertical right to left</div>
        </div>
        <div class="card writemode4">
            <div class="card__header">Direccin left to right 鍙炽亱銈夊乏銇搞伄鏂瑰悜CSS銈炽兗銈广伅銇ㄣ仸銈傝壇銇勩仹銇</div>
            <div class="card__main">Ambas left to right</div>
        </div>
        <div class="card writemode5">
            <div class="card__header">Direccin left to right 鍙炽亱銈夊乏銇搞伄鏂瑰悜CSS銈炽兗銈广伅銇ㄣ仸銈傝壇銇勩仹銇</div>
            <div class="card__main">Ambas right to left</div>
        </div>
        <div class="card writemode6">
            <div class="card__header">Direccin right to left</div>
            <div class="card__main">Horizontal top to bottom</div>
        </div>
        <div class="card writemode7">
            <div class="card__header">Direccin right to left</div>
            <div class="card__main">Vertical left to right</div>
        </div>
        <div class="card writemode8">
            <div class="card__header">Direccin right to left</div>
            <div class="card__main">Vertical right to left</div>
        </div>
        <div class="card writemode9">
            <div class="card__header">Direccin right to left 鍙炽亱銈夊乏銇搞伄鏂瑰悜CSS銈炽兗銈广伅銇ㄣ仸銈傝壇銇勩仹銇</div>
            <div class="card__main">Ambas left to right</div>
        </div>
        <div class="card writemode10">
            <div class="card__header">Direccin right to left 鍙炽亱銈夊乏銇搞伄鏂瑰悜CSS銈炽兗銈广伅銇ㄣ仸銈傝壇銇勩仹銇</div>
            <div class="card__main">Ambas right to left</div>
        </div>
    </div>
    
</body>
</html>

El c贸digo CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.5rem;
    font-family: 'Lato', sans-serif;
    width: 55rem;
  }
.card {
    background: #ffdada;
    width: 30rem;
    height: 15rem;
    border-radius: 1rem;
    overflow: hidden;
  }
  
  .writemode1 {
      direction: ltr;
      writing-mode: horizontal-tb;
  }

  .writemode2 {
      direction: ltr;
      writing-mode: vertical-lr;
  }

  .writemode3 {
      direction: ltr;
      writing-mode: vertical-rl;
  }

  .writemode4 {
      direction: ltr;
      writing-mode: sideways-lr;
  }

  .writemode5 {
    direction: ltr;
    writing-mode: sideways-rl;
}

.writemode6 {
    direction: rtl;
    writing-mode: horizontal-tb;
}

.writemode7 {
    direction: rtl;
    writing-mode: vertical-lr;
}

.writemode8 {
    direction: rtl;
    writing-mode: vertical-rl;
}

.writemode9 {
    direction: rtl;
    writing-mode: sideways-lr;
}

.writemode10 {
    direction: rtl;
    writing-mode: sideways-rl;
}

  .card__header {
    background: #dbf6e9;
    padding: 2rem;
  }
  
  .card__main {
    background: #9ddfd3;
    padding: 2rem;
  } 

aqui overflow esta mas que profundizado chequen : https://developer.mozilla.org/es/docs/Web/CSS/overflow

La propiedad Permite regular si los contenidos que sobresalen se seguir谩n viendo, si se ocultar谩n o si aparecer谩 una barra de scroll en el documento.

HTML

<div class="card">
	<div class="card__container">
		<p class="card__container__top">Curso de CSS Grid</p>
		<p class="card__container__left1">CSS Grid</p>
		<p class="card__container__left2">La Mejor Opci贸n</p>
		<img class="card__container__img" src="./images/css-grid-layout.png" alt="Grid Layout" />
		<p class="card__container__right">The Best Option</p>
		<p class="card__container__bottom">Ta muy bueno</p>
	</div>
</div>

CSS

$cellBackgroundColor: #dbf6e9;
$backgroundColor:#9ddfd3;
$borderColor: #05977c;

* {
	margin: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

.card {
	display: grid;
	place-content: center;
	height: 100vh;
}

.card__container {
	display: grid;
	grid-template-columns: auto auto 3fr auto;
	grid-template-rows: auto max-content auto;
	place-content: center;
	gap: 5px;
	width: 600px;
	height: 400px;
	padding: 20px;
	background-color: $backgroundColor;
	border: 1px solid $borderColor;
}

.cell {
	padding: 10px;
	background-color: $cellBackgroundColor;
	font-family: sans-serif;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
}

.card__container__top {
	@extend .cell;
	grid-area: 1/1/2/5;
   	font-size: 2rem;
    	font-weight: 900;
	letter-spacing: 0.2rem;
    	text-shadow: 0.2rem 0.2rem 0.6rem rgba(0,0,0,0.2);
}

.card__container__left1 {
	@extend .cell;
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-transform: uppercase;
	letter-spacing: 10px;
}

.card__container__left2 {
	@extend .cell;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.card__container__img {
	width: 100%;
	height: 100%;
}

.card__container__right {
	@extend .cell;
	writing-mode: vertical-rl;
}

.card__container__bottom {
	@extend .cell;
	grid-area: 3/1/4/5;
    direction: rtl;
    transform: scale(-1,1);
}

El modo escritura es otro modo de inclusi贸n. No sirve criticar, hay que celebrar la diversidad. 馃コ

鈥淐urso profesional de CSS Grid Layout鈥, clase 10 y a煤n no he obtenido nuevas skills en CSS Grid.

Que curioso eso de los modos de escritura, el art铆culo est谩 superinteresante, 100% recomendado su lectura.
隆El modo de escritura de los Mongoles est谩 tenaz!
Sin embargo, creo que lo principal que se puede sacar de esto, es que es 100% recomendado escribir de forma l贸gica y dejar las propiedades f铆sicas. Ayudar谩 bastante en proyecto de multilenguajes, aparte de ser un c贸digo mucho m谩s funcional.

El overflow hidden, tiene que ver con el scrol cierto? .

Un ejemplo son los mangas orignarios de Japon que se leen de derecha a izquierda.

Overflow: hiden
Overflow esto sirve por si tenemos texto grande en un contenedor chico. Lo que hara es simple, es solo mostrar el pedazo de texto que quepa en ese contenedor


reto completado

Me encantan las diapositivas de la profe, tienen una identidad muy marcada durante todos sus cursos, son geniales

Muy bueno el link que dejaste de Jen Simmons 馃憦

overflow quiere decir, exedente osea, que queremos hacer con el exedente, entonces la opci贸n de Hidden nos oculta ese exedente

Asi entendi para las Webs de japon! Increible!

Nunca habia pensando en eso y si en japon se escribe de derecha a izquiera y de izquiera top hacia abajo! wow!

Esta clase es importante para saber de donde vienen todas las propiedades de flex box y CSS grid. Nosotros en el sistema latin escribimos de izquierda a derecha, haciendo que el origen de nuestro navegador sea TOP-LEFT. Sin embargo hay otros sistemas de escritura

  1. left to right (latin)
  2. right to left(arabic)
  3. bi-directional (latin-arabic)
  4. vertical(asian charac.)

gracias a esto existe una propiedad llamada WRITING MODE. El cual tiene diferentes valores

  • Horizontal TB Nos indica que va del top al bottom, flujo horizontal. De izquierda a derecha pero nuestro flujo normal es de arriba para abajo Top to Bottom. no es apta para tables (row y column) | BFD (block flow direction) vertical
  • Vertical LR 鈫 BFD (block flow direction) vertical
  • vertical AL 鈫 BFD (block flow direction) vertical
  • sideways LR 鈫払FD (block flow direction) vertical
  • sideways RL鈫 BFD (block flow direction) vertical

Hay que tener en cuenta el modo de escritura, la direcci贸n y la orientaci贸n del texto.

Para eso existen dos conceptos llamados

  • Block flow direction | vertical
  • inline base direction 鈫 horizontal

Es importante revisar el tema de CAN I USE para ver si es compatible con los diferentes navegadores.

Direction.

Left to Right y Right to Left son algunas de las propiedades de writting mode y se ve muy aplicado en flexbox y CSS grid.

Para flexbox est谩:

display:flex
flex-direction: 
row /*fila */ column /*columna */
justify-content: flex-start /*izquierda a derecha */| 
flex-end /*derecha a izquierda*/

para CSS grid ser铆a

/*columnas*/
display:grid;
grid-column-start:1;
grid-column-end:2;
/*shorthand*/
grid-column:1/2;
/*row*/
grid-row-start:1;
grid-row-end:2;
/*shorthand*/
grid-row:1 / 2;

Bueno, ahorita har茅 el reto JEJEJE

La propiedad CSS overflow especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque. Con hidden
El contenido es recortado y no se muestran barras de posici贸n.

Esto realmente si lo desconcia totalmente, Excelente clase 馃敟

Ni sabia que existian values

it鈥檚 very interesting all about the writing mode,鈥 it is normal not thinking about it, because i has rarely made a web for a different country where it鈥檚 necessary this kind of mode, the overflow hidden it鈥檚 an amazing tool, if you can pull out all the advantages, your web site it鈥檚 gonna be more didactic

La propiedad 芦overflow禄 permite recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento.

Con 芦overflow: hidden;禄: El contenido es recortado para encajar dentro del contenedor en el que se encuentra.

CSS Direction

direction: [ ltr | rtl | inherit ]

Writing mode

Esta clase me ha volado la cabeza 馃くwow, nunca hab铆a pensando en todo lo relacionado al modo de escritura!!

En el tipo de escritura "Vertical RL (Right Left)" se escribe verticalmente (de arriba hacia abajo) empezando por el lado derecho y cuando se termina la l铆nea, se pasa a la izquierda. Por esta raz贸n el BFD va de derecha a izquierda, para que se entienda mejor comparalo con nuestro modo de escritura, el cual es "Horizontal TB (Top`Bottom)". Nosotros escribimos de izquierda a derecha empezando de arriba hacia abajo, entonces el BFD es de arriba hacia abajo.

El Block Flow Direction (BFD) fluye de abajo hacia arriba en el tipo de escritura "Horizontal TB (Top Bottom)". Se refiere a que los elementos de tipo bloque van listarse de arriba hacia abajo seg煤n se vayan creando. Algo similar sucede con el "Vertical RL" y el "Vertical LR"

El BLOCK FLOW DIRECTION y el INLINE BASE DIRECTION se basan en tres cosas importantes: writing mode, direction y text orientation.

El BLOCK FLOW DIRECTION y el INLINE BASE DIRECTION se basan en tres cosas importantes: writing mode, direction y text orientation.

La propiedad Overflow se traduce como excedente, con el valor hidden lo que hacemos es ocultar el contenido que se excede de un contenedor para que este no se sobrepase.

Mi humilde contribuci贸n:

Creo que este curso esta MUY bueno pero, es como para verlo 2 veces. Hay mucha informacion y te vuela la cabeza. 馃く

me acabo de quedar como ahhhhhhhhhhhhhhhhhhhhhhh

PROPIEDAD OVERFLOW
La propiedad overflow permite regular la visiblidad de los contenidos que sobresalen de una caja html.

Permite regular si los contenidos que sobresalen se seguir谩n viendo, si se ocultar谩n o si aparecer谩 una barra de scroll en el documento.

Los valores que puede tomar son:
overflow:hidden; scroll; visible;

Aun no entiendo que debe hacer el

sideways-lr / rl

馃馃

No las conocia en absoluto :0
Y ya tengo ideas como usarlas en dise帽os locos.

Reto鈥

overflow:hidden
Es utilizado para que todo el contenido sobrante de una caja no sea visible.

Jugando me doy cuenta de que cuando aplico, claramente el texto va de derecha a izquierda

/*overflow: hidden;*/
direction: rtl;
/*writing-mode: vertical-rl;*/

cuando le aplico el overflow: hidden, este vuelve a su estado normal sin importar si le aplico la propiedad wriing-mode o direction, sin embargo si aplico wriing-mode: vertical-rl; o wriing-mode: vertical-rl; y direction: rtl; tambien sigue sin ocurrir nada, tengo que dejar alguno de estos 2 para que surta efecto.

Si aplico

  /*overflow: hidden;*/
  /*direction: rtl;*/
  writing-mode: vertical-lr;
}
  /*overflow: hidden;*/
  /*direction: rtl;*/
  writing-mode: vertical-rl;
}

En pocas palabras creo que el overflow: hidden es una propiedad muy especial 馃.

En las practicas que hab铆a hecho no me hab铆a topado con esto, ahora se abren muchas m谩s posibilidades.

En mi vida hab铆a escuchado hablar de esta propiedad. Esta s煤per genial 馃く.

Adicione tres lineas de codigo a .card:
text-orientation: upright; (para orientar la letra)
letter-spacing: 5px; (espaciado entre las letras)
text-transform: uppercase; (mayusculas)

Modos de escritura Css y textos en vertical con writing-mode

Una peque帽a introducci贸n al documento 鈥淐SS Writing Modes鈥 (status Candidate Recommendation) sobre la orientaci贸n de los textos en aquellos aspectos aplicables a nuestra forma de escribir. Dde izquierda a derecha y de arriba a abajo es lo habitual en nuestro modo latino. Pero ah铆 fuera existen otros.

El modo o forma de la escritura en Css se controla con tres propiedades que act煤an sobre los flujos (orientaci贸n) o forma de componerse del texto:

馃煚 Inline base direction el flujo en las l铆neas de texto. Dos direcciones posibles: horizontal y vertical. Y en cada una de ellas dos sentidos: de izquierda a derecha o viceversa y de de arriba a abajo o contrario. Es controlado por la propiedad direction con la ayuda de unicode-bidi.

馃煚 Block flow direction o c贸mo crece el bloque de textos. Esto es, c贸mo se organizan las l铆neas sucesivas respecto a las anteriores. La propiedad Css encargada es writing-mode.

馃煚 Line orientation controlado por la propiedad text-orientation. Controla la orientaci贸n de cada car谩cter o glifo del texto en su l铆nea.

馃敻馃敻Les dejo el articulo completo y un bonus de informaci贸n extra馃敻馃敻
https://escss.blogspot.com/2013/03/escritura-vertical-writing-mode.html
https://medium.com/@SusCasasola/el-futuro-de-css-modos-de-escritura-propiedades-y-valores-l贸gicos-a9c4bcaae5a1

Gracias a clases como estas es que uno dice que vale la pena invertir en Platzi 馃挌 Ya he visto algunas cosas en internet sobre CSS, pero en ning煤n lado explican esto y as铆 es como deber铆a ser, saber bien lo que se hace para que despu茅s aplicarlo sea m谩s f谩cil y a uno se le ocurran distintas maneras de dar soluci贸n a algo. 隆Genial!

El overflow hidden funciona para que lo que se salga de nuestro contenedor padre cuando usamos propiedades como position absolute dentro de un position relative no aparezca, es decir, no se ven. Les voy a dejar un ejemplo de uncompa帽ero llamado Jose Alberto del curso de Responsive Design

Como pueden ver donde dice recomendado se ve cortado conforme a la forma del contenedor

La definici贸n de estilo 鈥渙verflow: hidden鈥 oculta el estilo excedente y las barras de desplazamiento.

Muy interesante, no conoc铆a estas propiedades

Para entender como funciona la propiedad de overflow, primero tenemos que saber que significa esto. En espa帽ol overflow es desbordamiento. Eso significa que en una etiqueta puede haber un desbordamiento de informaci贸n, lo que provoca una muy mala experiencia para el usuario. Sabiendo esto, lo 煤nico que hay que saber despu茅s es que hidden quiere decir oculto, lo que significa que una vez que haya un desbordamiento, esto no se va a ver. Aunque usar esta propiedad tambi茅n va a causar una mala experiencia al usuario.

The writing-mode property specifies whether lines of text are laid out horizontally or vertically.

Primera vez que escucho de los modos de escritura, que interesante la complejidad que puede llegar a tener CSS

Direction: ltr; 鈥> Texto de izquierda a derecha.
Direction:rtl; 鈥> Texto de derecha a izquierda.

En relacion a los display: block & inline. Tambi茅n existe uno que se llama inline-block. El cual nos permite combinar las mejores propiedades de estas dos. Es muy recomendable usar esta propiedad.

Hay un peque帽o detalle sobre esto

La propiedad overflow: hidden oculta el texto que sobresale del contenedor

Contento de ahber aprendido sobre overflow, direction y writing-mode

.card {
  background: #ffdada;
  width: 350px;
  height: 150px;
  border-radius: 10px;
  overflow: visible;
  direction: rtl;
  writing-mode: vertical-rl;
}
.card__header {
  background: #dbf6e9;
  padding: 20px;
}
.card__main {
  background: #9ddfd3;
  padding: 20px;
}

![](

muy interesante

Direction: Seg煤n yo esta propiedad es definir en que sentido va el texto, izquierda a derecha (ltr) o derecha a izquierda (rtl). Por default esta en ltr

Writing mode es un poco mas complicado, ya que esta influye en la direcci贸n en la que van los boques. y tenemos 5 propiedades.

Verificar si tu funcionalidad es soportada por los navegadores:
https://caniuse.com/flexbox

,

Nota: Revisando la documentaci贸n sobre la propiedad writing-mode, los valores de sideways-lr y sideways-rl s贸lo son compatibles en Firefox 馃
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode#browser_compatibility

si tenemos dudas de donde salen todas estas propiedades lean este articulo esta padre https://24ways.org/2016/css-writing-modes/

Del quiz: es border-block-start Sale f谩cil asociar [block] con arriba y abajo, [inline] con los costados. y [start] con las posiciones top y left

Gran material. Es un curso muy bueno.

Me encanta que en el titulo de la clase a帽ada el + Reto, porque as铆 se que debo prestar mucha m谩s atenci贸n para no estar volviendo a ver la clase.

Muy curioso el tema de los modos de escritura, no se me habia ocurrido, pero es verdad.

Quiza el tema se pudo a ver hablado en el curso de especifcidad pero no.

Wow鈥 eso del writing-mode no lo sab铆a y es bastante interesante.

Lo de los modos de escritura realmente me sorprendi贸. Esta muy interesante.