HAI BISOGNO DI INFORMAZIONI?
+39 06452216038
LIVE SUPPORT
Parla con un operatore

Hosting Per Te - HelpDesk

LIVE SUPPORT
Parla con un operatore
 
 Categorie Notizie
(16)Domini (3)dominio (47)Blog (75)Sicurezza (60)Wordpress (1)Cross-Site (1)vulnerabilità (9)wordpress (1)zero day (8)sicurezza (1)sitelock (25)News (2)google (1)indicizzazione (1)mobilegeddon (11)seo (21)Hosting (4)hosting (1)multi (1)reseller (1)rivenditore (1)provider (25)Email (35)Server (4)email (2)imap (1)imapsync (2)migrazione (1)posta (2)affiliazione (2)guadagnare (84)Ecommerce (4)e-commerce (2)ecommerce (4)VPN (1)wi-fi (1)backup (3)server (34)marketing (2)ppc (1)search-engine-optimization (1)seo pay-per-click (1)domini (2)gTLD (2)IP (1)IP-condiviso (1)IP-dedicato (2)cloud (1)virtuale (3)vps (21)Blogging (4)blog (2)blogging (46)CMS (3)cms (1)sito di successo (1)campagne e-mail (1)criptare dati (2)ssl (1)plugin e-commerce (1)newsletter (1)rivenditori (1)server vps smtp (1)SMTP (1)design responsivo (1)responsive design (1)responsive web design (2)hacking (5)malware (1)phishing (1)server upgrade (2)prestashop (2)campagna e-mail (3)e-mail marketing (1)contenuti sito (1)struttura pagina web (1)call-to-action (1)promozione sito (1)ottimizzare sito (1)cookie law (1)psicologia web design (1)vendita siti (1)website flipping (1)titolo (1)alternativa google analytics (2)monitoraggio (1)keyword (1)programmazione (1)facebook marketing (1)colori (2)clienti (1)privacy whois (1)crimini informatici (1)Cyber crime (1)search console di google (1)supporto managed (1)hacker (1)copyright (1)referrer spam (1)Split testing A/B (1)freelance (4)magento (1)Linux (2)Windows (1)upgrade piani hosting (1)Google SpeedTest (1)landing page (1)seo friendly (1)struttura link (1)errori wordpress (2)psicologia dei prezzi (2)metodi di pagamento (1)effetti sonori (3)APP (1)webmaster (1)fatturazione elettronica (1)sito web (1)backup wordpress (1)fan facebook (1)Exchange ActiveSync (1)POP3 (1)firma e-mail (1)web agency (1)ergonomia (1)editor (3)adwords (1)quality score (1)errori ecommerce (25)startup e business (1)errori azienda (1)sql injection (1)monetizzare (1)regole successo (1)nameserver (2)mailing list (2)responsive email (3)pec (3)bootstrap (1)Bing (1)Bing Ads (1)Foundation (4)framework (1)statistiche mobile (1)adwords per mobile (1)about page (1)chi siamo (1)seo vs ppc (1)errori webmaster principianti (25)SEO (1)PDF e SEO (1)ottimizzare pdf (70)strumenti (1)relazionarsi con i clienti (1)FAQ (1)tld srl (1)traffico (1)keywords (1)parole chiave (1)trend estero (5)statistiche (1)K.I.S.S. (1)plugin sicurezza wordpress (2)certificato ssl (1)template (1)black hat (1)Creative Common Zero (1)blog ecommerce (1)Google Smart Goals (2)web design (1)facebook ads (1)SFTP (1)FTP (2).htaccess (1)statistiche e-commerce (1)url brevi (2)cloud computing (1)HDD (1)grafici (1)librerie js (2)antivirus (1)framework css (1)Google Panda (2)Internet of Things (2)ransomware (1)TeslaCrypt (2)tecnologia (1)telelavoro (1)mobile friendly (1)proxy (2)cryptolocker (1)Processore AMD (1)rapporto clusit 2016 (2)truffe online (1)plugin monitoraggio (2)bug linux (1)ranking tools (1)social network (1)deep web (1)tor (1)plugin sottoscrizioni (1)link building (3)plugin wordpress (1)design (1)siti di successo (1)ottimizzare immagini (2)widget (1)sito monopagina (1)VPS Economici (1)trend del marketing (1)realtà aumentata (1)ip dinamico (1)progettazione sito (1)Redirect 301 e 302 (1)notifiche push (1)velocità sito (1)ottimizzazione contenuti (1)guadagnare con un blog (1)costi e-commerce (1)social media (1)frode amichevole (1)e-commerce wordpress (4)drupal (4)joomla (1)travel blog (3)php (1)chargeback (1)e-mail (1)plug-in video wordpress (1)sito sportivo (1)plug-in seo (1)drupal vs magento (1)portfolio (1)plug-in portfolio (1)sottodomini di terzo livello (1)sicurezza e-commerce (1)pubblicità su facebook (1)visualizza numero utenti (1)affiliate marketing (1)cartella nascosta android (1)creare app (2)Infiniband (1)Intel LGA 3647 (1)furto di dati sensibili (1)marketing diretto (1)record DNS (2)ddos (1)Mobile shopping (1)Malware su Skype (1)virus (1)youtube (1)seo immagini (1)web marketing (1)vendita online (1)food blogger (1)Plesk Onyx (1)Bug Fedora ed Ubuntu (1)Micro SSD (1)IoT (1)Chip Kaby Lake (1)primo e-commerce (1)blog di fitness (2)plug-in WordPress (1)SPF e DKIM (1)Cyber sicurezza (1)file robots.txt (1)AMD Naples (1)Vulnerabilità REST API WordPress (1)trasferimento da Blogger a WordPress (1)plug-in WordPress per musicisti (1)Crittazione (2)CPU (1)Legge antibufale (1)Strumenti di marketing (1)CPU AMD (1)nda (1)Let's Encrypt (1)Hosting Linux o Windows (1)progress bar (1)blog di cucina (1)PrestaShop oppure WooCommerce (1)carte di credito (1)librerie javascript (1)DDR5 (1)plugin monetizzazione (1)Wireless (2)drag and drop (1)web server (1)Curricula digitali (1)name server (2)Autenticazione a due fattori (1)Trend Tech (1)business online (1)Keylogger (1)infopreneur (1)E-book (1)WanaKiwi (1)file LNK (1)hub (1)router (1)switch (1)pdf (1)hosting provider gratuito (1)Shopify (1)Usabilità web (1)temi (1)confronto file (1)quiz (1)mockup (1)hosting provider (2)chat (1)ristoranti (1)database (1)spam (1)tool (1)Javascript (1)automazione (1)forum (1)compressione (2)webserver (1)Caching (1)video (1)Normative (1)Collaborazione (1)unicorn (2)robots.txt (1)funnel (1)redirect (1)Markdown (2)Google Tag Manager (1)apache (1)Ajax (1)wamp (1)xampp (1)browser (1)OSCommerce (1)Blockchain (1)sottodominio (1)sviluppo Web (1)Moduli (1)TLD (1)Google Analytics (1)plugin (1)e-mail professionale (1)amazon (1)cache (1)multilingua (1)traduzioni (1)Bitcoin (1)script (2)CSS (1)exFAT (1)FAT32
Feed RSS
Notizie
nov
27

