Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meleu/bikcraft
Projeto final do curso HTML/CSS da Origamid, porém feito com TailwindCSS.
https://github.com/meleu/bikcraft
Last synced: 2 days ago
JSON representation
Projeto final do curso HTML/CSS da Origamid, porém feito com TailwindCSS.
- Host: GitHub
- URL: https://github.com/meleu/bikcraft
- Owner: meleu
- Created: 2023-08-25T14:02:17.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-09-03T19:06:14.000Z (over 1 year ago)
- Last Synced: 2024-11-08T06:13:10.559Z (about 2 months ago)
- Language: HTML
- Homepage: https://meleu.github.io/bikcraft/
- Size: 1.26 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# bikcraft
Projeto final do curso da origamid.
OBSERVAÇÃO: Estou usando este projeto para praticar TailwindCSS.
## Principais Aprendizados
### Efeito de underline on hover
```css
/* só funciona acima do breakpoint 'md' */
after:hidden md:after:block
/* estilo da linha */
after:h-[2px] after:bg-stone-50 after:mt-1
/* 'w-0' pra esconder; 'w-full' pra mostrar on hover */
after:w-0 hover:after:w-full
/* a linha aparece suavement */
after:duration-300
/*
position absolute pra não influenciar no tamanho do elemento
(isso iria bagunçar o meu layout)
*/
relative after:absolute;
```
### Evitar deformação de uma imagem com h-full
> `h-full` == `height: 100%`
```html
![]()
```
### Efeito de imagem "vazando" do container
**OBSERVAÇÃO**: a cor definida pra inset do shadow deve ser a mesma do
background do `` pra poder dar a ilusão de imagem "vazando" do container.
```html
...
```
### Criar um underline com mais liberdade de estilização
Vamos usar o `::after`.
```
after:block after:w-full after:h-1 after:bg-current
```
Neste exemplo estamos usando esta técnica com o objetivo
principal de ter um underline com altura de 4px (`h-1`).
O `bg-current` serve para pegar a cor do elemento pai, o que é bastante útil
(inclusive no caso de trocar a cor on hover).