Menu com Reflexo



Trouxe alguns modelinhos para um menu com efeito que, ao passar o mouse sobre ele, aparece tipo um reflexo, um brilhinho. Encontrei esse efeito aqui.Basta copiar e colar os códigos onde quiser em seu Layout - Add gadget - HTML/JavaScript:

 <style>
.buttton {
  margin: 10px 0 10px 0;
  width: 200px;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.buttton:hover .reflex {
  transform: skewX(20deg) translateX(300px);
  cursor: pointer;
}
/*estilo folha*/
.txt1 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: pink;
  box-shadow: 5px 0px 1px #fea3b3;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 50% 0;
}

.txt2 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: lavender;
  box-shadow: 5px 0px 1px #cbcbfc;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 50% 0;
}


.txt3 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: #c1f2c1;
  box-shadow: 5px 0px 1px #90ee90;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 50% 0;
}

.txt4 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: lightblue;
  box-shadow: 5px 0px 1px #77bad1;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 50% 0;
}
.reflex {
  position: absolute;
  top: 0;
  left: -70px;
  height: 98px;
  width: 50px;
  background: rgba(255, 255, 255, 0.23);
  transition: all .5s linear;
  transform: skewX(20deg) translateX(0);
}
</style>
<div class="buttton">
  <a href='#'><button class="txt1">Link 1</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt2">Link 2</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt3">Link 3</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt4">Link 4</button></a>
  <div class="reflex"></div>
</div> 


 <style>
.buttton {
  margin: 10px 0 10px 0;
  width: 200px;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.buttton:hover .reflex {
  transform: skewX(20deg) translateX(300px);
  cursor: pointer;
}
/*estilo redondo*/
.txt5 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: pink;
  box-shadow: 5px 0px 1px #fea3b3;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 100%;
}


.txt6 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: lavender;
  box-shadow: 5px 0px 1px #cbcbfc;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 100%;
}


.txt7 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: #c1f2c1;
  box-shadow: 5px 0px 1px #90ee90;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 100%;
}

.txt8 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: lightblue;
  box-shadow: 5px 0px 1px #77bad1;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 100%;
}
.reflex {
  position: absolute;
  top: 0;
  left: -70px;
  height: 98px;
  width: 50px;
  background: rgba(255, 255, 255, 0.23);
  transition: all .5s linear;
  transform: skewX(20deg) translateX(0);
}
</style>
<div class="buttton">
  <a href='#'><button class="txt5">Link 1</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt6">Link 2</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt7">Link 3</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt8">Link 4</button></a>
  <div class="reflex"></div>
</div> 


 <style>
.buttton {
  margin: 10px 0 10px 0;
  width: 200px;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.buttton:hover .reflex {
  transform: skewX(20deg) translateX(300px);
  cursor: pointer;
}
/*estilo borda arredondada*/
.txt9 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: pink;
  box-shadow: 5px 0px 1px #fea3b3;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 20px;
}


.txt10 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: lavender;
  box-shadow: 5px 0px 1px #cbcbfc;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 20px;
}


.txt11 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: #c1f2c1;
  box-shadow: 5px 0px 1px #90ee90;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 20px;
}

.txt12 {
  border: 0;
  padding: 20px 20px;
  width: 100px;
  background: lightblue;
  box-shadow: 5px 0px 1px #77bad1;
  color: white;
  font-size: 14px;
  transition: background .5s linear;
  border-radius: 20px;
}
.reflex {
  position: absolute;
  top: 0;
  left: -70px;
  height: 98px;
  width: 50px;
  background: rgba(255, 255, 255, 0.23);
  transition: all .5s linear;
  transform: skewX(20deg) translateX(0);
}
</style>
<div class="buttton">
  <a href='#'><button class="txt9">Link 1</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt10">Link 2</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt11">Link 3</button></a>
  <div class="reflex"></div>
</div>

<div class="buttton">
  <a href='#'><button class="txt12">Link 4</button></a>
  <div class="reflex"></div>
</div>
 