Seconda parte del tutorial che illustra alcune utili funzionalità CSS.

 

 

 

9 – Espandere la chat quando riceve il focus

Al momento la chat box è chiusa ed inutilizzabile. Come possiamo espanderla utilizzando solo CSS? Semplice, tramite la pseudo-classe Focus Container: focus-within.

L’aggiunta di questa classe aumenterà il max-height dell’elemento .messages a 300px ogni qualvolta gli elementi presenti all’interno di .chat ricevono il focus.

.chat:focus-within .messages {

 max-height: 300px; }

 

 

10 – Focus: uno step in più

Quando la chat riceve il focus possiamo oscurare il newsfeed. Questa operazione è possibile con l’aiuto del simbolo subsequent-sibling (~)

.chat:focus-within ~ .container {

 filter: blur(5px); }

 

 

11 – Placeholder-shown

Un’altra interessante pseudo classe è :placeholder-shown. Di solito gli elementi input di un form mostrano il testo segnaposto tramite click sul campo input. Con :placeholder-shown  possiamo attribuire uno stile agli elementi che mostrano il testo segnaposto.

Aggiungere

<input type=”text” class=”input” placeholder=”Inserisci  il tuo messaggio”>

Ed aggiungere subito dopo un messaggio da mostrare all’utente:

