#magicalcore

[black-salt-cage]

ଘ(੭*ˊᵕˋ)੭* ੈ♡‧₊˚

[magicalcore]

[ Post de Rol ] For my beloved Izq + Dcho

¡He vuelto de mi hiatus y para celebrarlo les traigo un juego de tablillas de post!

Este post de rol te permite colocar todo el texto que desees sin cambiar su tamaño, ya que cuenta con un scroll. También posee un título y un subtítulo para poner la información deseada. ¡Favor de no quitar los créditos!

Nota especial: Las comisiones están abiertas para tablillas. También están a la venta todas las skins compartidas.

Código: Izquierdo / Derecho.

Créditos. La imagen utilizada no es de mi autoría. Las tipografías utilizadas son Playfair Display, Play y Hugiller.

[dreary-png]

[ame-nyan]

⭑･ﾟﾟ･*:༅｡.｡༅:*ﾟ:*:✼✿I want to fill my world with bright colors✿✼:*ﾟ:༅｡.｡༅:*･ﾟﾟ･⭑ ✨˗ˏˋ Alina Gray messy icons!! ˎˊ˗ ✨

[starchyu]

2016 vs 2020~ 

[bestodictadora]

Code: Peace & War

La calidad es una garcha pero in qualité tumblr se me freseaba y no dejaba subir la imagen :(

Y he de decir que el fondo gris que rodea la tablilla en realidad corresponde al foro en que la publiqué, porque ese espacio es transparente. Tanto los círculos de arriba como el “Peace & War” están sobre fondo transparente.

¿Recuerdan el code de Templanza? Ese que dije que “maybe le agregaba una frase por algún lado”. Minga, se convirtió en un código completamente nuevo y diferente JAJAJA.

La verdad no sabría por dónde empezar para decir todo lo que apliqué para hacerlo, así que empezaré por decir que aprendí una banda de cosas sobre la marcha: necromancer’s codes tu patrón. Recomendadísimo que vayan a ver sus tutoriales, a mí me ayudaron un montón para hacer esto. Específicamente, los de pestañas (aunque también mirujeé el de alinear verticalmente el texto y me ayudó una baaanda). También seguí un tutorial (de magicalcore) para agregarle los reproductores de música a la tablilla.

Pestañas: Parte 1 — Parte 2.

Alinear texto verticalmente: Here.

Reproductor de música: Here.

También con esta tablilla fui aprendiendo a hacer clipping mask en imágenes (con el mask-image, gg, que en mi caso era con el -webkit porque uso chrome), y aplicar modos de fusión en las mismas (background-blend-mode y mix-blend-mode). Se me liaron un poco los hovers en un punto por esto, pero una vez le vas agarrando la mano es como un “aaah, eso es lo que estaba mal”.

Empecé a usar clip-path para recortar el área que el mouse detecta de las imágenes: yo quería que sólo se activara el hover cuando se apoyara el mouse sobre la imagen recortada, y no en todo el espacio rectangular vacío, así que usé el clip-path. También lo hice con los círculos. Y esta vendría siendo la principal razón por la que no creo que pueda compartir el code y hacerlo intercambiable (?). Eso y las máscaras de recorte que mencioné antes, aunque en mi cora eso sí resulta sencillo de intercambiar, sólo es un url ¿?

Para generar el código del clip-path usé esta página. No sé si hay gente que lo haga manual but ahí les dejo el dato jsjs.

Le agarré la mano a esto de ubicar imágenes grandes en un espacio pequeño (como en los circulitos) en el área que quiero que se vea poniéndolas como background-image, y dicho sea de paso, es mi primera tablilla usando el position absolute en tantas cosas. Suelo evitarlo como la peste porque el foro en que participo está mal codeado y rompe casi todas las tablillas con algo en absolute PERO logré arreglármelas para no romper nada y ahora me pregunto qué hice toda mi vida sin usar esta cosa, es mágica. Ahora el relative sólo es mi putita para cuando necesito un padre para mis bebitos en absolute (???).

Mi intención era usar iconos de honeybee pero terminé cediendo a la tentación y metiendo imágenes png (las nubes, la espada y la balanza). Sólo quería sus siluetas así que les bajé la opacidad al 0% y las pinté completamente de un color con el mask-image (también les metí clip-path para que no me impidan seleccionar texto).

Y nada, man. Creo dije todo lo que tenía que decir ¿? estoy muy muy contenta con el resultado, y creo es mi mejor code hasta ahora :( por eso lo publico asies, que no he publicado ninguno antes.

I’m happy. 

[zaruchi]

[black-salt-cage]

ଘ(੭*ˊᵕˋ)੭* ੈ♡‧₊˚