SCP Hover Box

PARADO!

Esta é uma página modelo usada internamente pelo Wiki.

NÃO TOQUE ESTA PÁGINA SEM PERMISSÃO.


avaliação: 0+x
[[module css]]
.scp-hover-box.one::before,
.scp-hover-box.one div.container, 
.scp-hover-box.one div.header {
    --notch-size: 1em;
}

div.scp-hover-box.one .container {
    --container-bgcolor: rgba(252, 252, 252);
    --container-txtcolor: rgba(12, 12, 12);
    background-color: var(--container-bgcolor, rgba(252, 252, 252));
    color: var(--container-txtcolor, rgba(12, 12, 12));
}

div.scp-hover-box.one .container:hover {
    --container-hover-bgcolor: rgba(12, 12, 12);
    --container-hover-txtcolor: rgba(252, 252, 252);
    background-color: var(--container-hover-bgcolor, rgba(12, 12, 12));
    color: var(--container-hover-txtcolor, rgba(252, 252, 252));
}

.scp-hover-box.one::before {
    --container-stroke-color: rgba(244, 244, 244);
    background-color: var(--container-stroke-color, rgba(244, 244, 244));
    border: 0 solid var(--container-stroke-color, rgba(244, 244, 244));
}

.scp-hover-box.one:hover::before {
    --container-hover-stroke-color: rgba(180, 35, 35);
    --link-stroke-width: 0.125rem;
    background-color: var(--container-hover-stroke-color, rgba(180, 35, 35));
    border: var(--link-stroke-width, 0.125rem) solid var(--container-hover-stroke-color, rgba(180, 35, 35));
    top: calc(var(--link-stroke-width, 0.125rem) * -1);
    left: calc(var(--link-stroke-width, 0.125rem) * -1);
}

div.scp-hover-box.one .container::before,
div.scp-hover-box.one .container::after,
div.scp-hover-box.one .container > *:before,
div.scp-hover-box.one .container > *:after {
    --container-stroke-color: rgba(244, 244, 244);
    background-color: var(--container-stroke-color, rgba(244, 244, 244));
}

div.scp-hover-box.one .container > * > *:before,
div.scp-hover-box.one .container > * > *:after,
div.scp-hover-box.one .container > * > * > *:before,
div.scp-hover-box.one .container > * > * > *:after {
    --container-hover-stroke-color: rgba(180, 35, 35);
    background-color: var(--container-hover-stroke-color, rgba(180, 35, 35));
}

div.scp-hover-box.one div.header {
    --background-url: url("http://www.scp-wiki.net/local--files/component:scp-hover-box/scp-2105.gif");
    --background-vertical-position: 30%;
    background-image: var(--background-url, url("http://www.scp-wiki.net/local--files/component:scp-hover-box/scp-2105.gif"));
    background-size: cover;
    background-position: 0 var(--background-vertical-position, 30%);
}

div.scp-hover-box.one div.title > a,
div.scp-hover-box.one div.sub-title > a {
    --link-fill-color: rgba(252, 252, 252);
    --link-stroke-width: 0.125rem;
    --link-stroke-color: rgba(12, 12, 12);
    color: var(--link-fill-color, rgba(252, 252, 252));
    text-shadow:
        calc(var(--link-stroke-width, 0.125rem) * -1) calc(var(--link-stroke-width, 0.125rem) * -1) 0 var(--link-stroke-color, rgba(12, 12, 12)),
        0 calc(var(--link-stroke-width, 0.125rem) * -1) 0 var(--link-stroke-color, rgba(12, 12, 12)),
        var(--link-stroke-width, 0.125rem) calc(var(--link-stroke-width, 0.125rem) * -1) 0 var(--link-stroke-color, rgba(12, 12, 12)),
        var(--link-stroke-width, 0.125rem) 0 0 var(--link-stroke-color, rgba(12, 12, 12)),
        var(--link-stroke-width, 0.125rem) var(--link-stroke-width, 0.125rem) 0 var(--link-stroke-color, rgba(12, 12, 12)),
        0 var(--link-stroke-width, 0.125rem) 0 var(--link-stroke-color, rgba(12, 12, 12)),
        calc(var(--link-stroke-width, 0.125rem) * -1) var(--link-stroke-width, 0.125rem) 0 var(--link-stroke-color, rgba(12, 12, 12)),
        calc(var(--link-stroke-width, 0.125rem) * -1) 0 0 var(--link-stroke-color, rgba(12, 12, 12));
}