<div class=”prompt”>Cliccare su Enter per inviare il messaggio</div>

Ora aggiungi lo stile da attribuire al messaggio:

.prompt {

 line-height: 2em;

 max-height: 0;

 overflow: hidden;

 padding: 0 10px;

 text-align: right;

 transition: max-height 500ms; }

 

 

12 – Rendere visibile il prompt

.input:not(:placeholder-shown) + .prompt {

 max-height: 2em; }

 

 

13 – Attivazione

Così com’è il newsfeed con la funzione chat è inattivo. Occorre aggiungere del codice JS che consenta l’inserimento di messaggi nella chat box.

Innanzitutto aggiungiamo in ID ad <input> e <ul>

<ul id=”messages” …

<input type=”text” id=”input” required …

Poi creiamo un file JS vuoto chiamandolo script.js ed aggiungiamolo alla pagina inserendo il seguente codice prima del tag </body>

<script src=”script.js”></script>

</body>

Nel file script.js inserire il seguente codice:

// Finds the important elements

const input = document.getElementById(‘input’);

const messages = document.getElementById(‘messages’);

// Listens for keypress events on the input

input.addEventListener(‘keypress’, (event) => {

  // Checks if the key pressed was ENTER

   if (event.keyCode === 13) {

  // Checks the field is valid

  if (input.validity.valid) {

  // Creates a DOM element using the value

  const message = createMessage(input.value);

  // Appends the new message to the list

  messages.appendChild(message);

  // Clears the field

  input.value = ‘’;

  // Scrolls the messages to the bottom

  messages.parentNode.scrollTop = messages.parentNode.scrollHeight;

  }

  }

});

// Converts value to string of HTML

function createMessage (value) {

  // Warning: Don’t do this in production without sanitizing the string first!

  return stringToDom(`<li><div class=”message”>${value}</div></li>`)

}

// Converts string to real DOM

function stringToDom (string) {

  const template = document.createElement(‘template’);

  template.innerHTML = string.trim();

  return template.content.firstChild; }

 

 

14 – Aggiungere alcune ulteriori iinformazioni

Comunichiamo quando il messaggio è stato inviato. Tale informazione compare quando il puntatore del mouse passa sopra il messaggio (i.e. hover)

Inseriamo nella pagina quanto segue:

return stringToDom(`

 <li>

 <div class=”message message–mine” data-timestamp=”${new Date().toString()}”>

 ${value}

 </div>

 </li>

 `);

 

Aggiungere quindi la classe .message—mine

.message–mine {

 background: #ff2089;

 margin-left: 20%;

 margin-right: 0;

}

 

Qui si conclude questo tutorial che mostra alcune utili funzionalità CSS da testare ed utilizzare nel tuo prossimo progetto web.

L'articolo 5 interessanti funzionalità CSS. Ecco come utilizzarle – Seconda parte sembra essere il primo su Blog Hosting Per Te.





Hosting Per Te
© 2015 - ARMADA
Partita IVA 00873530943
REA IS-38469
Tel +39 06452216038
Fax +39 0689280222
Il tuo IP: 3.231.229.89
Hosting Per Te Facebook   Hosting Per Te Twitter   Hosting Per Te Blog
ARMADA
Chiedi ad un nostro Operatore