Conectarse

Recuperar mi contraseña

Últimos temas
» Lock [ID] -En construcción-
Hoy a las 5:05 pm por Lock

» Calipso H. Hikmet [ID]
Hoy a las 5:05 pm por Iorun Voldaren

» ¿Qué le regalarías al de arriba?
Hoy a las 4:23 pm por Dzahui

» [JUEGO] Cuenta hasta 10 antes de besar
Ayer a las 11:54 pm por Daichi Hirashuki

» Normas del Foro [Zona de Firmas]
Ayer a las 11:34 pm por Lock

» Kao Hong en proceso
Ayer a las 10:42 pm por Kao Hong

» Hyakuya Mikaela ✰ #id ;
Ayer a las 2:52 pm por Hyakuya Mikaela

» Thousand Arabian Nights
Ayer a las 11:57 am por Neylan Hasret

» ✧ Taller libre ✧
Ayer a las 11:02 am por Andreas

» Contra-Natura: The Rebeld Goat
Ayer a las 10:30 am por Andreas

» Registro de temas cerrados
Ayer a las 7:56 am por Ice Bear

» [JUEGO] Cambia la raza
Ayer a las 6:28 am por Yomi Giou

» ¿Cómo te sientes en este momento? ¡Pon una imagen!
Ayer a las 6:14 am por Amil

» AMIL -ID-
Ayer a las 5:34 am por Amil

» Registro de Trabajos [Para Pets y Amos]
Ayer a las 1:28 am por Aether

afiliados

Hermanos

Sailor Moon Sacrifice

Directorio


Élite

counting ★ starsLittle FearsWithout Place

Roles Temáticos

29/04 Un Mundo de Barro.
Un viaje a un mundo paralelo, donde todos los humanos han desaparecido.

20/05 Leyenda de Excálibur
La parte 3 de esta aventura.

00/00 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris viverra semper quam ac.

Calendario CB

Lotería de San Valentín

¡La primera lotería en Loving Pets! Junta tus Puntos LP ¡y compra un ticket! Nunca sabes cuándo puedas ganar.

Leer más

La Isla Loving Pets

El Foro

19.04.18 Cambio de Dominio
Información

28.02.18 Un nuevo staff para Loving Pets
Información

28.02.18 Actualización anual de fichas
Novedad

27.11.17 El Retorno de algo Perdido
Anuncio

22.05.17 Reapertura
Anuncio

16.05.17 ¡Daily Pets busca nuevos escritores!
Anuncio

14.05.17
Slider|Tablón de Anuncios
Guía de Usuario

Primavera

Tº: 10º - 27º
Días agradables parcialmente nublados y brisas suaves. Todo florece.


[Nuevo] Taller de "diseño"

Ver el tema anterior Ver el tema siguiente Ir abajo

[Nuevo] Taller de "diseño"

Mensaje por Flann el Vie Oct 16, 2015 12:42 am

taller
ler
tal

er

Taller de CSS | HTML
por Flann
Hey!
Bienvenido/a
este es mi nuevo taller

Y como dice el título, es un taller de CSS y HTML.

La idea de este taller, no es sólo realizar pedidos de parte de ustedes, sino enseñarles de manera algo básica, el poder hacer uso de html y css. Ya que sé que muchos buscan "códigos/planillas", y no siempre hallan algo de su gusto. Y menos aún si no saben cómo editarlo para que quede bien.

Sin embargo, como saben, todo tiene excepciones. Yo no voy publicar pedidos que no deseen que se publiquen. Se los mandaré por MP. ¿Por qué? Porque primero:
No es como en Photoshop sólo entrar y arrojar filtros, capas y demases para que quede bien. Toma tiempo. Y por ende, al ser este sub-foro visible para todo aquel que visite el Foro de Loving Pets! (incluyendo Invitados), prefiero mantener ciertos pedidos al nivel personal.

Y segundo:
Creo que si alguien me hace un pedido, prefiero que quede para esa persona, y no que llegue fulanitoquenadieconoce y se lo lleve para apropiárcelo, cuando fue realizado para alguien en específico.

Pero aquellos que deseen que les explique el cómo realicé el código que me han pedido, haré un tutorial para todos. Para que así sea más de enseñanza, y no de simple "robo".
¡Ahora!
las normas

NO
- aceptaré más de 3 pedidos cada 2 semanas (a menos que me desocupe antes, ahí daré aviso de que tengo tiempo).

- me apresuren, por favor. A menos que quieran que salga algo horrible y pobremente programado. Además, a veces estoy sumamente ocupada, y ni siquiera tengo tiempo de conectarme o abrir un navegador.

- me den pedidos de "No sé, tú piénsalo". Yo no leo las mentes, no sé qué quieren a menos que me lo digan.

- me hagan pedidos que no sean para el foro. Sólo haré "planillas/códigos" que sean para Loving Pets! y sus respectivas normas.

- y ni se les ocurra, entregarme un código con créditos de otra persona. Porque no se los aceptaré.
- aceptaré explicaciones hechas en paint. Mientras más dibujos me den, ¡mejor!

- aceptaré que me muestren referentes, ya sea de páginas web, tipográficos, cosas publicitarias que hayan visto, etc.

- exijo que me entreguen una paleta de colores. Sino, yo trabajaré con la mía, que es similar a la de Windows 8. Eso, y las fuentes que deseen que ocupe.

