Olá, amigos da YCLAS! Esta semana partilhamos algumas dicas e boas ideias para melhorares o aspeto do teu site com código CSS.
Tens de saber que o aspeto do teu site vai determinar se os utilizadores e clientes ficam ou se vão embora à procura de um site com melhor aspeto.
Primeiro, tens de ativar o uso de CSS no painel do teu site; Clica aqui para veres como ativar e adicionar CSS personalizado na YCLAS.
Vamos começar!
Fundo
Hoje em dia, os melhores sites usam fundos em degradê, uma mudança de cor simples e suave. Se usares as cores certas, o teu site vai ganhar um estilo moderno. Aqui tens 3 fundos modernos diferentes:
Gradiente n.º 1 (Cores do Pacífico)
#grad
{background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
Gradiente n.º 2 (Cores fortes)
#grad
{background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
Gradiente n.º 3 (Cores suaves)
#grad
{background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
Tipos de letra
O tipo de letra do teu site tem um papel fundamental. Recomendamos que uses tipos de letra Sans-Serif, como:
Arial
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
Tahoma
p.sansserif {
font-family: Tahoma, Geneva, sans-serif;
}
Trebuchet MS
p.sansserif {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
São tipos de letra confortáveis para os olhos.
Contornos dos elementos
Outra dica é usar cantos arredondados nos elementos, o que dá ao teu site um aspeto simples e moderno. Para isso, usa este código:
p.round {
border: 2px solid black;
border-radius: 8px;
}
Podes ajustar a cor (solid black) e o raio (8px) do contorno.
Barra de navegação
A barra de navegação é uma das coisas mais importantes de um site. Uma barra de navegação bem feita ajuda os utilizadores a navegar corretamente no teu site. Aqui tens uma barra de navegação fixa com link ativo/atual; faz com que a tua barra de navegação se mova e fique fixa no topo, conforme a posição do scroll:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4682B4;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4169E1;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#YCLAS">YCLAS</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Podes mudar as cores (fundo, texto e link ativo/atual), e redimensionar (padding) a barra de navegação.
Imagens responsivas
Imagens! Hoje em dia, as imagens são essenciais em todos os sites e estamos habituados a vê-las em todo o lado; mas não basta pôr uma imagem no teu site, tens de a definir como imagem responsiva para que fique bem em qualquer dispositivo. Para isso, usa este código em todas as imagens que queres que sejam responsivas:
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="X" width="IMG width" height="IMG height">
O X representa o URL da imagem e, em IMG Width e IMG Height, tens de escrever o tamanho original da imagem.
Layout do site
Bem, trata-se da distribuição dos principais elementos do teu site, por exemplo, o cabeçalho. O cabeçalho é o primeiro elemento que qualquer utilizador vê quando entra no site, por isso tem de ser simples e fácil de perceber. Aqui tens um código CSS para um cabeçalho com imagem e texto:
body {
margin: 0;
}
.header {
background:url(X) no-repeat;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>HEADER TEXT</h1>
</div>
O X representa o URL da imagem; em Padding podes definir o tamanho do cabeçalho com imagem, e Header Text é onde podes escrever o que queres mostrar por cima da imagem do cabeçalho.
Outro elemento principal do teu site é o rodapé, colocado no fundo da página e tão importante como o cabeçalho. Podes usar este código para um rodapé com bom aspeto:
.footer {
background-color: #00FFFF;
padding: 25px;
text-align: center;
}
Podes mudar a cor e o tamanho (padding) do rodapé.
Experimenta estas dicas e diz-nos se resultam contigo!
Nota: usar código CSS exige alguma prática e experiência. Se nunca usaste CSS, recomendamos que recorras a alguns tutoriais de CSS e guias de CSS para conseguires o que procuras. Se não quiseres usar CSS, podes usar os nossos temas: oferecemos uma variedade de modelos de site personalizados. Clica aqui para os veres.
Cumprimentos,
Equipa YCLAS.
