Nós vamos começar nosso tutorial com a parte de cima do nosso site assim. O que desejamos criar aqui são as redes sociais no topo daquela faixa azul. Temos vários modos de fazer isso, mas a forma mais indicada (do meu ponto de vista) é fazer como vou ensinar aqui. Você pode modificar isso do jeito que quiser, ok? Não precisa ser igual ao meu, só ensino como chegar num tipo de estilo e você é livre pra brincar com esse conhecimento e ir muito além do que eu fui.
/*=============Links das redes sociais====================*/
<ul class="redes-sociais">
<li class="rede-item instagram" style="--cor1:#7638FA; --cor2:#D300C5; --cor3:#FF0069; --cor4:#FF7A00; --cor5:#FFD600;">
<a href="https://www.instagram.com/LINK-DA-SUA-PÁGINA-DO-INSTAGRAM" target="_blank" rel="noopener">
<span class="icone"><i class="fa-brands fa-instagram"></i></span>
<span class="texto">@biblioprude</span>
</a>
</li>
<li class="rede-item whatsapp" style="--cor1:#08ad31; --cor2:#4af506;">
<a href="https://wa.me/55DDD-DO-WHATSAPP-DA-SUA-BIBLIOTECA" target="_blank" rel="noopener">
<span class="icone"><i class="fa-brands fa-whatsapp"></i></span>
<span class="texto">Fale conosco</span>
</a>
</li>
</ul>Estrutura básica:
<ul>= lista (UL = Unordered List)<li>= item da lista<a>= link clicável<span>= container para texto ou ícone.icon= onde fica o ícone.text= onde fica o texto que aparece no hover
O que eu fiz aqui: Estou dizendo para o computador: Quero que exista um tipo de elemento no meu sítio chamado “redes-sociais”, que é uma lista de links para as redes que a biblioteca usa.
A linha <ul class="redes-sociais"> cria um grupo de itens e dá para esse grupo o nome redes sociais. (Você poderia dar o nome que quiser, que fique fácil pra você saber o que está construindo ali). Dentro desse grupo, cada <li class="rede-item instagram"> ou <li-class="rede-item whatsapp"> é um botão de rede social, com um ícone (<span class="icone">) e um texto (<span class="texto">). Essas classes (redes-sociais, rede-item, instagram, whatsapp) são rótulos que depois o CSS usa para deixar cada coisa com a cara certa (cores, gradiente, tamanho do botão, etc).
Em outras palavras:
Quando escrevo class="redes-sociais", estou batizando esse bloco de HTML com um nome. Mais tarde, no CSS, vou dizer: sempre que você encontrar algo com esse nome, pinte assim, alinhe assado, coloque em linha, etc. Cada rede-item é um botão. Eu separo o desenho do botão (.icon) do texto (.text) para ter mais controle na hora de estilizar: posso aumentar só o ícone, mudar só a cor do texto ou reorganizar tudo em telas pequenas.
Sobre a parte de estilo, eu quero que cada botão tenha suas próprias cores especiais, o instagram com as cores de instagram e o whatsapp com as cores de whatsapp. Então vou criar caixinhas (que a gente chama de variáveis) chamadas --cor1, --cor2, --cor3, --cor4 e --cor5. Então é como se eu colocasse dentro de cada botão uma paleta de tintas personalizada. O Instagram tem roxo, rosa, vermelho, laranja e amarelo. O Whatsapp tem verde e verde claro.
Mas você pode simplesmente copiar as classes e criar tantos botões quanto necessite. (Facebook, Mastodon, X, Linkedin, Github e por aí vai. São opções sem fim). Isso é importante de montar no esqueleto do seu html porque depois o css vem com a maquiagem e coloca as cores dentro do botão.
IMPORTANTE: O snippet (código) acima não deve ser apenas copiado e colado, você precisa trocar as informações do link pelas suas próprias informações, marquei o local em que você tem que mudar no próprio código como “link da sua página da biblioteca” ou “ddd e número do seu whatsapp” E você pode apagar a primeira linha comentada do código ( /*====Links das Redes Sociais===*/) eu faço isso por boa prática, sempre comento e escrevo usando o visual studio code, pra salvar e ter backup dos htmls.
Pra encaixar no menu lateral, esse menu onde fica o “Entre na sua conta” e o ícone do calendário com histórico de empréstimos, você vai precisar editar o código do sistema, entrar dentro do arquivo pra mexer. Essa edição é uma edição avançada que, a cada atualização de sistema, você vai perder essa modificação e precisará inserir novamente. (E provavelmente, a cada nova atualização, em algum momento eu vou tentar atualizar esse tutorial também se alguma coisa estrutural mudar significativamente.)
Todas as modificações aqui precisam ser realizadas como superusuário. Então pra evitar dor de cabeça, use o comando
sudo suOs arquivos que vamos personalizar ficam num caminho (se estivermos numa instalação típica) assim:
/usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/pt-BR/includes/masthead.incO que você pode fazer:
1 – Tornar o dono dos arquivos o usuário que vai editar (ex. usuário de nome koha)
sudo chown koha:koha /usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/pt-BR/includes/masthead.inc1.1 Dar permissão de leitura e escrita só para o dono, leitura para o resto
sudo chmod 644 /usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/pt-BR/includes/masthead.incSe a pasta inteira de templates precisar ser editável pelo mesmo usuário:
sudo chown -R koha:koha /usr/share/koha/opac/htdocs/opac-tmpl/bootstrap
sudo chmod -R u+rwX,go+rX /usr/share/koha/opac/htdocs/opac-tmpl/bootstrapO que isso faz? u+rwx adiciona leitura/escrita para o dono, e “x” só em diretórios.
go+rX deixa o grupo/outros só com leitura e permissão de entrar em pastas.
Como pode ter notado, nós temos que editar o masthead.inc no nosso servidor. Pra inserir o código do html dentro dele e criar a estrutura do botão. Este é um arquivo template incluído em outras páginas do OPAC, responsável pela faixa do topo (menu, logo, etc) e vai aparecer em todas as páginas porque é puxado por includes em outros templates do koha. (o *.inc é justamente de include, em vez de repetir sempre o mesmo código, você só puxa usando isso).
Agora, vamos trabalhar com o CSS?
O que vamos criar aqui? Vamos criar ícones redondinhos (bolinhas) que ficam na parte superior da página, quando você passa o mouse, eles expandem e mostram um texto. Cada um deles tem cores diferentes ao expandir (instagram = cinco cores de base, whatsapp = dois tons de verde e por aí vai). E a ideia é que funcione perfeitamente em celulares e tablets e outras telas.
O CSS é uma linguagem que define a aparência das coisas em um site. Pense que o HTML são os tijolos de uma casa e o CSS a decoração (pintura, estilo, móveis).
Ele funciona assim:
.nome-do-elemento {
propriedade: valor;
}Exemplo:
.botao {
width: 48px; /* largura de 48 pixels */
height: 48px; /* altura de 48 pixels */
background: blue; /* fundo azul */
}Vamos organizar os ícones na linha, em primeiro lugar.
/* Lista de redes sociais */
.redes-sociais {
display: flex; /* Coloca tudo na mesma linha */
align-items: center; /* Centraliza verticalmente */
gap: 0.3rem; /* Espaço entre os ícones (5px) */
list-style: none; /* Remove as bolinhas da lista */
margin: 0; /* Remove margem */
padding: 0; /* Remove espaçamento interno */
}
O que cada linha faz:
display: flex→ Faz os itens ficarem lado a lado (não um embaixo do outro)gap: 0.3rem→ Espaço entre cada bolinha (0.3rem ≈ 5 pixels)list-style: none→ Remove os pontinhos • que aparecem em listas
Agora vamos criar as bolinhas
.redes-sociais .rede-item {
position: relative; /* Permite posicionamento interno */
width: 48px; /* Largura de 48 pixels */
height: 48px; /* Altura de 48 pixels */
background: linear-gradient(135deg, #0f4379 0%, #1a5a9e 100%);
border-radius: 24px; /* Deixa redondo (metade do width/height) */
display: flex; /* Centraliza o conteúdo */
align-items: center; /* Centraliza verticalmente */
justify-content: center; /* Centraliza horizontalmente */
overflow: hidden; /* Esconde o que sair da bolinha */
cursor: pointer; /* Cursor de mãozinha ao passar */
box-shadow: 0 4px 15px rgba(15, 67, 121, 0.3); /* Sombra suave */
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Animação suave */
}Entendendo:
width: 48pxeheight: 48px→ Cria uma bolinha de 48×48 pixelsborder-radius: 24px→ Arredonda as bordas (metade do tamanho = círculo perfeito)background: linear-gradient(...)→ Degradê azul de cima para baixotransition: all 0.4s→ Todas as mudanças acontecem em 0.4 segundos (suave)
Estilizar o ícone
.redes-sociais .icon {
color: #faa21b; /* Cor laranja */
font-size: 24px; /* Tamanho do ícone */
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); /* Sombra no ícone */
}O que acontece? O ícone fica laranja e com sombra pra destacar. E agora, vamos preparar o texto (que fica escondido).
.redes-sociais .text {
position: absolute; /* Fica "flutuando" sobre o botão */
color: #ffffff; /* Cor branca */
font-size: 15px; /* Tamanho da fonte */
font-weight: 600; /* Negrito */
white-space: nowrap; /* Não quebra linha */
opacity: 0; /* Invisível */
transform: scale(0.5); /* Diminuído (50% do tamanho) */
transition: all 0.3s ease; /* Animação ao aparecer */
}A opacity está em 0 porque o texto começa invisível e só aparece no hover (quando passa o mouse).
Já ficou muito chique, mas vamos melhorar ainda mais pra dar um efeito quando passarmos o mouse em cima do ícone, esse efeito chama hover. Ele vai fazer muitas coisas:
Expandir a bolinha.
.redes-sociais .rede-item:hover {
width: 160px; /* Expande para 160px de largura */
box-shadow: 0 8px 25px rgba(15, 67, 121, 0.4); /* Sombra maior */
}Quando você passa o mouse, a bolinha alarga de 48px para 160px.
Agora, vamos esconder o ícone.
.redes-sociais .rede-item:hover .icon {
opacity: 0; /* Fica invisível */
transform: scale(0) rotate(180deg); /* Diminui e gira */
}Efeito esperado: o ícone desaparece girando. (efeito de rotação). E agora vamos mostrar o texto.
.redes-sociais .rede-item:hover .text {
opacity: 1; /* Fica visível */
transform: scale(1); /* Volta ao tamanho normal (100%) */
}Nisso, o texto aparece expandindo do centro. Mas só isso não está bom, vamos montar os gradientes coloridos. Primeiro temos que construir a camada de cor que aparece no hover.
.redes-sociais .rede-item::before {
content: ""; /* Cria um elemento vazio */
position: absolute; /* Fica por trás do conteúdo */
inset: 0; /* Ocupa todo o espaço da bolinha */
border-radius: inherit; /* Herda o arredondamento */
background: linear-gradient(135deg, #7638FA 0%, #D300C5 25%, #FF0069 50%);
opacity: 0; /* Começa invisível */
transition: opacity 0.4s ease; /* Aparece suavemente */
z-index: 1; /* Fica atrás do ícone/texto */
}/* Ao passar o mouse, o gradiente aparece */
.redes-sociais .rede-item:hover::before {
opacity: 1; /* Fica visível */
}E o segredo que vamos colocar aqui é o ::before , ele cria uma camada extra por trás do botão então quando você passa o mouse, essa camada colorida aparece. (Legal né?)
Snippet de cores específicas por redes social
/* Instagram - Rosa/Roxo/Laranja */
.redes-sociais .rede-item.instagram::before {
background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}/* WhatsApp - Verde */
.redes-sociais .rede-item.whatsapp::before {
background: linear-gradient(135deg, #075e54 0%, #128c7e 50%, #25d366 100%);
}Pra adicionar mais redes, você vai precisar editar o html (criar a classe facebook por exemplo, igual criamos a do instagram e no css vamos copiar o bloco de cima e trocar as cores. Vou deixar como exemplo uma ideia pro facebook, Twitter (X), Youtube e Linkedin.
/* Facebook - Azul */
.redes-sociais .rede-item.facebook::before {
background: linear-gradient(135deg, #1877f2 0%, #42b0ff 100%);
}/* Twitter/X */
.redes-sociais .rede-item.twitter::before {
background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%);
}/* YouTube */
.redes-sociais .rede-item.youtube::before {
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}/* LinkedIn */
.redes-sociais .rede-item.linkedin::before {
background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
}Só isso já constrói todo o nosso layout para telas GRANDES. E nós usamos celulares, tablets, monitores de tamanhos diversos. Então precisamos construir responsividade. E pra isso acontecer, temos que pensar em tamanhos de telas e em como queremos que naquele tamanho de tela o layout se comporte. Se nós colocarmos todos estes efeitos que construímos no celular, vai ficar exagerado, confuso e vai atrapalhar muito a experiência do usuário. Mas, se nós só usarmos pequenos efeitos para um espaço menor, pode dar certo.
Tablets (telas até 1024px)
@media (max-width: 1024px) {
.redes-sociais .rede-item {
width: 44px; /* Bolinhas um pouco menores */
height: 44px;
}
.redes-sociais .rede-item:hover {
width: 140px; /* Expandem menos */
}
.redes-sociais .icon {
font-size: 22px; /* Ícones menores */
}
}Celulares (telas até 480px)
@media (max-width: 480px) {
.redes-sociais .rede-item {
width: 40px; /* Bolinhas ainda menores */
height: 40px;
border-radius: 50%; /* Mantém redondo */
}
.redes-sociais .rede-item:hover {
width: 40px; /* NÃO expande no mobile */
}
.redes-sociais .text {
display: none; /* Esconde o texto */
}
/* Ícone sempre visível (não desaparece) */
.redes-sociais .rede-item:hover .icon {
opacity: 1;
transform: scale(1) rotate(0);
}
}Por que isso?
Em celulares, não dá pra passar o mouse, então as bolinhas ficam sempre do mesmo tamanho. E o texto não aparece porque não tem espaço.
Nós temos outros ícones no sistema, e precisamos que eles tenham coerência visual, certo? Então o que vamos fazer? Precisamos aplicar esses efeitos no login e no histórico.
Você vai precisar descobrir quais são as classes se for usar para outros locais inspecionando elementos ou analisando o código do koha. Para os ícones de login e histórico de busca, vou deixar aqui. Você vai adicionar:
.nav-link.login-link {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: linear-gradient(135deg, #0f4379 0%, #1a5a9e 100%);
border-radius: 24px;
padding: 0 !important;
overflow: hidden;
cursor: pointer;
box-shadow:
0 4px 15px rgba(15, 67, 121, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none !important;
}Aumentando o tamanho do ícone pra ficar igual aos outros
.nav-link.login-link i {
font-size: 24px;
color: #faa21b;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
transition: all 0.3s ease;
z-index: 2;
position: relative;
}Criando um texto para o botão
/* Texto do botão - span.userlabel */
.nav-link.login-link .userlabel {
position: absolute;
color: #ffffff;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;
white-space: nowrap;
opacity: 0;
transform: scale(0.5);
transition: all 0.3s ease;
z-index: 2;
}Gradiente pro botão (escolhi roxo e rosa)
/* Gradiente de fundo */
.nav-link.login-link::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}Efeito ao passar o mouse
/* Hover - Expande e mostra texto */
.nav-link.login-link:hover {
width: 180px;
box-shadow:
0 8px 25px rgba(15, 67, 121, 0.4),
0 0 0 3px rgba(250, 162, 27, 0.2);
}
.nav-link.login-link:hover::before {
opacity: 1;
}
.nav-link.login-link:hover i {
opacity: 0;
transform: scale(0) rotate(180deg);
}
.nav-link.login-link:hover .userlabel {
opacity: 1;
transform: scale(1);
}Quando logado ele fará um dropdown com nome do usuário
/* Quando logado - dropdown com nome do usuário */
#user-menu {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: linear-gradient(135deg, #0f4379 0%, #1a5a9e 100%);
border-radius: 24px;
padding: 0 !important;
overflow: hidden;
cursor: pointer;
box-shadow:
0 4px 15px rgba(15, 67, 121, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none !important;
}
#user-menu i {
font-size: 24px;
color: #faa21b;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
transition: all 0.3s ease;
z-index: 2;
position: relative;
}
#user-menu .userlabel {
position: absolute;
color: #ffffff;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
white-space: nowrap;
opacity: 0;
transform: scale(0.5);
transition: all 0.3s ease;
z-index: 2;
}
#user-menu::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, #28a745 0%, #20c997 50%, #17a2b8 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
#user-menu:hover {
width: 200px;
box-shadow:
0 8px 25px rgba(15, 67, 121, 0.4),
0 0 0 3px rgba(250, 162, 27, 0.2);
}
#user-menu:hover::before {
opacity: 1;
}
#user-menu:hover i {
opacity: 0;
transform: scale(0) rotate(180deg);
}
#user-menu:hover .userlabel {
opacity: 1;
transform: scale(1);Responsividade (não esqueça porque senão vai ficar errado em outros formatos de telas)
/* Tablets (até 1024px) */
@media (max-width: 1024px) {
.nav-link.login-link,
#user-menu {
width: 44px;
height: 44px;
}
.nav-link.login-link:hover,
#user-menu:hover {
width: 160px;
}
.nav-link.login-link i,
#user-menu i {
font-size: 22px;
}
.nav-link.login-link .userlabel,
#user-menu .userlabel {
font-size: 14px;
}
}
/* Mobile (até 768px) */
@media (max-width: 768px) {
.nav-link.login-link,
#user-menu {
width: 42px;
height: 42px;
}
.nav-link.login-link:hover,
#user-menu:hover {
width: 150px;
}
.nav-link.login-link i,
#user-menu i {
font-size: 20px;
}
.nav-link.login-link .userlabel,
#user-menu .userlabel {
font-size: 13px;
}
}
/* Mobile pequeno (até 480px) */
@media (max-width: 480px) {
.nav-link.login-link,
#user-menu {
width: 40px;
height: 40px;
border-radius: 50%;
}
/* Desabilita expansão no mobile */
.nav-link.login-link:hover,
#user-menu:hover {
width: 40px;
}
/* Esconde o texto no mobile */
.nav-link.login-link .userlabel,
#user-menu .userlabel {
display: none;
}
/* Ícone fica visível sempre */
.nav-link.login-link:hover i,
#user-menu:hover i {
opacity: 1;
transform: scale(1) rotate(0);
}
.nav-link.login-link i,
#user-menu i {
font-size: 18px;
}
}
/* Mobile muito pequeno (até 360px) */
@media (max-width: 360px) {
.nav-link.login-link,
#user-menu {
width: 36px;
height: 36px;
}
.nav-link.login-link i,
#user-menu i {
font-size: 16px;
}
}Vou fazer a mesma coisa pro histórico de busca. Pra isso vou colocar apenas o snippet aqui todo, as cores que escolhi são mais claras um pouco mas também brincando com elementos azuis e rosas.
.nav-item.search_history a.nav-link {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: linear-gradient(135deg, #0f4379 0%, #1a5a9e 100%);
border-radius: 24px;
padding: 0 !important;
overflow: hidden;
cursor: pointer;
box-shadow:
0 4px 15px rgba(15, 67, 121, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none !important;
}
.nav-item.search_history a.nav-link i {
font-size: 24px;
color: #faa21b;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
transition: all 0.3s ease;
z-index: 2;
position: relative;
}
.nav-item.search_history a.nav-link .search_history_label {
position: absolute;
color: #ffffff;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;
white-space: nowrap;
opacity: 0;
transform: scale(0.5);
transition: all 0.3s ease;
z-index: 2;
}
.nav-item.search_history a.nav-link::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, #f093fb 0%, #4facfe 50%, #00f2fe 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.nav-item.search_history a.nav-link:hover {
width: 180px;
box-shadow:
0 8px 25px rgba(15, 67, 121, 0.4),
0 0 0 3px rgba(250, 162, 27, 0.2);
}
.nav-item.search_history a.nav-link:hover::before {
opacity: 1;
}
.nav-item.search_history a.nav-link:hover i {
opacity: 0;
transform: scale(0) rotate(180deg);
}
.nav-item.search_history a.nav-link:hover .search_history_label {
opacity: 1;
transform: scale(1);
}
/* ============================================
📱 RESPONSIVIDADE DO HISTÓRICO DE BUSCA
============================================ */
/* Tablets (até 1024px) */
@media (max-width: 1024px) {
.nav-item.search_history a.nav-link {
width: 44px;
height: 44px;
}
.nav-item.search_history a.nav-link:hover {
width: 160px;
}
.nav-item.search_history a.nav-link i {
font-size: 22px;
}
.nav-item.search_history a.nav-link .search_history_label {
font-size: 14px;
}
}
/* Mobile (até 768px) */
@media (max-width: 768px) {
.nav-item.search_history a.nav-link {
width: 42px;
height: 42px;
}
.nav-item.search_history a.nav-link:hover {
width: 150px;
}
.nav-item.search_history a.nav-link i {
font-size: 20px;
}
.nav-item.search_history a.nav-link .search_history_label {
font-size: 13px;
}
}
/* Mobile pequeno (até 480px) */
@media (max-width: 480px) {
.nav-item.search_history a.nav-link {
width: 40px;
height: 40px;
border-radius: 50%;
}
.nav-item.search_history a.nav-link:hover {
width: 40px;
}
.nav-item.search_history a.nav-link .search_history_label {
display: none;
}
.nav-item.search_history a.nav-link:hover i {
opacity: 1;
transform: scale(1) rotate(0);
}
.nav-item.search_history a.nav-link i {
font-size: 18px;
}
}
/* Mobile muito pequeno (até 360px) */
@media (max-width: 360px) {
.nav-item.search_history a.nav-link {
width: 36px;
height: 36px;
}
.nav-item.search_history a.nav-link i {
font-size: 16px;
}
}Como deve ficar:
Antes de usar, cheque se:
O HTML tem as classes corretas (.redes-sociais, .rede-item, etc), se o CSS está com os estilos básicos (width, height, border-radius. etc), se as transições foram configuradas, se o hover está funcionando, os gradientes coloridos, a responsividade no mobile, se os ícones estão carregados certinho (eu estou usando os da biblioteca Font Awesome).
E é aquilo, pratique, mude as cores, tamanhos, velocidades. Adicione mais redes, experimente… teste outros efeitos (rotação, deslizar, etc), e documente. Anote todas as suas mudanças para não esquecer.
Recursos úteis:
Como é pra ficar
Cores de grandiente || Ícones Font Awesome || Teste a responsividade (F12 no navegador, ferramentas de desenvolvedor, testar responsividade) || Medidas CSS = 1rem equivale mais ou menos a 16px.
Se tiver dúvidas, comente aí e peça ajuda. Caso precise de algo especial para a sua biblioteca, entre em contato e podemos preparar algo especial pra você.
