Το Neumorphism είναι μια νέα τάση σχεδιασμού που συνδυάζει την επίπεδη σχεδίαση και τον skuuomorphism. Είναι ένας ελάχιστος τρόπος σχεδίασης με ένα μαλακό, εξωθημένο πλαστικό, σχεδόν τρισδιάστατη εμφάνιση. Επί του παρόντος, αυτός ο σχεδιασμός είναι δημοφιλής μέσω του Διαδικτύου και χρησιμοποιείται ευρέως από σχεδιαστές και προγραμματιστές.

Αν θέλετε να δοκιμάσετε το νευρομορφισμό για το επόμενο έργο σας, ακολουθούν ορισμένα αποσπάσματα κώδικα για να ξεκινήσετε.

1. Νεομορφικές κάρτες

Χρησιμοποιήστε τα ακόλουθα αποσπάσματα κώδικα HTML και CSS για να δημιουργήσετε τις παραπάνω κάρτες neumorphic.

Κωδικός HTML

Σχέδιο

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod.

Διαβάστε περισσότερα










instagram viewer












Κώδικας

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod.

Διαβάστε περισσότερα
















Εκτόξευση

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod.

Διαβάστε περισσότερα

Κωδικός CSS

@import url (' https://fonts.googleapis.com/css? οικογένεια = Poppins: 400.500.600.700.800.900 & display = swap ');
*
{
περιθώριο: 0;
επένδυση: 0;
μέγεθος κουτιού: πλαίσιο-πλαίσιο;
font-family: 'Poppins', sans-serif;
}
σώμα
{
οθόνη: flex;
justify-content: κέντρο;
Στοιχεία ευθυγράμμισης: κέντρο;
ελάχιστο ύψος: 100vh;
φόντο: # ebf5fc;
}
.δοχείο
{
θέση: σχετική
οθόνη: flex;
justify-content: space-around;
Στοιχεία ευθυγράμμισης: κέντρο;
flex-wrap: περιτύλιγμα;
πλάτος: 1100 εικονοστοιχεία;
}
.container .card
{
πλάτος: 320 εικονοστοιχεία;
περιθώριο: 20 εικονοστοιχεία;
επένδυση: 40px 30px;
φόντο: # ebf5fc;
ακτίνα περιγράμματος: 40 εικονοστοιχεία;
box-shadow: -6px -6px 20px rgba (255.255.255,1), 6px 6px 20px rgba (0,0,0,0,1);
}
.container .card: τοποθετήστε το δείκτη
{
box-shadow: ένθετο -6px -6px 20px rgba (255.255.255,0.5), ένθετο 6px 6px 20px rgba (0,0,0,0.05);
}
.container .card .imgBx
{
θέση: σχετική
text-align: center;
}
.container .card .imgBx img
{
μέγιστο πλάτος: 120px;
}
.container .card .contentBx
{
θέση: σχετική
margin-top: 20 εικονοστοιχεία;
text-align: center;
}
.container .card .contentBx h2
{
χρώμα: # 32a3b1;
βάρος γραμματοσειράς: 700;
μέγεθος γραμματοσειράς: 1.4em;
διαχωρισμός γραμμάτων: 2px;
}
.container .card .contentBx σελ
{
χρώμα: # 32a3b1;
}
.container .card .contentBx α
{
οθόνη: inline-block;
επένδυση: 10px 20px;
margin-top: 15 εικονοστοιχεία;
ακτίνα περιγράμματος: 40 εικονοστοιχεία;
χρώμα: # 32a3b1;
μέγεθος γραμματοσειράς: 16px;
διακόσμηση κειμένου: κανένα;
box-shadow: -4px -4px 15px rgba (255.255.255,1), 4px 4px 15px rgba (0,0,0,0,1);
}
.container .card .contentBx a: αιωρηθείτε
{
box-shadow: ένθετο -4px -4px 10px rgba (255.255.255,0.5), ένθετο 4px 4px 10px rgba (0,0,0,0.1);
}
.container .card a: hover span
{
οθόνη: μπλοκ;
μετασχηματισμός: κλίμακα (0,98);
}
.container .card: τοποθετήστε το δείκτη .imgBx,
.container .card: αιωρήστε .contentBx
{
μετασχηματισμός: κλίμακα (0,98);
}

2. Νεομορφική μορφή

Χρησιμοποιήστε τα παρακάτω αποσπάσματα κώδικα HTML και CSS για να δημιουργήσετε την παραπάνω νευρομορφική φόρμα.

Κωδικός HTML

Εγγραφείτε










 Σύνδεση

Κωδικός CSS