Mude a '#' por links e Link1/2/3/4 pelos títulos/nomes dos links. E conforme vocês podem ver nos códigos, é possível mudar cores (color, backgrounds, box-shadow), tamanhos de fonte (font-size), larguras (width), distâncias de margin e padding, bordas (border, border-radius), a cor do reflexo (rgba(255, 255, 255, 0.23))... e claro, acrescentar muitos outros estilos que preferir.
Imagem: Pixabay.com

SIMILAR POSTS

Skins Fofas para Rainmeter (menu, barrinhas animadas e atalho)


No post anterior vocês viram como eu edito algumas skins para usar no Rainmeter. Trouxe algumas para vocês...
A primeira é um menu de macarons.
https://dl.dropboxusercontent.com/u/69023084/Macaron%20Menu_.rmskin 
Cada macaron pode conter um link favorito seu. Para mudar os links, clique com o botão direito sobre os macarons e escolha Editar skin. O bloco de notas será aberto e você encontrará no documento o link daqui do blog repetido várias vezes, basta substituí-los por outros de sua preferência. Onde aparecer o nome 'Reino Kawaii' você deve mudar para os títulos dos links que escolher. Salve as alterações no documento, clique com o botão direito sobre os macarons e escolha a opção Recarregar skin.
As imagens dos macarons foram encontradas no Freepik/Tamaratorres, eu apenas mudei algumas cores.

❤❤❤

A segunda skin é essa alpaca (na verdade, é uma ovelha, mas eu acho que parece mais alpaca😕)...

https://dl.dropboxusercontent.com/u/69023084/Arpk_1.rmskin 
 É uma skin de atalho animada, vai ficar assim na sua tela:
Se quiser mudar o link que vem nela, clique com o botão direito sobre a skin, Editar skin, no bloco de notas troque o link do blog por outro que preferir, salve e recarregue a skin.

❤❤❤

 A terceira skin é composta por essas barrinhas animadas:





Elas vão aparecer do tamanho da tela. Os gifs foram encontrados no Engrampixel.
Espero que gostem😉

SIMILAR POSTS

Criar skins de atalho e decoração para Windows com Rainmeter


Se você acompanha o blog há algum tempo, já deve ter lido postagens sobre um programa que eu uso bastante, o Rainmeter; com ele você pode usar skins com funções bem úteis, seja para decorar sua tela apenas, seja para criar atalhos, monitorar o sistema, ter um bloquinho de notas e outras coisas úteis na sua área de trabalho, que nem essas acima na screenshot do meu pc, os macarons, a bonequinha ruiva e a barrinha de doces sobre a barra de tarefas.
Criar uma skin decorativa no Rainmeter é bem fácil. Tudo o que você precisa é de um editor de HTML (como o Notepad++) para criar um arquivo .ini ou bloco de notas para editar um arquivo .ini, e das imagens que pretende usar.
Abra a pasta Documentos - Rainmeter - Skins. É aí que ficam salvas todas as skins do programa que você instalou. Crie uma nova pasta e dê um nome de acordo com a skin que vá criar; como exemplo, vou criar skins de atalho e decorativas.

Skin de Atalho com imagem PNG
Copie e cole a imagem que vai usar na pasta criada anteriormente. Vou usar a imagem de um dos chibis que desenhei para mostrar o modo mais simples. Recomendo usar uma imagem do tipo png, sem plano de fundo. Abra o Notepad e cole esse código:
[Rainmeter]
Author=Escreva seu nome aqui
Update=


[ImageMeter]
Meter=Image
X=0
Y=0
W=digite um valor para largura
H=digite um valor para altura
ImageName=coloque o nome da imagem seguido do formato
DynamicVariables=1
Hidden=0
LeftMouseUpAction=!Execute ["digite o link do atalho"]
ToolTipText=texto que aparece quando o mouse está sobre a skin (tooltip)#CRLF#outra linha

