Asta se face folosind shape-outside:circle(); <div> <div style=”width: 300px; height: 300px; border-radius: 50%; float: left; overflow: hidden; margin: 10px; shape-outside: circle();”> <img style=”width: 100%;” src=”img.png” /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu bibendum nunc, sed accumsan est. Vivamus lobortis purus quis elit </p> <div> Lorem ipsum dolor sit amet, consectetur adipiscing […]
Text imagine
HELLO WORLD !
FontAwesome
FontAwesome va ofera pictograme vectoriale scalabile, care pot fi personalizate instantaneu – dimensiunea, culoarea, umbra, si tot ce se poate face cu puterea CSS. Configurarea FontAwesome se poate realiza prin downloadarea directorului FontAwesome de aici , inserarera acestuia in proiect si adaugarea in HEAD a liniei : <link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”> Folosirea FontAwesome este la fel […]
Liste
Unu Doi Trei Important Patru Cinci Unu Doi Trei Important Patru Cinci
Tipareste un element din pagina
<script> function doPrint(elem) { var mywindow = window.open(„, `PRINT`, `height=400,width=600`); mywindow.document.write(„); mywindow.document.write(„); mywindow.document.write(document.getElementById(elem).innerHTML); mywindow.document.write(„); mywindow.document.close(); // necessary for IE >= 10 mywindow.focus(); // necessary for IE >= 10*/ mywindow.print(); mywindow.close(); return true; } </script>
Bootstrap modal
Demonstratie × Titlul ferestrei Acest exemplu foloseste AJAX pentru incarcarea textului ferestrei modale : <button type="button" class="btn btn-info" data-toggle="modal" data-target="#fereastra" onclick="getAJAX()">Demonstratie</button> <div class="modal fade" id="fereastra" tabindex="-1" role="dialog" aria-labelledby="fereastraLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="fereastraLabel">Titlul ferestrei</h4> </div> <div class="modal-body" id="fereastraContent"> </div> </div> </div></div><script type="text/javascript"> function getAJAX() […]
Bootstrap responsive embed
embed-responsive-16by9 embed-responsive-4by3 <div class=”embed-responsive [responsivetype]”> <iframe class=”embed-responsive-item” src=”https://www.youtube.com/embed/e6cSOtcc6l0?rel=0&showinfo=0″ frameborder=”0″ allowfullscreen></iframe> </div> [responsivetype] poate fi embed-responsive-4by3 sau embed-responsive-16by9 Pentru alte [responsivetype] adaptati CSS-ul dupa modelul : .embed-responsive-square { border: 1px solid #eee; padding-bottom: 100%; position: relative; }
Carusel (image slider)
Previous Next <div data-ride="carousel" class="carousel slide" id="carousel-example-generic"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li> <li data-slide-to="1" data-target="#carousel-example-generic" class=""></li> <li data-slide-to="2" data-target="#carousel-example-generic" class=""></li> <li data-slide-to="3" data-target="#carousel-example-generic" class=""></li> </ol> <div role="listbox" class="carousel-inner"> <div class="item active"> <img alt="First slide" src="http://www.mommypotamus.com/wp-content/uploads/2012/03/431589_66152372.jpg" data-holder-rendered="true"> </div> <div class="item"> <img alt="Second slide" src="http://diamondpages.co.za/wpimages/wpe6693555_05_06.jpg" data-holder-rendered="true"> </div> <div class="item"> <img alt="Third slide" src="http://www.westlandsdentalstudio.co.uk/images/facial.jpg" data-holder-rendered="true"> </div> <div […]
Panouri
Titlul panoului Continutul panoului Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus risus, tempor dignissim sodales a, dignissim et ex. Cras egestas consequat rhoncus. Nam fringilla pellentesque nunc non hendrerit. Aliquam condimentum tincidunt tortor, in pellentesque tortor molestie nec. Donec cursus egestas lacus, vel mollis urna lacinia quis. Cum sociis natoque penatibus et […]