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 antes 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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Modos de escritura y ejes de alineamiento + Reto

10/28
Recursos

Aportes 108

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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,

M谩s claro imposible 馃槈

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

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.

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.

Podemos olvidarnos de todo y hacer todo Horizontal TB?

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

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

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 馃槈馃槈馃挌

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.

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. 馃槷

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;
  } 

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.

Hola a todos, encontr茅 documentaci贸n acerca de la propiedad direction. Seg煤n la documentaci贸n oficial no se recomienda usar direction como modificador de un elemento, se recomienda usar en la etiqueta html el atributo dir para cambiar el texto.

Nosotros como hispanohablantes y que usamos el alfabeto latino, solamente creo que algunos pa铆ses asi谩ticos usan otros alfabetos, usualmente escribimos de izquierda a derecha, solamente al alfabeto 谩rabe escribe de derecha a izquierda (pueden corregirme si existe alg煤n otro que escriba de derecha a izquierda)

En fin, por defecto, el atributo dir trae por defecto el valor ltr. Si revisan la p谩gina de Wikipedia en 谩rabe, podran inspeccionar que en la etiqueta html viene la propiedad con el atributo dir: rtl.

Que desastre como explica esta profesora!

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!

Me quedaron claros los conceptos, pero he de pasar una tarde jugando con ellos.

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

Mi humilde contribuci贸n:

Esto realmente si lo desconcia totalmente, Excelente clase 馃敟

RETO CUMPLIDO 鉂わ笍

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

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. 馃コ

RETO!

Hola! Comunidad de Platzi, les comparto un peque帽o repositorio en el cual construyo @mixins para el preprocesador Sass en diferentes m茅todos y direcciones de escritura los cuales solo tienen que ser llamados y aplicarse en los estilos de texto.

Repo <鈥
GitHubPages <鈥

Pues si esta complejo xd

RETO:)

隆Excelente clase! No ten铆a ni idea que el Writing Mode exist铆a en la web.

B谩sicamente, overflow: hidden, oculta los elementos que se salen del contenedor padre, tanto en vertical, como horizontal.
Precauci贸n, si das tama帽os fijos a los contenedores o al contenido del contenedor que tiene overflow hidden, por ejemplo cuando aplicas un box shadow no se va a mostrar el efecto.

Los modos de escritura es bastante importante para poder conocer de donde vienen ciertas propiedades que ya conocemos como Flexbox y como CSS Grid

Con los temas anteriores debemos manipular bien el tema de 鈥減ositions鈥 o 鈥減osiciones鈥 tales como:

  • top
  • left
  • right
  • bottom

Ahora, con respecto a los modos de escritura todo cambia, como por ejemplo en sistema lat铆n escribimos de izquierda a derecha y por eso el origen nuestro navegador es el 鈥渢op-left鈥; sin embargo, hay otros sistemas de escritura

No solo existe el lat铆n, hay otros y dependiendo de eso van a escribir de una forma completamente diferente, por ejemplo, podemos escribir:

  • de derecha a izquierda
  • de arriba hacia abajo
  • etc.

Gracias a estos tipos de escrituras surge una nueva cosa que se conoce como 鈥淲riting Mode鈥, este 鈥淲riting Mode鈥 va a tener diferentes valores, por ejemplo:

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

Pero, que significan cada uno de estos, por ejemplo, el TB, es decir, el primer valor (Horizontal TB) indica que va del 鈥淭op鈥 al 鈥淏ottom鈥, es decir que nuestro flujo es horizontal, es decir que escribimos de izquierda a derecha, sin embargo, cuando terminamos de escribir seguimos abajo, entonces escribimos de izquierda a derecha, pero nuestro flujo normal es de 鈥渁rriba鈥 para 鈥渁bajo鈥 (Top-Bottom), y gracias a esto tenemos diferentes valores diferentes formas de 鈥渋zquierda a derecha鈥, de 鈥渄erecha a izquierda鈥, eso es lo que nos indica esas dos 煤ltimas letras (Top, Bottom, Left, Right).

