Follow Us @soratemplates

sexta-feira, 8 de dezembro de 2017

Chibi e Wallpapers ReinoKawaii

dezembro 08, 2017 0 Comments

Oi, imagino que devam estar se preparando para as festas de fim de ano, certo?
Pois é, eu também e graças a Deus com a saúde cada vez melhor. Tinha planos de desenhar um pouco mais, mas, não posso ficar muito tempo no PC, então desenhei esse chibi com um look de um evento do game Fairy Doll (versão japonesa), que já postei para vocês e que gosto tanto!
Foi o chibi mais rápido que já fiz; juntei com algumas decorações do freepik.com e recursos que credito em meu DeviantArt, tentei deixar o texto 'macio', por causa do frio, e finalmente entendi como fazer o efeito de 'pelinhos' no SAI, aí rendeu o cabeçalho novo e estes wallpapers (contando com o da abertura do post ~click nas imagens para ver em tamanho original):

Caso você queira a bonequinha com o cachorrinho (bateu saudades dos meus cães...):

E o laço (vai que alguém precisa, laços são necessários...):

Espero que gostem!!!

terça-feira, 28 de novembro de 2017

Personalizando o Windows

novembro 28, 2017 2 Comments

Há algum tempo compartilhei com vocês como deixar o windows 10 mais fofo. Hoje trouxe dicas de programas e apps para quem usa versões anteriores desse sistema operacional, principalmente o Windows 7, incluindo a starter, que, por padrão, não permite mudar quase nada, mas que pode ser totalmente personalizada também. Aproveito para deixar dicas que servem para todas as versões e até para smartphones ou tablets com android.
 
***
Antes de começar a personalização, crie um ponto de restauração caso alguma coisa não fique ao seu gosto ou não saia conforme o planejado. No windows 7, abra o menu iniciar e digite na barra de pesquisa "ponto de restauração". Depois clique em criar ponto de restauração e na janela aberta, clique em Criar e dê um nome. Se quiser restaurar o sistema, abra o menu iniciar e digite na caixa de pesquisa "restauração". Clique em restauração do sistema e aí o windows te guia.
***

Agora sim, ao clicar nos links você irá direto para as páginas de downloads ou para os vídeos com tutoriais em espanhol, fáceis de entender...
Mudar Tema e Área de Trabalho

Para instalar um tema baixado da internet no Windows, existem alguns programas/apps que facilitam bem. Um deles é o Aero Patch W7 Starter and Basic, que ativa a opção Personalizar que não está presente nos menus do 7 starter e deixa o computador aceitar temas que você baixa pela internet, mudar wallpaper e cores. Para o windows 10, já usei o UxStyle.
Depois de baixar um tema, você deve guardá-lo na pasta C-Windows-Resources-Themes.
Já postei alguns temas para vocês anteriormente e um dos que mais recomendo é o tema Pink Elune, para Windows 7.
Um programa legal para organizar atalhos na área de trabalho é o Fences.Com ele se pode agrupar os atalhos nesses quadrinhos que podem ser personalizados também.
Outros programas úteis e que nunca desisnstalei do pc são o rainmeter e xwidget; para versões anteriores ao windows 10, pode ser necessário buscar por versões compatíveis, as quais você pode encontrar no site Cnet. Os relógios e algumas decorações de tela das screenshots deste post são feitos com estes dois programas, que permitem criar menus, players, barras de tarefas, de pesquisa, calendários, galerias...

Ícones
Você pode mudar os ícones e para isso precisa de (adivinha?) ícones... Eu personalizo meu PC com ícones dos temas que uso no meu celular Android, como mostrei aqui.
 
Alguns dos meus temas preferidos para extrair as imagens são do Dodol Launcher; se quiserem baixar as apks, clique aqui! São meus preferidos!!! Ah, tem um também para +Home que acho fofinho... Aí dá para combinar o tema do seu celular com o do pc.

Se quiser converter uma imagem png em ícone para computador, use o Toycon; basta arrastar a imagem para o app e ele transforma png em ico. O Folder Maker permite mudar vários ícones de uma vez. E ainda tem o Types que muda a aparência de ícones do mesmo tipo, por exemplo, arquivos mp3, txt... Já postei sobre esses 3 últimos aqui.

Janelas
E com a área de trabalho toda fofa, vamos fazer o mesmo com cada janelinha...
Findexer: Cria um menu lateral personalizável em cada janela aberta. No vídeo vocês verão como usar direitinho.
Windows 7 Folder Background Changer: Muda o plano de fundo de uma pasta específica. Comece clicando em Browse para escolher a pasta e depois em Change Background Image. Dá para mudar a cor do texto da pasta também.
Explorer Frame: Muda os botões de voltar e avançar.
Tem como mudar o background do Windows Media Player e adicionar efeitos às janelas.

Orb ou Botão Iniciar
Há como mudar o ícone do menu iniciar. Para isso, você precisa do StartOrbz. Nele você cria seu próprio conjunto de imagens para substituir o ícone padrão.
Talvez ocorra este erro. Para dar certo, você deve ter permissão total no explorer.exe. Assista ao vídeo do Explorer Frame. É o mesmo procedimento, só que você deve clicar com o botão direito na barra de tarefas - Iniciar Gerenciador de Tarefas.Encontre explorer.exe, clique com o botão direito sobre ele e depois em Abrir local do arquivo.
Você vai para Computador-C-Windows, direto no explorer.exe e aí faz aquele processo do vídeo para te dar livre acesso e modificar o ícone.

Cursor com Efeitos
Caso queira criar um cursor, leia esse tutorial. Caso queira baixar cursores, veja aqui.
E para adicionar efeitos, sons e animações ao cursor, meus preferidos são: Cursor XP e Clickstar. Na imagem acima, uso o CursorXp com rastro de coraçõezinhos.
As imagens desse gatinho, do relógio (acima) e de um outro que aparece na postagem são de Amenomori Fumika.
E é isso. Espero que as dicas sejam úteis. C

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!💖