novembro 15, 2018

Corações, Estrelas, Brilhos, Flores, Notas no ponteiro do mouse do blog (Html)


Lembra quando há muito muito tempo postei aquele efeito de corações caindo do ponteiro do mouse para blog? E daquelas bolhinhas que animavam o cursor? Então, parecido com aqueles códigos, compartilho este do post de hoje, e, dando uma olhadinha no script, descobri que nesse há como usar outros símbolos para deixar o cursor com efeitos mais kawaii, como estrelas, notas musicais, flores, brilhinhos... Funciona assim:

1. Primeiro abra o script Love Heart Cursor do site http://www.mf2fm.com/rv em um editor de html (como sugestão, recomendo o Codepen, no qual vc já pode editar os scripts e ver como fica, veja outros editores aqui). 

2. Logo no início do código você encontra esse trecho:
var colours=new Array('#fee', '#fcc', '#f9b', '#fee', '#fcc', '#f9b'); // colours of the hearts
var minisize=10; // smallest size of hearts in pixels
var maxisize=15; // biggest size of hearts in pixels

Em que
No lugar de #fee, #fcc e #f9b são os códigos de cores, os quais podem ser substituídos por outros de sua preferência. Os números 10 e 15 são o tamanho dos símbolos que vão aparecer quando se move o mouse, quer dizer que eles terão 10 pixels e ficam maiores até 15 pixels, você pode mudar para deixá-los maiores ou menores ou sem mudar tamanho com valor igual.

3. Busque (Ctrl+F) no script por 9829. Esse número aparecerá 2 vezes e ele se refere ao código do símbolo de coração. Se mudar esse número, aparece outro símbolo. Sugestões:
♥ - 9829
❤ - 10084
♪ - 9834
♡ - 9825
✿ - 10047
✦ - 10022
✧ - 10024
★ - 9733

4. Depois de alterar o script, copie ele e cole no html do seu template antes de </head> ou em um novo gadget html/javascript, salve e veja como ficou.
Aqui no meu blog esse script funcionou mais ou menos, os efeitos apareceram apenas no topo do blog, quando deveriam aparecer por toda parte quando movesse o mouse, talvez porque ele seja responsivo, já que, testei o mesmo código em outro template responsivo e não deu certinho (๑˃́ꇴ˂̀๑)‧˚₊*̥ Testei em um modelo padrão do Blogger (não responsivo) e funcionou direitinho! Também fica lindinho no Tumblr, já vi muita gente usando esse código por lá.

E, para quem quiser usar alguns modelinhos que fiz testando lá no codepen, veja abaixo, copie apenas o que houver na área HTML e cole em seu template (mova o mouse nos quadrinhos coloridos em Result para ver o efeito).
Flores
See the Pen Efeito para Cursor (flores) by Rô (@kawaii) on CodePen.

Corações
Estrelas
See the Pen Efeito para cursor (stars) by Rô (@kawaii) on CodePen.

Notas Musicais
Brilhinhos Coloridos

Se vc curte esses efeitos para cursores que de vez em quando posto aqui no blog, saiba que tem como fazer quase igual no Windows, usando imagens e programas tipo CursorXP ou ClickStar ;3
E é isso!

Continue...

novembro 11, 2018

Materiais para Editar Fotos (kawaii) no PC

Para quem curte editar imagens, deve adorar aqueles apps que vêm com molduras e adesivos bonitinhos para decorar fotos de um de um jeito bem fofo, como os que recomendo nas tags android, ios ou iphone. Algumas dessas decorações podem ser encontradas pela internet para quem deseja fazer as mesmas edições usando o computador. Nesse post recomendo um dos meus sites favoritos para encontrar esse e outros tipos de imagens em png (sem plano de fundo) e que podem ser usadas em qualquer programa editor de imagens.
É o Prepics, que também é aplicativo para iOS e Android (links para cada sistema no site) no qual você encontra imagens diversas como molduras, pngs, wallpapers, fotos, postados por usuários e, se quiser, poderá se cadastrar também, mas até agora, você pode baixar imagens sem se registrar. Ter uma conta no site serve para quem quer enviar imagens, favoritar as que gostar, seguir pessoas, comentar... ou seja, para quem quiser usar como rede social.
Ao acessá-lo, seja pelo app ou pelo site, você pode digitar o que procura na barra de pesquisa e navegar pelas páginas, clicando em alguma imagem que gostar para ver mais informações e salvar; no app, há o botãozinho de download na parte inferior da tela (abaixo), no site, basta salvar a imagem normalmente, podendo vê-la em tamanho real se clicar nela.
Como o site é japonês, é interessante pesquisar por palavras em inglês ou japonês; eu uso o tradutor do google para isso :3 Geralmente busco por molduras, adesivinhos ou estampinhas... Alguns links com páginas de busca, álbuns e perfis cheios de materiais para editar imagens:

Algumas vezes vc encontra coisas que são pagas em outros apps em png :) Nos links que deixei acima vcs encontrarão fofuras como essas:

Ok, agora, como editar no pc? Para isso, vc precisará de um editor de imagens como o Photoshop, Medibang, Paint Tool Sai, Meitu Xiuxiu. Esses são meus favoritos, mas existem outros claro, como o Photoscape, Gimp, Pictbear... que já citei em postagens mais antigas. Enfim, tenha um editor e...
1. Abra a imagem que deseja editar e as decorações que salvou em seu pc.
2. Se seu editor aceitar camadas (como no Photoshop, Medibang, SAI, Pictbear e Gimp), copie e cole cada decoração em uma camada diferente. Para isso, basta selecionar a imagem toda (Ctrl+A), copiar (Ctrl+C) e colar (Ctrl+V) ou arrastar a imagem para a foto que estiver editando.
Na imagem, estou usando o Medibang
Você pode ocultar as demais e deixar visível apenas a sua foto e a decoração que for editar; eu geralmente altero o tamanho para ficar de acordo com a imagem principal (redimensionando), recorto ou apago alguma coisa que não quero, no caso das molduras. Com as estampas ou adesivinhos, simplesmente redimensiono e altero a opacidade e o modo da camada para ficar sobreposto à foto como efeito.
3. Se seu editor não aceitar que edite cada camada, como é o caso do Meitu Xiuxiu, basta inserir uma imagem sobre a principal, redimensionar, virar horizontal/vertical, girar, alterar opacidade ou mesclar (unir) as imagens. No Meitu, cada imagem pode ser definida como decoração para usar sempre que quiser (que nem mostrei nesse post aqui).
Aí vc pode aplicar algum filtro na imagem antes ou depois de usar as decorações, algumas podem ser usadas como filtro suavizando a foto, por exemplo.

Como as imagens são em png, também dá para salvar no celular e usar em apps que aceitam stickers/adesivos criados por você, como o LineCamera e o Meitu.
No LineCamera é só tocar no ícone de tesoura, no sinal de +, selecionar a imagem que quiser como sticker e usar na foto.
No Meitu é mais ou menos igual, como mostro acima. Já postei outros apps bons para colagens que podem ajudar também, dá uma olhadinha nos posts anteriores e encontrará ;3 E tem alguns tutoriais sobre linecamera guardados em postagens mais antigas.
E pronto! O que vc faz nas suas fotos do celular pode fazer no pc ^-^
Continue...

novembro 09, 2018

Caixinha da Hello Kitty em Css