- si* quieren que su pedido sea un tutorial, por favor tener paciencia. Ya que subiré el pedido al momento de tener todo el tutorial hecho. (Si quieren la explicación de algo muy puntual, entonces será por MP)

- aceptaré MPs para los pedidos, si es que quieren explayarse lo mejor posible para que yo pueda entender su pedido.

- subiré un screenshot del resultado de los pedidos. Quizás no suba el código, pero sí el SS de lo que hice, para que los demás tengan una idea aproximada de lo que hago.
eso es todo por ahora
Gracias por tomarse el tiempo de leer
Todo el contenido de este post, está hecho en html y css


Última edición por Flann el Lun Oct 24, 2016 2:53 am, editado 2 veces
Flann
avatar
General
Abandonado


Mensajes : 221

Fecha de inscripción : 23/09/2014

Volver arriba Ir abajo

Re: [Nuevo] Taller de "diseño"

Mensaje por Yoku el Vie Oct 16, 2015 1:16 am

Holiis!! Gracias, muchísimas gracias por este taller... Eso lo primero... Segundo es que voy a hacer mi pedido -te mando por mp un dibujo para que explique la idea que tengo (si es posible hacerse)- y te dejo aviso aquí con las gracias correspondientes -sí, de nuevo- y de paso avisar que si puedes hacer que sea un tutorial (o al menos un resumen de cómo lo hiciste; sobre todo la parte como dices de "añadir cosas" que suele ser lo más liante) Y por supuesto toma el tiempo que necesites!!! Muchas gracias!!!
Yoku
avatar
General
Abandonado


Mensajes : 37

Fecha de inscripción : 01/10/2015

Volver arriba Ir abajo

Tutorial Nº1

Mensaje por Flann el Vie Oct 16, 2015 5:41 pm

Hey.

El primer pedido realizado por Yoku, corresponde a también un tutorial, de ésto:
(dejaré estos posts sin programación html y css, para no acabar deformando todo. Eso, y que éste será el tutorial más largo de todos, para aclarar desde lo más básico)


Texto
Texto
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec cursus nibh. Nam suscipit, augue ac condimentum volutpat, nibh nibh dictum orci, at finibus metus lectus rutrum eros. Nulla vitae mauris a urna vehicula malesuada. Duis tellus ipsum, eleifend ac tellus tincidunt, rutrum pretium felis. Nulla efficitur risus eu vehicula scelerisque. Aenean maximus turpis a nulla lacinia, vel iaculis ipsum sollicitudin.

Quisque tortor nisi, finibus ac dictum at, tristique vel massa. Integer porttitor et dui sed laoreet. Cras bibendum faucibus erat, nec tincidunt sapien interdum sed. Donec mi urna, tincidunt sed arcu at, vehicula iaculis enim. Morbi sodales elit vel viverra sodales. Duis tellus elit, ornare a nunc tempor, vehicula facilisis felis. Pellentesque ultricies, magna eu pellentesque faucibus, est dui commodo arcu, in posuere magna lacus in leo. Morbi sed eros metus. Praesent malesuada lectus non nisi tristique laoreet. Duis gravida posuere metus, id elementum est luctus id.Integer pharetra risus quis sapien sodales, a egestas turpis ultricies. Fusce a mauris in sem consectetur suscipit in nec velit. Morbi sit amet mollis mi. Proin vehicula felis non elit sollicitudin, a dictum purus pellentesque. Praesent sit amet tincidunt velit.

Curabitur tincidunt congue ante at euismod. Aliquam feugiat nibh in quam molestie maximus. Sed sollicitudin blandit gravida. Integer turpis lectus, ornare interdum aliquam non, bibendum sit amet justo. Curabitur est mi, congue ac elit nec, consequat congue urna.Fusce id elit vitae orci vulputate mollis. Aliquam quis pharetra ligula. Sed iaculis sem nec lectus cursus sollicitudin. Cras eleifend faucibus lacinia. Donec facilisis id odio nec porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;Morbi accumsan nisl ipsum, non sagittis neque dapibus id. Suspendisse interdum ligula non sapien lacinia dapibus.
Texto


