Me han preguntado cómo personalizar una forma gráfica, en particular, una forma de búsqueda como el de este blog. La técnica utilizada, o mejor que yo uso, obviamente válido para cualquier tipo de formulario. Lo que cambia es sólo la complejidad del trabajo a realizar en función de la complejidad de la misma forma.
Artículos con 'Hoja de Estilo' Tag
Personalizar un formulario de forma gráfica
Muy corto truco: Condicional CSS y optimización
El uso de las condiciones dentro del navegador se utiliza a menudo para decidir que la carga de hojas de estilo basado en el tipo de navegador. Por ejemplo, podemos usar este código para cargar una hoja de estilo en particular cuando el navegador es Internet Explorer 6:
Muy corto truco: la versatilidad de clases CSS
nei fogli di stile CSS. Los más experimentados sabrán ya, pero a menudo me preguntan cuál es la diferencia entre la class y la id de la CSS. , è la possibilità di usare classi multiple. Una visión general de algunas diferencias advertencias y se puede encontrar en la clase y el identificador de CSS , sin embargo, una característica útil que distingue a class de id , es la capacidad de utilizar múltiples clases.
CSS3: ¿alguien ha visto en Internet Explorer?
Simplemente no lo hago ...
1 2 3 4 5 6 7 8 9 | p { / * Esquinas redondeadas * / ; /* CSS 3 */ border-radius: 9px; / * CSS 3 * / ; /* Opera */ -O-border-radius: 9px; / * Opera * / ; /* iCab */ -Icab-border-radius: 9px; / * iCab * / ; /* Konqueror */ -KHTML-border-radius: 9px; / * Konqueror * / ; /* Firefox */ -Moz-border-radius: 9px; / * Firefox * / ; /* Safari */ -Webkit-border-radius: 9px; / * Safari * / } |
Safari, retire la frontera azul en los campos de entrada
Safari, el navegador de Apple también está disponible para Windows, produce un borde azul (borde azul) cuando se hace clic en un campo input . Si en algunos casos, puede ser agradable, en otros, se pone muy molesto! Para eliminar sólo entrar en nuestra hoja de estilo:
1 2 | / * ____________________________ Quitar borde azul * / : 0 none } input {outline: none} 0 |
O, en su defecto, directamente como un atributo en la etiqueta input :
1 | "outline: 0 none" ... / > < input style = "contorno: 0 ninguno" ... /> |
Accesibilidad y Usabilidad: discreta Javascript
Permitir a los usuarios interactuar con una página web se ha producido en los últimos años un aumento significativo en el uso de comandos de cliente: código Javascript puede responder en tiempo real y manipular una variedad de información. La Web 2.0 es la última expresión de esta interacción habilidades, donde el usuario final - participa en navegador activamente en la construcción y de la "evolución de la página Web, interactuar con él y ayudarte a ti mismo. Se conoce como contenido generado por el usuario (UGC o - contenido generado por usuarios) que ve el "navegador" ciertamente menos pasiva!
Para conseguir esta interacción, a continuación, para permitir que el usuario final para añadir su contribución, se han desarrollado un número de técnicas que han alterado la apariencia y el comportamiento de las páginas Web (estática hasta hoy, pero ahora similar a las aplicaciones tradicionales de escritorio) en los últimos años. Modificar el contenido de una página, enviar archivos, dar su voto a un vídeo o un documento, registrarse o modificar sus datos, son sólo algunos de los muchos servicios de operaciones de adaptaciones en (2.0 beta) en la Web
Software Net
Le pasó a la televisión para convertirse en Net TV, como había sucedido con la Radio Red Radio de convertirse, por no hablar de la música! Ahora bien, como se ha mencionado en otras críticas, es también un funcionario del Software para transformar corta en Software Net!
Adobe , que sabemos que ha adquirido recientemente Macromedia, oficialmente la Aplicación Web - Web 2.0 - en bienes RIA (Rich Internet Applications) con el anuncio de querer asumir la conocida web de software de edición de Photoshop. Se trata de la reciente " acuerdo entre Adobe y Photobucket poner a disposición en línea de una tecnología para la remezcla y edición de vídeo. Gracias a la nueva tecnología desarrollada para Flash 9 con ActionScript 3.0 , Adobe apunta alto, anticipando que dentro de seis meses estará disponible en línea una versión de Photoshop basada, precisamente, en la tecnología Flash.
En efecto, las nuevas capacidades de ActionScript 3.0 (que incluye proyectos tales como Flex y Apollo - ver también Web 2.0: Adobe intenta con Apolo y Ajax Rich Internet Application ) lo convierten en el candidato perfecto para la realización de los bienes Ajax RIA en la Web , por otro lado, que se ve expulsado de su trono en este nuevo escenario. A pesar del marco Ajax innumerables, algunos de excelente calidad, producido en el curso de los últimos años, Flash proporciona un entorno más avanzados y fáciles de manipular. Además, hablar de uno de Programas más popular del mundo: Flash, de hecho, detrás de un par de años más antiguo que el Ajax y derivados.
Por otra parte, es obvio que Adobe Flash elegir, que ahora ser el productor. Sin embargo, hay cuestiones técnicas que pueden ser considerados - hasta la fecha - que deben resolverse de una manera armoniosa sólo mediante el uso de tecnologías como Flash. Echando un vistazo a la nueva ActionScript 3.0 nos damos cuenta inmediatamente a las enormes posibilidades de desarrollo que ofrece esta nueva plataforma. El estándar ECMA de la lengua y los nuevos objetos proporcionados por el Marco, se llega a un nivel de detalle posible con versiones anteriores de Flash: uno para todos, por ejemplo, la capacidad de acceder a los datos de una imagen de mapa de bits cargados disco!
El ataque de Adobe parece svolgerersi entonces en dos frentes distintos que tienen en común la tecnología Flash (que recuerde siempre ha sido la capacidad de interactuar activamente con el navegador, y luego con Javascript del lado del cliente y del lado del servidor de secuencias de comandos).
El primer ataque se produjo desde el exterior, en el lado del navegador, donde la tecnología Apollo está realmente propone como una alternativa a la del núcleo habitual de diferente piattoforme disponibles en la actualidad (Windows, Mac OS, Linux, etc ...) el uso de Adobe Apollo , entonces, en lugar navegador para un mejor rendimiento y las aplicaciones RIA (reales) impensables, evitando así las incompatibilidades entre Internet Explorer, FireFox y compañía. Además, Apollo proporciona una plataforma de desarrollo único, como JavaScript, Ajax, pero sin problemas de compatibilidad. Este último punto es un revés importante a tecnologías como Ajax, que aún sufren en gran medida los problemas de compatibilidad entre navegadores, no se olvide también toda la cuestión de la rentabilidad (render) gráfica CSS!
El otro ataque se hace directamente desde el interior, golpeando el marco Ajax con la tarjeta flash. El elemento ganador en esta estrategia es el uso de Flash, la tecnología Flash, que se utiliza tanto en Flex , tanto en Apollo , tanto en la versión autónoma como ya estamos acostumbrados a ver (archivo SWF sencillo, por ejemplo)! No hay duda de que este escenario es muy atractivo para los desarrolladores web, y de otra manera. Lo que se hace inmediatamente realizable en Flash reutilización de varias maneras, sin obligarme a cambiar una sola línea de código y, además, sin tener que preocuparse acerca de la compatibilidad!
Todo esto, en mi opinión, es un importante paso adelante, un avance de proporciones considerables que implica también el mundo de los juegos y Marketing. Volveremos a hablar pronto, no se equivoquen!
Ocultarme
Una característica de las hojas de estilos (el archivo. CSS) es que puede ser especificado en función de la salida de los medios de comunicación. La hoja de estilo permiten especificar la misma clase, el mismo el mismo ID TAG, etc ... a los diferentes medios de comunicación. Por ejemplo, yo puedo escribir un archivo CSS con la siguiente sintaxis.:
1 2 3 4 5 6 7 | @ Multimedia Pantalla { display : none } div # myBox del {display: none} } @ Media print { display : block } div # myBox del {display: block} } |
non sarà visibile sul browser, sullo schermo, ma quando provo a stampare la pagina troverò un contenuto diverso da quello che mi aspettavo. Lo que se produce, al final, es que el contenido del DIV con id myBox no será visible en el navegador, en la pantalla, pero cuando intento imprimir la página encontrará un contenido diferente de lo que esperaba.
Los motores de búsqueda, arañas, rastreadores o agregadores, por lo general (por ahora) no resuelven el archivo css. Ellos están interesados en el contenido no el formato visual. Sin embargo, esta técnica podría tener implicaciones interesantes si no perturbador. Debido a las características de los sistemas de indexación de una situación como la que se muestra a continuación sería por lo menos curiosa:
1 2 3 4 5 6 7 |
Correlacionada con una Css así.:
1 2 3 4 5 6 7 8 9 | @ Multimedia Pantalla { display : block } div # visibile_a_video {display: block} display : none } div # visibile_in_stampa {display: none} } @ Media print { display : none } div # visibile_a_video {display: none} display : block } div # visibile_in_stampa {display: block} } |
Google, por ejemplo, indicizzerebbe tanto los contenidos de nuestro HTML, incluso si un video sería capaz de ver sólo una. Si es la impresión de la página se encuentra una sorpresa con el nuevo contenido. El truco, sin embargo, se dio a conocer la eliminación de estilos que se aplican en los navegadores que lo soportan. Normalmente nadie se lleva a cabo tal operación cuando navegan por Internet. Esta encuesta sólo se plantearía después de encontrar una contradicción entre lo que es visible en la pantalla y lo que está impreso!
Hasta la fecha no he visto casos sobresalientes de este tipo de manipulación a través de CSS. Hubo un tiempo en que estaban tratando de aumentar la visibilidad en Internet mediante la introducción de una serie de textos, es decir, el mismo color que el fondo de la página Web, a fin de que este artificio ojos oscuros de los internautas. En el momento en que los motores de indexación han advertido en contra de estos "fraude". Tal vez es hora de anticipar un bromista antes de establecer un precedente?
Actualmente, la hoja de estilo permiten especificar un rango de tipo de medio de salida. Para obtener una lista completa, vea el W3C .
Clases y ID de CSS
nei fogli di stile. Estos son algunos consejos breves sobre cómo utilizar class y la id de las hojas de estilo. Tenga en cuenta que una vez que el uso de técnicas avanzadas de JavaScript, como el uso de Ajax motor, puede entrar en conflicto con el consejo se establece aquí! Y vamos a ver por qué al final.
Las maravillas de la CSS2.0 +
Porque tal vez la incompatibilidad de estilo y de salida - no - en todos los navegadores, no todo el mundo sabe sobre el enorme potencial de las hojas de estilo. Queremos mostrar, a continuación, algunas características de CSS sintaxis desconocida para la mayoría de la gente y que nos recuerdan lo poco - a menudo - para aprovechar al máximo las herramientas que tenemos disponibles.
Nota: Todas las muestras se analizaron en Firefox 1.5.0.5
Selección por atributos
1 2 3 4 5 |
1 2 3 | type = submit ] { color : #f00 } div # myInput input [type = submit] {color: # f00} type = button ] { color : #0f0 } div # myInput input [type = Botón] {color: # 0F0} value = Annulla ] { color : #00f } div # myInput entrada [value = Cancel] {color: # 00f} |
Esta característica, a menudo denominado cono avanzada CSS2, permite que las cosas strabiglianti, si pensamos por un momento. La mayor ventaja de la ottinene la parte HTML, donde no hay necesidad de distinguir entre clases o etiqueta de identificación en la CSS. Son precisamente los atributos - aunque presentes - en el TAG para indicar que el estilo asociado. Además, cualquier atributo de la etiqueta puede ser tomado como un selector: alt, título, accesskey, etc ...
Selección para la profundidad
Este tipo de selección es nada menos que espectacular si tenemos en cuenta que se puede agregar a la anterior. Esto le permite definir la jerarquía de los elementos. Mirando el ejemplo de abajo nos damos cuenta de inmediato la extraordinaria alcance de este tipo de selección, que mantiene el código HTML limpio y sin indicadores innecesarios.
1 2 3 4 5 6 7 |
1 2 3 | p { color : #f00 } div # myBox del> p {color: # f00} p + p { color : #0f0 } div # myBox del> p + p {color: # 0F0} p :last-child { color : #00f } # MyBox del div> p: last-child {color: # 00f} |
e – fantastico – first-letter ! De hecho, sólo para concluir este sobrevuelo, así como last-child existe first-child y - fantástico - first-letter ! Pruébelo.
Por supuesto, apenas hemos tocado el tema, bastante amplio para decir la verdad, que ve el CSS evolucionado como una herramienta para la definición del layput de páginas. Hay otros selectores y comportamientos, y una gran noticia para los archivos CSS específicos para futuras generaciones.
Últimos Comentarios
Giovambattista Fazioli : @ ale: Como se muestra @ Kevin ver en GitHub repo: https://github.com/gfazioli/Ch roma-Key
Giovambattista Fazioli : @ Kevin: Ver https://github.com/gfazioli/Ch roma-Key
Kevin : Muy buen ejemplo - le gustaría ver el fla también.!
Ludovica : Hello! Voy a explicar mi duda. Cuando escribo un post no añadir imágenes en el artículo (si es así ...
Marco : hola @ Giovan Battista Fazioli, da las gracias por todas las explicaciones de esta guía excelente. Tengo una pregunta para ...