σώμα, html {
χρώμα φόντου: # EBECF0;
}
body, p, input, select, textarea, κουμπί {
font-family: "Montserrat", sans-serif;
διαχωρισμός γραμμάτων: -0.2px;
μέγεθος γραμματοσειράς: 16px;
}
div, σ {
χρώμα: #BABECC;
κείμενο-σκιά: 1px 1px 1px #FFF;
}
φόρμα {
επένδυση: 16px;
πλάτος: 320 εικονοστοιχεία;
περιθώριο: 0 αυτόματη;
}
.τμήμα {
επένδυση: 32px 0;
text-align: center;
}
κουμπί, εισαγωγή {
περίγραμμα: 0;
περίγραμμα: 0;
μέγεθος γραμματοσειράς: 16px;
ακτίνα περιγράμματος: 320 εικονοστοιχεία;
επένδυση: 16px;
χρώμα φόντου: # EBECF0;
κείμενο-σκιά: 1px 1px 0 #FFF;
}
ετικέτα {
οθόνη: μπλοκ;
margin-bottom: 24px;
πλάτος: 100%;
}
εισαγωγή {
margin-right: 8 εικονοστοιχεία;
box-shadow: ένθετο 2px 2px 5px #BABECC, ένθετο -5px -5px 10px #FFF;
πλάτος: 100%;
μέγεθος κουτιού: πλαίσιο-πλαίσιο;
μετάβαση: όλα τα 0.2s ευκολία στην έξοδο
εμφάνιση: κανένα;
-webkit-εμφάνιση: κανένα;
}
είσοδος: εστίαση {
box-shadow: ένθετο 1px 1px 2px #BABECC, ένθετο -1px -1px 2px #FFF;
}
κουμπί {
χρώμα: # 61677C;
γραμματοσειρά: έντονο;
box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
μετάβαση: όλα τα 0.2s ευκολία στην έξοδο
δρομέας: δείκτης;
βάρος γραμματοσειράς: 600;
}
κουμπί: αιωρηθείτε {
box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
κουμπί: ενεργό {
box-shadow: ένθετο 1px 1px 2px #BABECC, ένθετο -1px -1px 2px #FFF;
}
κουμπί. εικονίδιο {
margin-right: 8 εικονοστοιχεία;
}
button.unit {
ακτίνα περιγράμματος: 8px;
ύψος γραμμής: 0;
πλάτος: 48 εικονοστοιχεία;
ύψος: 48 εικονοστοιχεία;
οθόνη: inline-flex;
justify-content: κέντρο;
Στοιχεία ευθυγράμμισης: κέντρο;
περιθώριο: 0 8px;
μέγεθος γραμματοσειράς: 19,2 εικονοστοιχεία;
}
button.unit .icon {
margin-right: 0;
}
button.red {
οθόνη: μπλοκ;
πλάτος: 100%;
χρώμα: # AE1100;
}
.input-ομάδα {
οθόνη: flex;
Στοιχεία ευθυγράμμισης: κέντρο;
justify-content: flex-start;
}
ετικέτα .input-group {
περιθώριο: 0;
flex: 1;
}

3. Neumorphic Navbar

Χρησιμοποιήστε τα ακόλουθα αποσπάσματα κώδικα HTML, CSS και JavaScript για να δημιουργήσετε την παραπάνω νευρομορφική navbar.

Κωδικός HTML

Σχετιζομαι με: Καλύτεροι ιστότοποι για ποιοτικά παραδείγματα κωδικοποίησης HTML

Neumorphic Navbar

Κωδικός CSS

* {
περιθώριο: 0;
επένδυση: 0;
μέγεθος κουτιού: πλαίσιο-πλαίσιο;
}
σώμα {
χρώμα φόντου: #efeeee;
}
.nav {
πλάτος: 100vw;
ύψος: 100px;
χρώμα φόντου: #efeeee;
box-shadow: 10px 10px 12px 0 rgba (0, 0, 0, 0,07);
ακτίνα περιγράμματος: 0 0 10px 10px;
οθόνη: flex;
justify-content: flex-end;
Στοιχεία ευθυγράμμισης: κέντρο;
επένδυση: 0 3rem;
list-style-type: κανένα;
}
.nav li.logo {
margin-right: auto;
font-family: "Roboto", sans-serif;
μέγεθος γραμματοσειράς: 1.5rem;
χρώμα: dimgray;
βάρος γραμματοσειράς: 900;
κείμενο-σκιά: 2px 2px 4px rgba (0, 0, 0, 0.3), -2px -2px 4px λευκό;
}
.nav li: όχι (.logo) {
περιθώριο: 0 1rem;
επένδυση: 0.5rem 1.5rem;
περίγραμμα: 2px στερεό rgba (255, 255, 255, 0,3);
box-shadow: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px λευκό;
ακτίνα περιγράμματος: 10px;
font-family: "Roboto", sans-serif;
δρομέας: δείκτης;
μετάβαση: χρώμα 0.2s ευκολία, μεταμόρφωση 0.2s ευκολία
χρώμα: dimgray;
}
.nav li: όχι (.logo): αιωρηθείτε {
μετασχηματισμός: κλίμακα (1.05);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px λευκό;
}
.nav li: όχι (.logo): εστίαση {
περίγραμμα: κανένα;
μετασχηματισμός: κλίμακα (0,95);
box-shadow: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px white, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) inset, -4px -4px 10px λευκό ένθετο;
}
.nav li: not (.logo): hover, .nav li: not (.logo): εστίαση {
χρώμα: πορτοκαλί;
}

