Ir para conteúdo
LoiroCroft

Dicas de códigos para seu guia

Recommended Posts

INTRODUÇÃO

 

Como a maioria deve saber, o myPSt utilizava o BBCode. Mas recentemente, o myPSt passou por uma reformulação e agora utiliza o HTML. Com isso novas funcionalidades se tornaram possíveis, pois combinando o HTML com CSS, Javascript, entre outros, as possibilidades são infinitas.

 

Neste tópico serão disponibilizados alguns códigos que utilizo em meus guias e também códigos compartilhados por outros usuários, para que você possa inserir em seus guias.

Alguns códigos são apenas estéticos e bem extensos, mas não pesam o carregamento da página.

 

Caso você fique com alguma dúvida, tenha uma crítica construtiva ou sugestão, sinta-se à vontade para comentar.

 

 Head Image com duas imagens Índice 

 

Ao mover o cursor do mouse sobre a Head Image, a imagem padrão é alterada por uma imagem alternativa (No smartphone você precisará pressionar o dedo para que elas sejam alteradas).

 

spacer.png
spacer.png

Head Image que criei para o guia do Call of Duty: Modern Warfare 2 Campaign Remastered

 

Para utilizar este tipo de efeito, substitua o código padrão da Head Image do seu guia, pelo código disponibilizado abaixo, colando-o diretamente no Código-Fonte:

 


<div class="cont">
	<div class="caixa">
		<div align="center" class="imgBx" style="width:100%">
			<img alt="spacer.png" data-loaded="true" data-src="URL DA SEGUNDA IMAGEM AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">
		</div>

		<div align="center" class="img2Bx" style="width:100%">
			<img alt="spacer.png" data-loaded="true" data-src="URL DA PRIMEIRA IMAGEM AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">
		</div>
	</div>
</div>
<style type="text/css">
.cont
    {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 5px 0;
    }
    .cont .caixa
    {
        position: relative;
        width: auto;
        height: auto;
        box-shadow: 0px 0px 0px black;
        transform-style: preserve-3d;
    }
    .cont .caixa .imgBx
    {
        position: absolute;
        transform: translateZ(0px) scaleY(1);
    }
    .cont .caixa .img2Bx
    {
        position: relative;
    }
    .cont .caixa:hover .img2Bx
    {
        transform: translateZ(0px) scaleY(0);
    }</style>

 

Mas para que o efeito funcione, você precisará substituir os trechos URL DA SEGUNDA IMAGEM AQUI e URL DA PRIMEIRA IMAGEM AQUI, pelas URLs de duas imagens com o tamanho de 600 x 300 pixels.

 

Veja em spoiler abaixo, as imagens que utilizei:

 

Spoiler

eGeSXur.png

Segunda imagem (aparecerá ao passar o cursor do mouse) 600x300

VxcA9C9.png

Primeira imagem (mostrada quando o cursor do mouse não estiver sobre a Head Image) 600x300

 

 Head Image com efeito 3D Índice 

 

Para ver a mágica acontecer, mova o cursor do mouse sobre a imagem ou movimente seu smartphone.

 

j0BYvIW.png
QyZCYFs.png

Head Image que criei para o guia do Control Ultimate Edition

 

Outros guias meus onde utilizo esse efeito:

The Last of Us Part II

Call of Duty MODERN WARFARE

 

Para utilizar este tipo de efeito, substitua o código padrão da Head Image do seu guia, pelo código disponibilizado abaixo, colando-o diretamente no Código-Fonte:

 

<div class="container">
    <div class="box">
        <div align="center" class="imgBx" style="width:100%">
            <img alt="" data-loaded="true" data-src="URL DA SUA IMAGEM AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">
        </div>

        <div align="center" class="img2Bx" style="width:100%">
            <img alt="" data-loaded="true" data-src="URL DO LOGO PNG AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">
        </div>
    </div>
