Πράξεις στην CSS με calc(), min() και max()
https://www.w3schools.com/css/css_math_functions.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
https://css-tricks.com/a-couple-of-use-cases-for-calc/
Calc()
1o παράδειγμα:
<p>Lorem ipsum </p>
<div class="box1"></div>
Αν φτιάξουμε ένα div κουτί
.box1{
background-color: tomato;
border:1px solid black;
width:300px;
height:200px;
}
τότε μπορούμε να το στοιχίσουμε στο κέντρο με:
margin:0 auto;
Ωστόσο αν πρέπει να χρησιμοποιήσουμε position τότε χρησιμοποιώντας το παρακάτω κάνουμε λάθος τοποθέτηση:
.box1{
background-color: tomato;
border:1px solid black;
width:300px;
height:200px;
position: absolute;
left: 50%;
}
καθώς το κουτί ξεκινά από το μέσο της οθόνη. Εδώ έχει εφαρμογή η calc με την οποία μπορούμε να γράψουμε:
left: calc(50% - 100px);
Με την calc
- αναμειγνύουμε ποσοστά και μονάδες μέτρησης χωρίς πρόβλημα.
- Μπορούμε να χρησιμοποιήσουμε τις βασικές πράξεις: + – / *
- Πριν και μετά από το σύμβολο τις πράξης αφήνουμε ένα κενό.
Σημείωση: στο ίδιο αποτέλεσμα θα φθάναμε (θα εξηγηθεί στο τέλος του μαθήματος) εάν γράφαμε μετά το position :
transform: translate(-50%, 0);
2ο Παράδειγμα:
Μπορούμε να τη χρησιμοποιήσουμε για να φτιάξουμε ένα κουτί που επιπλέει στο μέσο (παρά 2 pixel που είναι το border) τηςοθόνης με τη χρήση position:
.box1{
background-color: tomato;
height:100px;
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
}
Να τροποποιηθεί το πάχος του περιγράμματος σε 20px και να δειχθεί ότι το πλάτος πρέπει να γίνει:
width:calc(100% - 100px - 40px);
3ο Παράδειγμα:
Δημιουργούμε μερικές p με lorem.
Εάν θελήσουμε να βάλουμε την παρακάτω εικόνα φόντου σε ένα div (πηγή: Dog Logo Vectors by Vecteezy):
<body>
<div class="container">
<p> Lorem ipsum dolor</p>
</div>
</body>
body{
margin:0;
background-color: brown;
}
.container{
height: 300px;
background-color:#fff;
border:10px solid tomato;
background-image: url(dog_120x123.jpg);
background-repeat: no-repeat;
background-position: 90% 90%;
}
background-position: 90% 90%;
Με τον παραπάνω κώδικα αν και η εικόνα μπαίνει στο φόντο το ίδιο (φαινομενικά) από κάτω και από δεξιά (10% και 10%), ωστόσο επειδή οι οθόνες δεν είναι τετράγωνες δεν είναι συμμετρικά. Αν το χρησιμοποιήσω
background-position: 100% 100%;
ή
background-position: right bottom;
κολλάει μεν κάτω δεξιά αλλά εάν θέλω περιθώρια π.χ. 20px και 20px, τότε θα μπορούσα να το επεξεργαστώ πχ στο gimp και να προσθέσω περιθώριο στην εικόνα. Απλούστερα θα μπορούσα να χρησιμοποιήσω:
background-position: calc(100% - 20px) calc(100% - 20px);
Max()
προσθέτω από κάτω ένα div class=”box1″
.box1{
margin-top: 20px;
background-color: orange;
height: 100px;
width: max(50%, 500px);
}
Min()
.box2{
margin-top: 20px;
background-color: dodgerblue;
height: 100px;
width: min(50%, 500px);
}
Στο τέλος να χρησιμοποιηθούν και τα 2 box1 και box2 και να μεταβληθούν οι διαστάσεις του παραθύρου για να δειχθούν οι διαφορές.
Σύνθετη άσκηση με calc και float.
<body>
<div class="header">
<div class="logo">
<img src="dog_120x123.jpg" alt="">
</div>
<div class="logoright"></div>
</div>
</body>
body{
margin:0;
}
.header{
background-color: dodgerblue;
height:100px;
}
.header .logo{
width:100px;
height: 100%;
background-color: brown;
float:left;
border:2px solid black;
border-right-width: 0; /* για να μην έχει διπλό περίγραμμα στη μέση*/
text-align: center;
}
.header .logo img{
height: 80%;
width: auto;
text-align: center;
margin-top: calc(( 100% - 80px) / 2 );
}
.header .logoright{
width:calc(100% - 100px - 6px); /* το -6px είναι για τα 3 κατακόρυφα περιγράμματα*/
height: 100%;
background-color: green;
float:left;
border:2px solid black;
}
CSS Box Sizing
https://www.w3schools.com/css/css3_box-sizing.asp
background-color: #fff;
color:black;
Άσκηση
Εικόνα: https://unsplash.com/photos/aRya3uMiNIA
Photo by Aaron Burden on Unsplash
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(lake.jpg);s [https://www.w3schools.com/cssref/pr_background-image.asp]
Προσοχή: δεν μπορούμε να χρησιμοποιήσουμε την ιδιότητα opacity στο background γιατί τότε αυτή κληρονομείται στα παιδιά του αναγκαστικά ()! Γι αυτό χρησιμοποιούμε την παραπάνω μέθοδο. Άλλος τρόπος είναι με διαφορετικά divs και χρησιμοποιώντας position, οπότε τότε δουλεύει το opacity στα διαφορετικά divs.
background-size:cover; [https://www.w3schools.com/css/css3_backgrounds.asp]
background-position:center; [https://www.w3schools.com/cssref/pr_background-position.asp] ορίζουμε πως θα τοποθετήσουμε την εικόνα. Εξορισμού τιμές είναι top, left με επανάληψη και στους δύο άξονες. Παράδειγμα background-position: right bottom; Εάν βάλουμε μόνο μία τιμή η άλλη είναι center.
transform: translate [https://www.w3schools.com/css/css3_2dtransforms.asp]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Extreme Limni</title>
</head>
<body>
<header>
<div id="master">
<div class="main">
<div class="logo">
<img src="freelogo2-300x268WHITE.png" alt="">
</div>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Serives</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
<div class="title">
<h1>CSmasterS</h1>
</div>
<div class="koubia">
<a href="#" class="btn">Video δραστηριοτήτων</a>
<a href="#" class="btn"> Περισσότερα!</a>
</div>
</div>
</header>
</body>
</html>
*{
margin:0;
padding:0;
}
.main{
max-width: 1024px;
margin:auto;
}
header{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(lake.jpg);
height: 100vh;
background-size:cover;
background-position: center;
}
ul{
list-style-type: none;
float:right;
margin-top: 24px;
margin-right:24px;
}
ul li{
display: inline-block;
}
ul li.active a{
background-color: #fff;
color:black;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 4px 20px;
border:1px solid white;
transition: 0.6s ease;
}
ul li a:hover, .btn:hover{
background-color: #fff;
color:black;
}
.logo img{
float: left;
width: 300px;
height: auto;
}
.title{
position: absolute;
top:calc(50% - (92px / 2)); /* βρίσκω το πλάτος και ύψος του Η1 με chrome >F12 > webdevtools */
left: calc(50% - (382px / 2));
}
.title h1{
color:#fff;
font-size: 5em;
}
.koubia{
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn{
border:1px solid #fff;
padding: 10px 30px;
color:#fff;
text-decoration: none;
transition: 0.6s ease;
}
Domain names
