LuchoWiki

Cosas que debería hacer más a menudo

User Tools

Site Tools


desarrollo:informatica:dokuwiki:css-estilos

CSS (userstyle)

Esta página funciona como una prueba de marcado para los estilos disponibles en userstyle.conf. :!:Nota: algunos de estos estilos pueden romper la validación CSS y XHTML—T.

Leyenda

Código Navegador Descarga
FF3 Firefox 3 (Beta 3) http://www.getfirefox.com/
F1.5 Firefox 1.5.10+
O9 Opera 9.25+ http://www.opera.com/
O9b Opera 9.5 (Beta2/+) http://www.opera.com/products/desktop/next/
MSIE Internet Explorer 6.0+ http://microsoft.com/

El soporte de navegadores es indicado de la siguiente manera:

“OK”, el navegador soporta la característica correctamente, es decir: sin parches, hacks estilo “IE” o scripting, ya sea del lado del cliente o del servidor.
? “Algo”, el navegador soporta la característica pero presenta problemas menores que no afectan el desempeño ni la presentación. No requiere scripting, ya sea del lado del cliente o del servidor.
“Advertencia”, el navegador soporta la característica pero no lo hace correctamente, o requiere de hacks tipo “IE”, o requiere de scripting, ya sea del lado del cliente o del servidor.
“NO”, el navegador no soporta la característica.

Estilos de Texto

Los siguientes ejemplos están aplicados con etiquetas <span>

Estilo Efecto
lpp__Tsmallest %lppTsmallest{efecto de texto}% | | lpp__Tsmaller | %lppTsmaller{efecto de texto}%
lpp__Tsmall %lppTsmall{efecto de texto}% | | lpp__Tlarge | %lppTlarge{efecto de texto}%
lpp__Tlarger %lppTlarger{efecto de texto}% | | lpp__Tlargest | %lppTlargest{efecto de texto}%
lpp__Tstretch %lppTstretch{efecto de texto}% | | lpp__Tstretch2 | %lppTstretch2{efecto de texto}%

Soporte:

Navegador FF3 F1.5 O9  O9b MSIE
texto pequeño
texto grande
texto extendido

Estilos de Párrafo

Los siguientes ejemplos están aplicados con etiquetas <div>

Centrado de Texto

#lppTcenter[ Este texto está centrado. ]# ==== Texto a dos columnas ==== ^ Texto a dos Columnas | lpp__Dcol2 | :!: Este estilo utiliza el nuevo marco de presentación a múltiples columnas de CSS 3. A la fecha de Mayo de 2008 no está aceptado en todos los navegadores. #lppDcol2[ Érase una vez, una linda gatita, llamada, según cuenta el rumor, “Mota”, que se portaba muy bien, y hacía solamente “miau” a la hora del almuerzo. Sin embargo, el padre de su dueña, tuvo la no muy práctica idea de darle a probar una vienesa en la mesa, y desde ese entonces, la Mota, que hace mucho “miau”, aprendió que es en la mesa donde está la comida a la hora del almuerzo; de ahí que busca por todos los medios subirse a la mesa para probar la comida. Se sube encima de uno o si pilla la oportunidad, se roba un puesto. ]#

Salto de Página (vista impresa)

Iniciales con Artwork

La siguiente sección contiene una transcripción literal, más o menos bruta (no sé latín) de “Tenrai” (track 15 de Final Fantasy VII: Advent Children), de Nobuo Uematsu, tocada en su honor por la orquesta indonesa durante el concierto Beginning of Fantasy.

Tenrai (a.k.a. “Divinity I”), Nobuo Uematsu, Final Fantasy:

#lppDinitial[ Sola Dea, Clamorque
Fatum Novit
Invitavit,
Dormivit,
Cælus missus rex
Sola Dea, Fatum Novit
Cælus missus rex
Pocura, terræ mottus
Des eraro humanus
Cujus fructus forii
Cujus verum clavis
Vestæ vita, excitata, excitata, ab imo
Cum haustus des, ferimitu
Cum levata ies, carmine
Fatum invitans
Ruina sive
Pa·ra·di·sus
]# El efecto de capitales con “artwork” (es decir un diseño especial para la primera letra de cada párrafo) se consigue con el selector CSS first-letter aplicado a un bloque <p>. Internet Explorer no reconoce esta técnica. ====Muestra Combinada==== #lpp
Dcenter[

Tres consejos para una vida mejor: #lppDcol2[ #lppDinitial[ <p>Nunca, pero jamás, uses un adverbio de tiempo. Como todos los adverbios, exceptuando los de modo, son demasiado rimbombantes, mientras que los adverbios de modo suenan exageradamente idiotizados, y frecuentemente van a causar un dolor agudo de cabeza. </p><p> Usa un navegador web decente. Prefiere Opera, en particular las versiones 9 y posteriores. A falta de ello, Firefox 1.5 también salva, pero no uses el 2.0 porque su gestión de memoria y extensiones es un desastre. Tipo Microsoft. Por último, si eres arriesgado, usa la Beta 3. Pero bajo ninguna circunstancia (recuerda el punto anterior) uses Internet “Explotier”. Si te lo recomiendan, acusa al pobre idiota de ser un Pokemolais, en un blog comunitario si es posible. Ahora, si eres un cabrón sabihondo, usa Links. ]# ]# Para finalizar el consejo más importante: ten siempre a mano un degausseador: nunca permitas que salga de tus manos, ya que en algún momento tendrás la oportunidad de lamerle el… las botas a tu Presidente en curso cuando él necesite deshacerse de una evidencia que la unidad antiterrorista de turno ha encontrado que lo implica en el asesinato de un anterior Presidente. Ahora, si no estás tan metido en la política, puedes degaussear el pendrive de tus colegascompetidores de trabajo para que así no puedan presentar proyectos demasiado esotéricos y rimbombantes donde tú no tienes más lugar que en la planilla de despidos.

]#

Después de todo esto solo queda preguntarse, claro, si la vida sirve de algo.

Soporte

Estilos Avanzados

Tooltips

Este es un bonito texto que no tiene nada de defaultparticular|A menos que se mire de cerca . Si lo tuviera (que no digo que lo tenga), y quisiera que fuera visible (que no digo que lo quiera), no lo colocaría destacado como un tooltip (que no digo que lo haga).

Tablas Zebra

Las “tablas zebra” son un estilo de presentación de tablas que se favorece en medios impresos porque facilita la visualización de tablas muy grandes o de muchas columnas. Consiste en representar cada fila de un color diferente, usando usualmente dos colores alternados.

Antes de las propuestas de CSS3, era necesario hacer :!:trampas con JavaScript o, si se quería evitar el scripting, usar un estilo entrometido en el contenido (quebrando la separación contenido/diseño que hace CSS). Ahora que han aparecido los primeros soportes para esta característica (Opera 9.5 beta), es posible dejar al navegador la tarea.

El efecto se logra con el pseudo-selector de CSS nth-child.

#zebra[

Personajes que han Salvado al Mundo (nº veces)
DeeDee (hermana de Dexter) “Dexter's Lab” 1)
James Bond “007” 11+2)
Jack Bauer “24” 73)
Ryu4) “Breath of Fire” 5
Jason Bourne “Bourne” Series 4
Cloud Strife “Final Fantasy VII” 2
Andreas Gohr Creador de DokuWiki5) 1

]#

Bloque Estacionado

Un bloque estilo dockblock o estático es un bloque que se mantiene en su posición relativa a la ventana del navegador, de modo que no es desplazada por el scrolling, o zooming, que se pueda hacer en una página.

El efecto se logra con la dupla atributo-valor display: fixed.

#lppDfixedbottom[ ¡Felicidades! — Usted puede ver este minibanner__ que no tiene nada de información importante. ]#

Soporte

1)
debido a un bucle temporal
2)
depende de si se considera o no sólo el canon
3)
presumiblemente 8, una de ellas fuera del canon
4)
técnicamente distintos personajes relacionados que han compartido ese nombre
5)
sí, realmente es una plataforma que sirve
desarrollo/informatica/dokuwiki/css-estilos.txt · Last modified: 20120526 10:53 (external edit)