Código:
<style>.main_cubic {width:500px;height: 600px;font-family: Calibri, Sans-serif !important;}.cubic_tiny {position: relative;top: 75px;left: 30px;width: 150px;padding: 10px;border-radius: 10px;z-index: 1;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}.cubic {text-align: center !important;padding: 5px;}.cubic_big {width: 325px;height: 325px;padding: 50px;border-radius: 10px;position: relative;z-index: 2;top: 0;margin: 0 0 0 50px;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}.main_cubic:hover .cubic_tiny{left: 0;top: 25px;}.main_cubic:hover .cubic_big, .main_cubic:hover .contenedor{top:25px;}.cont_01 {width: 100%;height: 100%;overflow: auto;}.contenedor {width: 500px;margin-top: -100px;position: relative;z-index: 4;top: 0; transition-property: opacity, top;transition-duration: 1s, 1s;transition-delay: 1s, 0.3s;opacity: 0;}.main_cubic:hover .contenedor{opacity: 1;}.text_01{width: 200px;background: #630047;padding: 15px;border-radius: 10px;float:left;margin-top: 50px;text-align: center !important;font-size: 25pt;}.circle_01{width: 200px;height: 200px;border-radius: 100%;float:right;background: #3c115e;background-image: url('');}.cubic_tiny, .cubic_big {background: #2F0B3A;}.cubic, .cont_01 {background: #f3e2a9;}</style>
<div class="main_cubic"><div class="cubic_tiny"><div class="cubic">Texto</div><div class="cubic" style="margin-top: 10px;">Texto</div></div><div class="cubic_big"><div class="cont_01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec cursus nibh. Nam suscipit, augue ac condimentum volutpat, nibh nibh dictum orci, at finibus metus lectus rutrum eros. Nulla vitae mauris a urna vehicula malesuada. Duis tellus ipsum, eleifend ac tellus tincidunt, rutrum pretium felis. Nulla efficitur risus eu vehicula scelerisque. Aenean maximus turpis a nulla lacinia, vel iaculis ipsum sollicitudin.

Quisque tortor nisi, finibus ac dictum at, tristique vel massa. Integer porttitor et dui sed laoreet. Cras bibendum faucibus erat, nec tincidunt sapien interdum sed. Donec mi urna, tincidunt sed arcu at, vehicula iaculis enim. Morbi sodales elit vel viverra sodales. Duis tellus elit, ornare a nunc tempor, vehicula facilisis felis. Pellentesque ultricies, magna eu pellentesque faucibus, est dui commodo arcu, in posuere magna lacus in leo. Morbi sed eros metus. Praesent malesuada lectus non nisi tristique laoreet. Duis gravida posuere metus, id elementum est luctus id.Integer pharetra risus quis sapien sodales, a egestas turpis ultricies. Fusce a mauris in sem consectetur suscipit in nec velit. Morbi sit amet mollis mi. Proin vehicula felis non elit sollicitudin, a dictum purus pellentesque. Praesent sit amet tincidunt velit.

Curabitur tincidunt congue ante at euismod. Aliquam feugiat nibh in quam molestie maximus. Sed sollicitudin blandit gravida. Integer turpis lectus, ornare interdum aliquam non, bibendum sit amet justo. Curabitur est mi, congue ac elit nec, consequat congue urna.Fusce id elit vitae orci vulputate mollis. Aliquam quis pharetra ligula. Sed iaculis sem nec lectus cursus sollicitudin. Cras eleifend faucibus lacinia. Donec facilisis id odio nec porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;Morbi accumsan nisl ipsum, non sagittis neque dapibus id. Suspendisse interdum ligula non sapien lacinia dapibus.</div></div><div class="contenedor"><div class="text_01">Texto</div><div class="circle_01"></div></div></div>

Empecemos por lo básico. Creando nuestro primer cuadro inicial, que contendrá todo, o parte de todo lo que habrá ahí (en este caso, todo, para que nada se desparrame y sepamos que está en ese cuadro).

Código:
<div style="width: 500px; height: 600px;background:white;"></div>


Byotifol

Un burdo cuadrado. ¿Por qué blanco? Para poder diferenciarlo de todo el resto del foro. El color cualquier color básico a tus recuadros, ayuda a que puedas diferenciarlos entre sí, en caso de que estén muy juntos, o no sepas el dónde aparecieron. Aunque no son los colores más bonitos, la lista es simple: white, black, red, blue, pink, green, purple, etc. Nada asombroso de ellos.

Explicando lo básico y simple de nuestro cuadro blanco.
< div>< /div> (sin el espacio) es que simplemente dice "aquí hay algo editable llamado div", que básicamente corresponde a tus "cuadros". Estos son una real molestia. Porque son los que más hay. Si te sobra o falta uno, arruinarás toda la programación del foro. Así que ten cuidado
style="" es la manera en que el código "llama" a su "diseño", si no lo colocas, todo será un caos, y siempre debe de ir el código de diseño en el interior de las dobles comillas
width: 500px; corresponde al ancho del cuadro
height: 600px; corresponde al alto del cuadro
background: white; corresponde al fondodel cuadro

NUNCA
- Dejes estos códigos sin ";" al final. Sino, no se podrá leer el código (ya me sucedió mientras hacía el tutorial, y me cuestionaba el porqué no aparecía el cuadrado blanco)
- Separar el código por espacios de Enter, ya que FA es exquisito y obliga a que todo esté junto y pegado, separado, a lo más, por un espacio de la barra de espacio
- Escribir con mayúsculas, a menos que sea el código hexadecimal de los colores (es la forma más conocida de poner los colores en web, es el color que aparece con "#" y luego el resto)

Ésto es algo apresurado, pero es la forma más fácil de mantener orden entre lo que estás "diseñando" y el orden del contenido.

Código:
<style>.main_cubic{width: 500px; height: 600px;background:white;}</style><div class="main_cubic"></div>



Sí, es exactamente lo mismo. Y se preguntarán, ¿para qué entonces hago eso? Varias razones. Primero, como dije, mantener un orden. Segundo, podrán realizar los efectos que pueden ver. Si no hacen uso de "< style>" no podrán hacer las transiciones de opacidad, movimiento, rotaciones, etc. Y tercero, si tienes mucho contenido que se repite constantemente, y tienes que estar copiando y pegando el mismo código una y otra vez, pero cuando te das cuenta que algo está mal, tienes que editar uno por uno, pues ésto te ayuda a simplificarlo. Ya que estás nombrando a tus div, span, p, etc, de tal manera dices "Este, este y este otro, se llaman así, y por ende, son todos iguales".

< style>< /style> le está diciendo a la programación "aquí hay diseño, no contenido, léelo como diseño y no como contenido"
.main_cubic {} al igual que el div y su style, es el inicio que dice "hey, así me llamo, y así será el cómo luzco". El punto antes del nombre (que puede ser cualquiera, sólo ten cuidado de no usar justo uno que ya se esté ocupando en el foro, y arruines el código de éste) indica que es una "clase", y por ello puedes usar:
class="" a diferencia de style="", aquí sólo va el nombre de tu div, span, p, etc. El punto antes del nombre, aquí no va, tener cuidado con eso.
id="" a pesar de que aquí no lo he utilizado, ni utilizaré, toma el mismo objetivo de class, sin embargo, la diferencia es que id también sirve para suponer "links", ¿a qué me refiero con ésto? Que por ejemplo, pones en una misma página un link a "#caja", buscará la ID que se llame caja, así que si tu div se llama id="caja", de inmediato el navegador te llevará a ese lugar

Código:
<style>.main_cubic {width:500px;height: 600px;font-family: Calibri, Sans-serif !important;background:white;}.cubic_tiny {width: 150px;padding: 10px;border-radius: 10px;background:red;}</style><div class="main_cubic"><div class="cubic_tiny">Yesh</div></div>

Yesh


Ahí tenemos nuestro primer div que sí será visible. En un bello y tóxico rojo. Con nombre de cubic_tiny (nunca ocupar espacios en los nombres), que estará dentro de nuestro main_cubic, será de 150px de ancho y no tendrá alto fijo, ya que en este caso no será necesario. Ya que deberá de acomodarse al contenido que tendrá después.

Más cosas a las cuales nos enfrentamos:
font-family: Calibri, Sans-serif !important corresponde a la fuente/tipografía que vas a usar, recuerda utilizar una tipografía de sistema (o instalada desde la web, posteriormente explicaré este punto*) o nadie más podrá ver tu tipografía tan especial que descargaste para usar en tu pc/mac. Pero eso no es todo lo que hay, sino que también está !important, que es una característica especial, no de esta opción de fuente en específico, sino que puedes utilizarla en todo lo que programes en css. ¿Para qué sirve? Literalmente hace que el navegador diga "Oh, ésto es importante, debo de leerlo por sobre todo lo demás", por lo que si un foro tiene algo que pareciera que no puedes cambiar, le pones !important a un lado, y listo (si no funciona, es porque hiciste algo mal, o esa función no sirve).
padding: 10px; éste genera un excedente de tu div, pero con el mismo fondo, donde y el contenido se moverá por debajo de ese "relleno", es casi como un borde pero sin tener que usar border para generar ese relleno. Lo especial de padding, es que, al igual que muchos otros "comandos", puedes usar padding, o padding-left, padding-top, padding-right y padding-bottom, dependiendo de qué es lo que quieras hacer. El beneficio de usar directamente padding, es que te ahorras escribir tanto. Es algo complicado de entender, pero enseguida se los explico.
Código:
<div style="width: 50px;padding: 25px;background: red;">Cuadro1</div>
<div style="width: 50px;padding: 25px 10px; background: pink;">Cuadro2</div>
<div style="width: 50px;padding: 25px 10px 15px 30px; background: purple;">Cuadro3</div>
Cuadro1

Cuadro2

Cuadro3


Como ven, el "relleno" varía.
En el Cuadro 1, padding con sólo una cifra (que puede hasta ser porcentual, en pt o em que son distintas formas de medidas), se añaden 4 rellenos del mismo grosor/altura.
En el Cuadro2, padding con sólo 2 cifras, la primera afecta a arriba y abajo, la segunda afecta a la izquierda y derecha.
En el Cuadro3, y tomen nota, son 4 rellenos distintos, que en orden respectivo, de izquierda a derecha afectan a: arriba, derecha, abajo e izquierda.

border-radius: 10px; es el mágico "redondeador de cuadrados". Al igual que el padding, funciona con px, pt, % y em. Y también tiene la diferencia que puedes querer editar sólo uno, pero en vez de border-top-radius, al ser una esquina, sería:
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
Tedioso, ¿no? Y por eso está el que sólo es "border-radius". Pero, la diferencia es que:
border-radius: 10px; afectará a todos
border-radius: 10px 15px; la primera cifra afectará a la esquina superior izquierda, y esquina inferior derecha, y la segunda a la esquina superior derecha y esquina inferior izquierda, como una X
border-radius: 5px 10px 15px 20px; éstos afectarán en este orden:
arriba izquierda
arriba derecha
abajo derecha
abajo izquierda

Ahora el segundo recuadro, que es el más grande de en medio. A ese lo llamaremos, cubic_big, para ser simples.

Código:
<style>.main_cubic {width:500px;height: 600px;font-family: Calibri, Sans-serif !important;background:white;}.cubic_tiny {width: 150px;padding: 10px;border-radius: 10px;background:red;} .cubic_big{width: 325px;height: 325px;background:blue; padding: 50px;border-radius: 10px;}</style>

<div class="main_cubic"><div class="cubic_tiny">Yesh</div><div class="cubic_big"></div></div>

Yesh


Ahora tenemos nuestro cubic_big, que se encuentra junto al cubic_tiny, ya que en posicionamiento, el tiny irá arriba y el big abajo. Y eso ayudará un poco a simplificar el cómo lo posicionaremos después. Mide 325px de ancho y alto, después veremos el porqué.  Con un padding de 50px y border-radius de 10px. Por ahora no hay mucho que decir.

Código:
<style>.main_cubic {width:500px;height: 600px;font-family: Calibri, Sans-serif !important;background:white;}.cubic_tiny {width: 150px;padding: 10px;border-radius: 10px;background:red;} .cubic_big{width: 325px;height: 325px;padding: 50px;border-radius: 10px;background:blue;}.contenedor{width: 500px;}.text_01{width: 200px;padding: 15px;border-radius: 10px;background:pink;}.circle_01{width: 200px;height: 200px;border-radius: 100%;background:pink;}</style>

<div class="main_cubic"><div class="cubic_tiny">Yesh</div><div class="cubic_big"></div><div class="contenedor"><div class="text_01"></div><div class="circle_01"></div></div></div>

Yesh







Hemos agregado, ¡más cosas!

Tenemos nuestro contenedor, que es invisible, y básicamente hace eso, contener. ¿Qué contiene? A nuestro rectángulo y círculo rosados. Sólo es de ancho de 500px; para que quepa en el main_cubic, y más nada. El alto es completamente irrelevante.

El text_01 es donde irá el título principal, donde su ancho debe de ser fijo, o se ampliará a todo el ancho el contenedor, y no queremos eso. Así que en este momento es de 200px de ancho, con 15px de padding, y 10px de radio en los bordes.

El circle_01 simplemente contendrá una imagen de fondo. De 200px de ancho y alto, con 100% de radio en los bordes, y así de simple formas un círculo. Con 100% o 50% logras un círculo perfecto, cuando el div es cuadrado, en caso de ser rectangular, sólo lograrás hacer una elipse.

Ahora comencemos a acomodar todas nuestras cosas, para que todo tenga más sentido y orden.

Código:
<style>.main_cubic {width:500px;height: 600px;font-family: Calibri, Sans-serif !important;background:white;}.cubic_tiny {width: 150px;padding: 10px;border-radius: 10px;background:red;position: relative;top: 75px;left: 30px;z-index: 1;} .cubic_big{width: 325px;height: 325px;padding: 50px; border-radius: 10px; background:blue;position: relative;z-index: 2;top: 0;margin: 0 0 0 50px;} .contenedor{width: 500px;margin-top: -100px;position: relative;z-index: 4;top: 0;}.text_01{width: 200px;padding: 15px;border-radius: 10px; background:pink; float:left;margin-top: 50px;text-align: center !important;font-size: 25pt;}.circle_01{width: 200px;height: 200px;border-radius: 100%;background:pink;float:right;}</style>

<div class="main_cubic"><div class="cubic_tiny"></div><div class="cubic_big"></div><div class="contenedor"><div class="text_01">Título</div><div class="circle_01"></div></div></div>

Yesh
Título

Ahora sí, han aparecido muchas más cosas.

position: relative; como no podemos usar "position: absolute;" en FA, ya que nos arroja los objetos a cualquier lugar de la página en sí, utilizamos el position:relative; que dice que el objeto se va a mover.
top: 75px; ésto ayuda a generar las coordenadas de la nueva posición de nuestro objeto, en este caso tomando desde arriba, por ende, al ser un número positivo, tu objeto baja, si fuese negativo, subiría
left: 30px; en el caso de este, se mueve respecto a la vertical izquierda, por lo que si es positivo, se moverá hacia la derecha el objeto, y si es negativo, hacia la izquierda
z-index; 1; ésto, es algo que pareciera que no afecta tanto, pero es nuestra coordenada z, es decir si está más adelante o más atrás nuestro objeto.
margin: 0 0 0 50px; similar a lo de position: relative; (y a la vez como el padding, que tienes margin para cada vértice en específico, o el general que puedes usar una, dos o cuatro cifras, utilizando el mismo orden aplicado para el padding) sin embargo, puede afectar de maneras distintas. Si pones un margen arriba, tu objeto va a bajar, o subir, pero si pones un margen abajo, es probable que acabes afectando al objeto debajo del que estás tratando de mover, ya que estás aumentando o disminuyendo el espacio entre ambos.
float: left; ésto hará que tu objeto, por defecto, se vaya hacia la izquierda-arriba, pero no quedará por sobre otros objetos que se hayan posicionado antes.
float: right; a la inversa de left, éste envía al objeto a la derecha.
text-align: center !important; el text-align sirve para alinear tu texto, valga la redundancia, si a la izquierda, centro, derecha o "justificado". Y en FA es importante colocar !important, ya que nunca sabes si algún foro está restringido a cierto tipo de alineamiento. Como Loving Pets! que tiene todo alineado en "justificado", por lo que si tratar de alinear a la izquierda, centro o derecha, no funcionará
font-size: 25pt; ésto definirá el tamaño de tu fuente, lo recomendable es usar pt que son puntos, ya que de por sí las fuentes están hechas en puntos, pensadas para ser usadas con pts (puedes verlo en Photoshop, Illustrator, InDesign, etc)

Código:
<style>.main_cubic {width:500px;height: 600px;font-family: Calibri, Sans-serif !important;background:white;}.cubic_tiny {width: 150px;padding: 10px;border-radius: 10px;background:red;position: relative;top: 75px;left: 30px;z-index: 1;} .cubic_big{width: 325px;height: 325px;padding: 50px; border-radius: 10px; background:blue;position: relative;z-index: 2;top: 0;margin: 0 0 0 50px;} .contenedor{width: 500px;margin-top: -100px;position: relative;z-index: 4;top: 0;}.text_01{width: 200px;padding: 15px;border-radius: 10px; background:pink; float:left;margin-top: 50px;text-align: center !important;font-size: 25pt;}.circle_01{width: 200px;height: 200px;border-radius: 100%;background:pink;float:right;}.cubic {text-align: center !important;padding: 5px;background:white;}.cont_01 {width: 100%;height: 100%;overflow: auto;background:white;}</style>

<div class="main_cubic"><div class="cubic_tiny"><div class="cubic">Texto</div><div class="cubic" style="margin-top: 10px;">Texto</div></div><div class="cubic_big"><div class="cont_01">Aquí irá contenido</div></div><div class="contenedor"><div class="text_01">Título</div><div class="circle_01"></div></div></div>

Texto
Texto
Aquí va contenido


Por fin tenemos nuestros contenedores faltantes para contenido escrito.
cubic y cont_01, cubic será donde irán datos breves, y en el caso de cont_01, se explica el porqué de que nuestro cuadrado azul tenga un tamaño fijo de alto y ancho, ya que el contenido al interior, estará en un recuadro con "scroll", es decir, podrás navegar dentro de este recuadro, sin moverte del lugar en la página. Y ésto se logra con:

overflow: auto; es el "desborde de contenido", que en auto, hará que se genere el scroll, en caso de poner hidden, el contenido existirá por completo, pero sólo podrás ver sólo cierta parte de todo el contenido.

Y como habrán visto, uno de nuestros cubic en el html, tiene un margin-top: 10px; ya que como es único, se le puede añadir directamente en el html. Para generar ese espacio que pueden ver que existe que ahora los está separando.

Finalmente, viene lo más difícil... las transiciones.
¿Por qué las transiciones son difíciles? Porque toma en cuenta, qué propiedad vas a poner en la transición, cuánto se va a tardar esa transición, si va a tener un retraso en particular, y lo peor de todo, que sea compatible con todos los navegadores. Sí, no todo es compatible con todo. Y por ello existen distinta extensiones para cada acepción que no sea compatible con todo.

Ésto lo haremos parte por parte. Para que no se acabane confundiendo.

Código:
<style>.main_cubic {width:500px;height: 600px;font-family: Calibri, Sans-serif !important;background:white;}.cubic_tiny {width: 150px;padding: 10px;border-radius: 10px;background:red;position: relative;top: 75px;left: 30px;z-index: 1;} .cubic_big{width: 325px;height: 325px;padding: 50px; border-radius: 10px; background:blue;position: relative;z-index: 2;top: 0;margin: 0 0 0 50px;} .contenedor{width: 500px;margin-top: -100px;position: relative;z-index: 4;top: 0;}.text_01{width: 200px;padding: 15px;border-radius: 10px; background:pink; float:left;margin-top: 50px;text-align: center !important;font-size: 25pt;}.circle_01{width: 200px;height: 200px;border-radius: 100%;background:pink;float:right;}.cubic {text-align: center !important;padding: 5px;background:white;}.cont_01 {width: 100%;height: 100%;overflow: auto;background:white;}.cubic_tiny, .cubic_big{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;} .main_cubic:hover .cubic_tiny{left: 0;top: 25px;} .main_cubic:hover .cubic_big{top:25px;}</style>

<div class="main_cubic"><div class="cubic_tiny"><div class="cubic">Texto</div><div class="cubic" style="margin-top: 10px;">Texto</div></div><div class="cubic_big"><div class="cont_01">Aquí irá contenido</div></div><div class="contenedor"><div class="text_01">Título</div><div class="circle_01"></div></div></div>

Texto
Texto
Aquí va contenido


Eso es lo que debería de ocurrir al menos con el cuadro azul, y el rojo.

Y se preguntarán, ¿cómo es que de la nada se puede hacer eso? Al final del estilo se encuentra ésto:

Código:
.cubic_tiny, .cubic_big{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;} .main_cubic:hover .cubic_tiny{left: 0;top: 25px;} .main_cubic:hover .cubic_big{top:25px;}

En esta parte, es lo más "fácil", ya que he escogido una transición que afecta a Todas las propiedades que nuestros dos objetos, cubic_tiny y cubic_big.

Para que puedan ver las compatibilidades con los navegadores, ir a: [Tienes que estar registrado y conectado para ver este vínculo] en esa página explican bastante bien, y con ejemplos, todo lo que es html, css y php, entre otras cosas, por si quedan con alguna duda

.cubic_tiny, .cubic_big{} esta es una forma muy cómoda de decirle al navegador que dos o más objetos, con distintos nombres, harán o tendrán algo en común, en este caso, la transición. Se debe de ocupar la coma, sino, no funciona. .nombre1, .nombre2{}
transition: all 1s ease-in-out; esta es la simplificación de todas las propiedades de transición. Aqui dice "all", es decir, todas las propiedades de un objeto, tendrán una transición de "1s" (segundo), con efecto "ease-in-out" (que es el más común)
.main_cubic:hover .cubic_tiny aquí no hay comas, ¿por qué? Porque ésta vez le estás diciendo al navegador que cuando alguien pase el mouse sobre nuestro objeto main_cubic, el objeto cubic_tiny tendrá un cambio, al igual como el siguiente, con cubic_big. En el caso del cubic_tiny, cambiará de lugar, donde su top y su left serán de menor cifra, haciendo que ascienda, mientras que el cubic_big bajará

Código:
<style>.main_cubic {width:500px;height: 600px;font-family: Calibri, Sans-serif !important;}.cubic_tiny {width: 150px;padding: 10px;border-radius: 10px;background:red;position: relative;top: 75px;left: 30px;z-index: 1;} .cubic_big{width: 325px;height: 325px;padding: 50px; border-radius: 10px; background:blue;position: relative;z-index: 2;top: 0;margin: 0 0 0 50px;} .contenedor{width: 500px;margin-top: -100px;position: relative;z-index: 4;top: 0;transition-property: opacity, top;transition-duration: 1s, 1s;transition-delay: 1s, 0.3s;opacity: 0;}.text_01{width: 200px;padding: 15px;border-radius: 10px; background:pink; float:left;margin-top: 50px;text-align: center !important;font-size: 25pt;}.circle_01{width: 200px;height: 200px;border-radius: 100%;background:pink;float:right;}.cubic {text-align: center !important;padding: 5px;background:white;}.cont_01 {width: 100%;height: 100%;overflow: auto;background:white;} .cubic_tiny, .cubic_big{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;} .main_cubic:hover .cubic_tiny{left: 0;top: 25px;} .main_cubic:hover .cubic_big, .main_cubic:hover .contenedor{top:25px;} .main_cubic:hover .contenedor{opacity: 1;}</style>

<div class="main_cubic"><div class="cubic_tiny"><div class="cubic">Texto</div><div class="cubic" style="margin-top: 10px;">Texto</div></div><div class="cubic_big"><div class="cont_01">Aquí irá contenido</div></div><div class="contenedor"><div class="text_01">Título</div><div class="circle_01"></div></div></div>

Texto
Texto
Aquí va contenido


Primero, nos deshacemos ya de ese fondo blanco que ya no nos sirve. Segundo, a hacer la transición de nuestro contenedor, ¿por qué del contenedor? Porque ambos objetos en su interior tendrán exactamente la misma transición. Así que en vez de añadir una transición a text_01 y circle_01, le ponemos transición al contenedor (razón también por la que hice el contenedor, para simplificar la tarea de ubicar los objetos en el espacio y luego no hacer uso de tanto código para las transiciones).

Ahora, veamos las cosas que se han añadido:

Código:
.contenedor{width: 500px;margin-top: -100px;position: relative;z-index: 4;top: 0;transition-property: opacity, top;transition-duration: 1s, 1s;transition-delay: 1s, 0.3s;opacity: 0;}

Al contenedor le hemos añadido todo lo que son las propiedades de transición (y quizás estén mal, ya que no todos los navegadores podrán ver esta transición)

transition-property: opacity, top; a diferencia de la transición anterior, que tomaba todas las propiedades, éste es más específico. Se le está diciendo que sólo las propiedades de opacity y top (del position:relative;) serán las que cambien
transition-duration: 1s, 1s; aquí se ve el cuánto demorará cada transición. Tomar en cuenta que van en el mismo orden en el que se dispusieron las propiedades en transition-property
transition-delay: 1s, 0.3s; en este caso, es cuánto tarda la transición en iniciar y terminar, al momento de pasar el mouse. Es el retraso que tiene. En este caso, dice que el objeto recién se moverá 1s después de haber pasado el mouse, pero su opacidad cambiará 0.3s después de pasar el mouse
opacity: 0; esta es una propiedad muy simple, es la opacidad (transparencia), va de 0 a 1, por ende todos los intermedios son números decimales.

Código:
.main_cubic:hover .cubic_big, .main_cubic:hover .contenedor{top:25px;} .main_cubic:hover .contenedor{opacity: 1;}

También se ha añadido eso. Ahora estamos diciéndole que no sólo el cubic_big bajará 25px, al momento de pasar el cursor por el main_cubic, sino que además el contenedor bajará la misma cantidad de pixeles. Y de manera aparte, le estamos diciendo que la opacidad pasará de 0 a 1 (como vieron en el código anterior del contenedor, que la opcidad era 0).

Código:
<style>.main_cubic {width:500px;height: 600px;font-family: Calibri, Sans-serif !important;background:white;}.cubic_tiny {width: 150px;padding: 10px;border-radius: 10px;background:red;position: relative;top: 75px;left: 30px;z-index: 1;} .cubic_big{width: 325px;height: 325px;padding: 50px; border-radius: 10px; background:blue;position: relative;z-index: 2;top: 0;margin: 0 0 0 50px;} .contenedor{width: 500px;margin-top: -100px;position: relative;z-index: 4;top: 0;transition-property: opacity, top;transition-duration: 1s, 1s;transition-delay: 1s, 0.3s;opacity: 0;}.text_01{width: 200px;background: #630047;padding: 15px;border-radius: 10px; float:left;margin-top: 50px;text-align: center !important;font-size: 25pt;}.circle_01{width: 200px;height: 200px;border-radius: 100%;float:right;background: #3c115e;background-image: url('https://nlm-common-prod.s3-ap-southeast-2.amazonaws.com/vogue/media/articles/2/0/9/0/20987-1_og_article_portrait.jpg'); background-position: -10px -30px; background-repeat: no-repeat;}.cubic {text-align: center !important;padding: 5px;background:white;}.cont_01 {width: 100%;height: 100%;overflow: auto;} .cubic_tiny, .cubic_big{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;} .main_cubic:hover .cubic_tiny{left: 0;top: 25px;} .main_cubic:hover .cubic_big, .main_cubic:hover .contenedor{top:25px;} .main_cubic:hover .contenedor{opacity: 1;}.cubic_tiny, .cubic_big {background: #2F0B3A;}.cubic, .cont_01 {background: #f3e2a9;}</style>

<div class="main_cubic"><div class="cubic_tiny"><div class="cubic">Texto</div><div class="cubic" style="margin-top: 10px;">Texto</div></div><div class="cubic_big"><div class="cont_01">Aquí irá contenido</div></div><div class="contenedor"><div class="text_01">Título</div><div class="circle_01"></div></div></div>

Texto
Texto
Aquí va contenido
Título



Los últimos toques, de cambiar los colores, añadir la imagen de fondo para el círculo.

Código:
.cubic_tiny, .cubic_big {background: #2F0B3A;}.cubic, .cont_01 {background: #f3e2a9;}

Ahí reuní los colores que serían los comunes en ciertos objetos, para por si luego se quieren cambiar de color de fondo (o a una imagen), pero se quiere mantener el que ambos sean iguales.

Código:
.circle_01{width: 200px;height: 200px;border-radius: 100%;float:right; background: #3c115e;background-image: url('https://nlm-common-prod.s3-ap-southeast-2.amazonaws.com/vogue/media/articles/2/0/9/0/20987-1_og_article_portrait.jpg'); background-position: -10px -30px; background-repeat: no-repeat;}

Además del color de fondo, se añade la imagen de fondo:

background-image: url(''); esta propiedas es sólo para la imagen de fondo, no el tamaño, ni su posición, o si se repite o no, sólo la imagen. Siempre debe ir: url('') y el link entre comillas, o quitar las comillas y dejar el link entre los paréntesis únicamente, pero nunca dejar una comilla suelta, o la imagen no será leída. Como tampoco se debe de separar el url del primer paréntesis, porque tampoco se leerá la imagen.
background-position: -10px -30px; ésto determina la posición de tu fondo. Puedes usar coordenadas en px, pt, em, incluso porcentaje. También puedes hacer uso de "top center", "top left", "bottom center", "bottom right" y más combinaciones, si crees que tu imagen se adapta bien como fondo de esa manera.
background-repeat: no-repeat; como dice, es si el fondo se repite, o no. Hay diferentes maneras de hacer que un fondo se repita, ya sea vertical, horizontal, o simplemente mozaico, pero por ahora lo dejaremos en que no se repita. No olvidar el colocar el guión entre no y repeat, o no será leído.

*Ahora sí me tomaré el tiempo para explicar la parte de font-family.

Como habíamos visto antes, está:
font-family: Sans-serif, Calibri !important; ignorando el !important, se ve que hay dos fuentes distintas. ¿Por qué? Porque si una no es leída por el navegador, queda la segunda, o la tercera, y así.

Y no es sólo eso lo que quería explicar, sino que como mencioné, pueden "instalar" fuentes desde la web. Es decir, ustedes las "llaman" desde su página respectiva, y aquí se leerá, sin que las otras personas tengan que instalarlas en sus propios pcs.

El lugar más común para hallar tipografías es [Tienes que estar registrado y conectado para ver este vínculo] donde encontrarán muchas tipografías distintas, y completas. Es decir, tendrán todos los símbolos. Y si las quieren usar, simplemente hagan click en el botón con la flecha que indica hacia la derecha, dentro de un recuadro (junto a "Add to collection"). Ahí les saldrá una lista de todas las variantes de esta tipografía. Ustedes escojan las que deseen.

Luego, en el paso tres dice "Add this code to your website", como:

Código:
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Es tan fácil, como copiar y pegar en tu post. Luego de eso, la puedes ocupar como cualquier otra tipografía/fuente:

font-family: Open Sans;

Y algo que no usé aquí, pero claramente siempre lo estarán usando, es la propiedas de:
color: #fff; es la que define el color de lo que escribes, más nada. Pero claramente la utilizarán mucho al momento de hacer algo.

Y eso es todo este primer tutorial.

Muy extenso, tho.

Espero lo hayan podido entender bien y les sea útil, lo suficiente como para que puedan hacer cosas propias.
Flann
avatar
General
Abandonado


Mensajes : 221

Fecha de inscripción : 23/09/2014

Volver arriba Ir abajo

Re: [Nuevo] Taller de "diseño"

Mensaje por Contenido patrocinado

Contenido patrocinado

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.