Esse mês é o aniversário da Hello Kitty (na verdade, foi, dia 1º de novembro), a gatinha fofa da Sanrio. Então resolvi compartilhar o código de uma caixinha que usei em layouts passados e uso no atual, feita com css, onde se pode adicionar o que quiser, como texto, imagem, vídeo, links, menus, itens/plugins/widgets de redes sociais, como essa caixa de curtir a página do facebook que ela está dando uma mordidinha com carinho, minha sugestão. Para chegar ao resultado que compartilho tive como base esse código de Stephanie.
Se você quiser usar, copie o código que deixei aqui e cole em um novo gadget Html/Javascript ou em uma área de html onde preferir. Talvez seja necessário editar para que se adapte melhor ao seu template, como tive que fazer aqui no meu, ficando com um resultado um pouco diferente do da página de visualização; mas cada parte da gatinha já está especificada no código, como olhos, orelhas, laço, nariz... basta mudar cores e valores e adicionar alguma coisa que desejar onde indiquei no html. Algumas coisinhas básicas para quem for personalizar:
1 - .hkbox{ = área toda da hello;
2 - onde houver height e width = altura e largura;
3 - top, left, right, margin-top, margin-left... = posicionar com relação ao topo, direita, esquerda;
4 - background = cores da gatinha; as que usei mais são branco (white/whitesmoke), azul (lightblue), rosa (pink/hotpink), amarelo (#edb93b)...
5 - border e border-radius = definir bordas, cores das bordas, arredondar;
6 - .hkhead{ = área da carinha, ela toda é uma carinha arredondada neh :3;
7 - .miu{ = personaliza a área onde vc insere textos, imagem...
8 - Onde diz #laco2{display: none;... é que eu ia adicionar mais um laço e depois mudei de ideia, se apagar o display: none; ele vai aparecer e ela terá 2 laços;
9 - Para quem for adicionar o plugin de página do facebook, poderá mudar o valor de height (altura) para, por exemplo, height='70'... para que apareça apenas o nome da página com quantas curtidas mais foto do perfil. Obtenha o plugin de página do face aqui. Também deixe marcado a opção usar cabeçalho pequeno.

Como eu disse, tive que dar uma ajeitadinha na minha kitty box, usei o CSS abaixo, e, caso queira usá-lo, substitua tudo o que houver no código original que disponibilizei e estiver entre <style> e </style> por isso:
.hkbox{
  position: relative;
  width: 280px;
}
.orelha1{
    position: absolute;
    top: 0;
    left: 12px;
    background: white;
    width: 60px;
    height: 60px;
    border-radius: 38% 30% 0% 50%;
    border: 10px solid white;
    transform: rotate(10deg);
}
.orelha2{
position: absolute;
    top: -3px;
    right: 12px;
    background: white;
    width: 60px;
    height: 60px;
    border-radius: 38% 30% 0% 50%;
    border: 10px solid white;
    transform: rotate(80deg);
  }
.hkhead{
 z-index: 4;
    width: 100%;
    border-radius: 35% 35% 20% 20%;
    background: white;
    border-left: 15px solid white;
    border-bottom: 10px dotted whitesmoke;
    border-right: 14px solid white;
}
.olho1{
      position: absolute;
    width: 30px;
    height: 40px;
    border-radius: 50%;
    border-top: 10px solid lightblue;
    top: 32%;
    left: 24%;
    transform: rotate(-10deg);
}
.olho2{
      position: absolute;
    width: 30px;
    height: 40px;
    border-radius: 50%;
    border-top: 10px solid lightblue;
    top: 32%;
    right: 25%;
    transform: rotate(10deg);
}
.nariz{
      position: absolute;
    top: 38%;
    left: 45%;
    z-index: 6;
    background: pink;
    border: 6px solid white;
    width: 25px;
    height: 20px;
    border-radius: 50% 50% 45% 45%;
}
#laco{
      position: absolute;
      top: -1%;
      right: 2%;
      width: 130px;
      height: 90px;
}
.cnt-laco{
        position: relative;
}
.circulo{
          background: hotpink;
          width: 40px;
          height: 40px;
          border: 8px solid hotpink;
          border-radius: 50%;
          z-index: 999;
          position: absolute;
          margin-top: 25px;
          left: 40%;
}
.circulo-pequeno-r{
          background: hotpink;
          width: 20px;
          height: 20px;
          border: 6px solid hotpink;
          border-radius: 50%;
          z-index: 998;
          position: absolute;
          margin-top: 51px;
          right: 8%;
}
.circulo-pequeno-l{
          background: hotpink;
          width: 20px;
          height: 20px;
          border: 6px solid hotpink;
          border-radius: 50%;
          z-index: 998;
          position: absolute;
          margin-top: 24px;
          left: 30%;
}
.lazo-1
 .lazo-1:after{
            position: absolute;
            top: -30%;
            left: 18%;
            content: '';
            display: block;
            background: hotpink;
            width: 47px;
            height: 55px;
            border-radius: 50%;
            z-index: 99;
}            
 .lazo-1:before{
            position: absolute;
            margin-top: 2px;
            left: 15%;
            content: '';
            display: block;
            background: hotpink;
            width: 50px;
            height: 60px;
            border-radius: 50%;
            transform: rotate(38deg);
            z-index: 99;
}
.lazo-1-sombra
.lazo-1-sombra:after{
            position: absolute;
            top: -8px;
            left: 10%;
            content: '';
            display: block;
            background: hotpink;
            width: 67px;
            height: 65px;
            border-radius: 50%;
            z-index: 9;
}  
.lazo-1-sombra:before{
            position: absolute;
            margin-top: -1px;
            left: 8%;
            content: '';
            display: block;
            background: hotpink;
            width: 65px;
            height: 70px;
            border-radius: 50%;
            transform: rotate(38deg);
            z-index: 9;
}
.lazo-2
.lazo-2:after{
            position: absolute;
            margin-top: 40px;
            right: -17%;
            content: '';
            display: block;
            background: hotpink;
            width: 55px;
            height: 60px;
            transform: rotate(38deg);
            border-radius: 50%;
            z-index: 99;
  }

  .lazo-2:before{
            position: absolute;
            margin-top: 45px;
            right: -13%;
            content: '';
            display: block;
            background: hotpink;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            transform: rotate(40deg);
            z-index: 99;
  }
.lazo-2-sombra
.lazo-2-sombra:after{
            position: absolute;
            margin-top: 50px;
            right: -14%;
            content: '';
            display: block;
            background: hotpink;
            width: 73px;
            height: 60px;
            transform: rotate(38deg);
            border-radius: 50%;
            z-index: 9;
  }
.lazo-2-sombra:before{
            position: absolute;
            margin-top: 30px;
            right: -14%;
            content: '';
            display: block;
            background: hotpink;
            width: 69px;
            height: 70px;
            border-radius: 50%;
            transform: rotate(38deg);
            z-index: 9;
}
.corpim{
      position: relative;
    top: -190px;
    height: 200px;
}
.mao-1{
      position: absolute;
    width: 60px;
    height: 100px;
    background: white;
    border: 9px solid whitesmoke;
    border-radius: 48% 48% 48% 48%;
    top: 136px;
    right: -3%;
    transform: rotate(150deg);
}
 .mao-1:after{
        content: '';
        position: absolute;
        top: 40px;
        left: -13px;
        display: block;
        width: 40px;
        height: 50px;
        background: white;
        transform: rotate(-100deg);
        border-radius: 50%;
        border-top: 10px solid whitesmoke;
}

.mao-2{
      position: absolute;
      width: 60px;
      height: 100px;
      background: white;
      border: 9px solid whitesmoke;
      border-radius: 48% 48% 48% 48%;
      top: 106px;
      left: -6%;
      transform: rotate(190deg);
}
 .mao-2:after{
        content: '';
        position: absolute;
        top: 40px;
        left: -13px;
        display: block;
        width: 40px;
        height: 50px;
        background: white;
        transform: rotate(-100deg);
        border-radius: 50%;
        border-top: 10px solid whitesmoke;
}
.miu{
  width: 250px;
  border-radius: 50%;
  margin-top: -75px;
  background: white;
  color: pink;
  font-family: 'Delius', cursive;
  font-size: 14px;
}
#laco2{
      display: none;
      position: absolute;
      top: -1%;
      left: 2%;
      width: 130px;
      height: 90px;
}
.cnt-laco2{
        position: relative;
}
.circulo2{
          background: hotpink;
          width: 40px;
          height: 40px;
          border: 8px solid hotpink;
          border-radius: 50%;
          z-index: 999;
          position: absolute;
          margin-top: 25px;
          right: 40%;
}
.circulo-pequeno-r2{
          background: pink;
          width: 20px;
          height: 20px;
          border: 6px solid hotpink;
          border-radius: 50%;
          z-index: 998;
          position: absolute;
          margin-top: 51px;
          left: 8%;
}
.circulo-pequeno-l2{
          background: pink;
          width: 20px;
          height: 20px;
          border: 6px solid hotpink;
          border-radius: 50%;
          z-index: 998;
          position: absolute;
          margin-top: 24px;
          right: 30%;
}
.lazo-12
 .lazo-12:after{
            position: absolute;
            top: -30%;
            right: 18%;
            content: '';
            display: block;
            background: hotpink;
            width: 47px;
            height: 55px;
            border-radius: 50%;
            z-index: 99;
}            
 .lazo-12:before{
            position: absolute;
            margin-top: 2px;
            right: 15%;
            content: '';
            display: block;
            background: hotpink;
            width: 50px;
            height: 60px;
            border-radius: 50%;
            transform: rotate(38deg);
            z-index: 99;
}
.lazo-12-sombra
.lazo-12-sombra:after{
            position: absolute;
            top: -8px;
            right: 10%;
            content: '';
            display: block;
            background: hotpink;
            width: 67px;
            height: 65px;
            border-radius: 50%;
            z-index: 9;
}  
.lazo-12-sombra:before{
            position: absolute;
            margin-top: -1px;
            right: 8%;
            content: '';
            display: block;
            background: hotpink;
            width: 75px;
            height: 80px;
            border-radius: 50%;
            transform: rotate(38deg);
            z-index: 9;
}
.lazo-22
.lazo-22:after{
            position: absolute;
            margin-top: 40px;
            left: -17%;
            content: '';
            display: block;
            background: hotpink;
            width: 55px;
            height: 60px;
            transform: rotate(38deg);
            border-radius: 50%;
            z-index: 99;
  }

  .lazo-22:before{
            position: absolute;
            margin-top: 45px;
            left: -13%;
            content: '';
            display: block;
            background: hotpink;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            transform: rotate(38deg);
            z-index: 99;
  }
.lazo-22-sombra
.lazo-22-sombra:after{
            position: absolute;
            margin-top: 50px;
            left: -14%;
            content: '';
            display: block;
            background: hotpink;
            width: 73px;
            height: 60px;
            transform: rotate(38deg);
            border-radius: 50%;
            z-index: 9;
  }
.lazo-22-sombra:before{
            position: absolute;
            margin-top: 33px;
            left: -24%;
            content: '';
            display: block;
            background: hotpink;
            width: 69px;
            height: 70px;
            border-radius: 50%;
            transform: rotate(38deg);
            z-index: 9;
}

E se vc curte outros bichinhos kawaii, dá uma olhadinha nos tutoriais aqui do blog em que há códigos para criar caixinhas do Rilakkuma, alpacasso, de coelho... E é isso :)
Continue...

outubro 31, 2018

Navegador Vivaldi + Kawaii

Há algum tempo, meu computador e o Google Chrome não se davam bem, travando quando em execução, mas depois das atualizações mais recentes isso se resolveu; na época, a solução que encontrei foi usar o navegador Vivaldi, que tornou-se meu favorito também, por ser leve e não exigir tanto do pc. Ele possui algumas coisas interessantes e pode ser personalizado de um jeito bem simples com cores e imagens animadas ou estáticas, e o que mais gosto nele é que, desde o dia em que o instalei até hoje, quase não deu problemas, no máximo, fechou sozinho duas ou três vezes; ele é rápido, mesmo se vc abrir muitas abas. A dica de download dessa postagem é o Vivaldi browser e trouxe sugestões para criar temas fofos e usar nele.

Veloz e leve, esse navegador é um projeto do mesmo criador do Opera. Você pode baixá-lo aqui; ele vem com várias coisas integradas que em muitos navegadores precisa de extensão para funcionar, como por exemplo, a opção para capturar toda a tela ou parte dela e salvar como png, jpg ou para a área de transferência.

Conta com um painel lateral no qual, dentre outras coisas, se pode criar painéis de visualização de qualquer link que quiser para monitorar sites enquanto estiver navegando em outro. O site do painel pode ser visualizado como se fosse na versão mobile (para celulares e tablets), um bom jeito para que vc veja como fica seu blog em um smartphone, por exemplo, mas se quiser, pode clicar com o botão direito do mouse no painel e escolher ver a versão para pc. Cada painel pode ter uma largura diferente.

A forma de visualização das abas é interessante; se parar o mouse sobre alguma aba aberta, você verá uma miniatura do site, se clicar e arrastar para baixo na parte superior da barra de endereços, verá miniaturas também;
Essas abas e a barra de endereços podem ser posicionadas na parte inferior da tela, como se fosse uma barra de tarefas do Windows, ou do lado esquerdo ou direito, lá nas configurações de guias e da barra de endereços.
As abas podem ter uma cor normal ou de acordo com a cor predominante do site que visitar, tipo, se acessar o reino kawaii com o vivaldi, sua aba ficará rosa :3 já no facebook, ficará azul, no youtube, vermelha...

As notas também são um bom recurso; vc pode adicionar notas a qualquer momento durante a navegação, salvar textos com links e imagens, daí há como criar lembretes, guardar algum trecho de algo que leu e curtiu e por aí vai.
Outro ponto importante é que a maioria das extensões que são compatíveis com o Google Chrome e estão disponíveis na Chrome webstore podem ser usadas no Vivaldi, como por exemplo, as que citei em posts anteriores para personalizar sites e visualizar imagens do photobucket sem erros, o botão do weheartit... Entretanto, até agora, os temas para o navegador da google no formato .crx, não instalam nele. Mas os desenvolvedores do Vivaldi resolveram isso, aliás, eles fizeram com que a personalização fosse um destaque nas últimas atualizações com as novas opções de temas.

Para personalizar o tema do navegador é só abrir as configurações (Alt+P) ou clicar F2 - configurações, e alterar de acordo com suas preferências. Vou deixar sugestões de combinação de cores e imagens para vocês. Com elas vcs poderão obter temas como estes abaixo:






Uma das coisas mais fofas da personalização do Vivaldi é que ele aceita imagens gifs!!! Então, todos os gifs que virão a seguir ficarão animadinhos na sua tela.Bora deixá-lo kawaii!
1. Em Aparência - Imagem de fundo da janela, você define a imagem que aparece no topo do navegador, atrás das guias/abas. Se usar uma imagem pequena como texturas e padrões, é bom marcar repetir, se quiser que ela fique colorida com a cor principal do navegador, marque colorir imagem com a cor em destaque. Algumas imagens que vc talvez possa gostar e usar (encontradas em sites de sozai, tumblr, angelicpretty.com):
 

 


2. Em Temas você define as cores do seu navegador e poderá programar que um tema seja usado até certa hora, daí ele mudará para outro :3 Para criar o seu, você pode clicar no sinal de +, para excluir, no sinal de - e para editar, no ícone de lápis.

3 modelinhos de cores para vcs:



3. Em Speed Dial você personaliza a tela com sites que adiciona aos favoritos. O Speed Dial pode ser definido como página de início e aparece ao abrir uma nova aba. Você pode agrupar links por pastas e dar nomes a essas pastas, como fiz na imagem abaixo, os nomes das pastas são os números 1 e 2.
As miniaturas das páginas de links no Speed Dial podem ser atualizadas para mostrar como o site está atualmente, ou, se clicar com o botão direito sobre elas, você pode escolher qualquer imagem. Eu usei ícones de um tema para Android (que não é totalmente gratuito), como mostrei aqui e aqui.
Para selecionar uma imagem de fundo, clique em Alterar.
Se quiser que a imagem preencha a tela toda, marque preencher, se quiser que repita no caso de imagens menores, marque repitir ou deixe ambas desmarcadas para usar o tamanho original da imagem.
Algumas imagens fofas encontradas no weheartit.com, pinterest.com, zerochan, fluffybunny:
  

  






Tem como definir se no speed dial vão aparecer as funções adicionar, excluir, atualizar imagem da miniatura, quantas colunas e como exibir ou não títulos.
Ele funciona por meio de comandos de teclado e de gestos definidos pelo usuário também. Por exemplo, se clicar Ctrl+N, vai abrir uma nova janela. Se pressionar o botão direito do mouse em uma área vazia da tela e deslizar para baixo, abre uma nova guia/aba.

Para quem quiser, é possível criar e-mail gratuito e participar da comunidade do Vivaldi, com direito a blog e sincronizar seus dados, ver todas as guias abertas numa tela só, lado a lado, aplicar ações a alguma página e várias outras coisas que ainda não descobri e que estão por vir.
E é isso por enquanto! 
Continue...

I it