CSS: color-mod() Δεν δουλεύει

manolis940 · 13 Αυγούστου 2021

Καλημέρα. Χτίζω ένα θέμα στο οποίο θέλω να του δίνω 2 βασικά χρώματα και εκείνο σε διάφορα σημεία η λειτουργίες της σελίδας να αλλάζει το χρώμα δυναμικά. Πιο συγκεκριμένα παραδείγματα:

Ένα κουμπί που παίρνει χρώμα απ την μεταβλητή --main-color στο hover γίνεται 60% φωτεινότερο
Το menu να παίρνει το χρώμα --main-color αλλά απ την κορφή μέχρι τον πάτο να σκουραίνει το χρώμα του με την συνάρτηση linear-gradient() αλλάζοντας το contrast του κατά 45%

Η μόνη συνάρτηση που έχω δει στην CSS και μπορεί να κάνει κάτι κάτι τέτοιο είναι η color-mod() η οποία όμως δεν φαίνεται να λειτουργεί

Αφήνω ένα απλό παράδειγμα κώδικα παρακάτω:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Insomnia Example</title>
    <style>
      :root{
        --main-color: #4f5b5c;

        --main-color-hover: color-mod(var(--main-color) brightness(60%));
        --main-color-dark: color-mod(var(--main-color) contrast(45%));
      }
      .hr{
        background-color:var(--main-color );
        width:100px;
        display:block;
      }
      .hr:hover{
        /* background-color:var(--main-color-hover); Στο hover το background γίνεται άσπρο */
        background-color:red;
      }

      .lg {
        background-color: red;
        /*background-image: linear-gradient( var(--main-color ), var(--main-color-dark)); Αυτό δεν φέρνει ως αποτέλεσμα λευκό background */
        background-image: linear-gradient(var(--main-color ), blue);
        width:100px;
        display:block;
      }
    </style>
  </head>
  <body>
    <div class="hr">
      <p>Hover me</p>
    </div>
    <div class="lg">
      <p> Linear Gradient</p>
    </div>
  </body>
</html>

XPHSTOS_ · 13 Αυγούστου 2021

