Linkuri pentru FontAwesome
|
1 2 3 4 5 6 7 8 |
/* Font Awesome 4 */ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); /* sau Font Awesome 5*/ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'); /* sau Font Awesome 6 */ @import url('ttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css'); |
Sursa: CDNJS.com
Matrici DIV centrate
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<style> #aliniere { width: max-content; max-width:100%; min-height: 300px; border: 1px dotted gray; border-radius:10px; display: flex; flex-wrap: wrap; align-content: center; margin:0 auto; height:auto; } #aliniere div { width: 100px; height: 100px; margin: 0 auto; border: 3px solid lightgray; } #aliniere div:nth-child(1) {background:blue;} #aliniere div:nth-child(2) {background:yellow;} #aliniere div:nth-child(3) {background:red;} #aliniere div:nth-child(4) {background:orange;} #aliniere div:nth-child(5) {background:green;} </style> <div id="aliniere"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> |
Exemplificare
Efect Glow pentru casete
|
1 |
.glow_box {box-shadow: 0 0 10px 5px green;} |
Exemplificare
Testare
|
1 |
.glow_box_difuz {box-shadow: 0 0 50px 10px green;} |
Exemplificare
Testare
|
1 |
.glow_box_difuz {box-shadow: 0 0 5px 1px gray;} |
Exemplificare
Testare
|
1 |
.glow_box_difuz {box-shadow: 0 0 7px 3px blue;} |
Exemplificare
Testare
Linie dialog (cratimă)
Va afişa, în loc de bullet, linia clasică utilă în redarea dialogurilor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
ul.dialog { margin: 0; } ul.dialog { list-style-type: none; } ul.dialog > li { text-indent: -15px; } ul.dialog > li:before { content: "\2012"; /* ‒ */ text-indent: -10px; padding-right:5px; } |
Exemplificare
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text flancat de linii orizontale
Sursa: CodeGrepper.com
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.flanc { overflow: hidden; text-align: center; color: #00f; } .flanc:before, .flanc:after { background-color: #00f; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } .flanc:before {right: 0.5em; margin-left: -50%;} .flanc:after { left: 0.5em; margin-right: -50%;} |
|
1 |
<h4 class="flanc">Text cu linii pe flancuri</h4> |
Exemplificare
Text cu linii pe flancuri
FontAwesome
• Font Awesome 4 (de tipul „fa fa-user”)
|
1 |
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); |
• Font Awesome 5 (de tipul „fas fa-user”)
|
1 |
@import url("https://use.fontawesome.com/releases/v5.7.1/css/all.css"); |
– câteva exemple: w3schools.com
Bookmark pentru Cuprins
Sursa: NicolasGallagher.com
|
1 2 3 4 5 6 |
#cuprins { padding-top: 50px; margin-top: -50px; -webkit-background-clip: content-box; background-clip: content-box; } |
Alternativa pentru <sup >
|
1 2 3 4 5 |
.superscript { position: relative; top: -0.5em; font-size: 80%; } |
Ex:
• folosirea etichetei <sup >: Acest text are scris la exponent. • folosirea clasei de mai sus: Acest text simulează exponentul.
Sursa: StackOverflow.com
Delay afisare continut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
a.delay { background: blue; -webkit-transition: .5s all; -webkit-transition-delay: 5s; -moz-transition: .5s all; -moz-transition-delay: 5s; -ms-transition: .5s all; -ms-transition-delay: 5s; -o-transition: .5s all; -o-transition-delay: 5s; transition: .5s all; transition-delay: 5s; } a.delay:hover{ background:coral; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } |
Exemplificare
Sursa: StackOverflow.com