Follow Us @soratemplates

sexta-feira, 17 de novembro de 2017

Emojis Animados com CSS

novembro 17, 2017 0 Comments

Oie... é, eu sei que sumi de novo, mas, como disse a vocês em postagens anteriores, meu chá de sumiço tem a ver com cuidados com minha saúde, que graças a Deus, vai melhorando cada dia mais. Estava com saudades de vocês e de postar aqui, portanto...
Usar emojis em postagens é bem útil e eles geralmente vêm incorporados às redes sociais e blogs ou são encontrados em forma de imagens animadas ou não pela web. Mas, usando css e html você mesmo pode criar os seus.
Encontrei algumas sugestões no Codepen e uma das que mais gostei foi essa aqui. Fiz algumas modificações no código original e consegui transformar os sapinhos em... bem, a intenção era fazer ursos, só que não achei que ficou com cara de urso, tá mais para um monstrinho fofo, depois, quando os deixei rosa, me lembrou o pokemon jigglypuff...
Enfim, caso queiram usar, basta copiar um destes códigos:

Clique na primeira estrela rosa que aparece na caixa de códigos para copiar tudo de uma vez. O CÓDIGO 1, você deve colar no html do seu template antes de /b:skin. O CÓDIGO 2 deve ser colado onde quiser que o emoji apareça.
Para usar 1 emoji de cada vez, encontre o número correspondente ao emoji e use seu html. Por exemplo, se quiser usar o segundo emoji, procure por emojii #2 ou poke #2. Onde quiser que ele apareça cole:
<!--emojii #2-->
    <div class="emojii">
      <div class="bear" id="bear-2">
       
        <div class="bolinha">
          <div class="blush"></div>
          <div class="mouth big-mouth"></div>
        </div>
       
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
       
      </div>
    </div>
Basta encontrar o número do emoji de 1-9. Se quiser editá-los, no html do seu template procure pelo número, por exemplo bear-2 ou jigglypuff-2 e altere como preferir.
Vai aparecer assim:

Espero que gostem :3

segunda-feira, 16 de outubro de 2017

Bordas Personalizadas com Imagens

outubro 16, 2017 1 Comments

Algumas vezes tentei adicionar bordas diferentes a algumas áreas dos layouts (como nas postagens) que usei aqui no blog e, para isso, personalizava planos de fundo no Photoshop para inserir no HTML depois, como mostrei aqui e aqui.
Dando uma olhada no Codepen, encontrei que existe uma forma de se fazer isso de maneira mais rápida e fácil, só que sem chance de ficar tortinho, como acontecia algumas vezes comigo...
Isso porque existe uma propriedade (?~é assim que se diz) para adicionar aos estilos (CSS) de um template/layout chamada border-image. Ela permite que você insira um código no seu HTML em que no lugar da borda em forma de linha, pontilhados ou pontinhos como normalmente a gente vê por aí, irá aparecer uma imagem e o navegador vai mostrar essa imagem como uma borda, daí você pode decorar quase toda área que quiser com bordas em forma de ondas, serrilhadinhos, rendas... usando imagens como gifs e pngs, por exemplo, para deixar mais bonitinho. Testei no Firefox e Chrome e deu certim.
O resultado é que nem esse abaixo:

Exemplo com plano de fundo colorido. Adicione cor ao background.
Exemplo para usar com imagens png, sem plano de fundo, acho que fica mais bonito.
Ok. Agora, como usar? Só acrescentar border-image:url(url-da-imagem) 32 round round; ao código da área que deseja modificar, antes de /b:skin.

Aí vc escolhe onde quer que apareça :3 Por exemplo, na área de postagem (veja como personalizar essa área aqui):
 /**area da postagem**/
@import url('https://fonts.googleapis.com/css?family=Bad+Script');
.post{
font-family: 'Bad Script', cursive;
width: 600px;
color: #a1a1a1;
font-size: 12px;
text-shadow: 1px 2px 3px #eee;
text-align: justify;
border-image-width: 100px;
border: 32px solid transparent;
border-image:url('https://2.bp.blogspot.com/-8jCe-HJ14Mc/WeUEMsSeKUI/AAAAAAAARa4/VwLXFPl1X6MKzfyoa9asqCqjA2cX72DjgCLcBGAs/s1600/lace.png') 38 round round;
padding-right:10px;
padding-left: 10px;
margin:10px 0;
} 
Ou como blockquote:
 blockquote {
    border: 32px solid transparent;
    border-image: url('https://2.bp.blogspot.com/-8jCe-HJ14Mc/WeUEMsSeKUI/AAAAAAAARa4/VwLXFPl1X6MKzfyoa9asqCqjA2cX72DjgCLcBGAs/s1600/lace.png') 50 round round;
    border-image-width: 100px;
    font-family: 'Bad Script', cursive;
    font-size: 20px;
    color: #cab0b2;
    margin: 0;
    padding: 5px;
    text-align: center;} 
 #ID-DO-WIDGET {
    border: 32px solid transparent;
    border-image: url(https://2.bp.blogspot.com/-8jCe-HJ14Mc/WeUEMsSeKUI/AAAAAAAARa4/VwLXFPl1X6MKzfyoa9asqCqjA2cX72DjgCLcBGAs/s1600/lace.png) 32 round round;
    background: transparent !important;
    width: 350px;
 } 
