Vota

7

Segnalibro


  • 186

CSS Introduction

<p>La tecnologia CSS &egrave; utilizzata principalmente dai progettisti, perch&eacute; sono loro che creano il design del sito. Tuttavia, &egrave; un errore presumere che i webmaster non debbano conoscere i CSS. &Egrave; sufficiente ricordare almeno un esempio dalla descrizione della sezione sui CSS. Oltre alla mobilit&agrave; del tuo sito, i fogli di stile ti consentono di creare varie soluzioni di design classico (ad esempio un menu a discesa). E insieme a JavaScript ti consentono di creare pagine HTML dinamiche (DHTML), la cui bellezza e praticit&agrave;, a volte, sono semplicemente sorprendenti</p>

La tecnologia CSS viene utilizzata principalmente dai designer, perché creano il design del sito. Tuttavia, è un errore pensare che i webmaster CSS non debbano saperlo. Basti ricordare almeno un esempio dalla descrizione della sezione sui CSS . Oltre alla portabilità del tuo sito, i fogli di stile ti consentono di creare varie soluzioni di design classiche (ad esempio, un menu a discesa). E insieme a JavaScript , ti consentono di creare pagine HTML dinamiche ( DHTML ), la cui bellezza e praticità, a volte, sono semplicemente sorprendenti.

Ovviamente, per creare cose del genere, devi conoscere le basi dei CSS . E questa categoria del sito ti aiuterà a farlo nel modo più rapido ed efficiente possibile.

Dopo aver letto articoli sulle basi dei CSS, imparerai:

1) Sintassi CSS .

2) Metodi e loro priorità per impostare lo stile CSS .

3) Tipi di selettori in CSS .

4) Hack CSS per i browser.

5) Regole di scrittura CSS .

6) Come creare un tooltip CSS .

7) Come modificare l'aspetto della prima lettera tramite CSS .

8) Come impostare il tipo di cursore tramite CSS .

9) Come cambiare l'aspetto del cursore al passaggio del mouse usando i CSS .

10) Come creare un sottomenu in CSS .

11) Informazioni sulla sostituzione della proprietà min-width in IE6 .

12) Sulla validità dei CSS .

13) Come impostare il colore dei link visitati.

14) Come impostare un rientro di paragrafo usando i CSS .

15) Come realizzare angoli arrotondati con i CSS .

16) Come mettere la tua immagine invece di un marcatore di elenco usando i CSS .

17) Come rendere lo sfondo un'immagine.

18) Come scurire lo sfondo con i CSS .

19) Cosa sono i selettori figlio nei CSS .

20) Quali unità di misura sono disponibili nei CSS .

21) Come creare una finestra popup di blackout.

22) Come realizzare uno sfondo animato.

23) Come realizzare un bellissimo campo di testo.

24) Come cambiare l'immagine quando ci si passa sopra con il cursore del mouse.

25) Cosa sono gli pseudo-elementi nei CSS .

26) Cosa sono gli sprite CSS .

27) Come spingere il piè di pagina (piè di pagina) in fondo usando i CSS .

28) Come disabilitare il ridimensionamento della textarea tramite CSS .

29) Come disegnare un triangolo usando i CSS .

30) Come gestire l' evento click tramite CSS .

31) Come impostare il proprio cursore tramite CSS .

32) Come creare un menu a tendina orizzontale in CSS .

33) Come utilizzare un font non standard nel sito.

34) Come cambiare lo sfondo di un radio button usando i CSS .

35) È possibile utilizzare CSS3 .

36) Come creare un'ombra in CSS .

37) Come impostare gli attributi cellpadding e cellspacing nei CSS .

38) Come creare un div con altezza 100% .

39) Informazioni sulla compatibilità di z-index player e Youtube .

40) Perché è sbagliato usare -moz , -ms , -webkit e altre proprietà.

41) Dovrei usare CSS Reset .

42) Come allineare verticalmente l'indicatore della lista.

43) Come realizzare una versione stampabile.

44) Come rendere la trasparenza cross-browser con i CSS .

45) Cosa è clearfix .

46) Come cancellare parzialmente un float .

47) Come realizzare un layout a due colonne con la stessa altezza di colonna.

48) Cos'è il layout adattivo.

49) Cosa sono le media query nei CSS .

50) Cosa c'è di meno .

51) Come realizzare un effetto angolo arricciato con i CSS .

52) Come creare un piè di pagina del sito Web "appiccicoso" reattivo .

53) Come utilizzare l' API di Google Fonts .

54) Come utilizzare il servizio Livetools .

55) Come abilitare o disabilitare la selezione del testo nei CSS .

56) Come modificare l'aspetto di un elemento in default con la proprietà di apparenza in CSS .

57) Perché abbiamo bisogno della proprietà page-break-inside nei CSS .

58) Come centrare allineare una casella di larghezza variabile in CSS .

59) Come realizzare triangoli con puro CSS .

60) Servizio per la generazione di triangoli CSS .

61) Come spingere il piè di pagina fino al bordo inferiore della pagina (posizionamento).

