Conectarse

Recuperar mi contraseña

Últimos temas
» 27/07/2016 SF
Miér Jul 27, 2016 11:40 am por Kuroki

» Angelina | Angelus
Lun Mar 14, 2016 11:54 pm por Kuroki

» Arger black
Lun Mar 14, 2016 11:52 pm por Kuroki

» Alice Pruss
Lun Mar 14, 2016 11:51 pm por Kuroki

» Hey Mama! {widgets}
Sáb Feb 20, 2016 6:30 pm por Kuroki

» 20/02/2016 SF
Sáb Feb 20, 2016 6:24 pm por Kuroki

» Prueba 1 Prueba 1
Dom Sep 06, 2015 8:47 am por Kuroki

» CSS 27/08/15 SF
Jue Ago 27, 2015 7:41 am por Kuroki

» You've got mail~
Mar Ago 18, 2015 7:46 pm por Kuroki

Nombre
Rango
MensajePerfil
CRÉDITOS
Skin “Shine!” creado por Runa XIII e inspirado en la colección de tablillas de NympheaKeep it simple”. Un agradecimiento especial para Nymphea por su consentimiento. Paleta de color “198 Celebration!” por alfarroba en ColorLovers. Un agradecimiento especial a la Asistencia de Foroactivo y los tutoriales de Savage Themes y The Captain Knows Best.


Html 5 y CSS 3 en tus post!

Ver el tema anterior Ver el tema siguiente Ir abajo

Html 5 y CSS 3 en tus post!

Mensaje por Kuroki el Dom Ago 09, 2015 2:56 pm

Código:
Saludos~

Si el texto se ve demasiado grande, es porque uso los estilos por defecto de la web


Como aún estoy pendiente de revisión y me estoy aburriendo a saco en clase, estrenaré esta sección con un pequeño “tutorial” (¿Debería llamarlo así?) de como usar html y css en vuestros post. Obviamente usar el propio editor que te da el foro es lo más rápido y directo a la hora de postear, pero si en algún momento te da por personalizar más tus post o si quieres que google muestre primero tus post frente a otros cuando buscas este foro (ya que google entiende de lenguaje html, pero no texto humano… si al final google tampoco lo sabe todo(?)), pues puede que te interese usar estas reglas e intentare explicarlo de la forma más sencilla.



Pero antes que nada, ¿qué es html y css? Bueno, wikipedia es la respuesta de todo, así que si quieres una respuesta desarrollada, bastaría con buscarlo ahí. Si por otro lado prefieres una versión reducida y que entiendas aún desconociendo el mundillo que resulta ser el diseño web:



html: código en etiquetas que dan significado a todo el contenido de la página. A los humanos que podemos interpretar todo según el contexto nos da igual, pero la máquina como no sabe tenemos que ir diciendole que es cada cosa.

css: es la hoja de estilo en cascada. Por así decirlo, es quien se ocupa de vestir todo el código html, vamos que lo decora.



Lamentablemente, si lo que quieres es decorar solamente, no puedes saltarte el html, porque css depende directamente de los contenidos ofrecidos por este para pintar cosillas.



Yo por lo general solo uso estas reglas cuando me aburro, pero los post los hago con el editor ignorando el html y css :yao:




Etiquetas Html


Introducción

Las etiquetas se caracteriza principalmente nada más y nada menos porque estan rodeados por “<” y “>”


Código:SELECCIONAR TODO EL CONTENIDO
<apertura>Contenido que le vayas a meter si lo tuviera</cierre>
Cabe mencionar que los cierres tienen un "/" para diferenciarla de una apertura.



No tienes que aprenderlo de memoria







BÁSICOS

Etiquetas de párrafos

Etiquetas para textos, no tiene ningún secreto. La diferencia con escribirla con el editor es que el editor no te las genera, con lo que todo texto sin estas etiquetas es como texto “fantasma”


Código:SELECCIONAR TODO EL CONTENIDO
<p>El texto a añadir</p>

Etiquetas de enlaces (a)

Etiquetas para crear hiper-enlaces. Podrías usar el del editor que te los genera igualmente


