Editor CSS Avanzato

Crea e modifica facilmente il tuo codice CSS utilizzando le proprietà predefinite.

Come utilizzare l'editor:
  1. Inserisci un selettore CSS (es: .miaClasse, #mioId, div)
  2. Clicca "Aggiungi Regola" per creare una nuova regola CSS
  3. Seleziona le proprietà dalla barra laterale
  4. Scegli un valore dal menu a tendina o digitalo manualmente
  5. Il codice CSS verrà generato automaticamente

Layout Box Model

width
height
min-width
max-width
min-height
max-height
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
box-sizing

Posizionamento

position
top
right
bottom
left
z-index
float
clear

Display e Flessibilità

display
flex
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
gap
order
flex-grow
flex-shrink
flex-basis

Grid

grid-template-columns
grid-template-rows
grid-template-areas
grid-column
grid-row
grid-area
grid-gap

Testo e Tipografia

color
font-family
font-size
font-weight
font-style
text-align
text-decoration
text-transform
line-height
letter-spacing
word-spacing
white-space
text-overflow
word-wrap
text-shadow

Sfondo

background
background-color
background-image
background-repeat
background-position
background-size
background-attachment
background-clip
background-origin
background-blend-mode
opacity

Bordo e Contorno

border
border-width
border-style
border-color
border-radius
border-top
border-right
border-bottom
border-left
outline
outline-width
outline-style
outline-color
outline-offset

Effetti e Animazioni

box-shadow
text-shadow
transform
transform-origin
transition
transition-property
transition-duration
transition-timing-function
transition-delay
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

Visibilità e Overflow

visibility
overflow
overflow-x
overflow-y
clip
cursor
pointer-events

Liste e Tabelle

list-style
list-style-type
list-style-position
list-style-image
table-layout
border-collapse
border-spacing
empty-cells
caption-side
Per iniziare: 1. Inserisci un selettore CSS sopra 2. Clicca "Aggiungi Regola" 3. Seleziona le proprietà dalla barra laterale