Colturi rotunjite in HTML folosind jQuery
Una dintre cele mai mari probleme in crearea unui site web o reprezinta colturile rontujite pentru imagini sau div-uri. Fiecare browser are propria politica de generarea a acestora, mai putin IE care nu suporta in niciun fel colturile rotunjite.
Solutia consta in folosirea unui mic ajutor dat de jQuery. Puteti citi mai multe despre framework-ul jQuery aici.
Avem nevoie de jQuery Curvy Corners. Acest modul incearca, in prima faza, sa genereze colturile rotunjite prin css, folosind codurile urmatoare:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Daca metoda esueaza, atunci intra in actiune modulul. In partea de <head></head>, dupa ce ati inclus jQuery si Curvy Corners, inserati:
<script type="text/javascript">
$(document).ready(function() {
$('#div').corner( { tl: { radius: 10 }, tr: { radius: 10 }, bl: { radius: 5 }, br: { radius: 5 } }); });
</script>
In momentul in care documentul este incarcat, aplicam div-ului cu id-ul div functia de rotunjire a colturilor in felul urmator: top-left colt de 10px, top-right colt de 10 px, bottom-left colt de 5px si bottom-right colt de 5px.
Modulul este compatibil si cu IE6.
In cazul in care doriti sa rotunjiti colturile unei imagini, va trebui sa inserati imaginea ca fundal pentru un div.
background-image: url('imagine.jpg');
Daca faceti acest lucru veti observa ca imaginea nu are colturile perfect rotunde. Solutia:
background-color: #fff;
Trebuie sa specificati o culoarea de fundal pentru div-ul respectiv, altfel colturile imaginii nu vor fi perfect rotunjite.
C’ya next time!
Ti-a placut articolul Colturi rotunjite in HTML folosind jQuery?
TweetAi nevoie de rezolvarea unei probleme la informatica?
Iti recomandam si urmatoarele articole:
Discuta articolul Colturi rotunjite in HTML folosind jQuery
Contul tau
Categorii
- Atestat Info C/C++ (21)
- Atestat Info Pascal (21)
- Learn AJAX (3)
- Learn Android (5)
- Learn C++ (32)
- Learn CSS (11)
- Learn Database (9)
- Learn Flash (33)
- Learn HTML (14)
- Learn JAVA (9)
- Learn Javascript (14)
- Learn jQuery (17)
- Learn Pascal (28)
- Learn PHP (21)
- Learn SQL (5)
- Learn Visual FoxPro (4)
- Tips & Tricks (22)
Mozku Network
Ne gasesti si pe Facebook
Articole noi
- Cum sa detectati rezolutia telefonului intr-o aplicatie Android
- Cum se evita oprirea fortata a unei aplicatii
- Cum sa porniti o activitate noua in Android
- Cum sa adaugati un ImageView intr-o aplicatie Android
- Cum sa adaugati un Button intr-o aplicatie Android
- Cum sa utilizati un ArrayList in Java
- Bifeaza toate checkbox-urile folosind jQuery
- Validare formular folosind jQuery
Fisiere populare
- Proiect Atestat Informatica Visual FoxPro (439)
- Twitter Patterns (202)
- Flash Newsletter (126)
- hitTest Flash (99)
- Baza de date auto revizuita (98)
