Atualização do CSS
This commit is contained in:
189
referencia.md
Normal file
189
referencia.md
Normal file
@@ -0,0 +1,189 @@
|
||||
### 1. **Variáveis CSS (Cores, Sombra, etc.)**
|
||||
|
||||
As variáveis são essenciais para a consistência do design e permitem que você altere rapidamente o estilo de toda a aplicação ao modificar o valor das variáveis. Algumas variáveis importantes que podem ser reutilizadas são:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--azul-principal: #006494;
|
||||
--azul-escuro: #003554;
|
||||
--azul-claro: #0582ca;
|
||||
--azul-brilhante: #00a6fb;
|
||||
--amarelo: #ffb700;
|
||||
--cinza-claro: #f8f9fa;
|
||||
--cinza: #e9ecef;
|
||||
--preto: #212529;
|
||||
--branco: #ffffff;
|
||||
--sombra: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--borda-radius: 8px;
|
||||
--transicao: all 0.3s ease;
|
||||
}
|
||||
```
|
||||
|
||||
Essas cores e efeitos podem ser reutilizados para manter o design consistente.
|
||||
|
||||
### 2. **Tipografia**
|
||||
|
||||
Fontes e tamanhos de texto podem ser extraídos e usados em outros projetos. Por exemplo:
|
||||
|
||||
```css
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
Você também tem diferentes tamanhos de fonte definidos nas regras de texto, como para o título de posts:
|
||||
|
||||
```css
|
||||
.post-title {
|
||||
font-size: 2.2rem;
|
||||
color: var(--azul-escuro);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. **Layout Responsivo**
|
||||
|
||||
Esse código já tem um design responsivo com várias quebras de mídia. Você pode utilizar os padrões de grid e as regras de `@media` para garantir que seu projeto seja adaptável a diferentes tamanhos de tela. Um exemplo é o layout de grade no `.grid-layout`:
|
||||
|
||||
```css
|
||||
.grid-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
E a adaptação responsiva para telas menores:
|
||||
|
||||
```css
|
||||
@media (max-width: 900px) {
|
||||
.grid-layout {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4. **Estilos para Botões e Links**
|
||||
|
||||
Estilos para botões (`btn-primario`) e links (`.nav-principal a`, `.ver-tudo`) estão bem definidos e podem ser reutilizados:
|
||||
|
||||
```css
|
||||
.btn-primario {
|
||||
background: var(--branco);
|
||||
color: var(--azul-principal);
|
||||
padding: 12px 25px;
|
||||
border-radius: var(--borda-radius);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: var(--transicao);
|
||||
}
|
||||
|
||||
.nav-principal a:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
Esses estilos garantem que o comportamento dos links e botões seja consistente, com efeitos de transição.
|
||||
|
||||
### 5. **Efeitos de Sombra e Transição**
|
||||
|
||||
As sombras e transições são definidos com variáveis e podem ser facilmente reutilizados:
|
||||
|
||||
```css
|
||||
.sombra {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.sombra-hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
```
|
||||
|
||||
### 6. **Card Layouts (ex: Atalhos, Notícias)**
|
||||
|
||||
O estilo de cards, como no caso dos atalhos e das notícias, é bastante modular e pode ser reutilizado em diversos projetos. Por exemplo:
|
||||
|
||||
```css
|
||||
.atalho-card {
|
||||
background: var(--branco);
|
||||
border-radius: var(--borda-radius);
|
||||
padding: 25px 15px;
|
||||
text-align: center;
|
||||
box-shadow: var(--sombra);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.atalho-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
```
|
||||
|
||||
### 7. **Estilos de Ícones**
|
||||
|
||||
Estilos de ícones também são importantes, especialmente para se integrar com o Font Awesome:
|
||||
|
||||
```css
|
||||
.atalho-card i {
|
||||
font-size: 2rem;
|
||||
color: var(--azul-principal);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
```
|
||||
|
||||
### 8. **Componentes de Cabeçalho e Rodapé**
|
||||
|
||||
Esses componentes têm um estilo bem definido, com a possibilidade de facilmente aplicar em outros projetos:
|
||||
|
||||
```css
|
||||
.header-moderno {
|
||||
background: var(--branco);
|
||||
box-shadow: var(--sombra);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.footer-moderno {
|
||||
background: var(--azul-escuro);
|
||||
color: var(--branco);
|
||||
padding: 50px 0 20px;
|
||||
}
|
||||
```
|
||||
|
||||
### 9. **Animações**
|
||||
|
||||
As animações, como o efeito `fadeIn`, são reutilizáveis e podem ser aplicadas a outros elementos:
|
||||
|
||||
```css
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.noticia-card, .stats-card, .atalho-card {
|
||||
animation: fadeIn 0.5s ease-out forwards;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Resumo:
|
||||
|
||||
Você pode reutilizar e adaptar os seguintes elementos para outros projetos:
|
||||
|
||||
1. **Cores e Variáveis CSS** (cores principais, bordas, transições)
|
||||
2. **Fontes e Tipografia** (fontes, tamanhos de texto)
|
||||
3. **Layouts Responsivos** (uso de `@media` e grids)
|
||||
4. **Botões e Links** (estilos interativos e transições)
|
||||
5. **Sombreamento e Transições** (efeitos de sombra, hover)
|
||||
6. **Card Layouts** (para atalhos, notícias, etc.)
|
||||
7. **Ícones** (estilo e cores dos ícones)
|
||||
8. **Componentes de Cabeçalho e Rodapé** (design de cabeçalhos fixos e rodapés)
|
||||
9. **Animações** (efeitos de entrada, transições animadas)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user