Substitua onde for necessário. Na largura e altura você pode especificar apenas o valor da altura e deixar a largura em branco que o programa redimensiona a imagem.
Em ImageName você coloca o nomedaimagem.png e o link do atalho pode ser de um site ou de alguma pasta em seu computador e até mesmo aqueles links .exe, para executar um aplicativo/programa para que quando clicar na imagem abra o link.
Os valores de X e Y servem para posicionar na tela (para cima, para baixo, direita, esquerda) e são opcionais, como no caso vou usar 1 imagem apenas, não precisa.
Se quiser que o tooltip (texto que aparece ao passar o mouse) tenha a forma de um balão, acrescente ao código:
ToolTipType=1 
O meu ficou assim:

E o resultado:

Para salvar os códigos, escolha Salvar como - nomeie o arquivo com o mesmo nome que deu à sua pasta e em tipo, selecione a opção MS ini file.

Isso cria um arquivo.ini, necessário ao programa. Mas se você não tiver um editor de HTML instalado e não quer instalar nenhum, copie algum arquivo.ini de uma skin e cole na pasta com a imagem do que estiver criando; depois, clique direito sobre ele e escolha Editar. O bloco de notas será aberto; substitua todo o código do arquivo copiado por um dos que aparecem neste post e então salve.


Skin de atalho com imagem animada 


Se quiser uma imagem animada na sua tela, feita a partir de um gif (que nem a bonequinha que postei aqui), é preciso salvar as camadas que compõem o gif. Para ter acesso a essas camadas você pode abrir o gif no Photoshop ou no Jasc Animation Shop e, ao invés de salvar a imagem como gif, salve cada camada/frame como PNG.
Por exemplo, no Jasc Animation, abra o gif, selecione a primeira camada, vá em File - Save frame as - salve como uma imagem png. Faça o mesmo com as outras camadas. No Photoshop é tranquilo, abra o gif e vá salvando as camadas no formato png, tornando visíveis algumas que estiverem ocultas.
Depois disso, crie uma pasta dentro da pasta Skins que falei lá no início do post e cole essas imagens lá, nomeando cada uma com um número, em sequência, tipo 1,2,3,4...
Abra o Notepad e cole esse código:
[Rainmeter]
Author=Seu nome
Update=

[ImageMeter]
Meter=Image
X=0
Y=0
ImageName=[ImageNumberCalc].png
DynamicVariables=1
Hidden=0
LeftMouseUpAction=!Execute ["http://reinokawaii.blogspot.com"]
ToolTipText=texto que aparece quando o mouse está sobre a skin (tooltip)#CRLF#outra linha

[ImageNumberCalc]
Measure=Calc
Formula=Counter % 4+1
Substitute=".00000":""

Mude o link do blog para o que preferir. Ali onde aparece 4+1, significa que há 4 imagens diferentes para o programa fazer a animação, se houvesse 2 imagens, seria 2+1, 3 imagens, 3+1...
Para salvar os códigos, escolha Salvar como - nomeie o arquivo com o mesmo nome que deu à sua pasta e em tipo, selecione a opção MS ini file.

Skin decorativa ocupando toda a tela (barrinhas)

Para usar aquelas barrinhas decorativas (que nem as desse post), primeiro, crie a pasta com a imagem da barrinha que quiser dentro de Skins e depois salve o código abaixo na mesma pasta da imagem (aliás, todos os códigos devem ser salvos dentro da pasta com as imagens respectivas):
[Rainmeter]
Update=
Author=seu nome


[Barra]
Meter=Image
ImageName=nomedabarra.png
X=0
Y=0
W=#ScreenAreaWidth#

W=#ScreenAreaWidth# faz com que a imagem ocupe a tela inteira.

Se quiser fazer variações de uma mesma skin, é só criar uma pasta para cada imagem contendo cada uma o arquivo .ini. dentro da pasta criada em Skins.

Para usar a skin, clique no símbolo do Rainmeter na barra de tarefas com o botão direito e selecione Atualizar tudo. Clique de novo com o botão direito - Skins e procure o nome da skin criada por você.
E se quiser compartilhar a skin, clique com o botão direito sobre o símbolo do Rainmeter na barra de tarefas, escolha Gerenciar - clique em Criar um pacote .rmskin - preencha as áreas que pedem nome, autor e versão - clique em Add skin e selecione a pasta da skin que criou; depois é só clicar em Next e Create package. Isso gera um arquivo com ícone de gotinha verde que ao ser executado instala a skin no computador.
E é isso💖

