Category Archives: css3

App, css3

Break point css3 – al giugno 2014

Notare che definiscono la visualizzazione piccola (smartphone) per poi adattarla a quella grande da PC.
ed anche che le misure sono in em!
Primo esempio linkato nel titolo:
/* 1st breakpoint – Float B and C, leave A full width on top */
@media all and (min-width: 42em) {
}
/* 2nd breakpoint – Float all, 50/25/25 */
@media all and (min-width: 55em) {
}
/* 3rd breakpoint – Bump up font size at very wide screens */
@media all and (min-width: 75em) {
}
Secondo esempio:
/* First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */
@media ( min-width: 48em ) {
.my-page .ui-content {
padding: .5625em; /* 9px */
}
/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */
@media ( min-width: 63.75em ) {
.my-page .ui-content {
padding: .625em; /* 10px */
}
Continue reading Break point css3 – al giugno 2014 →

css3, html5

Google doodle .. source ..

Spesso sono molto carini..
mi piacerebbe farmi una lista di quelli interattivi e rilasciati in open source, così da migliorare il mio codice vedendo un po come lo scrivono loro in queste piccole applicazioni web.
1) http://www.google.com/doodles/alan-turings-100th-birthday
code: https://code.google.com/p/turing-doodle/
 
2) TAG AUDIO HTML5
http://www.google.com/doodles/robert-moogs-78th-birthday
code: http://www.html5audio.org/2012/05/googles-moog-doodle-falls-back-to-flash.html
 
3) http://www.google.com/logos/lem/
https://code.google.com/p/stanislaw-lem-google-doodle/
http://www.html5rocks.com/en/tutorials/doodles/lem/
 
4) http://www.google.com/doodles/doctor-whos-50th-anniversary
http://stackoverflow.com/questions/20136141/how-to-make-html5-games-like-google-doodles-doctor-who
 
last) CSS3
http://www.google.com/doodles/eadweard-j-muybridges-182nd-birthday
code: http://thecodeplayer.com/walkthrough/google-doodle-animation-in-css3-without-javascript?s=rl
Belli:
 
http://www.google.com/doodles/douglas-adams-61st-birthday
non animati:
http://www.google.com/doodles/112th-birthday-of-jorge-luis-borges
 

css3, html5, jquery mobile, jquery UI, Uncategorized

Responsive web design MAP

1) Plugin davvero utile:
 https://github.com/stowball/jQuery-rwdImageMaps
demo
2) CSS3 adorabile , fa la media query e si accorge quando il device è landscape e quindi centra l’immagine, tutto in percentuale!
meraviglioso!
/*
*
* mappa
*/
div#mappa {
width: 100%;
}
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
div#mappa {
width: 50%;
margin:0px 50%;
position:relative;
left:-25%;
}
 
}