Ciao, cari lettori! Il web design e lo sviluppo web si stanno evolvendo molto rapidamente. Ogni giorno vediamo sempre più nuovi prodotti, siano essi applicazioni o nuovi servizi, che rendono la nostra vita online più produttiva e conveniente. E il web design è semplicemente uno spazio illimitato, limitato solo dal talento e dalle capacità dell’“artista” (designer). Quindi oggi parleremo di LESS, un linguaggio di markup di stile dinamico che semplificherà la scrittura degli stili CSS.
LESS è un superset di CSS. Ciò significa che qualsiasi codice CSS è LESS valido, ma gli elementi LESS aggiuntivi non funzioneranno nel semplice codice CSS. Questo è fantastico perché il CSS esistente è già un codice LESS valido, il che riduce la barriera all’ingresso nella nuova tecnologia.
LESS aggiunge molte proprietà dinamiche utili a . Introduce variabili, operazioni, elementi e mixin. Essere in grado di scrivere fogli di stile in modo modulare ti farà risparmiare un sacco di problemi. 
MENO rende gli stili di scrittura molto più semplici. Ad esempio, utilizzando i mixin, creiamo qualcosa di simile a funzioni che possono accettare argomenti. Mixins: ti consente di includere tutte le proprietà di una classe in un'altra classe accensione semplice il nome della classe come valore di una delle proprietà.
1 | Angoli arrotondati (@raggio: 5px) ( |
E il CSS compilato sarà simile a questo:
1 | #intestazione ( |
Carica la libreria prefix-free.js e collegala a index.html:
< script src= "prefix-free.js" type= "text/javascript" > |
Terminiamo qui i preparativi e passiamo direttamente alla creazione di un menu in stile Apple.com
Markup HTMLIl layout del menu è abbastanza semplice. Il menu si basa su un elenco non ordinato. Apri l'editor HTML e incolla questo codice:
1 |
In questa sezione inizieremo a scrivere il codice del menu in linguaggio LESS. Per chi è nuovo alla programmazione, sia alla scrittura che alla sintassi LESS, non preoccupatevi, cercherò di scomporre tutto per renderlo chiaro. Forse anche a qualcuno piacerà questo modo di scrivere gli stili per un sito, perché è davvero più produttivo.
Diamo un'occhiata a quali componenti sarà composto il menu: 
Come possiamo vedere nello screenshot qui sopra, la navigazione di Apple.com è composta dalle seguenti 6 parti principali:
- Viene utilizzata l'ombra;
- Confine;
- Separatore tra le voci di menu;
- Gradiente per lo sfondo;
- Effetto di attenuazione al passaggio del mouse;
- Testo del menù.
Puoi utilizzare gli stili scritti in due modi:
- Crunch
Importante: quando si utilizza il primo metodo, stili.less deve essere incluso prima della libreria less.js! Inoltre, non dimenticare di connetterti senza prefisso.
Pertanto, gli stili di connessione si presentano così:
1 |
|
Utilizzeremo 2 file: config.less in esso definiremo tutte le variabili, i mixin, ecc., dopodiché lo importeremo nel secondo (styles.less) in cui creeremo già gli stili per gli elementi del menu.
Ora diamo un'occhiata al codice in config.less. Definiamo il colore base del menu utilizzando le variabili. Una variabile in LESS viene dichiarata utilizzando il simbolo @.
Nel codice sopra non ho incluso un prefisso per box-shadow , la libreria senza prefisso lo aggiungerà automaticamente. Inoltre, il colore dell'ombra viene ereditato dal colore della variabile @theme.
Definiamo uno stile per i bordi del menu utilizzando i mixin con un parametroIl nostro menù avrà bisogno di un bordo con angoli arrotondati. Mixin con parametro - in realtà ha la stessa funzionalità di un mixin semplice, l'unica differenza è che ha anche un parametro variabile.
1 | Bordo(@raggio: 3px) ( |
Nell'esempio sopra impostiamo il valore @radius predefinito su 3 pixel e, come abbiamo detto, questo valore può essere modificato.
Definisci il gradiente, il separatore e lo stile al passaggio del mouse utilizzando le operazioniIn LESS, puoi utilizzare le operazioni per incrementare, diminuire, dividere e moltiplicare sia i valori che i colori delle proprietà, consentendoti di specificare relazioni complesse tra le proprietà per ottenere il risultato desiderato. Diamo un'occhiata al codice seguente, che imposta le proprietà per il separatore di menu:
1 | Divisore ( |
Nell'esempio sopra, sottraiamo il colore #111 dalla variabile @theme, quindi il lato sinistro del separatore sarà leggermente più scuro del colore di base e il lato destro sarà più chiaro. Questi sono i tipi di manipolazioni che possiamo fare con il colore HEX.
Per rendere più chiara la manipolazione del colore, diamo un'occhiata alla combinazione di colori: 
Il colore scuro massimo è #000 (nero), il colore chiaro massimo è #FFF (bianco) e il colore base è #555. Quindi, se vogliamo un colore tre livelli più scuro, sottraiamo #333 .
Ora gli stili di sfumatura:
1 | Gradiente ( |
Prevediamo di utilizzare 2 colori di testo e colori di ombra del testo. Viene utilizzata un'opzione se lo sfondo del menu è chiaro, quindi il colore del testo è scuro e viceversa.
Innanzitutto se il colore del testo non ha una luminosità pari o superiore al 50%, allora l'ombra dovrebbe scurirsi, in questo caso il colore #000000.
A questo punto, terminiamo la creazione del file config.less e passiamo alla creazione del file Styles.less
Importa config.lessCreiamo un file chiamato Styles.less e prima di tutto alleghiamo ad esso il file config.less già creato, nel seguente modo:
Al momento, il risultato del nostro lavoro è simile a questo. 
Non ancora molto attraente. Ma c'è ancora molto da fare.
Stile di base per menu con regole nidificateIn LESS, possiamo nidificare gli stili di qualsiasi elemento direttamente nello stile del genitore. Il tag di navigazione è la specifica HTML5 nav, che contiene tutti gli elementi necessari per la navigazione. Ecco i suoi stili:
1 | navigazione( |
Nota che invece di scrivere una serie di regole CSS, abbiamo semplicemente definito l'altezza, la larghezza e il riempimento. Mentre prendiamo il bordo e il suo stile, nonché l'ombra utilizzando i mixins, specifichiamo il nome della classe .border e .shadow e le regole di queste classi, che abbiamo scritto nel file config.less, vengono aggiunte al nav classe. 
1 | navigazione( |
Tuttavia, in LESS l'ereditarietà avviene diversamente, è più facile e logico capire:
1 | navigazione( |
Come puoi vedere nell'immagine, gli elementi della lista li sono posizionati verticalmente, ma abbiamo bisogno che siano posizionati orizzontalmente. Per fare ciò, imposta la proprietà display:inline;
1 | navigazione( |
1 | navigazione( |
Nell'esempio sopra stiamo usando il colore esadecimale #f2f2f2 , questo colore ha una luminosità superiore al 50% quindi l'ombra verrà impostata automaticamente sul nero. Il resto del codice, ne sono sicuro, è abbastanza ovvio. 
li(
visualizzazione: in linea;
UN (
decorazione del testo: nessuna;
visualizzazione: blocco in linea;
galleggiante: sinistra;
larghezza: 156px;
altezza: 45px;
allineamento testo: centro;
altezza della linea: 300%;
.divisore;
.pendenza;
}
}
li: primo figlio a (
border-left: nessuno;
}
li: 50px automatico 0;
larghezza: 788px;
altezza: 45px;
.confine;
.ombra;
ul(
imbottitura: 0;
margine: 0;
li(
visualizzazione: in linea;
UN (
decorazione del testo: nessuna;
visualizzazione: blocco in linea;
galleggiante: sinistra;
larghezza: 156px;
altezza: 45px;
allineamento testo: centro;
altezza della linea: 300%;
.coloretesto(#f2f2f2 ) ;
.divisore;
.pendenza;
// Puoi modificare questa riga
&:passa con il mouse (
}
}
}
li: primo figlio a (
border-left: nessuno;
}
.hovereffect;
li: ultimo figlio a (
}
}
}
Compilazione di LESS in CSS
- Bene, questo è tutto, la scrittura di apple.com può essere completata qui. Resta da decidere come allegheremo gli stili scritti alla pagina web. Come ho detto sopra, puoi utilizzare gli stili scritti in due modi:
- connettere stili.less e la libreria less.js;
oppure compila stili.less nel programma Crunch e allega già stili.css regolari alla pagina
Naturalmente, la seconda opzione è migliore, perché allegare 2 file e fare il doppio lavoro sul lato client, quindi compiliamo gli stili LESS scritti in normali CSS statici. 
Per fare ciò, fai clic sul grande pulsante Crunch It! E mantieni il normale style.css
Questo conclude la lezione. P.S.: Chiunque può creare un menu così semplice, ma se hai bisogno di un sito web davvero interessante con effetti meravigliosi, allora posso consigliarti uno dei migliori studi web in Ucraina. I ragazzi saranno in grado di realizzarti un design davvero unico, performante ottimizzazione dei motori di ricerca
e promuovi il tuo sito!
Il web design in stile Apple si è sviluppato e si è evoluto nel corso degli anni a partire dal 1996. Come suggerisce il nome, l'idea progettuale appartiene alla Apple Corporation: il sito web e le interfacce del prodotto sono state progettate in questo stile. Il design del sito Web in stile Apple ha guadagnato ampia popolarità grazie al suo minimalismo e focalizzando l'attenzione dell'utente su un prodotto specifico.- presentare un prodotto o un servizio. Questo stile viene spesso utilizzato quando si progettano negozi online e siti promozionali dedicati a qualsiasi tipologia di prodotto: dai corsi di formazione alle vendite immobiliari. Ecco come appare un design in stile Apple per i siti Web di software:
- Jumsoft http://www.jumsoft.com/money/
, blog, portfolio e siti dedicati alla creatività.
Sei il felice proprietario di un'azienda piccola ma interessante. Il trionfo è ancora lontano, ma non hai dubbi che col tempo la tua attività diventerà motivo di orgoglio e un esempio da seguire. A proposito, non devi aspettare questo momento: puoi posizionarti subito come un professionista di alto livello facendo una dichiarazione convincente, come quella di un'azienda grande e seria.
Segui le tendenze del web design
I grandi marchi aggiornano e migliorano costantemente i loro siti web. Team di designer e sviluppatori esperti stanno lavorando per creare una risorsa insolita e moderna che susciti la curiosità e il desiderio delle persone di dare un'occhiata più da vicino. Sì, è molto costoso, ma c'è anche, ad esempio Wix. Il nostro editor è stato creato appositamente per consentirti di creare un bel sito Web per qualsiasi tipo di attività e aggiungervi qualche effetto alla moda, ad esempio lo scorrimento con parallasse o un video come sfondo. Puoi creare una pagina attuale "lunga" e integrarla con elementi di design "piatti"*.
Pensiamo che in questa fase non ti farà male visitare i siti web dei designer e trarre ispirazione. I nostri consigli: rivista Ispirazione web, blog Lopart e rivista di design Sala di servizio; Se Lingua inglese nessun problema per te, leggi Progettazione Vandelay , Rivista strepitosa E Deposito webdesign .
*Non capisci cosa significano tutte queste parole? Quindi è necessario leggere il nostro.
Le grandi aziende hanno un’identità aziendale riconoscibile e un posizionamento molto chiaro. Usano caratteri, colori e slogan rigorosamente definiti. Riconoscerai inconfondibilmente il logo rosso della Coca-Cola, sia sul sito web, sulle bottiglie o sui cartelloni pubblicitari lungo la strada.
E se la tua azienda non fosse grande come la Coca-Cola? Questo non significa che non devi fare branding. Un’identità aziendale ben pensata è importante. Grazie ad esso, le persone potranno identificare rapidamente il tuo prodotto e quindi effettuare un acquisto. Pertanto, disegna un bel logo, crea uno slogan, scegli i caratteri, i colori del marchio e progetta le tue pagine sui social media di conseguenza. Ulteriori suggerimenti nel nostro articolo su.
Meno è meglioComprendiamo che desideri parlare in dettaglio del tuo prodotto e della tua attività, ma non è consigliabile sovraccaricare il sito e annoiare i visitatori. Il sito si carica molto male, è difficile da leggere e respinge i visitatori. Il meglio è nemico del bene, quindi devi imparare a fermarti in tempo.
Pensiamo a cosa può essere rimosso dal tuo sito. Se i testi sono pieni di termini tecnici e professionali, sbarazzatevene. Pensi che i visitatori abbiano davvero bisogno di conoscere le biografie dettagliate di tutti i tuoi dipendenti? Improbabile. Alcune cose, ovviamente, non possono essere abbreviate, ad esempio, descrizione dettagliata beni o servizi, ma è normale, queste informazioni sono utili. Vale anche la pena spostarlo in un posto dove sicuramente non passerà inosservato. E tutto ciò che rallenta il processo di acquisto può essere rimosso senza il minimo rammarico.
Ora diamo un'occhiata al design. Riduci il numero di colori a tre o quattro, rimuovi tutto immagini aggiuntive e prestare attenzione alla tipografia. Ricorda di lasciare molto spazio nella testa, noto anche come "aria". Quando c’è molta “aria” su un sito, le persone notano tutti gli elementi critici, come quelli necessari per spingere i visitatori all’acquisto, all’iscrizione, alla registrazione, ecc.
Mostra il prodotto nella home pageVuoi aumentare il numero di ordini? Quindi, assicurati che le persone vedano subito il tuo prodotto. Guarda i siti web di marchi famosi. Vedete, inseriscono i prodotti non solo nella pagina dello shopping, ma anche nella pagina principale in modo che le persone li notino sicuramente. Se hai e stai pensando a come aumentare le vendite, sentiti libero di copiare questa tecnica.
Naturalmente, le fotografie dei prodotti devono essere grandi e di altissima qualità. Non dimenticare che questo accade in un negozio online dove non puoi toccare o provare nulla, quindi le persone prendono decisioni di acquisto guardando l'immagine. Se non hai soldi per un fotografo professionista, leggi il nostro articolo a riguardo. Un po' di pratica e tutto funzionerà! E non dimenticare le capacità del nostro editor; puoi aggiungere un'applicazione al sito in modo che il cliente possa ingrandire l'immagine dell'oggetto di interesse e guardarlo bene.
Pensiamo che ti sia mai capitato di trovarti su un sito web mal progettato e di vagare avanti e indietro confuso alla ricerca della pagina giusta. Di norma lasciamo questi luoghi a mani vuote e con il desiderio di non tornare mai più. Ed è tutto dovuto a una navigazione mal concepita. Non ripetere questo errore e assicurati che tutto sia chiaro al visitatore fin dai primi secondi.
Se ti viene chiesta la stessa cosa più e più volte, crea una pagina con le risposte alle domande più frequenti. È possibile utilizzare l'applicazione Domande frequenti su Wix. Il suo vantaggio è che le persone ottengono le informazioni di cui hanno bisogno e tu non sei distratto da altre questioni.
Vuoi dimostrare che la tua azienda è reattiva e amichevole? Aggiungi l'applicazione " Chatta dal vivo Tidio” per rispondere alle domande in tempo reale. Puoi installarlo sul tuo smartphone e non stare seduto al computer tutto il giorno, ma dedicarti ai tuoi affari e rimanere connesso.
Dimostra che le persone si fidano di teÈ positivo che cerchi di rimanere in contatto e di rispondere alle domande in tempo, ma questo non è sufficiente per creare fiducia con i clienti. Per fare ciò, devi lavorare di nuovo sul sito. Fai una sezione a parte con la storia dell'azienda, parla di chi sei, in cosa credi e cosa consideri importante. Non sono necessarie troppe informazioni: il testo deve essere breve, sincero e comprensibile. È piuttosto difficile mostrare che tipo di persona sei su Internet, ma pensiamo che una pagina come questa farà perfettamente il lavoro.
Consigliamo inoltre di aggiungere le recensioni dei clienti al sito - all'indirizzo pagina iniziale o in una sezione separata. Leggendoli, le persone capiranno che il tuo prodotto è affidabile. A proposito, anche Yandex e Google prestano attenzione alle recensioni, il che significa che influenzano.
Realizza una versione mobile del sitoPiù della metà degli utenti Internet accede alla rete da tablet e smartphone. Questo significa questo versione mobile un sito web non è un capriccio, ma una necessità. Fortunatamente, non devi preoccuparti di come farlo. Nell'editor Wix versione mobile viene generato automaticamente, devi solo testarlo e modificare alcune cose. Non dimenticare che la versione mobile non è una copia esatta della versione desktop, quindi rimuovi tutti gli elementi non necessari e rendi visibili pulsanti e contatti.
Presta attenzione a come i colleghi più anziani ed esperti gestiscono le loro pagine sui social network. Sì, per raggiungere il tuo pubblico in modo più completo, hai bisogno sia di un sito web che di pagine su Facebook, VKontakte, Instagram, ecc. I social network sono ideali per pubblicare notizie, scrivere di un prodotto e rispondere a domande. È importante non solo parlare di lavoro, ma formare un'immagine e costruire relazioni normali e di fiducia. Se non sai davvero cosa fare, leggi l’articolo in merito e segui tutti i nostri consigli.
Dopo aver creato una pagina su un determinato sito, informane i visitatori del tuo sito. Aggiungi pulsanti di social media all'intestazione, al piè di pagina o alla sezione dei contatti. Consigliamo inoltre di aggiungere l'applicazione: è gratuita e le grandi aziende la utilizzano volentieri. Con il suo aiuto, puoi gestire fino a dieci account dal tuo sito web: pubblicare notizie, rispondere puntualmente ai commenti e sorprendere i clienti con velocità, impeccabilità e professionalità.
Sei pronto a stare alla pari con i grandi marchi?
fallo da solo su Wix: è facile e gratuito!
Introduzione Azienda Apple- ogni prodotto che hanno è il risultato del lavoro di un team di designer. Anche il sito web di questa azienda ha sempre attirato l'attenzione.
In questa lezione creeremo una galleria: una presentazione “a la” Apple. Più o meno lo stesso viene utilizzato sul sito Web di Apple per presentare i prodotti dell'azienda. Non abbiamo bisogno di PHP o di un database per crearlo.
PASSO 1 - XHTML
Diamo uno sguardo più da vicino al markup XHTML:
L'idea è molto semplice: ci sono due contenitori DIV principali: uno con id="menu" contiene le miniature, il secondo "slides" contiene le diapositive stesse.
Per aggiungere una nuova diapositiva, devi semplicemente aggiungere nuovi elementi a entrambi i contenitori. Diapositive: immagini in Formato JPG, miniature - png trasparente. Ma puoi usare altri formati.
Puoi anche incollare qualsiasi codice HTML. Ad esempio, puoi trasformare una diapositiva specifica in un collegamento sotto forma di immagine.
È molto importante che le diapositive abbiano un'altezza e una larghezza specificate: vengono utilizzate da jQuery per determinare l'area di scorrimento.
Presta attenzione anche agli elementi delle miniature LI. Al primo è assegnata la classe fbar per visualizzare una barra di divisione verticale. Agli altri elementi viene assegnata la classe menuItem e vengono utilizzati come pulsanti di controllo della presentazione.
Passiamo al passaggio successivo.
Passaggio 2: CSS
Diamo un'occhiata al nostro foglio di stile.
Body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label( /* Reimposta pagina */ margin:0px; riempimento:0px; ) body( /* Impostazione del colore predefinito del testo, sfondo e una pila di caratteri */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-ombra:0 0 3px #AAAAAA; box-ombra:0 0 3px #AAAAAA; raggio-basso-sinistra:4px -webkit-bordo-basso-raggio-sinistra:4px; 4px; -moz-border-radius-bottomright:4px; :4px; border-bottom-right-radius:4px; border:1px solid white; overflow:hidden; ) #slides( /* Questa è l'area della diapositiva */ altezza:400px; /* jQuery modifica successivamente la larghezza in base alla somma delle larghezze di tutte le diapositive. */ larghezza:920px; overflow:hidden; ) .slide( float:sinistra; ) #menu( /* Questo è il contenitore per le miniature */ altezza:45px; ) ul( margine:0px; imbottitura:0px; ) li( /* Ogni miniatura è un elemento li */ larghezza:60px; display:inline -block; stile-elenco:none; altezza:45px; overflow:hidden; ) li.inact:hover( /* Lo stato inattivo, evidenziato al passaggio del mouse */ background:url(img/pic_bg.png) ripeti; .act ,li.act:hover( /* Lo stato attivo del pollice */ background:url(img/active_bg.png) no-repeat; ) li.act a( cursore:default; ) .fbar( /* Lo stato sinistro barra più verticale, accanto alla prima miniatura */ width:2px; background:url(img/divider.png) no-repeat right; ripeti a destra; altezza: 35px; imbottitura in alto: 10px;
In questo foglio di stile abbiamo utilizzato diverse proprietà CSS3:
* box-ombra, c'è una piccola ombra negli angoli della galleria. Usando questa proprietà: devi fornire le coordinate X e Y (0 0 qui), la sfocatura (3px nel nostro esempio) e il colore dell'ombra;
* raggio-bordo, bordi arrotondati nella parte inferiore della galleria.
Sfortunatamente, queste proprietà funzionano solo su Safari, Chrome e Firefox al momento.
Ora è il momento della magia di jQuery.
PASSO 3: jQuery
Avremo bisogno del seguente codice:
$(documento).ready(funzione())(
/* Questo codice viene eseguito dopo che il DOM è stato completamente caricato */
var totWidth=0;
posizioni var = new Array();
$("#diapositive .diapositiva").each(funzione(i)(
/* Passa in rassegna tutte le diapositive e memorizza la loro larghezza cumulativa in totWidth */
posizioni[i]=totLarghezza;
totWidth += $(questo).width();
/* L'array di posizioni contiene l'offset commutativo di ciascuna diapositiva dalla parte sinistra del contenitore */
if(!$(questo).larghezza())
{
alert("Per favore, inserisci larghezza e altezza per tutte le tue immagini!");
restituire falso;
}
});
$("#diapositive").larghezza(totWidth);
/* Cambia la larghezza del div cotnainer nella larghezza esatta di tutte le diapositive combinate */
$("#menu ul li a").click(funzione(e)(
/* Fare clic su una miniatura */
$("li.menuItem").removeClass("act").addClass("inact");
$(this).parent().addClass("act");
var pos = $(this).parent().prevAll(".menuItem").length;
$("#slides").stop().animate((marginLeft:-positions+"px"),450);
/* Avvia l'animazione scorrevole */
e.preventDefault();
/* Impedisce l'azione predefinita del collegamento */
});
$("#menu ul li.menuItem:first").addClass("act").siblings().addClass("inact");
/* Al caricamento della pagina, contrassegna la prima miniatura come attiva */
});
L'idea principale è che le diapositive si ripetano ciclicamente, la larghezza delle diapositive viene sommata e questa larghezza viene assegnata al contenitore. Poiché le diapositive sono allineate a sinistra, hanno molto spazio per sedersi una accanto all'altra.
Quando si fa clic su una miniatura, lo script calcola quale diapositiva mostrare e la scorre assegnando un valore di riempimento negativo utilizzando il metodo animato.
Solo 40 righe di codice e la nostra galleria di presentazioni è pronta!
Conclusione
Ci sono voluti solo tre passaggi per creare una bellissima galleria in stile Apple. Può decorare qualsiasi sito web.
Il design di Yabloko è sempre stato molto popolare tra i miei clienti. Quando si tratta di design, mi viene spesso detto "Ho bisogno di un design semplice con uno sfondo grigio chiaro" e utilizzo apple.com come esempio.
Se dai un'occhiata al loro sito, troverai dei pulsanti blu davvero carini. Lì sono realizzati in formato, quindi se desideri gli stessi per il tuo sito web, dovrai utilizzare Photoshop.
Quindi dispongo i pulsanti in puro CSS:
Pulsante Apple (cursore: puntatore; imbottitura: 3px 10px; decorazione del testo: nessuna; colore: #fff; dimensione carattere: 13px; ombra testo: 0 -1px 1px rgba(0, 0, 0, .3); immagine di sfondo: -webkit-linear-gradient(#52A8E8, #377 AD0 #377 AD0, #52A8E8); immagine di sfondo: -o-linear-gradient(rgb (82, 168, 232), rgb (55, 122 , 208 ); colore di sfondo : #52A8E8 ; -moz-raggio-bordo: 23px; raggio-bordo: 1px solido #205 59A ; , 255 , 255 , .3) ; .apple-button :hover , .apple-button :focus ( background-image :-webkit -linear- gradient(#54A1D8 , #196 7CA ) ; background-image :-moz-linear - gradiente (0% 100% 90 gradi, #196 7CA, #54A1D8) ; immagine-di-sfondo: -o-linear-gradient(rgb (84, 161, 216), rgb (25, 103, 202)); : #52A8E8; casella-ombra: 0 1px 0 rgba(255, 255, 255, .6), inserto 0 1px 0 rgba(255, 255, 255, .3);
) .apple-button :attivo ( colore di sfondo : #2D7CD1 ; box-ombra : 0 1px 1px rgba(255 , 255 , 255 , .5) , inserto 0 2px 5px rgba(0 , 0 , 100 , .5) ; )
Demo: esempio dal vivo (prova a passarci sopra con il mouse e a fare clic) Qualche parola sulla compatibilità tra browser. Poiché abbiamo utilizzato la proprietà gradiente CSS, potrebbero verificarsi alcuni problemi durante la visualizzazione nelle versioni precedenti Browser dell'Opera , beh, box-shadow lo è 3.
Proprietà CSSMisha IN ultimi anni Per molto tempo non sapevo cosa fare con il sito web, perché non porta praticamente alcun profitto, ma recentemente ho capito che la mia missione è favorire la diffusione di WordPress. Dopotutto, WordPress lo è miglior motore
per lo sviluppo di siti Web, sia per coloro che sono pronti a utilizzare la struttura integrata di questo CMS, sia per coloro che preferiscono soluzioni headless.
Io stesso ho conosciuto WordPress per la prima volta nel 2009. Organizzatore. Insegnante presso le scuole Epic Skills e LoftSchool.