NOTA: Esta propiedad no es apta para tablas y row y column, es decir, para todo el resto menos para el tema de tablas.


Algo bien importante a tener en cuenta es:

  • el modo de escritura,
  • la direcci贸n y tambi茅n
  • la orientaci贸n del texto

Para eso hay dos temas bastante importantes que son 鈥淏lock鈥 e 鈥淚nline鈥, es decir de 鈥渂loque鈥 y de 鈥渓inea鈥

Estos temas de Block y de Inline son simplemente para poder tener una direcci贸n como lo vemos en la imagen, entonces esa direcci贸n depende de:

  • Si es en 鈥渂loque鈥
  • O en 鈥渓inea鈥

Entonces, si es en 鈥渂loque鈥 ser谩 en 鈥渧ertical鈥 y si es en 鈥渓inea鈥 ser谩 鈥渉orizontal鈥

Por ejemplo:

Si hablamos de un <div>, un <div> tiene la propiedad por defecto 鈥渂loque鈥, esto que quiere decir que cuando nosotros colocamos un <div> despu茅s de otro, estos se organizaran de forma vertical, tal cual ser铆a un <div> debajo de otro <div>, es decir, ser谩 de arriba hacia abajo.

Ahora, si hablamos de un <input>, que sucede con un <input>, esta etiqueta tiene por defecto la propiedad de 鈥渆n l铆nea鈥, al igual que <input> tambi茅n est谩 la etiqueta <span>, cualquiera de las etiquetas de HTML que sean por defecto 鈥渋nline鈥, si los colocamos los vamos a tener como si fueran un texto, es decir cuando tenemos un texto tenemos diferentes palabras va seguido uno del otro y va a tener un peque帽o espacio cada vez que haya una continuidad con los otros elementos. Entonces estos elementos est谩n seguidos uno del otro (<input>, <span>), de ah铆 viene el nombre de 鈥渋nline鈥, ya que ser谩 en orden horizontal.

Ahora, una vez que identificamos como es que trabajan todos estos elementos por defecto, cuando tenemos un 鈥渄isplay: block;鈥 o un 鈥渄isplay: inline;鈥, ahora seremos m谩s conscientes de como es el flujo o la direcci贸n en este sentido que son 2 conceptos bastante interesantes, aqu铆 tenemos los diferentes modos de escritura:

  • Horizontal TB
  • Vertical RL
  • Vertical LR

NOTA: 鈥淏lock Flow Direction鈥 (BFD)

Valores desconocidos

Existen valores desconocidos o que no se sabe las formas de escritura que son por ejemplo este 鈥渟ideways鈥

El flujo normal de este documento va de 鈥渄erecha a izquierda鈥 o de 鈥渋zquierda a derecha鈥, muy parecidos al 鈥淰ertical RL鈥 sin embargo, el texto se va orientando de forma completamente diferente y como ya se va orientando de forma diferente, pues entramos a otra propiedad que es la de 鈥渄irection鈥

NOTA: Recordar siempre la compatibilidad con todas las propiedades de los diferentes navegadores en los que se est谩 desarrollando.

Flujo de bloques:

display: block; // -> vertical
display: inline-block; // -> horizontal

Apenas empiezo en platzi, cuanto tiempo deje de aprovechar por no conseguir la suscrip antes :3 ahora s铆 a Darle duro!

overflow: hidden ----> GOT IT !

overflow: hidden sirve para ocultar el contenido que desborda a un elemento padre contenedor.

Wow, esto no lo sab铆a, es curioso y es bueno saberlo para cuando lo necesite, utilice estos valores y no haga cosas locas con css para hacer el mismo efecto.

Llev茅 un buen rato que no entend铆a porqu茅, pero cuando cambie de navegador (de CHrome a Firefox) reci茅n se aplicaron los cambios

Reto, chevere

鈥淐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!

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.

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.

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

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