@media not all and (min-resolution:.001dpcm) { @media {
    div.scp-hover-box.one div.title > a,
    div.scp-hover-box.one div.sub-title > a {
        --link-fill-color: rgba(252, 252, 252);
        --link-stroke-width: 0.125rem;
        --link-stroke-color: rgba(12, 12, 12);
        -webkit-text-fill-color: var(--link-fill-color);
     -webkit-text-stroke-width: var(--link-stroke-width, 0.125rem);
        -webkit-text-stroke-color: var(--link-stroke-color, rgba(12, 12, 12));
    paint-order: stroke fill;
    text-shadow: unset;
    }
}

@supports (-moz-appearance:meterbar) {
    div.scp-hover-box.one div.title > a,
    div.scp-hover-box.one div.sub-title > a {
        --link-fill-color: rgba(252, 252, 252);
        --link-stroke-width: 0.125rem;
        --link-stroke-color: rgba(12, 12, 12);
        -webkit-text-fill-color: var(--link-fill-color, rgba(252, 252, 252));
     -webkit-text-stroke-width: var(--link-stroke-width, 0.125rem);
        -webkit-text-stroke-color: var(--link-stroke-color, rgba(12, 12, 12));
    paint-order: stroke fill;
    text-shadow: unset;
    }
}
[[/module]]

[[# 4205]]
[[div_ class="scp-hover-box"]]
[[div_ class="container"]]
[[div_ ]]
[[div_ ]]
[[div_ ]]
[[div_ class="header"]]
[[div_ class="title"]]
[[a href="http://scp-pt-br.wikidot.com/scp-4205"]]SCP-4205[[/a]]
[[/div]]
[[div_ class="sub-title"]]
[[a href="http://scp-pt-br.wikidot.com/scp-4205"]]Nos Olhos de Quem Vê[[/a]]
[[/div]]
[[/div]]
[[div_ class="blerb"]]
**“Se você se lembra de mim, então não me importo se todo mundo esquecer” ― Haruki Murakami, Kafka na Costa**
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]

Como usar

1. Copie o código abaixo.

2. Siga o guia no fundo da página.

Copie só uma vez.

[[include :scp-pt-br:component:scp-hover-box-styling]]

Copie para cada caixa

[[include :scp-pt-br:component:scp-hover-box-structure
|container-number=one
|corner-cutout=1em
|container-bgcolor=rgba(252, 252, 252)
|container-txtcolor=rgba(12, 12, 12)
|container-hover-bgcolor=rgba(12, 12, 12)
|container-hover-txtcolor=rgba(252, 252, 252)
|container-stroke-color=rgba(244, 244, 244)
|container-hover-stroke-color=rgba(180, 35, 35)
|background-url=http://www.scp-wiki.net/local--files/component:scp-hover-box/scp-2105.gif
|background-vertical-position=30%
|link-fill-color=rgba(252, 252, 252)
|link-stroke-width=0.125rem
|link-stroke-color=rgba(12, 12, 12)
|anchor=4205
|link=http://www.scp-wiki.net/scp-4205
|title=SCP-4205
|sub-title=Nos Olhos de Quem Vê
|blerb=**“Se você se lembra de mim, então não me importo se todo mundo esquecer” ― Haruki Murakami, Kafka na Costa**
]]

Só precisa ser incluído uma vez no topo da página. ↦

Começo da include do componente. Necessário colar esse código por bloco.

Nome único dado por caixa na página. Use palavras, não números.

Tanto removido dos cantos. Coloque 0 para ter um quadrado.

Cor do Fundo sem passar o mouse (aceita hex, rgb, rgba, hsl)

Cor do Texto sem passar o mouse (aceita hex, rgb, rgba, hsl)

Cor do Fundo quando passa o mouse (aceita hex, rgb, rgba, hsl)

Cor do Texto quando passa o mouse (aceita hex, rgb, rgba, hsl)

Borda da Caixa sem passar o mouse (aceita hex, rgb, rgba, hsl)

Borda da Caixa quando passa o mouse (aceita hex, rgb, rgba, hsl)

Url para qualquer imagem de fundo para cabeçalho ↦

Posição vertical da imagem do cabeçalho. 0 por padrão. (aceita px, rem, em, %)

Cor do Texto do Cabeçalho (aceita hex, rgb, rgba, hsl)

Largura da Borda do Texto do Cabeçalho Coloque 0 para não ter

Cor da Borda do Texto do Cabeçalho (aceita hex, rgb, rgba, hsl)

Se usando navigation, isso pode ser usado para definir o ponto de anchor ↦

Link do Artigo ↦

Título do Artigo ↦

Subtítulo do Artigo ↦

Texto da seção inferior. Pode usar formatação.

[[include :scp-pt-br:component:scp-hover-box-styling]]

[[include :scp-pt-br:component:scp-hover-box-structure

|container-number=one

|corner-cutout=1em

|container-bgcolor=rgba(252, 252, 252)

|container-txtcolor=rgba(12, 12, 12)

|container-hover-bgcolor=rgba(12, 12, 12)

|container-hover-txtcolor=rgba(252, 252, 252)

|container-stroke-color=rgba(244, 244, 244)

|container-hover-stroke-color=rgba(180, 35, 35)

|background-url=http://esteéumlink.com/imagem.jpg

|background-vertical-position=30%

|link-fill-color=rgba(252, 252, 252)

|link-stroke-width=0.125rem

|link-stroke-color=rgba(12, 12, 12)

|anchor=4205

|link=http://www.scp-pt-br.net/scp-4205

|title=SCP-4205

|sub-title=Nos Olhos de Quem Vê

|blerb=**Isto é uma descrição!**

]]

Salvo indicação em contrário, o conteúdo desta página é licenciado sob Creative Commons Attribution-ShareAlike 3.0 License