Código:SELECCIONAR TODO EL CONTENIDO
<a href=”Url de la página destino”>El texto a añadir al enlace</a>

Etiquetas de imagenes (img)

La diferencia con las del editor es que aquí puedes añadirle un texto descriptivo por si no se carga la imagen


Código:SELECCIONAR TODO EL CONTENIDO
<img src="URL de la imagen" alt="Descripción de la imagen"></img>

Etiquetas de listas

Para crear listas, no mucho más que explicar. Salvo que existen dos tipos.


Lista desordenada (con puntitos)

Código:SELECCIONAR TODO EL CONTENIDO
<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Los que quieras</li>
</ul>

Lista ordenada (con números)

Código:SELECCIONAR TODO EL CONTENIDO
<ol>
<li>Primero</li>
<li>Segundo</li>
<li>Los que quieras</li>
</ol>


Existen muchos más, pero no sé si querrias usar el resto




INTERESANTES

Etiquetas sin significado semantico (div y span)

Estas etiquetas no aportan ningun tipo de significado al html, asi que tienen su utilidad para crear decoración sin necesidad de depender del contenido


Código:SELECCIONAR TODO EL CONTENIDO
<div>Contenido</div>

<span>Contenido</span>
La diferencia entre ambos es que div se pinta en bloque (como una caja y depende del contenido o dimensiones que le des) mientras que span se pinta en linea (no tiene dimensiones y se expande según quien lo contenga)


Ejemplo:




Etiquetas CSS


Introducción

CSS es la hoja de estilos en cascadas. Se ocupa de decorar todo el html para dejarlo más bonito e incluso hacer la navegación más práctica


Como no podemos recurrir al CSS del propio foro, la única forma de implementar nuestro CSS a nuestros post es básicamente añadiendo directamente a nuestras etiquetas html los estilos que queramos (aunque esto no es recomendado, es nuestra única forma)



Código:SELECCIONAR TODO EL CONTENIDO
<p style=”Los estilos que le vayamos a añadir”>Un texto cualquiera</p>


BÁSICOS

Colores

Podemos cambiar el color de los textos. Deberás saber un poco de códificación en rgb. Pero… ¿Cual es la diferencia con el que nos aporta el editor? Pues quizás usar el rgba (con canal alpha) para añadir transparencias


Código:SELECCIONAR TODO EL CONTENIDO
<p style='color:#ff0000'>Es un texto en color rojo</p>

<p style='color:rgb(255,0,0)'>Este es tambien un texto en color rojo</p>

<p style='color:rgba(255,0,0,0.5)'>este es un texto en color rojo al 50% de transparencia</p>
Ejemplo:

Anchos y altos (width y height)

Permite cambiar las dimensiones de todo aquello que se exprese en cajas. ¿Recueras el "div" del hmtl? Pues puedes cambiarle las dimensiones con estas propiedades. Las etiquetas de enlace (a), tambien puedes darle tamaños (aunque es preferible usar otros métodos para este). Estos pueden ir en px,%, em o rem (no explicare las diferencias, basicamente probad o tirad por px y ya(?))


Código:SELECCIONAR TODO EL CONTENIDO
<div style="height: 150px; width:300px;></div>

<div style="width:20px; height:5px"></div>

Background

Esta regla css es muy cañera, porque puedes darle muchos valores según guste



url(dirección de una imagen) = Añadirle una imagen de fondo

rgb()/rgba() = aplica lo mismo que color para texto pero para backgrounds (si vais a usar imagenes, obviamente no useis esto)
no-repeat = por si no quieres que la imagen se repita si el ancho del contenedor es mayor que la imagen

left = si quieres que la imagen comience a mostrarse a la izquierda (o right si es por la derecha, pero no a la vez)

top = lo mismo, pero para comenzar desde arriba (o bottom por abajo, no es combinable con top -> Pero sí es combinable con left o right)

Center = Centrado (pero no combinable con las cuatro anteriores)

Código:SELECCIONAR TODO EL CONTENIDO
<div style="height: 150px; width:300px; background: rgb(255,0,0)"></div>
Ejemplo:
No tienes porque seguir este orden, es lo bueno del background, que puedes poner primero la imagen si quieres... o si se repite, etc





