CSS Snippets – Helper panels

Βοηθητικά πάνελς άρθρων

Περιεχόμενα

hide

Helper Boxes

Links box
Links box inside
Bell box
Lightbulb box
Info box
Bookmark box
Book box
Download box

Useful links

Helper Boxes

/* Boxes general code
------------------------------- */
.boxes {
	padding: 1.25em 2em 1.25em 4em;
	margin-top: 30px;
	background: #f5f5f5;
	border: 1px solid transparent;
	position: relative;
}
.boxes:after {
	position: absolute;
	left: 0; 
	top: 0;
	font-family: "FontAwesome";
	width: 3em;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	transition: height .3s linear;
}
.boxes:hover:after {
	height: 3em;
}
	/* Links box */
.boxes.links-box {
	padding-left: 5em;
	background: transparent;
	border-color: #000;
	font-weight: 500;
}
.boxes.links-box:after {
	content: "\f08e"; /* .fa-external-link */
}
	/* Links box inside post */
.boxes.links-box.ins {
	border-color: #ccc;
}
.boxes.links-box.ins:after {
	background: #fff;
	color: #212121;
	border-right: 1px solid #ccc;
}
.boxes.links-box.ins:hover:after {
	border-bottom: 1px solid #ccc;
}
	/* Bell box */
.boxes.bell-box:after {
	content: "\f0a2"; /* .fa-bell-o */
}
	/* Lightbulb box */
.boxes.lightbulb-box:after {
	content: "\f0eb"; /* .fa-lightbulb-o */
}
	/* Info box */
.boxes.info-box:after {
	content: "\f05a"; /* .fa-info-circle */
}
	/* Bookmark box */
.boxes.bookmark-box:after {
	content: "\f097"; /* .fa-bookmark-o */
}
	/* Book box */
.boxes.book-box {padding-left: 5em;}
.boxes.book-box:after {
	content: "\f02d"; /* .fa-book */
}
	/* Download box */
.boxes.download-box:after {
	content: "\f019"; /* .fa-download */
}

Links box

<ul class="boxes links-box">

Links box inside

<ul class="boxes links-box ins">

Bell box

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

<p class="boxes bell-box">

Lightbulb box

<p class="boxes lightbulb-box">

Info box

<p class="boxes info-box">

Bookmark box

<p class="boxes bookmark-box">

Book box

Μια διαφορετική ορχήστρα – Μουσική (Γ’ και Δ’ Δημοτικού) – Βιβλίο Μαθητή | Φωτόδεντρο

<ul class="pointinglist boxes book-box">

Download box

HTML entities | w3schools.com

<p class="boxes download-box">

Useful links

Font Awesome ^v.4.7.0
Font Awesome ^v5.15
Font Awesome 2 PNG (μετατροπή των Font Awesome icons σε png)
Font Awesome Icon Pack ^369 ICONS | Flaticon
Icon To Image Converter | WebNots
Font Awesome 5 to Image (png/favicon ico) Converter | appsious.com