Ou para decorar alguma coisa... vá no HTML de seu template/tema/modelo e cole esse código antes de /b:skin:
 @import url('https://fonts.googleapis.com/css?family=Bad+Script');
.divider {
  border: 32px solid transparent;
  border-image:url('https://2.bp.blogspot.com/-8jCe-HJ14Mc/WeUEMsSeKUI/AAAAAAAARa4/VwLXFPl1X6MKzfyoa9asqCqjA2cX72DjgCLcBGAs/s1600/lace.png') 38 round round;
  background-color: #f3dbdc;
  font-family: 'Bad Script', cursive;
  font-size: 20px;
  color: #cab0b2;
  margin: 0;
  padding: 5px;
  text-align: justify;
} 
No código acima, aparece um background colorido, se quiser que fique só a borda com plano de fundo transparente, especifique um tamanho:
 @import url('https://fonts.googleapis.com/css?family=Bad+Script');
.divider {
    border: 32px solid transparent;
    border-image: url('https://2.bp.blogspot.com/-8jCe-HJ14Mc/WeUEMsSeKUI/AAAAAAAARa4/VwLXFPl1X6MKzfyoa9asqCqjA2cX72DjgCLcBGAs/s1600/lace.png') 50 round round;
    border-image-width: 100px;
    font-family: 'Bad Script', cursive;
    font-size: 20px;
    color: #cab0b2;
    margin: 0;
    padding: 5px;
    text-align: justify;} 
Você pode alterar os valores 32px, 100px, 38 e 50, mudando a borda conforme preferir. E onde quiser que apareça, cole isso:
 <div class='divider'>
Escreva Aqui
</div> 
E é isso!! Nesse site tem imagens fofas para usar: Asterism. Mas você mesmo pode criar suas próprias formas em programas de edição de imagem, dando um toque especial ao seu blog.
Imagem início do post: weheartit

terça-feira, 10 de outubro de 2017

Gatinho Animado feito com HTML, Css e Fofura!

outubro 10, 2017 5 Comments
Encontrei no Codepen um código super fofo para criar um gatinho animado usando apenas html e css; ele mexe bigodes e orelhas e parece respirar :3 Há como usá-lo de diversas maneiras. Resolvi adicionar ao código um menu com opções para voltar ao topo, atualizar a página e uma caixa de pesquisa que aparecem ao passar o mouse sobre o felino. Se quiserem adicionar ao blog de vocês, cole este código no html do seu template antes de </body>
Para mudar as cores do gato e dos links, troque onde houver #000 pela cor que preferir, alguns lugares para modificar destaquei lá no código. Deixei o meu gatinho preto em homenagem ao Bigode, um gato de verdade com o maior bigodon que já vi na vida! Ele aparece aqui em casa, principalmente na hora do almoço... (jantar, café da manhã, lanche ou qualquer hora em que a gente estiver comendo alguma coisa 😝). Aquela bola de pelinhos me faz adorar ainda mais os gatos!💖

domingo, 1 de outubro de 2017

sexta-feira, 29 de setembro de 2017

Caixa de Códigos com Opção para Copiar e Imprimir

setembro 29, 2017 0 Comments
Há algum tempo postei sobre como usar a caixa de códigos SyntaxHighlighter e prometi trazer esse tutorial com a função copiar.
Pois então, é isso que faremos nesse post; a caixa de códigos funciona assim: quando você posicionar o mouse sobre ela, vão aparecer 3 imagens, as estrelas que vocês verão no exemplo, cada uma serve para: copiar todo o código, imprimi-lo e ver os créditos ao autor. Veja o resultado aqui.
1. Cole o código abaixo antes de </body> no html do seu template:
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody
{
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: none !important;
    color: #f9cccc !important;
    text-align: left !important;
    float: none !important;
    vertical-align: baseline !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    width: auto !important;
    line-height: 1.1em !important;
    font-family: &quot;Consolas&quot;, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, Courier, monospace !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 14px !important;
    min-height: inherit !important; /* For IE8, FF  WebKit */
    min-height: auto !important; /* For IE7 */
}
 
.syntaxhighlighter
{
    width: 99% !important;
    margin: 1em 0 1em 0 !important;
    padding: 1px !important;
    overflow: auto;
    position: relative !important;
}
 
.syntaxhighlighter .bold
{
    font-weight: bold !important;
}
 