INTERESANTES

Background-size

Esta regla css esta separada del background porque es un tanto especial y sirve para redimensionar los tamaños de imagen según el contenedor


cover= cubre toda el area posible, pudiendo eliminar partes de la imagen

contain= la imagen se intenta mostrar lo máximo posible

Código:SELECCIONAR TODO EL CONTENIDO
<div style="height: 150px; width:200px; background: url(http://oi62.tinypic.com/2qsmmpi.jpg) no-repeat; background-size:contain;"><p>Contain</p></div>

<div style="height: 150px; width:200px; background: url(http://oi62.tinypic.com/2qsmmpi.jpg) no-repeat; background-size:cover;"><p>Cover</p></div>
Ejemplo:

Border

Le proporciona a todo elemento un bordeado. Pueden ser varios tipos, pero los mas populares suelen ser solid(linea), dotted(puntos),dashed(lineas discontinuas), double(dobles lineas) y algunos más que encontrareis en google.


Código:SELECCIONAR TODO EL CONTENIDO
<div style="border: anchura(px) estilo(solid) color;"></div>

<div style="height: 150px; width:200px; background: url(http://oi62.tinypic.com/2qsmmpi.jpg) no-repeat; background-size:cover; border: 5px dotted #ff0000;"><p>Puntos rojos</p></div>

<div style="height: 150px; width:200px; background: url(http://oi62.tinypic.com/2qsmmpi.jpg) no-repeat; background-size:contain; border: 1px solid #0000ff;"><p>Linea recta azul</p></div>

<p style="border: 2px dashed #00ff00">Un texto con bordeados discontinuos</p>
Ejemplos:

Border-radius

Esta propiedad CSS es posiblemente una de las favoritas en el mundillo de estilos. Proporciona un redondeado a las esquinas, que pueden ser o no combinadas con la regla anterior para bordes (de no usarlas, simplemente redondea los bordes)


Código:SELECCIONAR TODO EL CONTENIDO
<div style="border-radius: grado de radio(px)"></div>

<div style="height: 150px; width:200px; background: url(http://oi62.tinypic.com/2qsmmpi.jpg) no-repeat; background-size:cover; border: 5px solid #f00; border-radius: 15px"><p>Bordeado en 15px y con linea recta</p></div>

<div style="height:150px; width:150px; background: url(http://oi62.tinypic.com/2qsmmpi.jpg) no-repea top center; background-size:cover; border-radius: 50%;"><p>Bordeado al 50% y con dimenciones en ancho y alto iguales para recrear circulos (sin borde)</p></div>

<p style="width: 100%; height:auto; border: 5px dotted #f00; border-radius: 15px;">Radio de 15px y con borde de puntos</p>
ejemplos:

Text-Shadow / Box-Shadow

Tal y como describe su nombre, se trata de una propiedad que proporciona sombreado al texto/cajas. No tiene demasiado misterio cuando se entiende


Código:SELECCIONAR TODO EL CONTENIDO
<p style="text-shadow: ejeX(px) ejeY(px) radio de difuminado(px) color"></p>

<div style="box-shadow: ejeX(px) ejeY(px) radio de difuminado(px) color"></p>

<p style="text-shadow: 0px 0px 5px #ff0000, 5px 0px 5px #00ff00, 0px 5px 5px #0000ff">Puedes repetir esa propiedad separado por comas para que se vayan superponiendo</p>

<div style="border: solid 1px #000000; text-shadow: 0px 0px 5px #ff0000, 5px 0px 5px #00ff00, 0px 5px 5px #0000ff"><p>Lo mismo, pero con un divisor con bordes, sin embargo solo se aplica al texto</p></div>

<div style="box-shadow: 0px 0px 10px #000000;"><p>En este caso se aplica el box-shadow a la caja solamente</div>

Kuroki
Admin

Mensajes : 72
Fecha de inscripción : 03/10/2014

Ver perfil de usuario http://kuroki-is-love.foroactivo.mx

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

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