62) Come spingere il piè di pagina in fondo alla pagina (metodo della tabella).

63) Impara Sass . Installazione e configurazione.

64) Come nascondere un elemento in una pagina con i CSS .

65) Impara Sass . Nozioni di base.

66) Quando usare reset.css e normalize.css .

67) Servizio immagini con potenti API .

68) Come rendere l'effetto di zoom dell'immagine su CSS .

69) Koala - veloce compilazione di file sass .

70) Come aggiungere filtri alle foto con i CSS .

71) Impara Sass . Mixin.

72) Impara Sass . Operazioni matematiche.

73) Icona menu animato in Sass .

74) Impara Sass . Funzioni.

75) Cos'è PostCSS .

76) Come installare e configurare PostCSS .

77) Come rendere possibile il grading nei CSS .

78) Impara Sass . Stile di scrittura del codice.

79) Impara Sass . Estensione del selettore principale.

80) 10 utili mixin SASS .

81) Come realizzare un'introduzione in stile Star Wars con i CSS .

82) Bootstrap 4 . Introduzione.

83) Bootstrap 4 . Installazione.

84) Bootstrap 4 . Riavviare.

85) Bootstrap 4 . Contenitori e punti chiave.

86) Bootstrap 4 . Sistema a griglia.

87) Bootstrap 4 . Proprietà flessibili della griglia.

88) Quali 5 innovazioni appariranno nei CSS4 .

89) Bootstrap 4 . Cos'è Jumbotron.

90) Bootstrap 4 . Utilità e tipografia.

91) Bootstrap 4 . Il componente Carte.

92) La differenza tra class e id nell'esempio del tag div .

93) Cattivi elementi di web design che non dovresti usare.

94) Bootstrap 4 . finestre modali.

95) A proposito di priorità ed ereditarietà nei CSS in pratica

96) Come impaginare il layout PSD sulla griglia Bootstrap . Parte 1.

97) Come impaginare il layout PSD sulla griglia Bootstrap . Parte 2.

98) Come usare gli pseudo-elementi after e before nei CSS .

99) Informazioni sulle caratteristiche della larghezza e dell'altezza del blocco in CSS .

100) Lo pseudo-elemento after e la pseudo-classe last-child .

101) Come mostrare il sito su vari dispositivi.

102) Layout della griglia Bootstrap (Parte 1)

103) Layout della griglia Bootstrap (Parte 2)

104) Layout della griglia Bootstrap (Parte 3)

105) Layout della griglia Bootstrap (Parte 4)

106) Preprocessore LESS , avvio semplice.

107) Come funziona la griglia Bootstrap .

108) Finestra modale su Bootstrap . Stilizzazione.

109) Come creare uno sfondo in CSS

110) Come creare un pulsante CSS animato .

111) Un esempio di layout responsivo su Bootstrap .

112) Layout reattivo ( Bootstrap 4 .

113) Modello SASS .

114) Proprietà flessibili in pratica.

115) Layout reattivo attivo flettere (parte 1).

116) Layout reattivo attivo flettere (parte 2).

117) Contro e pro dell'uso dei caratteri icona.

118) Allestimento tavolo (SCSS + flexbox).

119) Movimenti di animazione fluidi CSS.

120) Come creare schede con CSS puro.

121) Disegna una freccia in CSS.

122) Transizione graduale. La proprietà CSS di transizione.

123) Effetto sfocatura e messa a fuoco CSS.

124) La proprietà transform-origin in un esempio.

125) Animazione di fotogrammi CSS.

126) Disegna l'icona dell'utente in CSS.

127) Disegna un cuore con i CSS.

128) Effetti al passaggio del mouse a tre pulsanti.

129) Popup CSS puro.

130) Blocco smussato in CSS.

131) Blocco smussato con percorso a clip.

132) La prima lettera del logo di Google.

133) Didascalie in stile fumetto.

134) Raccolta di componenti CSS.

135) Nastro d'angolo CSS.

136) 3 modi per allineare i blocchi in larghezza.

137) Tipi di selettori CSS.

138) Framework CSS Materialise (Installazione).

139) Framework CSS Materialise (barra di navigazione).

140) Utilizzo delle variabili nei CSS.

141) Come spingere il piè di pagina in fondo alla pagina.

142) Cosa c'è di nuovo in Bootstrap 5?

143) Layout di griglia CSS n. 1 (griglia di base).

144) CSS Grid Layout #2 (Posizionamento delle celle).

145) Errori da principiante durante la creazione di siti web #1.

146) Errori da principiante durante la creazione di siti web #2.

147) Errori da principiante durante la creazione di siti web #3.

148) Errori da principiante durante la creazione di siti web #4.

149) Un esempio di layout adattivo su flexbox #1.

150) Un esempio di layout adattivo su flexbox #2.

151) Griglia CSS. Esempi pratici #1.

152) Griglia CSS. Esempi pratici #2.

153) Griglia CSS. Esempi pratici #3.

154) Griglia CSS. Esempi pratici #4.

155) Griglia CSS. Esempi pratici #5.