Κωδικός JavaScript

feather.replace ();

4. Νεομορφικό κείμενο και σχήματα

Χρησιμοποιήστε τα ακόλουθα αποσπάσματα κώδικα HTML και CSS για να δημιουργήσετε το παραπάνω νευρομορφικό κείμενο και σχήματα.

Κωδικός HTML

Σχετιζομαι με: Το HTML Cheat Sheet Essentials

Κύκλος

Ντόνατ

τετράγωνο

Ομαλή πλατεία

Ποτήρι

Νεομορφικό κείμενο

Καλώς ήλθατε στο MUO

Κωδικός CSS

Σχετιζομαι με: Απλά παραδείγματα κώδικα CSS που μπορείτε να μάθετε σε 10 λεπτά

*, *::πριν μετα {
μέγεθος κουτιού: πλαίσιο-πλαίσιο;
}
: ρίζα {
--nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0,5);
--tlShadow: 6px -6px 10px rgba (255.255.255,0.5);
}
σώμα {
περιθώριο: 0;
font-family: sans-serif;
ελάχιστο ύψος: 100vh;
οθόνη: flex;
Στοιχεία ευθυγράμμισης: κέντρο;
justify-content: κέντρο;
flex-wrap: περιτύλιγμα;
φόντο: var (- nColor);
}
.n-εκκίνηση,
.n-ένθετο {
οθόνη: flex;
Στοιχεία ευθυγράμμισης: κέντρο;
justify-content: κέντρο;
}
.n-κύκλο {
χρώμα φόντου: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
ακτίνα περιγράμματος: 50%;
πλάτος: 200px;
ύψος: 200px;
περιθώριο: 10px;
}
.n-ντόνατ {
χρώμα φόντου: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
ακτίνα περιγράμματος: 50%;
πλάτος: 200px;
ύψος: 200px;
περιθώριο: 10px;
}
.n-donut .n-ένθετο {
χρώμα φόντου: var (- nColor);
box-shadow: ένθετο var (- brShadow), ένθετο var (- tlShadow);
ακτίνα περιγράμματος: 50%;
πλάτος: 50%;
ύψος: 50%;
περιθώριο: 0;
}
.n-tumbler {
χρώμα φόντου: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
ακτίνα περιγράμματος: 50%;
πλάτος: 200px;
ύψος: 200px;
περιθώριο: 10px;
}
.n-tumbler .n-outset {
χρώμα φόντου: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
ακτίνα περιγράμματος: 50%;
πλάτος: 80%;
ύψος: 80%
περιθώριο: 0;
}
.n-τετράγωνο {
χρώμα φόντου: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
ακτίνα περιγράμματος: 0;
πλάτος: 200px;
ύψος: 200px;
περιθώριο: 10px;
}
.n-smooth-τετραγωνικά {
χρώμα φόντου: var (- nColor);
box-shadow: var (- brShadow), var (- tlShadow);
ακτίνα περιγράμματος: 10%;
πλάτος: 200px;
ύψος: 200px;
περιθώριο: 10px;
}
.n-κείμενο {
χρώμα: var (- nColor);
text-shadow: var (- brShadow), var (- tlShadow);
μέγεθος γραμματοσειράς: 6em;
γραμματοσειρά: έντονο;
}

5. Νεομορφικά κουμπιά

Χρησιμοποιήστε τα ακόλουθα αποσπάσματα κώδικα HTML, CSS και JavaScript για να δημιουργήσετε τα παραπάνω νευρομορφικά κουμπιά.

Κωδικός HTML

Πατήστε τα κουμπιά




play_arrow


παύση





ανάμιξη

Κωδικός CSS

