https://github.com/emmanuel-sunmbola/csstricks

A website displaying some tricks up my sleeve
https://github.com/emmanuel-sunmbola/csstricks

css javasc scss webdesign

Last synced: about 2 months ago
JSON representation

A website displaying some tricks up my sleeve

• Host: GitHub
• URL: https://github.com/emmanuel-sunmbola/csstricks
• Owner: EMMANUEL-SUNMBOLA
• Created: 2023-12-13T15:11:51.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-16T21:00:36.000Z (8 months ago)
• Last Synced: 2024-05-17T21:52:07.074Z (8 months ago)
• Topics: css, javasc, scss, webdesign
• Language: SCSS
• Homepage: https://cavescsstricks.netlify.app/
• Size: 1.11 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS TRICKS

## AIM

- This is a collection of effects, designs, or anything cool I found

* If you have any trick to share or a better way to do any trick feel free to `pull-request`

## Estimated Time

- Nan

### TRICKK #1

- An hidden `text`

- A hidden `div` with a text that will be displayed when `hovered`

- It is done by playing with its `opacity` and adding a `background-color` somehow `transparent`

- check the [scss](https://github.dev/EMMANUEL-SUNMBOLA/csstricks/_hidden.scss) and [html](https://github.dev/EMMANUEL-SUNMBOLA/csstricks/hiddendisplay.html) for further understanding

### TRICKK #2

- A circular `progress-bar` 

- you need to know a little `Javascript`, `css` `conic gradient`, how piecharts work

- The `inner circle` sits ontop of the outer circle, then the `outer circle`'s background will change when we convert the percentage given to an angle that is then used for the [Conic-Gradient](https://www.w3schools.com/css/css3_gradients_conic.asp)

### TRICKK #3

- A `flip-card`

- When the card is `hovered` it flips between its faces

- for more infor check [w3schhols](https://www.w3schools.com/howto/howto_css_flip_card.asp)