From 1e6408441607f8779df76846082dc9febfe20eab Mon Sep 17 00:00:00 2001 From: NachoVeiga Date: Sun, 4 Aug 2013 19:24:34 +0200 Subject: [PATCH 1/8] Logo, pointers, navbar,n-talign,resp. nav, pen-insideA,positions --- .DS_Store | Bin 0 -> 6148 bytes estilos.css | 57 ++++++++++++++++++++++++++++++++++++++-------------- index.html | 8 ++++---- 3 files changed, 46 insertions(+), 19 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..3014f59dc3e67b055d9daf7143620cc0eb8cbe61 GIT binary patch literal 6148 zcmeHKOHRWu5PdF1D&->l)TlRpKQ&ps?L39%zh)hpvTeYc*Q(F zdgZ3T8DqlCBjz*x*}YacUu!s1tH3K6BhE8Hoab1@-pMmQi<-?jVkYHUy=N5O=W1qr zAF{TXS-o+6<$7hAJLsT=Gc<8YY;c4@er-l{%QB8Q&yWhloJ-zH3tjq^jUBXc&AKuz zv*R4taT5L(=l4mWwkYyE++j_ lhnB+Nk7HYqqxhI^jctJxh@r>SA!}&*N5IOUK^54j0^hEZv9|yK literal 0 HcmV?d00001 diff --git a/estilos.css b/estilos.css index d121478..36cbf6b 100644 --- a/estilos.css +++ b/estilos.css @@ -17,6 +17,7 @@ body { background: #EFEFEF; color: #4C4C4C; + min-width: 472px; font-family: "PT Sans", Arial; font-size: 16px; margin: 0; @@ -42,6 +43,7 @@ header color: white; margin: 0; padding: 0.5em; + position: relative; } header:after{ clear: both; @@ -50,6 +52,7 @@ header:after{ } header figure { + float: left; } header h1 @@ -61,10 +64,12 @@ header h1 } header #avatar { + + float: right; + margin: 1em 1em 0 0; position: absolute; top: 0; right: 0; - margin: 1em 1em 0 0; } header #avatar figcaption { @@ -82,6 +87,7 @@ header #avatar figcaption:after } header #avatar img { + border-radius: 10px 0 0 10px; float: left; width: 50px; } @@ -93,12 +99,14 @@ nav { background: #878787; font-size: 0.9em; + position: relative; } nav ul { list-style: none; margin: 0; padding: 0; + text-align: center; } nav ul li { @@ -112,43 +120,62 @@ nav ul li a display: block; padding: 0.5em 0; } -nav #flechita_nav a +nav ul li:first-child +{ + border-radius: 0 2px 2px 0; +} + +nav ul li:first-child a { background: #22BCE0; - padding: 0.5em 0; + padding: .5em .2em .4em 0; text-decoration: none; + position: absolute; + left:0; } -nav #flechita_nav a:after +nav ul li:first-child a:after { content: "\e000"; font-family: "icomoon"; opacity: 0.6; } -nav #publicar_nav +nav ul li:last-child { /*i is zorri*/ background: #DD4F24; + border-radius: 2px 0 0 2px; float: right; margin-right: 0; - padding-right: 1em; + padding-left: .6em; + padding-right: 3em; position: relative; + } -nav #publicar_nav:after +nav li:last-child a:after { color: rgba(255,255,255,0.5); content: "\e004"; font-family: "icomoon"; font-size: 1.8em; + padding: .1em .3em 0 0; position: absolute; right: 0; top: 0; } -nav #publicar_nav a +nav ul li:last-child a { display: inline-block; - padding: 0.5em 1em; text-decoration: none; } +nav ul li:nth-child(2), +nav ul li:nth-child(3), +nav ul li:nth-child(4), +nav ul li:nth-child(5) +{ + width: 10%; + +} + #bienvenida { display: none; @@ -161,6 +188,7 @@ nav #publicar_nav a { background: white; border-bottom: 3px #22BCE0 solid; + border-radius: .5em .5em .5em 0; margin-bottom: 3em; min-height: 128px; position: relative; @@ -220,6 +248,7 @@ nav #publicar_nav a } #contenido .item .imagen_item img { + border-radius: .5em 0 0 0; width: 96px; } #contenido .item .titulo_item @@ -236,7 +265,7 @@ nav #publicar_nav a #contenido .item .votacion { background: white; - border-radius: 0 0 0.5em 0.5em; + border-radius: 0 0 .5em .5em; margin: 3px 0 0 0; padding: 0.5em 0; position: absolute; @@ -266,11 +295,9 @@ nav #publicar_nav a content: "\e002"; } - - - - - +.hover { + cursor: pointer; +} diff --git a/index.html b/index.html index 31db222..48bb9db 100644 --- a/index.html +++ b/index.html @@ -15,24 +15,24 @@
-
-
+
- +

- Una mirada a Leap Motion: El control Minority Report + Avipas: son una desgracia, solo existen para jo%#¢nos, muerte a todas las avispas!!! xD

Por Freddy Vega diff --git a/responsive.css b/responsive.css index 17e689c..76bd1b4 100644 --- a/responsive.css +++ b/responsive.css @@ -42,9 +42,10 @@ } @media screen and (min-width: 1200px) { -nav + + nav { - border-radius: 0 0 5px 5px; + border-radius: 0 0 4px 4px; } nav ul li:first-child a { @@ -54,6 +55,10 @@ nav { border-radius: 0 2px 4px 0px; } + footer + { + border-radius: 5px 5px 0 0; + } } \ No newline at end of file From 3b359fe2beaf15e8b4fedadca368b2fa1a23238b Mon Sep 17 00:00:00 2001 From: NachoVeiga Date: Sun, 4 Aug 2013 23:27:06 +0200 Subject: [PATCH 5/8] Pulse effect logo, efectos :hover y algo + --- .DS_Store | Bin 12292 -> 12292 bytes estilos.css | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 102 insertions(+), 3 deletions(-) diff --git a/.DS_Store b/.DS_Store index b90086827173c89c6167fe12973c04d0d247a51e..f4edc299a9ef52754a238c7b85d92d3dc2eacd1c 100644 GIT binary patch delta 38 ncmZokXi3;`j+KkSje&t-1`tb3zQL--#c&4772nLk_D2%{#7GHE delta 38 pcmZokXi3;`j+Kish=GA&1`vx)zQL--#drh6{SO42IoSSa0s!Nu4N3q2 diff --git a/estilos.css b/estilos.css index cd6a225..cd60b5c 100644 --- a/estilos.css +++ b/estilos.css @@ -9,6 +9,49 @@ font-style: normal; } +@-webkit-keyframes pulse { + 0% { + -webkit-box-shadow: 0 0 25px 3px rgba(34, 188, 224, 0.6); + + } + 100% { + -webkit-box-shadow: 0 0 25px 3px rgba(224, 85, 38, 0.8), + 0 0 45px 5px rgba(224, 85, 38, 0.5); + + } +} +@-moz-keyframes glow { + 0% { + -moz-box-shadow: 0 0 25px 3px rgba(34, 188, 224, 0.6); + + } + 100% { + -moz-box-shadow: 0 0 25px 3px rgba(224, 85, 38, 0.8), + 0 0 45px 5px rgba(224, 85, 38, 0.8); + } +} +@-o-keyframes glow { + 0% { + box-shadow: 0 0 25px 3px rgba(34, 188, 224, 0.6); + + } + 100% { + box-shadow: 0 0 25px 3px rgba(224, 85, 38, 0.8), + 0 0 45px 5px rgba(224, 85, 38, 0.8); + + } +} +@keyframes glow { + 0% { + box-shadow: 0 0 25px 3px rgba(34, 188, 224, 0.6); + + } + 100% { + box-shadow: 0 0 25px 3px rgba(224, 85, 38, 0.8), + 0 0 45px 5px rgba(224, 85, 38, 0.8); + + } +} a { color: #DD4F24; @@ -92,6 +135,7 @@ header #logo } header #logo img { + border-radius: 100px; width: 80px; } nav @@ -100,6 +144,7 @@ nav font-size: 0.9em; position: relative; } + nav ul { list-style: none; @@ -115,15 +160,24 @@ nav ul li } nav ul li a { - color: white; + color:#FFF ; display: block; padding: 0.5em 0; + text-decoration: none; + +} +nav ul li a:hover +{ + color: rgb(224, 85, 38); + text-shadow: 0px 2px 2px #333, + 0px -2px 0px #666; } nav ul li:first-child a { background: #22BCE0; border-radius: 0 2px 2px 0; + color: #FFF; padding: .55em .2em .4em 0; text-decoration: none; position: absolute; @@ -150,7 +204,7 @@ nav ul li:last-child } nav li:last-child a:after { - color: rgba(255,255,255,0.5); + color: rgba(255,255,255,0.6); content: "\e004"; font-family: "icomoon"; font-size: 1.8em; @@ -161,13 +215,32 @@ nav li:last-child a:after } nav ul li:last-child a { + color:#FFF; display: inline-block; text-decoration: none; } + +nav ul li:nth-child(2) a, +nav ul li:nth-child(3) a, +nav ul li:nth-child(4) a, +nav ul li:nth-child(5) a, +nav ul li:nth-child(6) a +{ + + text-shadow: + -1px -1px 0 #000, + 1px -1px 0 #000, + -1px 1px 0 #000, + 1px 1px 0 #000, + 0px 2px 2px #333, + 0px -2px 0px #666; +} + nav ul li:nth-child(2), nav ul li:nth-child(3), nav ul li:nth-child(4), -nav ul li:nth-child(5) +nav ul li:nth-child(5), +nav ul li:nth-child(6) { width: 10%; @@ -297,5 +370,31 @@ nav ul li:nth-child(5) cursor: pointer; } +#logo img:hover,#logo img.hover_effect { + -webkit-animation-name: pulse; + -webkit-animation-duration: 1s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + -webkit-animation-timing-function: ease-in-out; + + -moz-animation-name: pulse; + -moz-animation-duration: 1s; + -moz-animation-iteration-count: infinite; + -moz-animation-direction: alternate; + -moz-animation-timing-function: ease-in-out; + + -o-animation-name: pulse; + -o-animation-duration: 1s; + -o-animation-iteration-count: infinite; + -o-animation-direction: alternate; + -o-animation-timing-function: ease-in-out; + + animation-name: pulse; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-timing-function: ease-in-out; +} + From 12034470a0266de03a45ba38f0021c610266e40e Mon Sep 17 00:00:00 2001 From: NachoVeiga Date: Mon, 5 Aug 2013 00:11:31 +0200 Subject: [PATCH 6/8] Notas finales --- CAMBIOS_NachoVeiga_LEEME.txt | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 CAMBIOS_NachoVeiga_LEEME.txt diff --git a/CAMBIOS_NachoVeiga_LEEME.txt b/CAMBIOS_NachoVeiga_LEEME.txt new file mode 100644 index 0000000..8471d7c --- /dev/null +++ b/CAMBIOS_NachoVeiga_LEEME.txt @@ -0,0 +1,24 @@ +Cambios y añadidos: +------------------- +Border radius en varios lugares y en el responsive.css +Imagenes de Gacela y Avispa, y article asociado, si asististeis al curso de mejorandoweb lo entendereis xD +Animación en el Logo, Pulse Effect (Azul bonito - naranja rojizo) +Cambio de posiciones y margenes +Modificación de floats +La flecha del avatar ya no se cae al abrir el archivo +Anchura mínima, los míviles son min 480, y le puse 472px +Alineamiento de h1 y responsive +Modificación del navbar, alineamientos, anchura... ahora los li-a son responsive +Eliminación de la decoración a - añadidos efectos en normal y :hover, text shadows, efecto stroke.. +Utilización de nuevos selectores CSS3 +Añadí una nueva clase para que el cursor se convierta en un pointer al pasar por elementos clickeables. + +Comentario de autores y edición en el footer de index.html, el diseño y el maquetado están muy bien, son solo cosas personales, como algunos bordes radius, o el tamaño de alguna cosa,o en css creo que borre un par de ids/clases, me resultaba mas cómodo leerlo a mi manera, ninguna modificación importante. + + +Comentarios +----------- +A veces usé .8 algo por costume padding-left: .5em; = 0.5em +La animación no funciona en Firefox, usé el prefijo -moz de compatiibilidad pero no funciona. + +Saludos. From 391cf7e7c7258cecd379c6529c357c59bdd8fef1 Mon Sep 17 00:00:00 2001 From: NachoVeiga Date: Mon, 5 Aug 2013 02:39:00 +0200 Subject: [PATCH 7/8] Ultimos retoques^ --- .DS_Store | Bin 12292 -> 12292 bytes estilos.css | 41 +++++++++++++++++++++++++++++++++-------- fonts/.DS_Store | Bin 0 -> 6148 bytes index.html | 1 + 4 files changed, 34 insertions(+), 8 deletions(-) create mode 100644 fonts/.DS_Store diff --git a/.DS_Store b/.DS_Store index f4edc299a9ef52754a238c7b85d92d3dc2eacd1c..a63de808c22086814c0ae61dcda3e71840489314 100644 GIT binary patch delta 524 zcmZokXi1P@U|?W$DortDU;r^WfEYvza8E20o2aMAD7Z0TH}hr%jz7$c**Q2SHn1=X zPUd0BHI!j+W^iQiWpHBfWbkJQW{79-V@PC3X2@X3X9#0RWyoYm2lC??d>CAT(3in= zasaE?n~V(G~%Sac@;V_{Uxm!@XVBwjCcX5 z>S{w1GZP&J3$t1sg=#|sQwtphLm*XK%LxPmogAV{dNv**iFNf2jZI+JGB7eiXa-&= z4Wn9s3?#pl1sCPz!dV&XeD>u} eX2uILg%K3Rn!uo)>?k9@Ihay`iW4@!CJ5Rf&KvhjlS6#DoHB6iIf?b zeY=x+yUE*-$pVnk+w2M$0_f8fixW0GOs}hVtnkP&QSuxWD!kwlGt4{L5%`Y^=-!>- z2~+OeGyP}(Hr&ToY_PmtRny6;nlMvelNPuls3: Comunidad de gente cool, atractiva y millonaria

+ Home