156) Esempio di layout galleria fotografica su CSS Grid #1.

157) Esempio di layout galleria fotografica su CSS Grid #2.

158) Un esempio di layout di una semplice sezione su CSS Grid #3.

160) Un esempio di layout del form su CSS Grid #4.

161) Un esempio di layout di una sezione blog su CSS Grid #5.

162) Animazione dell'aspetto del testo su CSS.

163) Puro effetto di parallasse CSS.

164) Animazione di sottolineatura del collegamento CSS.

165) L'effetto dell'aspetto della cornice al passaggio del mouse.

166) Bagliore pulsante animato CSS puro.

167) Effetto hover SVG per pulsante.

168) Come sfocare lo sfondo sotto un blocco usando SVG.

169) Avatar all'interno di un cerchio in CSS.

170) Effetto CSS quando si passa con il mouse sopra il menu.

171) Effetti CSS. Il blocco ha una cornice sfumata.

172) Menù di navigazione con icone + effetto al passaggio del mouse.

173) Proprietà della griglia CSS align-items.

174) Attiva o disattiva il menu dell'hamburger usando JS.

175) Layout di un form di login trasparente.

176) L'effetto di un bagliore al neon animato sul pulsante.

177) Effetto CSS quando si passa con il mouse su un elemento dell'elenco.

178) Qual è la differenza tra box-shadow e drop-shadow?.

179) Come unire i campi nel modulo di ricerca.

180) Come creare un puro CSS To Do List (Parte 1).

181) Come creare un puro CSS To Do List (parte 2).

182) CSS loss of focus effetto e viceversa.

183) Caricatore animato su gradienti e ombre.

184) Ombreggiatura del blocco sfumato nei CSS.

185) Bell'effetto hover per il blocco.

186) Ombra curva con pseudo-elementi.

187) Testo verticale in CSS.

188) Testo che avvolge un'immagine di forma personalizzata.

189) Disegna gocce d'acqua con i CSS.

190) Effetto insolito quando si passa sopra una carta.

191) Personalizzazione dell'icona FontAwesome.

192) Sposta il segnaposto sul campo di immissione in evidenza.

193) Un esempio di utilizzo delle variabili CSS per l'animazione.

194) Come creare un'intestazione di un sito Web arrotondata.

195) Effetto hover creativo sulle immagini. Parte 1.

196) Effetto hover creativo sulle immagini. Parte 2.

197) Trasformare le carte piegate in CSS.

198) Movimento dell'immagine di sfondo all'interno del riquadro.

199) @keyframes Esempio di animazione CSS.

200) Animazione zoom CSS creativa.

201) Un esempio pratico di utilizzo della funzione attr nei CSS.

202) Sezione animazione CSS con effetto onda.

203) Come realizzare una tazza con piattino in CSS.

204) Imitazione del vapore davanti a una tazza di tè caldo.

205) Testo al neon animato in CSS.

206) Come posizionare l'immagine all'interno della sagoma.

207) Un esempio di utilizzo delle funzioni CSS var() e calc().

208) Ruota i quadrati. Animazione in CSS.

209) L'effetto di rivelare la copertina al passaggio del mouse.

210) Animazione CSS di stelle cadenti.

211) Card design su puro CSS.

212) Uomo dalla pelle screpolata in puro CSS.

213) Cerchio stratificato su gradienti e ombre.

214) Effetto onda viaggiante CSS puro.

215) Effetto al passaggio del mouse CSS creativo per il menu di navigazione.

216) Imitazione di una macchina da scrivere quando si passa sopra il testo.

217) Progettazione di blocchi creativi nei CSS.

218) Insolito effetto al passaggio del mouse per il design del sito web.

219) Trasformazione creativa dei pulsanti radio.

220) Effetto di pixelizzazione dell'immagine CSS.

221) Elegante pulsante al passaggio del mouse (grafica + CSS).

222) Valutazione con emoticon CSS puri.

223) L'effetto della carta strappata attorno all'immagine.

224) Pulsante flip con effetto 3D.

225) Figure con effetto librarsi della serie TV "Il gioco del calamaro".

226) Figure con effetto hover della serie TV "Il gioco del calamaro".

227) Imitazione di nastro festivo su cartoncino.

228) Casella di controllo CSS personalizzato della creatività.

229) Sezione con servizi dal design accattivante.

230) Biglietto da visita traslucido.

231) Effetto testo a strati.

232) Un semplice piè di pagina del sito web.

233) Piè di pagina animato del sito web (continua).

234) L'effetto della stratificazione quando si passa sopra la carta.

235) Sostituzione di un'immagine distorta al passaggio del mouse.

236) Ritratto con effetto testo.

237) Animazione cubo luminoso (effetto 3D).

238) Imitazione dei tasti della tastiera su CSS.

  • Creato il:
  • 2020-04-05 20:46:00
  • Visualizzazioni
  • 186

  • Comenti
  • 0

Recensioni mancante

La pubblicazione della recensione aviene dopo il controllo del administratore.



Condivide articolo


Altri articoli ...