</div>
<script type="text/javascript">
var VanillaTilt = (function () {
'use strict';

/**
 * Created by Sergiu Șandor (micku7zu) on 1/27/2017.
 * Original idea: https://github.com/gijsroge/tilt.js
 * MIT License.
 * Version 1.7.0
 */

class VanillaTilt {
  constructor(element, settings = {}) {
    if (!(element instanceof Node)) {
      throw ("Can't initialize VanillaTilt because " + element + " is not a Node.");
    }

    this.width = null;
    this.height = null;
    this.clientWidth = null;
    this.clientHeight = null;
    this.left = null;
    this.top = null;

    // for Gyroscope sampling
    this.gammazero = null;
    this.betazero = null;
    this.lastgammazero = null;
    this.lastbetazero = null;

    this.transitionTimeout = null;
    this.updateCall = null;
    this.event = null;

    this.updateBind = this.update.bind(this);
    this.resetBind = this.reset.bind(this);

    this.element = element;
    this.settings = this.extendSettings(settings);

    this.reverse = this.settings.reverse ? -1 : 1;
    this.glare = VanillaTilt.isSettingTrue(this.settings.glare);
    this.glarePrerender = VanillaTilt.isSettingTrue(this.settings["glare-prerender"]);
    this.fullPageListening = VanillaTilt.isSettingTrue(this.settings["full-page-listening"]);
    this.gyroscope = VanillaTilt.isSettingTrue(this.settings.gyroscope);
    this.gyroscopeSamples = this.settings.gyroscopeSamples;

    this.elementListener = this.getElementListener();

    if (this.glare) {
      this.prepareGlare();
    }

    if (this.fullPageListening) {
      this.updateClientSize();
    }

    this.addEventListeners();
    this.updateInitialPosition();
  }

  static isSettingTrue(setting) {
    return setting === "" || setting === true || setting === 1;
  }

  /**
   * Method returns element what will be listen mouse events
   * @return {Node}
   */
  getElementListener() {
    if (this.fullPageListening) {
      return window.document;
    }

    if (typeof this.settings["mouse-event-element"] === "string") {
      const mouseEventElement = document.querySelector(this.settings["mouse-event-element"]);

      if (mouseEventElement) {
        return mouseEventElement;
      }
    }

    if (this.settings["mouse-event-element"] instanceof Node) {
      return this.settings["mouse-event-element"];
    }

    return this.element;
  }

  /**
   * Method set listen methods for this.elementListener
   * @return {Node}
   */
  addEventListeners() {
    this.onMouseEnterBind = this.onMouseEnter.bind(this);
    this.onMouseMoveBind = this.onMouseMove.bind(this);
    this.onMouseLeaveBind = this.onMouseLeave.bind(this);
    this.onWindowResizeBind = this.onWindowResize.bind(this);
    this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);

    this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
    this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
    this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);

    if (this.glare || this.fullPageListening) {
      window.addEventListener("resize", this.onWindowResizeBind);
    }

    if (this.gyroscope) {
      window.addEventListener("deviceorientation", this.onDeviceOrientationBind);
    }
  }

  /**
   * Method remove event listeners from current this.elementListener
   */
  removeEventListeners() {
    this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
    this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
    this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);

    if (this.gyroscope) {
      window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
    }

    if (this.glare || this.fullPageListening) {
      window.removeEventListener("resize", this.onWindowResizeBind);
    }
  }

  destroy() {
    clearTimeout(this.transitionTimeout);
    if (this.updateCall !== null) {
      cancelAnimationFrame(this.updateCall);
    }

    this.reset();

    this.removeEventListeners();
    this.element.vanillaTilt = null;
    delete this.element.vanillaTilt;

    this.element = null;
  }

  onDeviceOrientation(event) {
    if (event.gamma === null || event.beta === null) {
      return;
    }

    this.updateElementPosition();

    if (this.gyroscopeSamples > 0) {
      this.lastgammazero = this.gammazero;
      this.lastbetazero = this.betazero;

      if (this.gammazero === null) {
        this.gammazero = event.gamma;
        this.betazero = event.beta;
      } else {
        this.gammazero = (event.gamma + this.lastgammazero) / 2;
        this.betazero = (event.beta + this.lastbetazero) / 2;
      }

      this.gyroscopeSamples -= 1;
    }

    const totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
    const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;

    const degreesPerPixelX = totalAngleX / this.width;
    const degreesPerPixelY = totalAngleY / this.height;

    const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
    const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);

    const posX = angleX / degreesPerPixelX;
    const posY = angleY / degreesPerPixelY;

    if (this.updateCall !== null) {
      cancelAnimationFrame(this.updateCall);
    }

    this.event = {
      clientX: posX + this.left,
      clientY: posY + this.top,
    };

    this.updateCall = requestAnimationFrame(this.updateBind);
  }

  onMouseEnter() {
    this.updateElementPosition();
    this.element.style.willChange = "transform";
    this.setTransition();
  }

  onMouseMove(event) {
    if (this.updateCall !== null) {
      cancelAnimationFrame(this.updateCall);
    }

    this.event = event;
    this.updateCall = requestAnimationFrame(this.updateBind);
  }

  onMouseLeave() {
    this.setTransition();

    if (this.settings.reset) {
      requestAnimationFrame(this.resetBind);
    }
  }

  reset() {
    this.event = {
      clientX: this.left + this.width / 2,
      clientY: this.top + this.height / 2
    };

    if (this.element && this.element.style) {
      this.element.style.transform = `perspective(${this.settings.perspective}px) ` +
        `rotateX(0deg) ` +
        `rotateY(0deg) ` +
        `scale3d(1, 1, 1)`;
    }

    this.resetGlare();
  }

  resetGlare() {
    if (this.glare) {
      this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
      this.glareElement.style.opacity = "0";
    }
  }

  updateInitialPosition() {
    if (this.settings.startX === 0 && this.settings.startY === 0) {
      return;
    }

    this.onMouseEnter();

    if (this.fullPageListening) {
      this.event = {
        clientX: (this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.clientWidth,
        clientY: (this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.clientHeight
      };
    } else {
      this.event = {
        clientX: this.left + ((this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.width),
        clientY: this.top + ((this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.height)
      };
    }


    let backupScale = this.settings.scale;
    this.settings.scale = 1;
    this.update();
    this.settings.scale = backupScale;
    this.resetGlare();
  }

  getValues() {
    let x, y;

    if (this.fullPageListening) {
      x = this.event.clientX / this.clientWidth;
      y = this.event.clientY / this.clientHeight;
    } else {
      x = (this.event.clientX - this.left) / this.width;
      y = (this.event.clientY - this.top) / this.height;
    }

    x = Math.min(Math.max(x, 0), 1);
    y = Math.min(Math.max(y, 0), 1);

    let tiltX = (this.reverse * (this.settings.max - x * this.settings.max * 2)).toFixed(2);
    let tiltY = (this.reverse * (y * this.settings.max * 2 - this.settings.max)).toFixed(2);
    let angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI);

    return {
      tiltX: tiltX,
      tiltY: tiltY,
      percentageX: x * 100,
      percentageY: y * 100,
      angle: angle
    };
  }

  updateElementPosition() {
    let rect = this.element.getBoundingClientRect();

    this.width = this.element.offsetWidth;
    this.height = this.element.offsetHeight;
    this.left = rect.left;
    this.top = rect.top;
  }

  update() {
    let values = this.getValues();

    this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
      "rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) " +
      "rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " +
      "scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";

    if (this.glare) {
      this.glareElement.style.transform = `rotate(${values.angle}deg) translate(-50%, -50%)`;
      this.glareElement.style.opacity = `${values.percentageY * this.settings["max-glare"] / 100}`;
    }

    this.element.dispatchEvent(new CustomEvent("tiltChange", {
      "detail": values
    }));

    this.updateCall = null;
  }

  /**
   * Appends the glare element (if glarePrerender equals false)
   * and sets the default style
   */
  prepareGlare() {
    // If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
    if (!this.glarePrerender) {
      // Create glare element
      const jsTiltGlare = document.createElement("div");
      jsTiltGlare.classList.add("js-tilt-glare");

      const jsTiltGlareInner = document.createElement("div");
      jsTiltGlareInner.classList.add("js-tilt-glare-inner");

      jsTiltGlare.appendChild(jsTiltGlareInner);
      this.element.appendChild(jsTiltGlare);
    }

    this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
    this.glareElement = this.element.querySelector(".js-tilt-glare-inner");

    if (this.glarePrerender) {
      return;
    }

    Object.assign(this.glareElementWrapper.style, {
      "position": "absolute",
      "top": "0",
      "left": "0",
      "width": "100%",
      "height": "100%",
      "overflow": "hidden",
      "pointer-events": "none"
    });

    Object.assign(this.glareElement.style, {
      "position": "absolute",
      "top": "50%",
      "left": "50%",
      "pointer-events": "none",
      "background-image": `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`,
      "width": `${this.element.offsetWidth * 2}px`,
      "height": `${this.element.offsetWidth * 2}px`,
      "transform": "rotate(180deg) translate(-50%, -50%)",
      "transform-origin": "0% 0%",
      "opacity": "0",
    });
  }

  updateGlareSize() {
    if (this.glare) {
      Object.assign(this.glareElement.style, {
        "width": `${this.element.offsetWidth * 2}`,
        "height": `${this.element.offsetWidth * 2}`,
      });
    }
  }

  updateClientSize() {
    this.clientWidth = window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;

    this.clientHeight = window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;
  }

  onWindowResize() {
    this.updateGlareSize();
    this.updateClientSize();
  }

  setTransition() {
    clearTimeout(this.transitionTimeout);
    this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
    if (this.glare) this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`;

    this.transitionTimeout = setTimeout(() => {
      this.element.style.transition = "";
      if (this.glare) {
        this.glareElement.style.transition = "";
      }
    }, this.settings.speed);

  }

  /**
   * Method return patched settings of instance
   * @param {boolean} settings.reverse - reverse the tilt direction
   * @param {number} settings.max - max tilt rotation (degrees)
   * @param {startX} settings.startX - the starting tilt on the X axis, in degrees. Default: 0
   * @param {startY} settings.startY - the starting tilt on the Y axis, in degrees. Default: 0
   * @param {number} settings.perspective - Transform perspective, the lower the more extreme the tilt gets
   * @param {string} settings.easing - Easing on enter/exit
   * @param {number} settings.scale - 2 = 200%, 1.5 = 150%, etc..
   * @param {number} settings.speed - Speed of the enter/exit transition
   * @param {boolean} settings.transition - Set a transition on enter/exit
   * @param {string|null} settings.axis - What axis should be disabled. Can be X or Y
   * @param {boolean} settings.glare - What axis should be disabled. Can be X or Y
   * @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
   * @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise
   * @param {boolean} settings.full-page-listening - If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
   * @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events
   * @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit
   * @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events
   * @param {gyroscopeSensitivity} settings.gyroscopeSensitivity - Between 0 and 1 - The angle at which max tilt position is reached. 1 = 90deg, 0.5 = 45deg, etc..
   * @param {gyroscopeSamples} settings.gyroscopeSamples - How many gyroscope moves to decide the starting position.
   */
  extendSettings(settings) {
    let defaultSettings = {
      reverse: false,
      max: 15,
      startX: 0,
      startY: 0,
      perspective: 2000,
      easing: "cubic-bezier(.03,.98,.52,.99)",
      scale: 1,
      speed: 300,
      transition: true,
      axis: null,
      glare: false,
      "max-glare": 1,
      "glare-prerender": false,
      "full-page-listening": false,
      "mouse-event-element": null,
      reset: true,
      gyroscope: true,
      gyroscopeMinAngleX: -45,
      gyroscopeMaxAngleX: 45,
      gyroscopeMinAngleY: -45,
      gyroscopeMaxAngleY: 45,
      gyroscopeSamples: 10
    };

    let newSettings = {};
    for (var property in defaultSettings) {
      if (property in settings) {
        newSettings[property] = settings[property];
      } else if (this.element.hasAttribute("data-tilt-" + property)) {
        let attribute = this.element.getAttribute("data-tilt-" + property);
        try {
          newSettings[property] = JSON.parse(attribute);
        } catch (e) {
          newSettings[property] = attribute;
        }

      } else {
        newSettings[property] = defaultSettings[property];
      }
    }

    return newSettings;
  }

  static init(elements, settings) {
    if (elements instanceof Node) {
      elements = [elements];
    }

    if (elements instanceof NodeList) {
      elements = [].slice.call(elements);
    }

    if (!(elements instanceof Array)) {
      return;
    }

    elements.forEach((element) => {
      if (!("vanillaTilt" in element)) {
        element.vanillaTilt = new VanillaTilt(element, settings);
      }
    });
  }
}

if (typeof document !== "undefined") {
  /* expose the class to window */
  window.VanillaTilt = VanillaTilt;

  /**
   * Auto load
   */
  VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
}

return VanillaTilt;

}());

</script><script type="text/javascript">
    VanillaTilt.init(document.querySelector(".box"), {
        max: 15,
        speed: 200
    });

</script>
<style type="text/css">
.container
    {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 5px 0;
    }
    .container .box
    {
        position: relative;
        width: auto;
        height: auto;
        box-shadow: 0px 0px 0px black;
        transform-style: preserve-3d;
    }
    .container .box .imgBx
    {
        position: absolute;
    }
    .container .box .img2Bx
    {
        position: relative;
    }
    .container .box:hover .img2Bx
    {
        transform: translateZ(80px) scaleY(1);
    }</style>

 

Mas para que o efeito funcione, você precisará substituir os trechos URL DA SUA IMAGEM AQUI e URL DO LOGO PNG AQUI, pelas URLs de duas imagens com o tamanho de 600 x 300 pixels.

 

Veja em spoiler abaixo, as imagens que utilizei:

 

Spoiler

hL58eqz.png

Imagem de fundo 600x300

fSHEgJZ.png

Logo do jogo no formato PNG com fundo transparente 600x300

 

 Head Image com imagens rotativas Índice 

 

Infelizmente o código que havia sido postado, não estava agindo de forma responsiva nos smartphones... buscaremos outra alternativa.

 

 Separação de passos/etapas do RoadMap Índice 

 

Um esquema com link direto para o Índice que eu uso para separar os passos/etapas dos meus guias, é justamente este que estou usando para separar as dicas deste tópico.

 

Abaixo estão os códigos deste e de mais alguns modelos:

 

 MODELO 1 Índice 

 

<table cellpadding="5" cellspacing="5" id="INSERIR ID AQUI" style="border: 0px solid rgb(0, 0, 0); border-color: #009900; width: 100%; border-collapse:separate; border-radius: 10px 10px 10px 10px; box-shadow: inset 2px 2px 3px black;">
	<tbody>
		<tr>
			<th style="text-align: left;" width="300">
				<span style="color:#009900;">&nbsp;MODELO 1</span>
			</th>
			<th style="text-align: right;" width="50">
				<span style="font-size:12px;"><a href="#Indice" rel="" style="text-decoration:none">&Iacute;ndice</a>&nbsp;</span>
			</th>
		</tr>
	</tbody>
</table>

 

 MODELO 2 Índice 

 

<table cellpadding="5" cellspacing="5" id="INSERIR ID AQUI" style="border: 2px solid rgb(0, 0, 0); border-color: #f39c12; width: 100%; border-collapse:separate; border-radius: 10px 10px 10px 10px; box-shadow: 2px 2px 3px black;">
	<tbody>
		<tr>
			<th style="text-align: left;" width="300">
				<span style="color:#f39c12;">MODELO 2</span>
			</th>
			<th style="text-align: right;" width="50">
				<span style="font-size:12px;"><a href="#Indice" rel="" style="text-decoration:none">&Iacute;ndice</a>&nbsp;</span>
			</th>
		</tr>
	</tbody>
</table>

 

MODELO 3 Índice 

 

<table cellpadding="5" cellspacing="5" id="INSERIR ID AQUI" style="border: 3px outset #cc0000; width: 100%; border-collapse:separate;">
	<tbody>
		<tr>
			<th style="text-align: left;" width="300">
				<span style="color:#cc0000;">MODELO 3</span>
			</th>
			<th style="text-align: right;" width="50">
				<span style="font-size:12px;"><a href="#Indice" rel="" style="text-decoration:none">&Iacute;ndice</a>&nbsp;</span></span>
			</th>
		</tr>
	</tbody>
</table>

 

Lembre-se de alterar o campo INSERIR ID AQUI, para a ID do a href do seu Índice.

 

 Caixas de seleção Índice 

 

As caixas de seleção são úteis para que o usuário marque os troféus, a medida que eles foram sendo desbloqueados. E se manterão marcadas mesmo se o usuário atualizar ou fechar a página, podendo acompanhar seu progresso sempre quando quiser.

 

Confira abaixo um exemplo (Marque as caixas e faça o teste):

 

    Troféus que serão desbloqueados neste passo:

           bronze.png Cole o troféu aqui - Digite a descrição do troféu aqui.
           silver.png Cole o troféu aqui - Digite a descrição do troféu aqui.
           gold.png Cole o troféu aqui - Digite a descrição do troféu aqui.
           Cole o troféu aqui - Digite a descrição do troféu aqui.
    

Se curtiu a ideia e quer implementar esta função no RoadMap do seu guia, cole o código mostrado a seguir, diretamente no Código-Fonte do tópico do seu guia.

 

<p>
    <strong>Troféus que serão desbloqueados neste passo:</strong>
</p>

<div id="checks">
    &nbsp; &nbsp; &nbsp;<input id="CB1" type="checkbox" value="ON">&nbsp; Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB2" type="checkbox" value="ON">&nbsp; Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB3" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB4" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB5" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB6" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB7" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB8" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB9" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB10" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB11" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB12" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB13" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB14" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB15" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB16" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB17" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB18" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB19" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB20" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB21" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB22" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB23" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB24" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB25" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    <script type="text/javascript">
var dcSplit, posnEq, firstGrp, lastGrp, posnCB, regEx, i=0;
 dcSplit=document.cookie.split("; ");
 regEx=(/CB\d+/);           
 for(i=0; i<dcSplit.length; i++)
  { posnEq = dcSplit[i].indexOf("=")+1;      
    posnCB=dcSplit[i].search(regEx);
    if(posnCB != -1)
      { firstGrp = dcSplit[i].substring(posnCB, posnEq-1);
        lastGrp = dcSplit[i].substring( posnEq, dcSplit[i].length);  
        document.getElementById(firstGrp).checked=eval(lastGrp);        
    }  }   

// captura os checkboxs
const checks = document.querySelectorAll('[type="checkbox"]')

// atualiza os checkboxs
function atualizaCheck() {
    for(let i = 0 ; i < checks.length ; i++ ) {
        let check = String(checks[i].id) 
        var value = document.getElementById(`${checks[i].id}`)
        if(localStorage[`${check}`] == 'true') {
            value.setAttribute('checked', 'true')
        } else {
            value.removeAttribute('checked');
        }
    }
}

// adiciona todos os checkboxs no localStorage
let creatLocalStorage = function() {
        for(let i = 0 ; i < checks.length ; i++ ) {
        var value = document.getElementById(`${checks[i].id}`).checked;
        localStorage.setItem(`${checks[i].id}`, value);
    };
}

atualizaCheck()
document.onchange = creatLocalStorage;
</script>

</div>

 

Agora você precisará editá-lo da seguinte forma:

 

Substitua todos os trechos escrito como CB, para algo que só o seu guia possua, tipo as iniciais do jogo que você está guiando.

Cada guia deve ser diferente, pois se dois (ou mais) guias estiverem da mesma forma, quando alguém que estiver seguindo estes guias marcar a caixa de seleção em um deles, o outro guia também será marcado.

 

Por exemplo, no meu guia do The Last of Us Part II, eu alterei todos os trechos CB para TLoUPII

 

O código disponibilizado está configurado para 25 troféus, mas você pode adicionar quantas linhas de códigos quiser, basta dar sequência na numeração (26, 27, etc). Caso contrário, se seu guia tiver menos de 25 troféus, é só apagar as linhas que ficarem sobrando.

 

Com um pouco de conhecimento em CSS, você também pode estilizar as caixas de seleção (assim como eu fiz no guia do The Last of Us Part II), mas isso fica a seu critério.

 

As caixas de seleção também podem ser utilizadas para outros fins no seu guia, como marcar colecionáveis, itens, etc. Tudo vai depender da sua criatividade.

 

 Removendo sublinhado dos links Índice 

 

Note que os links do seu guia possuem um sublinhado, como no exemplo abaixo:

Exemplo

 

Para retirar o sublinhado de todos os links, basta copiar o código abaixo e colar no final do tópico do seu guia, diretamente no Código-Fonte:

 

<style type="text/css">
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}</style>

 

O sublinhado é retirado quando  o código é adicionado, ficando assim:

Exemplo

 

Caso queira retirar o sublinhado dos links individualmente, você deverá procurar o link do mesmo dentro do código fonte e colar o seguinte código entre as aspas ( " ) e o sinal de maior que ( > ):

 style="text-decoration:none"

 

Exemplo:

<a href="https://forum.mypst.com.br/">Fórum myPSt</a>

 

Ficaria assim:

<a href="https://forum.mypst.com.br/" style="text-decoration:none">Fórum myPSt</a>

 

 Spoiler para vídeo demonstrativo Índice 

 

Modelo estilizado de spoiler para vídeo com créditos para o autor, com bordas arredondadas e sombreamento interno:

 

VÍDEO DEMONSTRATIVO 

 

COLAR URL DO VÍDEO AQUI

Crédito para: Clique 2x aqui para editar

 

Você deve clicar duas vezes no trecho "Clique 2x aqui para editar", após inserir o código no tópico do seu guia. Uma caixa para inserir a URL e digitar o nome do canal irá abrir.

 

Código utilizado:

<table align="center" cellpadding="5" cellspacing="5" style="width:90%; border:0px solid; border-color:#000000; border-collapse:separate; border-radius: 15px 15px 15px 15px; box-shadow: inset 2px 2px 3px black;">
    <tbody>
        <tr style="border:0px solid; border-color:#000000; border-collapse:collapse;">
            <td>
                <p style="text-align: center;">
                    <strong>V&Iacute;DEO DEMONSTRATIVO</strong>&nbsp;
                </p>
            </td>
        </tr>
        <tr style="border:0px solid;border-color:#CACACA;border-collapse:separate;border-radius: 10px 10px 10px 10px;">
            <td style="border:0px solid;border-color:#CACACA;border-collapse:separate;border-radius: 10px 10px 10px 10px;">
                <div class="ipsSpoiler" data-ipsspoiler="">
                    <div class="ipsSpoiler_header">
                        &nbsp;
                    </div>

                    <div class="ipsSpoiler_contents" data-gramm="false">
                        <p style="text-align: center;">
                            COLAR URL DO V&Iacute;DEO AQUI
                        </p>

                        <p style="text-align: center;">
                            <span style="font-size:12px;">Cr&eacute;dito para: </span><span style="font-size:14px"><span style="display: none;">&nbsp;</span><span style="font-size:12px;"><strong><span style="display: none;">&nbsp;</span><a href="LINK DO CANAL" style="text-decoration:none">Clique 2x aqui para editar</a><span style="display: none;">&nbsp;</span></strong></span><span style="display: none;">&nbsp;</span></span>
                        </p>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

 

Observe na primeira linha, os seguintes trechos de código destacados em spoiler abaixo e faça as alterações que quiser:

 

Spoiler

border:0px é responsável por adicionar contorno.

 

border-color:#000000; é onde você muda a cor dos contornos (Acesse aqui para código de cores).

 

border-radius: 15px 15px 15px 15px; é onde você arredonda as bordas.

Se não quiser bordas arredondadas, altere para 0px ou apague o trecho todo.

 

box-shadow: inset 2px 2px 3px black; é o código de sombreamento.

Se não quiser sombreamento, deixe em 0px ou apague o trecho todo.

O inset faz com que a sombra seja interna. Se apagá-lo, a sombra passará a ser projetada.

O black é a cor da sombra.

 

Para saber exatamente onde colar o código, quando não estiver no Código-Fonte, digite algo que você não usará no seu guia. Pode ser o seu nome ou qualquer outra palavra incomum, que não esteja sendo repetida no guia.

 

Fora do Código-Fonte, você digita:

 

SeuNome

 

Depois entre no Código-Fonte e substitua o trecho (que pelo exemplo vai estar da seguinte forma), pelo código disponibilizado:

 

<p>
    SeuNome
</p>

 

Saia do Código-Fonte, substitua o trecho COLAR URL DO VÍDEO AQUI pela URL do vídeo que irá utilizar e credite o autor.

 

 Imagens PNG para edição Índice 

 

Copie a imagem que deseja colar em seu guia, utilizando o comando CTRL+SHIFT+V, para colar sem formatação. Em seguida, dê duplo clique sobre a imagem para abrir algumas configurações:

  • Em "URL do link", cole um link caso queira que a imagem funcione como um link clicável;
  • Em "Tamanho", deixe marcada a caixa "Manter proporção original", e diminua o tamanho, se preferir;
  • Em "Alinhamento", mantenha em "Nenhum" caso queira que a imagem fique centralizada.

Lembrando que dependendo das dimensões da imagem, ela terá que ser colocada dentro de um spoiler.

 

WTGQT6T.png SdWJ3lf.png lDn2Qcx.png 3PoAf23.png q0zbPwz.png

 

APB7exX.png4fIR5mS.pngE8MJl27.pngyNBWQLs.png

 

VsDho09.png A12W5wE.png 1VhSIBE.png RjTSqRn.png ZaCMJST.png 5sjQaSQ.png

 

AHLzTCj.png fhH2pi9.png SOwLVt2.png MdCCmAq.png DGPLJnv.png gUJLDAL.png

 

24CudO1.png My9s8OH.pngifSsenC.png AX5HAGi.png msgUqDx.png

 

naxcLYQ.png JW27jva.png WMyxj4h.png

 

QXv5Ktd.jpg

 

0DtsK0I.png jIt4YfK.png d3ImKJ3.png 5FjMrys.png

 

 Banners (Índice, Introdução, Sobre o Jogo, RoadMap, Troféus e Extras) Índice 

 

Quer dar uma "gourmetizada" no seu guia de troféus?
Deixo aqui os banners que eu criei e utilizo em meus guias mais recentes.

 

São banners com fundo transparente e com links que o levam para as demais seções do guia. Clique nas setas azuis (cima e baixo) para conferir.

Além disso, também são responsivos, pois ajustam o tamanho automaticamente quando visto em telas menores, como em smartphones ou tablets.

 

Índice spacer.png
spacer.png

 

Introdução spacer.png
spacer.png

 

Sobre o Jogo spacer.png
spacer.png

 

RoadMap spacer.png
spacer.png

 

Troféus spacer.png
spacer.png

 

Extras spacer.png
spacer.png

 

Código dos banners:

<table align="center" cellpadding="0" cellspacing="5" id="Indice" style="border: 2px solid; border-color: #000; background-color: #; width: 100%; border-collapse:separate; border-radius: 15px 15px 15px 15px; box-shadow: inset 1px 1px 3px black;">
	<tbody>
		<tr>
			<th style="text-align: left;" width="300">
				<img alt="Índice" data-loaded="true" data-src="https://i.imgur.com/oqKYrwa.png" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 382px;" title="Índice">
			</th>
			<th style="text-align: center;" width="50">
				<a href="#Extras" rel=""><img alt="spacer.png" class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/kN7I2T5.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="Extras"></a><br>
				<a href="#Introducao" rel=""><img alt="spacer.png" class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/6d5Cp0j.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="Introdução"></a>
			</th>
		</tr>
	</tbody>
</table>

<p>
	&nbsp;
</p>

<table align="center" cellpadding="0" cellspacing="5" id="Introducao" style="border: 2px solid; border-color: #000; background-color: #; width: 100%; border-collapse:separate; border-radius: 15px 15px 15px 15px; box-shadow: inset 1px 1px 3px black;">
	<tbody>
		<tr>
			<th style="text-align: left;" width="300">
				<img alt="Introdução" data-loaded="true" data-src="https://i.imgur.com/JAwrS6k.png" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;" title="Introdução">
			</th>
			<th style="text-align: center;" width="50">
				<a href="#Indice" rel=""><img alt="spacer.png" class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/kN7I2T5.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="Índice"></a><br>
				<a href="#Sobre" rel=""><img alt="spacer.png" class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/6d5Cp0j.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="Sobre o jogo"></a>
			</th>
		</tr>
	</tbody>
</table>

<p>
	&nbsp;
</p>

<table align="center" cellpadding="0" cellspacing="5" id="Sobre" style="border: 2px solid; border-color: #000; background-color: #; width: 100%; border-collapse:separate; border-radius: 15px 15px 15px 15px; box-shadow: inset 1px 1px 3px black;">
	<tbody>
		<tr>
			<th style="text-align: left;" width="300">
				<img alt="Sobre o Jogo" data-loaded="true" data-src="https://i.imgur.com/FgJPcsG.png" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;" title="Sobre o Jogo">
			</th>
			<th style="text-align: center;" width="50">
				<a href="#Introducao" rel=""><img alt="spacer.png" class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/kN7I2T5.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="Introdução" width="82"></a><br>
				<a href="#RoadMap" rel=""><img alt="spacer.png" class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/6d5Cp0j.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="RoadMap" width="82"></a>
			</th>
		</tr>
	</tbody>
</table>

<p>
	&nbsp;
</p>

<table align="center" cellpadding="0" cellspacing="5" id="RoadMap" style="border: 2px solid; border-color: #000; background-color: #; width: 100%; border-collapse:separate; border-radius: 15px 15px 15px 15px; box-shadow: inset 1px 1px 3px black;">
	<tbody>
		<tr>
			<th style="text-align: left;" width="300">
				<img alt="RoadMap" data-loaded="true" data-src="https://i.imgur.com/c4e98rn.png" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;" title="RoadMap">
			</th>
			<th style="text-align: center;" width="50">
				<a href="#Sobre" rel=""><img alt="spacer.png" class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/kN7I2T5.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="Sobre o Jogo" width="82"></a><br>
				<a href="#Trofeus" rel=""><img alt="spacer.png" class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/6d5Cp0j.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="Troféus" width="82"></a>
			</th>
		</tr>
	</tbody>
</table>

<p>
	&nbsp;
</p>

<table align="center" cellpadding="0" cellspacing="5" id="Trofeus" style="border: 2px solid; border-color: #000; background-color: #; width: 100%; border-collapse:separate; border-radius: 15px 15px 15px 15px; box-shadow: inset 1px 1px 3px black;">
	<tbody>
		<tr>
			<th style="text-align: left;" width="300">
				<img alt="Troféus" data-loaded="true" data-src="https://i.imgur.com/qVb8Wnb.png" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;" title="Troféus">
			</th>
			<th style="text-align: center;" width="50">
				<a href="#RoadMap" rel=""><img alt="spacer.png" class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/kN7I2T5.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="RoadMap" width="82"></a><br>
				<a href="#Extras" rel=""><img alt="spacer.png" class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/6d5Cp0j.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="Extras" width="82"></a>
			</th>
		</tr>
	</tbody>
</table>

<p>
	&nbsp;
</p>

<table align="center" cellpadding="0" cellspacing="5" id="Extras" style="border: 2px solid; border-color: #000; background-color: #; width: 100%; border-collapse:separate; border-radius: 15px 15px 15px 15px; box-shadow: inset 1px 1px 3px black;">
	<tbody>
		<tr>
			<th style="text-align: left;" width="300">
				<img alt="Extras" data-loaded="true" data-src="https://i.imgur.com/qzkNyYu.png" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;" title="Extras">
			</th>
			<th style="text-align: center;" width="50">
				<a href="#Trofeus" rel=""><img alt="spacer.png" class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/kN7I2T5.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="Troféus" width="82"></a><br>
				<a href="#Indice" rel=""><img alt="spacer.png" class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/6d5Cp0j.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="Índice"></a>
			</th>
		</tr>
	</tbody>
</table>

<p>
	&nbsp;
</p>

 

  • Curtir 4

Compartilhe esta postagem


Link to post
Share on other sites
CÓDIGOS COMPARTILHADOS POR OUTROS USUÁRIOS

 

Aqui serão disponibilizados códigos que outros usuários compartilharem. Se você tem algum e deseja compartilhar com a comunidade, entre em contato por MP e eu coloco ele aqui, com os devidos créditos, é claro.

 

 Cubo 3D animado Índice 

 

O usuário @Wesp_can compartilhou o código de um cubo 3D animado bem bacana que ele editou e utilizou no guia do Dragon Quest XI: Echoes of an Elusive Age.

 

full-trophy_0sbjok.pngfull-trophy_0sbjok.pngfull-trophy_0sbjok.pngfull-trophy_0sbjok.pngfull-trophy_0sbjok.pngfull-trophy_0sbjok.png
 

 

Para utilizá-lo em seu guia, é só copiar o código abaixo, diretamente no Código-Fonte do tópico do seu guia:

 

<div class="wrap">
	<div class="cube">
		<img src="IMAGEM 1"> <img src="IMAGEM 2"> <img src="IMAGEM 3"> <img src="IMAGEM 4"> <img src="IMAGEM 5"> <img src="IMAGEM 6"><br>
		&nbsp;
	</div>
</div>
<style type="text/css">
.wrap{
        margin-top: 50px;
        margin-bottom: 50px;
        perspective: 1000px;
        perspective-origin: 50% 50%;
    }
    
    .cube{
        transform-style: preserve-3d;
        width: 150px;
        height: 150px;
        margin: auto;
        position: relative;
    }

    .cube img{
        position: absolute;
        opacity: 0.9;
    }

    .cube img:nth-child(1){
        transform: rotateY(0deg) translateZ(75px);
    }
    
    .cube img:nth-child(2){
        transform: rotateY(90deg) translateZ(75px);
    }
    
    .cube img:nth-child(3){
        transform: rotateY(180deg) translateZ(75px);
    }
    
    .cube img:nth-child(4){
        transform: rotateY(-90deg) translateZ(75px);
    }
    
    .cube img:nth-child(5){
        transform: rotateX(90deg) translateZ(75px);
    }
    
    .cube img:nth-child(6){
        transform: rotateX(-90deg) translateZ(75px);
    }
    
    @keyframes loop{
        from {transform:rotateX(0deg) rotateY(0deg);}
        to {transform:rotateX(360deg) rotateY(360deg);}
    }
        
    .cube{
        animation: loop 10s linear infinite;
    }</style>

 

Agora iremos editar o código para se adequar ao seu guia.

 

Um cubo possui seis lados, por isso devemos trocar os trechos IMAGEM 1 até a IMAGEM 6, com o link da imagem que você quer que apareça no seu cubo. Pode até ser seis imagens diferentes, mas é importante que cada imagem tenha um tamanho em pixels igual, tanto na largura, quanto na altura. Por exemplo... 250x250 ou 300x300.

 

 Estilizando a caixa de seleção Índice 

 

Caso você vá utilizar o código de Caixas de seleção no seu guia, saiba que é possível estilizar as caixas, acrescentando códigos CSS para isso.

Como fez o usuário @Wesp_can em um de seus guias, Confira o resultado, clicando aqui.

 

Caso queira fazer o mesmo, basta copiar o código abaixo, e colar depois do código de caixas de seleção e pronto!

 

<style type="text/css">

input[type="checkbox"]{
    position: relative;
    width: 40px;
    height: 13px;
    -webkit-appearance: none;
    background: linear-gradient(0deg, #333, #000);
    outline: none;
    border-radius: 6px;
    box-shadow: 0 0 0 1px #353535; 0 0 0 2px #3e3e3e; inset 0 0 3px rgba(0,0,0,1), 0 2px 7px rgba(0,0,0,.5), inset 0 0 5px rgba(0,0,0,.2);
    }
    
input:checked[type="checkbox"]{
    background: linear-gradient(0deg, #6dd1ff, #20b7ff);
    box-shadow: 0 0 0.7px #6dd1ff, 0 0 0 1.4px #353535; 0 0 0 1.8px #3e3e3e; inset 0 0 3.3px rgba(0,0,0,1), 0 1.8px 7px rgba(0,0,0,.5), inset 0 0 5px rgba(0,0,0,.2);
    }

input[type="checkbox"]:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 27px;
    height: 13px;
    background: linear-gradient(0deg, #000, #6b6b6b);
    border-radius: 7px;
    box-shadow: 0 0 0 1px #232323;
    transform: scale(.98,.96);
    transition: .5s;
    }
    
input:checked[type="checkbox"]:before{
    left: 13px;
}

input[type="checkbox"]:after{
    content: "";
    position: absolute;
    top: calc(50% - 1.5px);
    left: 22px;
    width: 3px;
    height: 3px;
    background: linear-gradient(0deg, #6b6b6b, #000);
    border-radius: 50%;
    transition: .5s;
    }
    
input:checked[type="checkbox"]:after{
    background: #63cdff;
    left: 35px;
    box-shadow: 0 0 1.7px #13b3ff; 0 0 55px #13b3ff;
}
    
</style>

 

 Head Image interativa com texto sobreposto Índice 

 

Mais um código compartilhado pelo @Wesp_can.

Desta vez, de uma Head Image interativa que ao passar o mouse sobre a Head, uma breve descrição será mostrada (no smartphone é só pressionar e arrastar o dedo sobre a imagem).

 

Confira como ficará no exemplo abaixo (Head image utilizada no guia do Dragon Quest XI: Echoes of an Elusive Age):

 

l1DnIMk.jpg
 
 

logo_ign_branca-remov4xj82.png

"Dragon Quest 11: Echoes of an Elusive Age é excelente em muitos níveis. Seja no visual, jogabilidade, personagens, história. O game faz bonito em todas as suas vertentes. Te dá a diversão no nível certo, narra sua história com tranquilidade e apresenta batalhas que simplesmente não te cansam. Enfim, o melhor do gênero neste ano."

Guia de Troféus: ?

 

Para utilizar este efeito em seu guia, substitua o código padrão da sua Head Image, pelo código a seguir:

<center>
	<div class="container">
		<div class="box">
			<div class="img">
				<img class="hack" src="https://i.imgur.com/vSMaAoR.png">
			</div>

			<div class="overlay">
				&nbsp;
			</div>

			<div class="overlay2">
				&nbsp;
			</div>

			<div class="text">
				<h2>
					<img height="70px" src="INSERIR URL DA IMAGEM PNG AQUI" width="100px">
				</h2>

				<p class="p">
					&quot;ESCREVER SEU TEXTO AQUI.&quot;
				</p>
			</div>
		</div>
	</div>
</center>
<style type="text/css">
.container .box {
            border-radius: 5px;
            border: 2px solid #000000;
            position: relative;
            width: 100%;
            max-width: 600px;
            text-align: center;
            overflow: hidden;
        }

        .container .box .hack {
            width: 100%;
            opacity: 0;
            min-height: 175px;
        }

        .container .box .img {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            background: url(INSERIR URL DA IMAGEM DE FUNDO AQUI);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;

        }

        .container .box .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

        }

        .container .box:hover .overlay {
            background-color: rgba(0, 0, 0, 0.3);
        }

        .container .box .overlay2 {
            position: absolute;
            top: 0;
            left: -150%;
            width: 100%;
            height: 165%;
            background-color: rgba(0, 0, 0, 0.7);
            transition: .5s;
        }

        @media(max-width: 350px) {
            .container .box .overlay2 {
                width: 110%;

            }
        }

        @media(min-width: 350px) {
            .container .box .overlay2 {
                transform: skewX(-30deg);

            }
        }

        .container .box:hover .overlay2 {
            left: -10%
        }

        .container .box .text {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            color: black;
            box-sizing: box-border;
            padding: 25px;
            z-index: 1000;
            text-shadow: 5px 5px 10px black;

        }

        .container .box .text h2 {
            position: relative;
            color: white;
            font-size: 1.5rem;
            text-transform: uppercase;
            margin-bottom: 0;
            letter-spacing: 1px;
            opacity: 0;
            transition: .5s;
            transition-timing-function: linear;
            transform: translateY(-10px);
        }

        .container .box:hover .text h2 {
            transform: translateY(0);
            opacity: 1;
            transition-delay: 0.6s;

        }

        .container .box .text p {
            line-height: 1.2;
            opacity: 0;
            color: white;
            font-size: 17px;
            transform: translateY(10px);
            transition: .5s;
            transition-timing-function: linear;
        }

        .container .box:hover .text p {
            transform: translateY(0);
            opacity: 1;
            transition-delay: 0.7s;
        }

        @media(max-width: 604px) {

            .container .box .text .p {
                line-height: 1.2;
                font-size: 10px;
                margin: -10px;
            }

        }
    @media(max-width: 350px) {

            .container .box .text .p {
                line-height: 1.1;
                font-size: 10px;
                margin: 0px -10px 0px ;
            }
        
        }</style>
<p style="text-align: center;">
	<strong>Guia de Trof&eacute;us:&nbsp;</strong>
</p>

Agora iremos alterar os campos necessários para se ajustar ao seu guia:

  • Em INSERIR URL DA IMAGEM PNG AQUI, substitua pela URL de uma imagem png transparente (Cuidado com o tamanho da imagem).
  • Em ESCREVER SEU TEXTO AQUI, digite o texto que vai aparecer ao interagir com a imagem (Cuidado com a quantidade de caracteres).
  • E por último, em INSERIR URL DA IMAGEM DE FUNDO AQUI, insira a URL da imagem que usará como Head Image do seu guia (Lembrando que a imagem deve ter o tamanho em pixels, de exatamente 600 de largura, por 300 de altura).

E pronto. Mais uma dica de Head Image estilosa para seu guia!

 

 Head Image com Card Flip Índice 

 

Outro efeito de Head Image bacanudo compartilhado pelo @Wesp_can.

 

Veja um exemplo da Head image utilizada no guia do Minoria.

Passe o mouse sobre a imagem para visualizar o efeito e no smartphone, pressione o dedo sobre a imagem e arraste:

 

yZlnpHw.jpg
VT2MZ7v.png

"Com um baita potencial e trazendo um desafiador Metroidvania, não estranhem que futuramente ele caminhe lado a lado com os sucessos do gênero. Por enquanto é uma grande ideia, que precisa passar por pequenos ajustes para se tornar um grande nome no meio. E outra, com uma temática adulta e debates necessários, que é incomum de vermos nessa pegada."

 

Para utilizar o mesmo efeito no seu guia, substitua o código padrão da Head Image pelo código abaixo:

 

<center>
	<div class="card">
		<div class="imgBox">
			<img alt="" class="imagemr" data-loaded="true" data-src="URL DA HEAD IMAGE AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">
		</div>

		<div class="details">
			<img alt="" class="logosite" data-loaded="true" data-src="URL DO LOGO PNG AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">
			<p class="textor">
				&quot;ESCREVA SEU TEXTO AQUI.&quot;
			</p>
		</div>
	</div>
</center>
<style type="text/css">
.card
  {
    width: 100%;
    max-width: 600px;
    background: #fff;
    transform-style: preserve-3d;
    box-shadow: inset 600px 0 50px rgba(0,0,0,.5), 0 20px 100px rgba(0,0,0,.5);
    transition: 1s;
  }
  .card:hover
  {
    transform: perspective(2000px) rotate(-5deg);
    box-shadow: inset 20px 0 50px rgba(0,0,0,.5), 0 10px 100px rgba(0,0,0,.5);
  }
  .card:before
  {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #002d4a;
    transform-origin: bottom;
    transform: skewX(-45deg);
  }
  .card:after
  {
    content: '';
    position: absolute;
    top: 0;
    right: -2px;
    width: 2px;
    height: 100%;
    background: #002d4a;
    transform-origin: left;
    transform: skewY(-45deg);
  }
  
  .imagemr
  {
    width: 100%;
    max-width: 600px;
    height: auto;
  }
  .card .imgBox
  {
    width: 100%;
    height: 100%;
    position: relative;
    transform-origin: left;
    z-index: 1;
    transition: 1s cubic-bezier(.15,1.7,.84,.58);
  }
  .card:hover .imgBox
  {
    transform: rotateY(-95deg);
  }
  .card .details
  {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 20px;
    z-index: -1;
  }
  .logosite
  {
    width: 200px;
    height: 30px;
  }
  .textor
  {
    color: #002d4a;
    font-size: clamp(.4em, .4em + 1vw, 1.4em);
  }
  @media (max-width: 350px)
  {
    .card .imagemr .imgBox .details .logor .textor
    {
      width: 100%;
    }
  }
  @media (max-height: 175px)
    {
      .logor .textor
      {
        heigth: 100%;
      }
    }</style>

 

Agora faremos as alterações para que o efeito se adeque ao seu guia...

 

Em URL DA HEAD IMAGE AQUI, cole a URL da imagem do seu guia (tamanho de 600x300px).

Em URL DO LOGO PNG AQUI, substitua pelo logotipo que queira usar, ou caso não queira colocar o logo, exclua toda a linha de código mostrada abaixo:

<img alt="" class="logosite" data-loaded="true" data-src="URL DO LOGO PNG AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">

E por último, no trecho ESCREVA SEU TEXTO AQUI, digite ou cole o texto que será mostrado ao interagir com a Head Image, mas fique atento a quantidade de caracteres.

 

 Head Image fragmentada para guias com DLC's Índice 

 

Infelizmente o código desta Head Image estava conflitando com os outros códigos, por isso tive que retirar.

 

Para visualizar o efeito, copie o código abaixo, entre neste link, substitua o código que está no site pelo que você copiou e clique em Run >

Se curtiu o efeito e quer utilizar no seu guia, cole o código na caixa de edição do fórum, e faça as alterações seguindo as instruções dentro do próprio código.

 

Caso tenha alguma dúvida em relação ao código, entre em contato com o @Wesp_can via MP, para que ele possa auxiliá-lo.

 

<center>
	<div class="container">
		<div class="clip clip1">
			<div class="content">
				<h2>
					Jogo Base
				</h2>
			</div>
		</div>

		<div class="clip clip2">
			<div class="content">
				<h2>
					Subterr&acirc;neo
				</h2>
			</div>
		</div>

		<div class="clip clip3">
			<div class="content">
				<h2>
					Sobreviv&ecirc;ncia
				</h2>
			</div>
		</div>

		<div class="clip clip4">
			<div class="content">
				<h2>
					&Uacute;ltima Resist&ecirc;ncia
				</h2>
			</div>
		</div>
	</div>
</center>
<style type="text/css">
@media (max-width:280px) { 
          .content-guia {padding-top:140px;}
      }
      @media (min-width:281px) and (max-width:320px) { 
          .content-guia {padding-top:150px;}
      }
      
      @media (min-width: 321px) and (max-width:384px) { 
          .content-guia {padding-top:180px;}
      }

      @media (min-width:385px) and (max-width:414px) { 
          .content-guia {padding-top:190px;}
      }
      
      @media (min-width:415px) and (max-width:480px) { 
          .content-guia {padding-top:220px;}
      }
      @media (min-width:481px) and (max-width:510px) { 
          .content-guia {padding-top:240px;}
      }
      @media (min-width:511px) and (max-width:540px) { 
          .content-guia {padding-top:260px;}
      }
      @media (min-width:541px) and (max-width:600px) { 
          .content-guia {padding-top:280px;}
      }
      @media (min-width:601px) { 
          .content-guia {padding-top:300px;}
      }
      /*
      
      
      @media (max-width:540px) { 
          .content-guia {padding-top:320px;}
      }
      */
        .testeindex
        {
          z-index: 2;
        }
        .container
        {
          display: flex;
          position: relative;
          width: 100%;
          max-width: 600px;
          z-index: 1;
        }
        .container .clip
        {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transition: 0.5s;
        }
  
  /*
  A quantidade de DLC's vai mudar um pouco código, vou deixar abaixo o modelo caso o jogo tenha 1, 2 e 4 DLC's, caso o jogo que você tenha mais do que 4, pode me mandar msg que te ajudo a criar o código pra ele.
  A única coisa que precisa mudar é o codigo clip-path e seus valores e, logicamente, a quantidade de clip.clip de acordo com a quantidade de DLC's. Ex: no meu caso são 3 dlc's mais o jogo base, então tenho que ter clip-clip1 até o clip-clip4. Agora vamos ao clip-path.
  Jogo com 1 DLC:
  .container .clip.clip1
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/4Pm9RH5.jpg);
          background-size: cover;
          clip-path: polygon(0 0, 100% 0, 0 100%, 0% 100%);
        }
        .container .clip.clip2
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/v6EmZqx.png);
          background-size: cover;
          clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%);
        }
  
  Jogo com 2 DLC:
   .container .clip.clip1
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/4Pm9RH5.jpg);
          background-size: cover;
          clip-path: polygon(0 0, 0 0, 60% 0, 0 100%);
        }
        .container .clip.clip2
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/v6EmZqx.png);
          background-size: cover;
          clip-path: polygon(60% 0, 100% 0, 100% 40%, 0 100%);
        }
        .container .clip.clip3
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/QOznQnd.jpg);
          background-size: cover;
          clip-path: polygon(100% 40%, 100% 40%, 100% 100%, 0 100%);
        }
  
  Jogo com 4 DLC:
   .container .clip.clip1
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/4Pm9RH5.jpg);
          background-size: cover;
          clip-path: polygon(0 0, 0 0, 40% 0, 0 100%);
        }
        .container .clip.clip2
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/v6EmZqx.png);
          background-size: cover;
          clip-path: polygon(40% 0, 80% 0, 80% 0, 0 100%);
        }
        .container .clip.clip3
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/QOznQnd.jpg);
          background-size: cover;
          clip-path: polygon(80% 0, 100% 0, 100% 20%, 0 100%);
        }
        .container .clip.clip2
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/v6EmZqx.png);
          background-size: cover;
          clip-path: polygon(100% 20%, 100% 35%, 100% 65%, 0 100%);
        }
        .container .clip.clip3
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/QOznQnd.jpg);
          background-size: cover;
          clip-path: polygon(100% 65%, 100% 100%, 100% 100%, 0 100%);
        }
  
      O atributo font-size também precisa de um pouco de atenção, visto que as palavras vão terão tamanhos diferentes dependendo do nome da dlc's, então você pode ir mexendo nos valores dentro da TAG clamp pra deixar a seu gosto. Os valores dentro dessa TAG funcionam de forma responsiva e cada um deles define um tamanho, o primeiro valor, no meu caso é .2m, seria o mínimo tamanho que ele deve ficar, os valores .2em + 1vw é o tamanho ideal e o valor 1em é o tamanho máximo que eu quero. Vá mexendo que rápido se aprende a usar o Clamp.
  */
      
        .container .clip.clip1
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/4Pm9RH5.jpg);
          background-size: cover;
          clip-path: polygon(0 0, 50% 0, 0 100%, 0% 100%);
        }
        .container .clip.clip2
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/v6EmZqx.png);
          background-size: cover;
          clip-path: polygon(50% 0, 100% 0, 0 100%, 0% 100%);
        }
        .container .clip.clip3
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/QOznQnd.jpg);
          background-size: cover;
          clip-path: polygon(100% 0, 100% 50%, 0 100%, 0% 100%);
        }
        .container .clip.clip4
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/Or09ocq.jpg);
          background-size: cover;
          clip-path: polygon(100% 50%, 100% 100%, 0 100%, 0% 100%);
        }
        
        .container:hover .clip
        {
          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }
        .container .clip:hover
        {
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        }
        .container .clip .content
        {
          position: absolute;
          bottom: -100%;
          left: 0;
          width: 50%;
          padding: 2px;
          background: black;
          opacity: 0;
          color: #f76d22;
          font-size: clamp(.2em, .2em + 1vw, 1em);
          transition: 0.5s;
        }
        .container .clip:hover .content
        {
          bottom: 0;
          opacity: 1;
        }</style>
<div class="content-guia">
	<p style="text-align:center;">
		<strong>Guia de trof&eacute;us:&nbsp;<a class="testeindex" href="http://www.mypst.com.br/jogos/NPWR15315_00/" rel="external nofollow" style="text-decoration:none" target="_blank"><span style="color: #f76d22;">Tom clancy&#39;s The Division - Jogo Base + DLC&#39;s</span></a></strong>
	</p>
</div>

 

Lembre-se de substituir as urls atuais, pelas urls das imagens que você usaria em seu guia (Jogo Base e DLC's).

  • Curtir 3
  • Esplêndido 1

Compartilhe esta postagem


Link to post
Share on other sites

Excelente Sandro !

 

Depois vou editar com minhas invenções também.  

  • Curtir 2

Compartilhe esta postagem


Link to post
Share on other sites
16 horas atrás, Treviz_BR3 disse:

Tem uma forma mais simples ? 

 

De montar o Guia?

 

Estou querendo uma orientação

 

Entra em contato por MP, que eu te dou um auxílio, blz?!

  • Curtir 1

Compartilhe esta postagem


Link to post
Share on other sites

Cara, dá uma olhada nesse trecho que você atualizou, o código do "roadmap" não tava funcionando pra mim. Eu fiz um ajuste e ficou assim. 

 

Spoiler

<table align="center" cellpadding="0" cellspacing="5" id="Sobre" style="border: 2px solid; border-color: #000; background-color: #; width: 100%; border-collapse:separate; border-radius: 15px 15px 15px 15px; box-shadow: inset 1px 1px 3px black;">
    <tbody>
        <tr>
                <th style="text-align: left;" width="300">
                <img alt="RoadMap" data-loaded="true" data-src="https://i.imgur.com/c4e98rn.png" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;" title="RoadMap">
            </th>
            <th style="text-align: center;" width="50">
                <a href="#Sobre"><img class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/kN7I2T5.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="Sobre o Jogo" width="82"></a><br>
                <a href="#Trofeus"><img class="ipsImage" data-loaded="true" data-ratio="36.59" data-src="https://i.imgur.com/6d5Cp0j.png" height="30" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto; width: 70px;" title="Troféus" width="82"></a>
            </th>
        </tr>
    </tbody>
</table>

 

Compartilhe esta postagem


Link to post
Share on other sites
11 horas atrás, PauloRAz disse:

Cara, dá uma olhada nesse trecho que você atualizou, o código do "roadmap" não tava funcionando pra mim. Eu fiz um ajuste e ficou assim. 

 

  Mostrar conteúdo oculto

 

Corrigido.

 

Só um aviso... a alteração que você fez no código quebrou o banner do RoadMap, quando é visualizado no smartphone.

Veja como está ficando no spoiler:

 

Spoiler

9QMsnki.png

 

  • Curtir 1

Compartilhe esta postagem


Link to post
Share on other sites
9 horas atrás, LoiroCroft disse:

Só um aviso... a alteração que você fez no código quebrou o banner do RoadMap, quando é visualizado no smartphone.

Veja como está ficando no spoiler:

 

  Ocultar conteúdo

9QMsnki.png

 

 

Ah sim, tranquilo. Vou fazer essa alteração. 

Compartilhe esta postagem


Link to post
Share on other sites

Crie uma conta ou entre para comentar

Você precisa ser um membro para fazer um comentário.

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.

×
×
  • Criar Novo...