SIMILAR POSTS

Chibis e Wallpapers Novos


Desenhei mais chibis :3 Fiz versões diferentes dos cabelos e vestidos de algumas e, por indecisão, decidi postar tudo ^_^ <3... clique nas imagens para salvar em tamanho original.
















SIMILAR POSTS

Widgets e Skins Fofas para Decorar o Windows


Fiz alguns widgets para decorar a área de trabalho do pc; uns são só decoração mesmo, outros tem funções que podem ajudar, como atalhos e bloquinho de notas. É necessário ter instalado os programas Xwidget e Rainmeter para usá-los; já postei sobre eles algumas vezes aqui no blog, caso queiram mais opções de download.
Alguns também estão hospedados em meu Deviantart ou Sta.sh, caso queiram baixar separadamente.
Como fazer download no Deviantart?
Clique no link do que deseja baixar e na página do deviantart, no cantinho direito da tela, clique em Download.
Como usar?
Rainmeter: após o download, clique no ícone em forma de gota verde e instale. Depois clique com o botão direito no ícone do Rainmeter na sua barra de tarefas - Skins - selecione a skin que baixou. Se ela não apareceu, clique no ícone do Rainmeter e depois em Atualizar tudo. Quando clicar de novo, as novas skins estarão lá.
Xwidget: execute o arquivo com o símbolo do programa.


Deixe-me mostrar como funciona cada um e claro, creditar as imagens:
Começando pelas skins que aparecem na imagem de abertura do post...
1. Barrinhas de laços e pérolas (Rainmeter) - instale, clique no símbolo do Rainmeter - Skins - cutebar e escolha sua cor favorita. (download)

1.1 Cute doll (Rainmeter) - skin de atalho animado. Para mudar o link, clique sobre a bonequinha com o botão direito do mouse - Editar Skin - procure pelo link do blog reinokawaii.blogspot.com e digite outro de sua preferência, seja da internet ou do computador. Salve o arquivo, clique novamente na bonequinha com o botão direito e selecione Recarregar skin. (download)

2. Barrinha de laço e pérola Rosa (Xwidget) - instale clicando no arquivo do programa xwidget. Para escolher o tamanho da barra na tela, clique com o botão direito sobre ela - Janela - Aumento - e escolha a porcentagem que preferir. (download)

3. Barrinhas - só instalar executando o arquivo do Rainmeter. (download - leia a descrição)


4. Pink Bunny and White Bear (xwidget)
Widgets para desligar o computador (coelhinho) ou abrir o menu iniciar (ursinho)
Gifs encontrados em: Engrampixel.


5. Charmmy Kitty (xwidget)
Widget de atalho; basta clicar com o botão direito sobre a Charmmy Kitty e depois em link para selecionar um arquivo ou pasta.
Gif encontrado em: Engrampixel


6. Widget de Notas
Bem discreto, quando fechado você visualiza um coração que ao ser clicado, abre o widget de notas. Clicando em Add, você adiciona uma nova nota e em Del, você deleta. As setinhas são para navegar entre as notas.
Gifs encontrados em: Engrampixel e as setas, Gasara.


7. Kawaii social widget
Widget com links para redes sociais, pode ser fechado clicando no coraçãozinho. Para mudar o link, clique com o botão direito sobre uma das redes e depois em links.
Gifs encontrados em: Engrampixel/Rebacca
Wallpaper: Desktop Nexus.


8. Kitty!
Widget de atalho; basta clicar com o botão direito sobre o gatinho e depois em change para selecionar um arquivo ou pasta.
Gif encontrado em: Rebacca


9. Miau!
Widget de atalho; basta clicar com o botão direito sobre o gatinho e depois em link para selecionar um arquivo ou pasta.
Imagem encontrada em: Weheartit.

Espero que gostem!!!

SIMILAR POSTS