@import url (' https://fonts.googleapis.com/icon? οικογένεια = Υλικό + εικονίδια ');
σώμα{
χρώμα φόντου: # 6ec7ff;
}
.btn-κάτοχος {
οθόνη: μπλοκ;
περιθώριο: 0 αυτόματη;
margin-top: 64 εικονοστοιχεία;
text-align: center;
}
.intro-κείμενο {
margin-bottom: 48 εικονοστοιχεία;
font-family: «Quicksand», sans-serif;
άσπρο χρώμα;
μέγεθος γραμματοσειράς: 18px;
}
.btn {
πλάτος: 110px;
ύψος: 110px;
μέγεθος γραμματοσειράς: 30px;
ακτίνα περιγράμματος: 30 εικονοστοιχεία;
περίγραμμα: κανένα;
άσπρο χρώμα;
κατακόρυφη ευθυγράμμιση: κορυφή;
-webkit-μετάβαση: .6s easy-in-out;
μετάβαση: .6s easy-in-out;
}
.btn: αιωρηθείτε {
δρομέας: δείκτης;
}
.btn: εστίαση {
περίγραμμα: κανένα;
}
.btn: πρώτου τύπου {
margin-right: 30 εικονοστοιχεία;
}
. πνευματικό {
φόντο: γραμμική κλίση (145deg, # 76d5ff, # 63b3e6);
box-shadow: 30px 30px 40px # 1e7689,
-30 εικονοστοιχεία -30 εικονοστοιχεία 40 εικονοστοιχεία # 7fe5ff;
περίγραμμα: 3px στερεό rgba (255, 255, 255, .4);
}
. πνευματικά πιεσμένα {
φόντο: γραμμική κλίση (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: ένθετο 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: ένθετο 15px 15px 20px -20px rgba (0,0,0, .5);
box-shadow: ένθετο 15px 15px 20px -20px rgba (0,0,0, .5);
}
.neumorphic: εστίαση, .neumorphic: hover, .neumorphic: εστίαση, .neumorphic: hover,.
περίγραμμα: 3px solid rgba (46, 74, 112, .75);
}
.material-icon {
font-family: 'Υλικά εικονίδια';
βάρος γραμματοσειράς: κανονικό;
στυλ γραμματοσειράς: κανονικό;
μέγεθος γραμματοσειράς: 32px;
οθόνη: inline-block;
ύψος γραμμής: 1;
text-transform: κανένα;
διαχωρισμός γραμμάτων: κανονικό;
αναδίπλωση λέξης: κανονική;
white-space: nowrap;
κατεύθυνση: ltr;
-webkit-font-smoothing: antialiased;
απόδοση κειμένου: optimizeLegibility;
-moz-osx-font-smoothing: κλίμακα του γκρι;
font-feature-settings: 'liga';
}
# παύση {
χρώμα: # 143664;
οθόνη: κανένα;
}

Κωδικός JavaScript

function changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("neumorphic");
btn.classList.toggle ("neumorphic-pressed");
εάν (btnΠαρεμβολές "play-pause") {
παίζω();
} αλλιώς εάν (btnΠαρεμμένο 'shuffle-btn') {
ανάμιξη();
}
}
παιχνίδι λειτουργίας () {
var playBtn = document.getElementById ('παιχνίδι');
var pauseBtn = document.getElementById («παύση»);
εάν (playBtn.style.display "none") {
playBtn.style.display = 'μπλοκ';
pauseBtn.style.display = "κανένας";
} αλλιώς {
playBtn.style.display = 'κανένας';
pauseBtn.style.display = 'μπλοκ';
}
}
shuffle λειτουργίας () {
var shuffleBtn = document.getElementById ('shuffle-btn');
αν (shuffleBtn.style.color == "white" || shuffleBtn.style.color == ") {
shuffleBtn.style.color = '# 143664';
} αλλιώς {
shuffleBtn.style.color = 'λευκό';
}
}

Εάν θέλετε να ρίξετε μια ματιά στον πλήρη πηγαίο κώδικα που χρησιμοποιείται σε αυτό το άρθρο, εδώ είναι το Αποθήκη GitHub.

Σημείωση: Ο κωδικός που χρησιμοποιείται σε αυτό το άρθρο είναι Άδεια χρήσης MIT.

Διαμορφώστε τον ιστότοπό σας με νευρομορφισμό

Μπορείτε να χρησιμοποιήσετε την μινιμαλιστική σχεδιαστική ιδέα του νεομορφισμού για να διαμορφώσετε τον ιστότοπό σας. Προσφέρει μια αισθητικά ευχάριστη εμφάνιση. Ωστόσο, ο νευρομορφισμός έχει περιορισμούς προσβασιμότητας.

Υπάρχουν διάφοροι τρόποι για να δώσετε στον ιστότοπο μια κομψή εμφάνιση. Εάν θέλετε να προσθέσετε στυλ σε ήπια κουτιά στον ιστότοπό σας, δώστε την ιδιότητα box-shadow CSS.

Yuvraj Chandra (Δημοσιεύθηκαν 33 άρθρα)

Ο Yuvraj είναι προπτυχιακός φοιτητής Πληροφορικής στο Πανεπιστήμιο του Δελχί της Ινδίας Είναι παθιασμένος με το Full Stack Web Development. Όταν δεν γράφει, εξερευνά το βάθος διαφορετικών τεχνολογιών.

Περισσότερα από τον Yuvraj Chandra