Πως δημιουργώ στα γρήγορα όμορφα χρωματιστά div boxes με CSS
Πως κάνω Div Boxes με CSS
Πολλές φορές προκύπτει η ανάγκη να δώσουμε χρώμα στη δουλειά μας. Πέρα λοιπόν από τις όμορφες φωτογραφίες που θα χρησιμοποιήσουμε θα πρέπει να τοποθετήσουμε σε κάποια σημεία κείμενο που θα θέλαμε να το αναδείξουμε ώστε κάποιος να το προσέξει.
Υπάρχουν άπειρες τεχνικές που μπορούμε να βρούμε. Σήμερα θα παρουσιάσουμε αναλυτικά μία από αυτές που συνήθως τη συναντάμε σαν div boxes. Με άλλα λόγια θα δημιουργήσουμε ‘κουτιά’ με τη χρήση css θα τα δώσουμε το χρώμα που θέλουμε και θα τοποθετήσουμε σε αυτά κάποιο κείμενο.
Επειδή στη προκυμμένη περίπτωση τα πολλά λόγια είναι φτώχια πάμε να δούμε τι δούμε τι κάνουμε και πως το κάνουμε.
Εδώ βλέπετε τι θέλουμε να πετύχουμε:
Βλέπου ότι υπάρχει μία διαβάθμιση(degrade) στο χρώμα του κάθε ‘κουτιού’ και όλες οι γωνίες είναι στρογγυλεμένες εκτός από μία που εμείς διαλέγουμε ποια.
Πως το κάνω:
Αρχικά θα δημιουργήσουμε μία class foo blue για το μπλε, foo purple για το κόκκινο, foo green για το πράσινο και foo yellow για το κίτρινο ‘κουτί’ όπως ακριβώς φαίνεται παρακάτω:
Για το μπλε κουτί:
<div class="foo blue">
<h2 class="color_box">Lorem Ipsum</h2>
<p class="text_color_box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
</div>Για το κόκκινο κουτί:
<div class="foo purple">
<h2 class="color_box">Lorem Ipsum</h2>
<p class="text_color_box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
</div>Για το πράσινο κουτί:
<div class="foo green">
<h2 class="color_box">Lorem Ipsum</h2>
<p class="text_color_box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
</div>και τέλος για το κίτρινο κουτί:
<div class="foo yellow">
<h2 class="color_box">Lorem Ipsum</h2>
<p class="text_color_box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
</div>Τα παραπάνω τα ενσωματώνουμε σε όποιο σημείο της σελίδας μας θέλουμε να εμφανίζουμε τα ‘boxes’.
και τελειώνουμε με το css
που θα το εφαρμόσουμε ή στο style.css του child theme(δείτε εδώ) μας ή θα το εφαρμόσουμε inline (δείτε εδώ)
.foo {
float: left;
width: 280px;
height: 280px;
margin-bottom: 35px;
border: 1px solid rgba(0, 0, 0, .2);
padding: 15px;
display: block;
border-radius: 25px;
border-bottom-left-radius: 25px;
}
.blue {
background:linear-gradient(to bottom,rgba(0,137,207,1) 0%,rgba(0,85,137,1) 48%,rgba(0,72,119,1) 68%,rgba(0,50,88,1) 99%);
border-bottom-right-radius: 0px;
}
.purple {
background: linear-gradient(to bottom,rgba(180,33,38,1) 0%,rgba(136,21,24,1) 48%,rgba(98,6,7,1) 99%);
border-bottom-left-radius: 0px;
}
.green {
background: linear-gradient(to bottom,rgba(141,198,63,1) 0%,rgba(95,155,53,1) 48%,rgba(58,127,45,1) 99%);
border-bottom-right-radius: 0px;
}
.yellow {
background: linear-gradient(to bottom,rgba(255,230,0,1) 0%,rgba(254,189,17,1) 100%);
border-bottom-left-radius: 0px;
}
.color_box{
color:#FFF;
text-align:center
}
.text_color_box{
color:#FFF;
}
