Bela's profile picture

Published by

published
updated

Privacy: Link-only
Category: Blogging

View Blog View Profile Report Blog Entry

Mis Recursos de CSS

Un consejo antes de empezar: ¡ Ten tu código bien organizado !

Este código ↴ se vuelve confuso si estás empezando a codear y no sabes qué editar, porque todo está mezclado en vez de estar organizado como el de abajo.

<style>h1{color: black;background-color: #EFD3D6;border: 3px solid black;border-radius: 10px;text-align: center;font-family: 'Kiwi Maru', serif;font-size: 18px;letter-spacing: 2px;} </style>

Versus este ↴ donde sí ves qué puedes editar y está más ordenado. También deberías intentar escribir las propiedades en orden alfabético para no usar la misma dos veces.

<style>
h1{
   background-color: #EFD3D6;
   border: 3px solid black;
   border-radius: 10px;
   color: black;
   font-family: 'Kiwi Maru', serif;
   font-size: 18px;
   letter-spacing: 2px;
   text-align: center;
}
</style>


En caso de que lo necesites, aquí tienes una imagen:



Una vez que te acostumbres a codear en SpaceHey, siéntete libre de poner el código como quieras :)

Si alguna vez ves el primer ejemplo de código todo junto, solo cópialo y ve a https://www.10bestdesign.com/dirtymarkup/css/ y pégalo allí. Luego, dale al botón "clean" y te limpiará el código para que sea más fácil editarlo.
Un tip antes de empezar:¡ las etiquetas de estilo !

Si no revisas las etiquetas de estilo, eso puede desordenar fácilmente el código y te quedarás preguntándote por qué no sale como quieres:

Código sin las etiquetas de estilo correctas:

<style>
h1{
   background-color: #EFD3D6;
   border: 3px solid black;
   color: black;
}
<style>


Estas etiquetas de estilo ↑ son las mismas y no cambiarán tu código porque ambas tienen < > sin la barra diagonal que cierra la etiqueta: </style>

Código con las etiquetas de estilo correctas:

<style>
h1{
   color: black;
   background-color: #EFD3D6;
   border: 3px solid black;
}
</style>


Aprendiendo a programar para perfiles de SpaceHey (contenido en inglés):
Sitios para programar:
Editores de perfiles y blogs:   
Colores:
  • Un sitio con nombres de colores o códigos hexadecimales htmlcolorcodes.com/color-names/.
    El código se verá así:
    color: ForestGreen;
    or
    color: #228B22;

    Si quieres que el color tenga transparencia, entonces el código debe estar en rgba, así:
    color: rgba (34, 139, 34, 0.5);

    El 0.5 al final se puede cambiar a 0.1 para que sea más transparente o a 0.9 para que sea menos transparente.
  • Para paletas de colores, si necesitas ayuda o inspiración, visita https://colorhunt.co/. Colorhunt tiene paletas muy buenas (especialmente las oscuras).
  • Pinterest (por ejemplo, busca "estética de paleta verde")
  • Generador de paletas de colores www.degraeve.com/color-palette
    Pega la URL de una imagen y automáticamente generará una paleta que coincida con la imagen. ¡Me encanta usar este!
  • Otro generador de colores. colllor.com
Punteros:
  • ¡Punteros personalizados que son divertidos! custom-cursor.com/
    ¡Realmente me encantan estos, especialmente porque le dan más personalidad a tu página de perfil!
  • La Biblioteca de Punteros www.rw-designer.com/cursor-library
  • icons8.com
    Iconos gratuitos que puedes usar para tu puntero, solo asegúrate de ajustar el tamaño para que encaje.
  • El sitio clásico de punteros www.cursors-4u.com
    Usé este sitio hace mucho tiempo y, aún ahora, sigue siendo bueno.
Fuentes:
  • Fuentes gratuitas de Google fonts.google.com
    El sitio te mostrará cómo usar el código @import para agregar las fuentes a tu perfil.
  • Fuentes geniales de www.dafont.com
    Puedes agregar fuentes personales a tu perfil con el código @font-face. more details here
  • Más fuentes personales de www.fontspace.com
    Puedes guardar las fuentes en Dropbox y luego usar el código @font-face para usarlas en tu perfil.
Iconos e Imagenes:
Cambiar el logo de Spacehey:
  • codepen.io/sosuke/pen/Pjoqqp
    En el cuadro que dice Target, pon el código hexadecimal del color que deseas (como #8B8C7E)..
    Luego, haz clic en el botón que dice "Compute Filters" y obtendrás un código que se verá así:
    filter: invert(57%) sepia(7%) saturate(422%) hue-rotate(25deg) brightness(94%) contrast(96%);

    Vas a copiar ese código y pegarlo en el código del logo:
    <style>
    nav img.logo{
          filter: brightness(0) saturate(100%) invert(57%) sepia(7%) saturate(422%) hue-rotate(25deg) brightness(94%) contrast(96%) !important;
    }
    <style>
Reproducción Automática de YouTube
Recursos Adicionales (Texto de Relleno, Edición de Imágenes, Video a GIF)
Inspiración:
  • ¡Puedo obtener inspiración de cualquier lugar y en todas partes! De películas, programas de televisión, kdramas, anime, libros, webtoons, manga, manhwas, juegos u otras fuentes en línea.

    A veces puede ser por imágenes que veo o revistas que leo. Los esquemas de color en imágenes o medios pueden unirse para formar paletas, y a partir de ahí solo las voy armando.

    Me toma bastante tiempo jugar con mis ideas para construir un layout, especialmente si lo hago libremente sin un tema definido.

    Por ejemplo, si ya tengo un tema en mente (como crear un tema navideño, o uno de Genshin, o un tema basado en un personaje o libro), entonces se vuelve fácil conseguir las imágenes que quiero usar, y elegir los colores del tema puede venir después. Puedo usar imágenes relacionadas con el tema para cambiar los bordes, las formas de las cajas, los fondos utilizados, etc.

    Si estoy haciendo un layout libremente (freestyle), entonces puede tomarme horas o días, pero la mayoría del tiempo me toma meses, porque dejo de trabajar en el layout si me frustra jaja. Pero el punto es que toma tiempo hacerlo, ya que no tengo un tema definido en mente y soy bastante quisquillosa cuando se trata de layouts. Siempre he preferido la calidad sobre la cantidad, porque al menos para mí, no tiene sentido hacer más de 500 layouts si va a haber errores en el código (como etiquetas de estilo incorrectas) o si faltan partes del CSS (como olvidar editar el código para las respuestas de comentarios, la caja de perfil, etc). Todo eso se une para que el perfil se vea bien y los perfiles se sientan más personalizados.

    Cada quien tiene su propia manera de hacer las cosas, así que lo único que puedo compartir es cómo yo hago mis layouts. Y como siempre, no soy una programadora profesional, así que no vayan a pensar que lo sé todo sobre el código jaja.
    Estos son la mayoría de los recursos que uso para mis layouts. Si encontraste algún sitio nuevo que puedas usar, ¡me alegra haber podido ayudarte en algo! :)


Comments

Displaying 0 of 0 comments ( View all | Add Comment )