Πως δημιουργώ στα γρήγορα όμορφα χρωματιστά div boxes με CSS

Πως κάνω Div Boxes με CSS

Πως δημιουργώ στα γρήγορα όμορφα χρωματιστά div boxes με CSS

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

Υπάρχουν άπειρες τεχνικές που μπορούμε να βρούμε. Σήμερα θα παρουσιάσουμε αναλυτικά μία από αυτές που συνήθως τη συναντάμε σαν div boxes. Με άλλα λόγια θα δημιουργήσουμε ‘κουτιά’ με τη χρήση css θα τα δώσουμε το χρώμα που θέλουμε και θα τοποθετήσουμε σε αυτά κάποιο κείμενο.

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

Εδώ βλέπετε τι θέλουμε να πετύχουμε:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Βλέπου ότι υπάρχει μία διαβάθμιση(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;
}

Καλούς πειραματισμούς.

Μπορεί επίσης να σας αρέσει...

Απάντηση

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε πώς υφίστανται επεξεργασία τα δεδομένα των σχολίων σας.