Δεν δουλεύει γιατί δεν έχει βγει.
Ήταν σε working draft mode πριν χρόνια αλλά το λανσάρισμα του πήγε ακόμη παραπέρα (https://drafts.csswg.org/css-color-5/) χωρίς να έχουμε ETA.

Αν θέλεις να κάνεις τέτοια πράγματα τότε δοκίμασε κάποιο PostCSS plugin (https://github.com/csstools/postcss-color-mod-function)

H λύση που θα σου πρότεινα αν θέλεις να μείνεις σε pure CSS solution τότε θα πρέπει σπάσεις το main color σε τρία μέρη.
Για αρχή προτίμησε να δουλεύεις με HSL γιατί είναι πιο κατανοητά στον άνθρωπο και επίσης είναι απαραίτητο για το παράδειγμα μου.

Σπάμε το χρώμα σε 3 values και έτσι όταν θέλουμε να αλλάξουμε το χρώμα αλλάζουμε μόνο το value που μας ενδιαφέρει.
Αν για παράδειγμα θέλουμε να γίνεται πιο φωτεινό στο hover μπορούμε αλλάξουμε μόνο την τιμή του lightness όπως φαίνεται και στο παράδειγμα μου

:root {
	--hue: 185deg;
	--sat: 8%;
	--light: 34%;
}


.element {
	background-color: hsl(var(--hue), var(--sat), var(--light));
}

.element:hover {
 	--light: 74%;
}

Επεξ/σία 14 Αυγούστου 2021 από XPHSTOS_

manolis940 · 14 Αυγούστου 2021

16 ώρες πριν, XPHSTOS_ είπε
Για αρχή προτίμησε να δουλεύεις με HSL γιατί είναι πιο κατανοητά στον άνθρωπο και επίσης είναι απαραίτητο για το παράδειγμα μου.

Σπάμε το χρώμα σε 3 values και έτσι όταν θέλουμε να αλλάξουμε το χρώμα αλλάζουμε μόνο το value που μας ενδιαφέρει.
Αν για παράδειγμα θέλουμε να γίνεται πιο φωτεινό στο hover μπορούμε αλλάξουμε μόνο την τιμή του lightness όπως φαίνεται και στο παράδειγμα μου
.element:hover {
 	--light: 74%;
}

Το HSL το είχα <<ξεχάσει>> όντως είναι αρκετά χρήσιμο και εν τέλει έφτιαξα με αυτό το θέμα.

Το παραπάνω hover ωστόσο δεν μου δούλεψε. Βέβαια σκέφτομαι αν δούλευε θα υπήρχε πρόβλημα. Αν για παράδειγμα το nav-bar μου και το submit button έχουν το ίδιο χρώμα όταν θα κάνω hover στο submit λογικά θα αλλάζει η τιμή της μεταβλητής --light και έτσι θα αλλάζει και το χρώμα του nav-bar. Σου αφήνω τον κώδικα παρακάτω μήπως και το εφαρμόζω λανθασμένα.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Insomnia test2</title>
    <style media="screen">
      :root {
      	--hue: 185deg;
      	--sat: 8%;
      	--light: 34%;
      	--main: hsl(var(--hue), var(--sat), var(--light));
      }


      .element {
      	background-color: var(--main);
        width: 100%;
        height: 500px;
      }

      .element:hover {
       	--light: 74%;
      }
    </style>
  </head>
  <body>
    <div class="element">

    </div>

  </body>
</html>

Εφόσον δεν λειτούργησε χρησιμοποίησα την ιδιότητα filter

Αυτό βέβαια που έψαχνα, θα ήταν χρήσιμο και δεν βρήκα, είναι αν υπάρχει τρόπος αλλάξεις το brightness όχι σε κάποια καρφωτή τιμή πχ 85% αλλά να την αυξήσεις πχ +15%

.element:hover {
	filter:brightness(+15%)
}

Edit:

Προσπάθησα το παρακάτω, αλλά κατά περίεργο τρόπο αντί να την αυξάνει την μειώνει

.element:hover {
	filter: brightness(calc(var(--light) + 15%)) ;
}

Επεξ/σία 14 Αυγούστου 2021 από manolis940

XPHSTOS_ · 15 Αυγούστου 2021

15 hours ago, manolis940 said:
Το HSL το είχα <<ξεχάσει>> όντως είναι αρκετά χρήσιμο και εν τέλει έφτιαξα με αυτό το θέμα.

Το παραπάνω hover ωστόσο δεν μου δούλεψε. Βέβαια σκέφτομαι αν δούλευε θα υπήρχε πρόβλημα. Αν για παράδειγμα το nav-bar μου και το submit button έχουν το ίδιο χρώμα όταν θα κάνω hover στο submit λογικά θα αλλάζει η τιμή της μεταβλητής --light και έτσι θα αλλάζει και το χρώμα του nav-bar. Σου αφήνω τον κώδικα παρακάτω μήπως και το εφαρμόζω λανθασμένα.
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Insomnia test2</title>
    <style media="screen">
      :root {
      	--hue: 185deg;
      	--sat: 8%;
      	--light: 34%;
      	--main: hsl(var(--hue), var(--sat), var(--light));
      }


      .element {
      	background-color: var(--main);
        width: 100%;
        height: 500px;
      }

      .element:hover {
       	--light: 74%;
      }
    </style>
  </head>
  <body>
    <div class="element">

    </div>

  </body>
</html>
Εφόσον δεν λειτούργησε χρησιμοποίησα την ιδιότητα filter

Αυτό βέβαια που έψαχνα, θα ήταν χρήσιμο και δεν βρήκα, είναι αν υπάρχει τρόπος αλλάξεις το brightness όχι σε κάποια καρφωτή τιμή πχ 85% αλλά να την αυξήσεις πχ +15%
.element:hover {
	filter:brightness(+15%)
}
Edit:

Προσπάθησα το παρακάτω, αλλά κατά περίεργο τρόπο αντί να την αυξάνει την μειώνει
.element:hover {
	filter: brightness(calc(var(--light) + 15%)) ;
}

Δικό μου το λάθος, δεν μπορείς να χρησιμοποιήσεις το var(--main) αλλά πρέπει να βάλεις τις 3 άλλες.
Έχω κάνει update τον κώδικα μου. Δοκίμασε το.

Τα css filters δεν κάνουν γιαυτή την δουλειά, αυτά μεταβάλλουν το σύνολο του element και όχι μόνο ένα συγκεκριμένο property.
Δηλαδή θα αλλάξουν όλα τα χρώματα στα γράμματα και γενικά σε οτιδήποτε βρίσκεται μέσα στο component αυτό... οπότε ξέχασε το.

Τι theme είναι αυτό που δεν μπορείς να χρησιμοποιήσεις sass ή postcss για να κάνεις την δουλειά σου σωστά και γρήγορα?
Γιατί ακόμη και ο τρόπος που προτείνω δεν είναι και τόσο εύχρηστος.
Αν είχες 3 κύρια χρώματα θα έρπεπε να είχες 9 custom properties...

manolis940 · 17 Αυγούστου 2021

Στις 15/8/2021 στις 7:47 ΠΜ, XPHSTOS_ είπε

Δικό μου το λάθος, δεν μπορείς να χρησιμοποιήσεις το var(--main) αλλά πρέπει να βάλεις τις 3 άλλες.
Έχω κάνει update τον κώδικα μου. Δοκίμασε το.

Τα css filters δεν κάνουν γιαυτή την δουλειά, αυτά μεταβάλλουν το σύνολο του element και όχι μόνο ένα συγκεκριμένο property.
Δηλαδή θα αλλάξουν όλα τα χρώματα στα γράμματα και γενικά σε οτιδήποτε βρίσκεται μέσα στο component αυτό... οπότε ξέχασε το.

Απ ότι καταλαβαίνω δεν δούλευε γιατί εν τέλει αλλάζει την μεταβλητή --light που αφορά το element και όχι γενικά την μεταβλητή --light. Όπως φαίνεται και στον παρακάτω κώδικα που έχω χρησιμοποιήσει κοινή --light σε 2 διαφορετικά elements. Εφόσον πριν δεν υπήρχε μεταβλητή --light στο element αλλά μόνο η --main δεν γινόταν κάποια αλλαγή στο hover

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Insomnia test2</title>
    <style media="screen">
      :root {
      	--hue: 185deg;
      	--sat: 8%;
      	--light: 34%;

        --hue2: 100deg;
        --sat2: 55%;
      }


      .element {
      	background-color: hsl(var(--hue), var(--sat), var(--light));
        height: 200px;
        width: 100%;
      }

      .element2 {
        background-color: hsl(var(--hue2), var(--sat2), var(--light));
        height: 200px;
        width: 100%;
      }

      .element:hover {
       	--light: 74%;
      }
    </style>
  </head>
  <body>
    <div class="element">

    </div>

    <div class="element2">

    </div>

  </body>
</html>

Στις 15/8/2021 στις 7:47 ΠΜ, XPHSTOS_ είπε

Τι theme είναι αυτό που δεν μπορείς να χρησιμοποιήσεις sass ή postcss για να κάνεις την δουλειά σου σωστά και γρήγορα?
Γιατί ακόμη και ο τρόπος που προτείνω δεν είναι και τόσο εύχρηστος.
Αν είχες 3 κύρια χρώματα θα έρπεπε να είχες 9 custom properties...

Κατά κύριο λόγο είναι ο περιορισμός των γνώσεων μου με τις οποίες προσπαθώ να φτιάξω ότι φτιάχνω αυτό τον καιρό. Από SASS έχω μια μικρή ιδέα και από Postcss καμία.
Αν είναι εύκολο ( δεν ξέρω όπως είπα ) και υπάρχει κάποιο απλό παράδειγμα που να φέρνει τα επιθυμιτά αποτελέσματα, άφησε μου ένα link. Δεν βρήκα κάτι.

Στις 15/8/2021 στις 7:47 ΠΜ, XPHSTOS_ είπε

Τα css filters δεν κάνουν γιαυτή την δουλειά, αυτά μεταβάλλουν το σύνολο του element και όχι μόνο ένα συγκεκριμένο property.
Δηλαδή θα αλλάξουν όλα τα χρώματα στα γράμματα και γενικά σε οτιδήποτε βρίσκεται μέσα στο component αυτό... οπότε ξέχασε το.

Δεν μπορώ να πω ότι είναι άσχημο το αποτέλσμα. Σε ένα κουμπί για παράδειγμα το να αυξήσεις το brightness στο hover ή να το μειώσεις στο active αλλάζει ομοιόμορφα όλα τα στοιχεία. Για παράδειγμα:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button:hover {
	filter: brightness(120%);
}

.button:active {
	filter: brightness(50%);
}
</style>
</head>
<body>

<h2>CSS Buttons</h2>

<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">

<!-- Source: https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_basic -->
</body>
</html>

Μέχρι τώρα σ ευχαριστώ πάρα πολύ για τις απαντήσεις σου. Αν έχεις καλύτερες ιδέες είμαι όλος αυτιά

XPHSTOS_ · 19 Αυγούστου 2021

On 17/08/2021 at 15:53, manolis940 said:

Μέχρι τώρα σ ευχαριστώ πάρα πολύ για τις απαντήσεις σου. Αν έχεις καλύτερες ιδέες είμαι όλος αυτιά

Αν θέλεις πες μου λίγο παραπάνω τι ακριβώς είναι αυτό που κάνεις και πως το δουλεύεις?
Χρησιμοποιείς κάποιον bundler όπως webpack ή gulp?
Είναι στατικές σελίδες?

manolis940 · 19 Αυγούστου 2021

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

https://www.free-css.com/free-css-templates/page269/pixie

Θα μπορούσα να έχω σε μεταβλητές, όλα τα χρώματα του site από navigation bars μέχρι και χρώμα κειμένου, θα μπορούσα να έχω σε μεταβλητή ίσως και διάφορες γραμματοσειρές που το απαρτίζουν και έτσι θα μπορούσα βασιζόμενος στο συγκεκριμένο να φτιάξω περισσότερα από ένα site εύκολα και γρήγορα.

Κάτι άλλο που σκέφτομαι να πειράξω με παρόμοιο τρόπο είναι το default theme του opencart, κάνοντας μερικές αλλαγές. Ωστόσο επειδή τα χρώματα είναι σε πολλά διαφορετικά σημεία της CSS δεν θα ήθελα να αλλάζω 100 διαφορετικές γραμμές αλλά λίγες μεταβλητές όπου θα αλλάζουν τα χρώματα του θέματος μέσα σε λίγα λεπτά.

https://www.opencart.com/

Σύνδεση

CSS: color-mod() Δεν δουλεύει

Προτεινόμενες αναρτήσεις

manolis940

XPHSTOS_

manolis940

XPHSTOS_

manolis940

XPHSTOS_

manolis940

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση