Artículos con la etiqueta 'CSS'


Fragmento muy breve: Wordpress, separar las categorías en las dos columnas

Inspirado por Hack WordPress # 2 - Separar las categorías en las columnas de la barra lateral puede ser útil "break" en dos columnas de la lista de las categorías de WordPress.

Continuación ...

Truco muy corto: la versatilidad de clases CSS

nei fogli di stile CSS. Mayoría de los expertos ya saben, pero a menudo me preguntan cuál es la diferencia entre class y id de la CSS. , è la possibilità di usare classi multiple. Una visión general de algunas diferencias y las advertencias se pueden encontrar en la clase y la identificación de CSS , sin embargo, una característica útil que distingue a class de id , es la capacidad de utilizar varias clases.

Continuación ...

jQuery: bordes redondeados en las imágenes se superponen

Debido a la prestación diferentes a través de navegadores, Microsoft Internet Explorer definitivamente veo eso en mente, siempre hay que recurrir a trucos para aplicar efectos especiales que ahora debería ser una norma. El premio discutido bordes redondeados son un ejemplo clásico de "desastre" producido por la total incapacidad para hacer una grave las normas de representación de páginas HTML / CSS. , etc… Hay muchas soluciones que permiten a la red para obtener los "efectos" (efectos de la exención de HTML existentes como los bordes redondeados y de sombras, reflejos, etc ...) con manchas en las hojas de estilos, trucos especiales con el uso de div injertados, las bibliotecas JavaScript, el uso de canvas , etc ...
En una enseñanza puramente técnico me gustaría explicar con más detalle (cross-browser) para aplicar los bordes redondeados de las imágenes:

Demostración y la fuente

Continuación ...

WordPress: paso a paso cómo crear su propio inicio de sesión

En este tutorial veremos como crear un procedimiento de conexión personal, también utilizando la funcionalidad de AJAX a través de jQuery . ). Hay varias maneras de personalizar el inicio de sesión de WordPress, por ejemplo, el uso de anzuelos y los filtros ( add_action() , add_filter() ). Aquí vamos a utilizar un procedimiento de bajo nivel, aunque todavía se conecta a la del núcleo de WordPress. Además se tratará de validar a un usuario a través de la dupla de correo electrónico / contraseña.

¿Por qué crear su propio inicio de sesión?

  • En algunos contextos puede volver uitle tener el máximo control en la página de inicio de sesión, para proponer un diseño personalizado a nuestros usuarios registrados. También puede mejorar la página con información útil, un logotipo de la clásica "Contraseña perdida?"
  • Para permitir el acceso a través del correo electrónico (como en el ejemplo discutido aquí) en lugar de user_login estándar de WordPress
  • Para poder entrar en un panel de inicio en la barra lateral de nuestro blog
  • Y, por último, tener un esqueleto - y una idea - un gran plugin : D

Medio ambiente

En nuestro tutorial ejemplo, / vamos a trabajar en la raíz de una carpeta dentro de WordPress mylogin . . Creamos dos archivos php dentro de esta carpeta: index.php y logon.php . El primero contendrá nuestra interfaz de conexión con todas las funciones de JavaScript / jQuery que necesitamos. El segundo archivo, logon.php , contendrá el código de validación de usuarios. e una cartella images . A continuación, cree una carpeta css y dentro de este archivo layout.css y la carpeta de images . Dentro de la carpeta insertar imágenes en un clásico cargador de Ajax: crear en línea AjaxLoad.info . Al final usted debe tener:

  • mylogin
  • index.php
  • logon.php
  • Alimentar
  • Layout.css
  • imágenes
  • ajax-loader.gif

Continuación ...

WordPress: modifcare AdminBigWidth para los desarrolladores

AdminBigWidth es un plugin para WordPress que puede establecer el área de trabajo de la administración en pantalla completa. Es un plugin muy simple y trivial, de hecho, su código no es cambiar la clase CSS .wrap :

1
2
3
4
AdminBigWidth función () {
; '<style type="text/css"> envolver {max-width: none}. </ style> "echo;
}
, 'AdminBigWidth' ) ; add_action ('admin_head', 'AdminBigWidth');

Para aquellos como yo que utiliza el editor de WordPress en el modo de HTML podría ser útil para establecer una fuente de espacio fijo como la fuente Courier en lugar del predeterminado propuesto. De esta manera, al menos para los desarrolladores, es más fácil para alinear el código fuente. Para ello sólo tiene que añadir, en el estilo de AdminBigWidth , un nuevo enfoque de CSS que se refleja cuando el editor está en modo HTML. Puedes escribir un plugin (dos líneas) para hacer esto, pero es mejor utilizar sólo el código AdminBigWidth , a fin de evitar la carga adicional debido a la enésima Plugin:

1
2
3
4
AdminBigWidth función () {
; '<style type="text/css"> envolver {max-width: none} # contenido # editorcontainer {font-family: "Courier New", Courier, monospace}. </ style> "echo;
}
, 'AdminBigWidth' ) ; add_action ('admin_head', 'AdminBigWidth');

Continuación ...

jQuery: animación backgroundColor

(che nella versione camelize è backgroundColor ). Yo no entiendo si es un bug o algo intencional, el hecho es que cualquiera que sea el método de animate() de jQuery no funciona con algunos de los atributos CSS, incluyendo background-color (la versión camelize es backgroundColor ). Por ejemplo el siguiente código no tiene ningún efecto:

1
2
3
4
5
"text/css" > < estilo type = "text / css">
div # box {background-color: # eee; width: 100px; height: 100px}
</ estilo >
<-! .... ->
"box" >< / div > < div id = "caja"> </ div >
1
) . animate ( { backgroundColor : "#f90" } ) ; $ ('Div # box ") Anime ({backgroundColor:" # f90 "}).;

Para resolver este problema es necesario instalar una extensión: Animaciones jQuery color . Esto permite una "animación" atributo backgroundColor y más:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

Continuación ...

Crear un separador de tubo a través de CSS

A menudo se puede ver una serie de enlaces distribuidos horizontalmente separados por pipe "|", vertical el símbolo gráfico dell'asticella. . Además, si hay una buena escritura HTML, te das cuenta de que esta lista de enlaces - aparentemente horizontal - no son más que listas con viñetas UL o OL . De ello se desprende que, en lugar de escribir:

1
2
3
< p >
"#1" > Link 1 < / a > | < a href = "#2" > Link 2 < / a > | < a href = "#n" > Link n < / a > < un href = "# 1"> Link 1 </ un > | < un href = "# 2"> Link 2 </ un > | < un href = "# n"> Enlace n </ un >
</ p >

Sería mejor utilizar:

1
2
3
4
5
< ul >
= "#1" > Link 1 < / a >< / li > < a > < un href = "# 1"> Link 1 </ un > </ a >
= "#2" > Link 2 < / a >< / li > < a > < un href = "# 2"> Link 2 </ un > </ a >
= "#n" > Link n < / a >< / li > < a > < un href = "# n"> Enlace n </ un > </ a >
</ ul >

Continuación ...

Safari, eliminar el borde azul en los campos de entrada

Safari, el navegador de Apple, disponible para Windows, produce un borde azul (borde azul) al hacer clic en un campo input . Si en algunos casos, puede ser agradable, los demás se convierte realmente molesto! Para borrar sólo tiene que enchufar en nuestra hoja de estilo:

1
2
/ * ____________________________ Quitar borde azul * /
: 0 none } de entrada {outline: none} 0

O, alternativamente, directamente como un atributo en la etiqueta de input :

1
"outline: 0 none" ... / > < entrada style = "esquema: 0 ninguno" ... />

Continuación ...

Técnicas de texto de reemplazo de HTML / CSS

La forma correcta de insertar un título en los gráficos en una página Web es para reemplazar a la operación con las hojas de estilo (ver la mejora progresiva en Accesibilidad y Usabilidad: discreto JavaScript ). Esta técnica le permite hacer más accesible el contenido del sitio, independientemente de la visualización de gráficos establecidos por las hojas de estilo. Además, los robots, arañas, tienen una lectura correcta de HTML, haciendo caso omiso de los gráficos de reemplazo ofrecer al usuario final. Insertar una imagen directamente (TAG img ), de hecho, que el texto del título inaccesible para los lectores ordinarios ASCII (rastreadores, arañas, plugins blog, los lectores de pantalla, etc ...).

Continuación ...

Inserción de texto con CSS: IE7, es un mal negocio

Una vez más, cuando me encuentro escribiendo sobre las capacidades de las hojas de estilo, me veo obligado a dejar a un lado Microsoft Internet Explorer! e after . Con CSS2 introduce una característica muy interesante, la propiedad, content , se utiliza junto con los pseudo-elementos before y after . A través de este "estilo" se puede modificar el contenido de un sitio que actúan exclusivamente en el archivo CSS. Por ejemplo si escribimos:

1
content : ">>" } li: before {content: ">>"}

) avrà ogni elemento preceduto dai caratteri “>>”! Una lista con viñetas ( UL , LI ) estarán precedidas por cada elemento ">>"! Nada, por supuesto, puede ser tratada de esta manera:

1
> fogli di stile < / span >< / p > < p > puedo insertar caracteres con < periodo > hojas de estilo </ periodo > </ p >
1
content : "-->" } div p: before {content: "-->"}

La versatilidad de este elemento no se detiene ahí! Es posible utilizar otros parámetros además de la simple (pero muy útil) de texto. El elemento content , de hecho, sino que también permite que los valores especiales o url:

1
2
3
content : url ( images/quote.gif ) } p: before {content: url (images / quote.gif)}
content : close-quote } p: after {content: close-quote}
content : url ( waves/sound.wav ) } p: before {content: url (olas / sound.wav)}

Para los detalles de implementación se refieren directamente a la W3C - lástima que ni siquiera Microsoft!

Continuación ...



Dejar de SOPA