Fragmentos de código 2024, Diciembre

Código corto en una plantilla - Trucos CSS

Código corto en una plantilla - Trucos CSS

Los códigos cortos en WordPress son fragmentos de texto que puede usar en el área de contenido para invocar algún tipo de función para realizar ciertas tareas. Por ejemplo, video "

Técnica de anulación de estilo - Trucos CSS

Técnica de anulación de estilo - Trucos CSS

P (tamaño de fuente: 24px! important;) La regla! important al final de un valor anulará cualquier otra declaración de estilo de ese atributo, incluido en línea "

Plugin jQuery externoHTML - Trucos CSS

Plugin jQuery externoHTML - Trucos CSS

InnerHTML () es nativo y devuelve el contenido de un nodo DOM (por ejemplo, yo vivo dentro de un div.

Aspecto "cosido" - Trucos CSS

Aspecto "cosido" - Trucos CSS

.stitched (padding: 20px; margin: 10px; background: # ff0030; color: #fff; font-size: 21px; font-weight: bold; line-height: 1.3em; border: 2px discontinuas "

Mover el cursor al final del área de texto o ingresar - Trucos CSS

Mover el cursor al final del área de texto o ingresar - Trucos CSS

Código para mover el cursor al final del texto actual dentro de la entrada, en lugar del predeterminado (resaltando el texto). Formato de complemento "

Pie de página adhesivo - Trucos CSS

Pie de página adhesivo - Trucos CSS

Funciona muy bien si puede aplicar una altura fija al pie de página. ¡Contenido! Soy el pie de página adhesivo. * (margen: 0;) html, cuerpo (altura: 100%;) .page-wrap ("

Abrir enlaces externos en una ventana nueva - Trucos CSS

Abrir enlaces externos en una ventana nueva - Trucos CSS

$ ('a'). each (function () (var a = new RegExp ('/' + window.location.host + '/'); if (! a.test (this.href)) ($ (this ) .click (función (evento) ("

Texto de rastreo de Star Wars - Trucos CSS

Texto de rastreo de Star Wars - Trucos CSS

La apertura de Star Wars es icónica. El efecto del texto desplazándose tanto hacia arriba como fuera de la pantalla fue un efecto especial increíblemente genial para una película en "

Mover elementos de la lista en los que se hizo clic al principio de la lista - Trucos CSS

Mover elementos de la lista en los que se hizo clic al principio de la lista - Trucos CSS

Suponiendo HTML como este: uno dos tres Entonces, si se hace clic en "Dos", muévalo al principio de la lista. $ ("li"). haga clic en (función () ("

Texto que gotea sangre - Trucos CSS

Texto que gotea sangre - Trucos CSS

.blood (color: plateado; texto-sombra: 4px 4px 1px # 300000, 4px 6px 1px # 400000, 4px 8px 1px # 500000, 4px 10px 1px # 600000, 4px 12px 1px # 700000, 4px 14px "

Fuerza de la contraseña - Trucos CSS

Fuerza de la contraseña - Trucos CSS

$ ('# pass'). keyup (function (e) (var strongRegex = new RegExp ("^ (? =. (8,)) (? =. *) (? =. *) (? =. *) (? =. * \ W). * $ "," G "); var mediumRegex = new"

Alternar visibilidad al ocultar elementos - Trucos CSS

Alternar visibilidad al ocultar elementos - Trucos CSS

El equipo de desarrollo de Medium ha discutido algunas malas prácticas que rompen la accesibilidad. En un ejemplo, argumentan que la opacidad no está bien respaldada "

Pegar eventos - Trucos CSS

Pegar eventos - Trucos CSS

$ .fn.pasteEvents = function (delay) (if (delay == undefined) delay = 20; return $ (this) .each (function () (var $ el = $ (this); $ el.on ("paste ", función ()"

Estilo de texto de marcador de posición - Trucos CSS

Estilo de texto de marcador de posición - Trucos CSS

El texto del marcador de posición en las entradas tiene (en los navegadores que lo implementan hasta ahora) un color gris claro. Para darle estilo, necesitará propiedades CSS de prefijo del proveedor ".

Encabezados persistentes en tablas - Trucos CSS

Encabezados persistentes en tablas - Trucos CSS

Cuando se desplaza hacia abajo en una página con una tabla larga, normalmente el encabezado de la tabla se desplaza y se vuelve inútil. Este código clona el encabezado de la tabla "

Borde interior transparente - Trucos CSS

Borde interior transparente - Trucos CSS

Borde interior transparente .inner-border (background: # 000; color: #fff; margin: 50px; padding: 15px; position: related;) .inner-border: before (border: "

Hacer clic en toda la división - Trucos CSS

Hacer clic en toda la división - Trucos CSS

Actualización de noviembre de 2020: Creo que la mejor técnica posible para esto es el Método 4 de este artículo. El

(o cualquier elemento contenedor) permanece "

Pila de fuentes del sistema - Trucos CSS

Pila de fuentes del sistema - Trucos CSS

La configuración predeterminada de la fuente del sistema de un sistema operativo en particular puede aumentar el rendimiento porque el navegador no tiene que descargar ningún archivo de fuente, es "

Eliminar valor específico de la matriz - Trucos CSS

Eliminar valor específico de la matriz - Trucos CSS

Var arr =; var removeItem = 2; arr = $ .grep (arr, function (value) (return value! = removeItem;)); "

Imágenes de fondo transparente - Trucos CSS

Imágenes de fondo transparente - Trucos CSS

No existe la propiedad CSS background-opacity, pero puede simularla insertando un pseudo elemento con opacidad regular del tamaño exacto del elemento detrás "

Actualización de página parcial - Trucos CSS

Actualización de página parcial - Trucos CSS

Actualizar ciertos elementos de una página usando jQuery después de un período de tiempo establecido, se puede usar con cualquier elemento con una ID. Modifiqué el ejemplo dado con el "

Sombra superior - Trucos CSS

Sombra superior - Trucos CSS

Sombra a lo largo del borde superior del sitio web, así: cuerpo :: antes (contenido: ""; posición: fija; arriba: -10px; izquierda: 0; ancho: 100%; alto: 10px; "

Buscar / Reemplazar - Trucos CSS

Buscar / Reemplazar - Trucos CSS

JQuery (function () (jQuery (": contiene (ENCONTRAR)"). no (": tiene (: contiene (ENCONTRAR))"). each (function () (var that = $ (this), html = that. html (); html = "

Rotación de texto - Trucos CSS

Rotación de texto - Trucos CSS

Si lo que está buscando es una forma de establecer el tipo verticalmente, lo mejor es que probablemente sea el modo de escritura CSS. Si solo estás tratando de convertir un texto, "

Ejecute JavaScript solo después de que se haya cargado toda la página - Trucos CSS

Ejecute JavaScript solo después de que se haya cargado toda la página - Trucos CSS

$ (ventana) .bind ("cargar", función () (// código aquí)); "

Viñetas de lista triangular - Trucos CSS

Viñetas de lista triangular - Trucos CSS

Ul (margin: 0.75em 0; padding: 0 1em; list-style: none;) li :: before (content: ""; border-color: transparent # 111; border-style: solid; border-width: "

Seleccionar elemento sólo si los elementos secundarios no están animados - Trucos CSS

Seleccionar elemento sólo si los elementos secundarios no están animados - Trucos CSS

Var myChildrenBehave = $ (". elemento"). filter (function () (var filter = $ (this) .children (). not (": animado"); retorno filtrado;)); Esto selecciona el elemento "

Esquinas dobladas - Trucos CSS

Esquinas dobladas - Trucos CSS

Cuerpo del contenido (fondo: # e6e6e6;). Esquinas (fondo: # f6f6f6; altura: 700 px; margen: 50 px automático; ancho máximo: 600 px; posición: relativa; ancho: 80%; "

Seleccione el elemento de la lista sólo si no contiene otra lista (y es de nivel superior) - Trucos CSS

Seleccione el elemento de la lista sólo si no contiene otra lista (y es de nivel superior) - Trucos CSS

Me doy cuenta de que esto es bastante específico, pero tuve que escribir este selector antes para solucionar un problema y usé jQuery porque el selector es bastante avanzado "

Truncar cadena con puntos suspensivos - Trucos CSS

Truncar cadena con puntos suspensivos - Trucos CSS

Todo lo siguiente es obligatorio, por lo que el texto debe estar en una sola línea recta que desborde un cuadro donde se oculta ese desbordamiento. .truncar (ancho: "