Atunci cand mai ales la formulare inputuriole, selecturile peste tot arata asa cum vrem noi dar pe iOS arata cum vre el bagam in css:
-webkit-appearance: none;
Si gata!
Category Archives: Css
Width la input si select este diferit
Cu totul ca in css width are aceiasi valoare.
Solutia este simpla de bagat la ambele in css:
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
border: none;
De aici m-am inspirat: http://stackoverflow.com/questions/4073768/how-to-get-equal-width-of-input-and-select-fields
SVG + HTML
Элементы (теги) SVG
- Элемент title
- Элемент desc
- Элемент path
- Элемент rect
- Элемент circle
- Элемент ellipse
- Элемент line
- Элемент polyline
- Элемент polygon
- Элемент text
- Элемент image
- Тег g
Элемент title
Описывает заголовок документа, пример:
<title>Вы видите эту надпись в шапке окна</title>
Cum ajustam dimensiunea divului la dimensiunea imaginei din background?
Leave a reply
Simplu!
div{
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}IE si max-height , min-height
Ca sa ne ia si IE-ul parametri max-height si min-height facem asa:
.class
{
height: expression(this.scrollHeight > 139 ? "140px" : "auto"); /* pentru ie*/
max-height:140px;
}
.class2
{
height: expression(this.scrollHeight < 480 ? "480px" : "auto");
min-height:480px;
}
Efecte CSS transaction
Un efect frumos ne da posibilitatea de a da viteza de tranzactionare de de la o culoare la alta, da la o pozitie la alta...fara ca sa folosim JS. -webkit-transition: height 0.6s; -moz-transition: height 0.6s; -o-transition: height 0.6s; transition: height 0.6s;
Adaugam lumbra la text sau box din CSS
Pentru un div se face asa:
#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
Pentru un text:
p.text{
text-shadow: #6374AB 20px -12px 2px;
}
- culoarea textului
- X – coordonate ale textului, relativ la text
- Y – coordonate ale textului relativ la text
- raza umbei discompuse.
Cum scrolam pagina la un element cu jquery
Simplu!
Trebuia sa scap de ancora in url, ca sa duca pagina imediat la ceia ce-mi trebuie, exista un plugin jquery, il gasiti pe net daca dati "Scroll to" dar nu am nevoie sa ma complic pana la atat, am un element la care tre sa duca pagina atat, si se rezolva usor:
$('html,body').animate({scrollTop: $("#Lista").offset().top});
Font ne standard in pagina web.
Se pot folosi cateva solutii, ultima pe care am folosito si mi-a placut este aici:
http://www.fontsquirrel.com/fontface/generator
Mai este si http://cufon.shoqolate.com/generate/ dar asta foloseste flash, care nu pre-mi convine.
Sau cel mai bine defapt, am ajuns eu la concluzia asta folosim:
@font-face
- Internet Explorer only supports EOT
- Mozilla browsers support OTF and TTF
- Safari and Opera support OTF, TTF and SVG
- Chrome supports TTF and SVG.
Ex:
@font-face {
font-family: 'ChunkFiveRegular;
src: url('Chunkfive-webfont.eot);
src: local(‚ò∫'),
url('Chunkfive-webfont.woff') format('woff'),
url('Chunkfive-webfont.ttf') format('truetype'),
url('Chunkfive-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
Iar de convertit se poate de ex aici: http://www.font2web.com/
sau http://www.freefontconverter.com/
Din CSS editam primul sau ultimul element
Se intimpla cand intr-o lista sau in alte taguri repetate dorim sa folosim pentru primul sau ultimul element un stil diferit de cat pentru celelalte, e simplu, ex:
.class{
//pentru toate elemente
}
.class:first-child {
//doar pentru primul
}