.syntaxhighlighter .italic
{
    font-style: italic !important;
}
 
.syntaxhighlighter .line
{
    background: #fff4f4 !important;
}
 
.syntaxhighlighter .no-wrap .line .content
{
    white-space: pre !important;
}
 
.syntaxhighlighter .line table 
{
    border-collapse: collapse !important;
}
 
.syntaxhighlighter .line td
{
    vertical-align: top !important;
}
 
.syntaxhighlighter .line .number
{
    width: 3em !important;
}
 
.syntaxhighlighter .line .number code
{
    width: 2.7em !important;
    padding-right: .3em !important;
    text-align: right !important;
    display: block !important;
}
 
.syntaxhighlighter .line .content
{
    padding-left: .5em !important;
}
 
.syntaxhighlighter .line .spaces
{
}
 
/* Disable border and margin on the lines when no gutter option is set */
.syntaxhighlighter.nogutter .line .content
{
    border-left: none !important;
}
 
.syntaxhighlighter .bar
{
    display: none !important;
}
 
.syntaxhighlighter .bar.show
{
    display: block !important;
}
 
.syntaxhighlighter.collapsed .bar
{
    display: block !important;
}
 
/* Adjust some properties when collapsed */
 
.syntaxhighlighter.collapsed .lines
{
    display: none !important;
}
 
.syntaxhighlighter .lines.no-wrap
{
    overflow: auto !important;
    overflow-y: hidden !important;
}
 
/* Styles for the toolbar */
 
.syntaxhighlighter .toolbar
{
    position: absolute !important;
    right: 0px !important;
    top: 0px !important;
    font-size: 1px !important;
    padding: 8px 8px 8px 0 !important; /* in px because images don&#39;t scale with ems */
}
 
.syntaxhighlighter.collapsed .toolbar
{
    font-size: 80% !important;
    padding: .2em 0 .5em .5em !important;
    position: static !important;
}
 
.syntaxhighlighter .toolbar a.item,
.syntaxhighlighter .toolbar .item
{
    display: block !important;
    float: left !important;
    margin-left: 1px !important;
    margin-top: -5px !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    text-indent: -5000px !important;
}
 
.syntaxhighlighter.collapsed .toolbar .item
{
    display: none !important;
}
 
.syntaxhighlighter.collapsed .toolbar .item.expandSource
{
    display: inline !important;
    text-indent: 0 !important;
    width: auto !important;
    float: none !important;
    height: 16px !important;
    padding-left: 20px !important;
}
 
.syntaxhighlighter .toolbar .item.viewSource
{
    background-image: url(&#39;https://4.bp.blogspot.com/-30zTn2bn3ak/WcnMv6Pd83I/AAAAAAAARUw/BTUzgepPeEc5XTDXOsBUjhnRdTl3ifiGwCLcBGAs/s1600/star.png&#39;) !important;
}
 
.syntaxhighlighter .toolbar .item.printSource
{
    background-image: url(&#39;https://4.bp.blogspot.com/-30zTn2bn3ak/WcnMv6Pd83I/AAAAAAAARUw/BTUzgepPeEc5XTDXOsBUjhnRdTl3ifiGwCLcBGAs/s1600/star.png&#39;) !important;
}
 
.syntaxhighlighter .toolbar .item.about
{
    background-image: url(&#39;https://4.bp.blogspot.com/-30zTn2bn3ak/WcnMv6Pd83I/AAAAAAAARUw/BTUzgepPeEc5XTDXOsBUjhnRdTl3ifiGwCLcBGAs/s1600/star.png&#39;) !important;
}
 
 
.line.alt2 {
    background: white !important;
}
 
/* Gutter line numbers */
.syntaxhighlighter.printing .line .number
{
    color: #ffd5d5 !important;
}
</style>
<script src='https://kawaiiicode.github.io/shCore.js' type='text/javascript'/> 
<script src='https://kawaiiicode.github.io/shBrushCSharp.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
</b:if> 

Onde estiver escrito...
color ou background = altere as cores (veja uma tabela de cores aqui)
width= altere as larguras; em width: 99% !important; - mude o número para um menor caso queira diminuir a largura da caixa.
Para alterar a imagem da estrela, mude:
https://4.bp.blogspot.com/-30zTn2bn3ak/WcnMv6Pd83I/AAAAAAAARUw/BTUzgepPeEc5XTDXOsBUjhnRdTl3ifiGwCLcBGAs/s1600/star.png

Quando quiser usar em alguma postagem para compartilhar códigos, você deve inserir no HTML da postagem:
<pre class="brush: c-sharp;">SEU CÓDIGO AQUI</pre>
Na área em que você insere os códigos (seu código aqui) cole o que for compartilhar; eu geralmente uso esse site para postar o código no html e ele apareça conforme deve ser usado pelos leitores.
E é isso. Espero que gostem.

Imagem: Weheartit