Códigos Fuente de HTML

Mostrando del 1 al 10 de 78 registros
<<>>
Imágen de perfil

Corredor_ Dance


HTML

Actualizado el 5 de Marzo del 2022 por Javier (Publicado el 28 de Febrero del 2022)
410 visualizaciones desde el 28 de Febrero del 2022
Se basa en la aplicación de la API de animaciones de javascript API ANIMATE.
En este caso se trata de un muñeco, Corredor lo llamo, que hace eso, correr.
Pero ademas puedes interactuar con el con una serie de inputs range, para darle mas o menos velocidad a cada parte de su cuerpo, y hasta lo puedes hacer como bailar.
Imágen de perfil
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Web 2.0 Light / Dark Style


HTML

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 22 de Febrero del 2022 por Scriptshow (141 códigos) (Publicado el 4 de Mayo del 2020)
2.717 visualizaciones desde el 4 de Mayo del 2020
Saludos,

Web 2.0 es un proyecto creado desde cero con unos 6Kb. Se caracteriza por ser muy flexible, adaptable con mínimos cambios en el código. No depende de librerías de nigún tipo, es 100% Código Nativo Compatible.
Tiene múltiples y variadas aplicaciones: Web Personal, Portafolio para Fotógrafos, Arquitectos, Diseñadores, Freelancers, etc...

Espero sea útil.
Imágen de perfil
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Vídeo Fullscreen Responsive


HTML

Publicado el 5 de Enero del 2022 por Scriptshow (141 códigos)
356 visualizaciones desde el 5 de Enero del 2022
Saludos,

HTML5 y CSS3 para hacer un Vídeo Fullscreen Responsive. Un pequeño Script asegura el arranque en diversos dispositivos y navegadores web.

Veamos el código completo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Video Background</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
 
html,body {
height:100%;
}
 
body {
font-size:16px;
font-family:"Helvetica", sans-serif;
line-height:1.5;
color:#FFFFFF;
}
 
.content {
position:relative;
top:28%;
z-index:2;
margin:0 auto;
max-width:640px;
text-align:center;
}
 
.video {
position:fixed;
top:50%;
left:50%;
z-index:1;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
-webkit-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="content">
<h1>Video Full Screen Test</h1>
<p>Este Vídeo Background Responsive se adapta al tamaño de dispositivos y navegadores.</p>
<a href="#">Test</a>
</div>
 
<video id="video" class="video" muted loop>
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
<source src="video.webm" type="video/webm">
</video>
 
<script type="text/javascript">
(function() {
var video=document.getElementById("video");
video.addEventListener("canplay", function() {video.play()});
})();
</script>
</body>
</html>

Espero sea útil.
Imágen de perfil

Sitio web html 5 con Css3 y Js


HTML

Publicado el 14 de Diciembre del 2021 por David (3 códigos)
561 visualizaciones desde el 14 de Diciembre del 2021
https://github.com/nob322/WebHtml5Css3Js-1
Les comparto el código completo para que se lo clonen, ideal para quienes están aprendiendo a crear sitios web, implementé un par de librerías de js muy potentes.
Imágen de perfil

Editor de textos HTML y tablas wyswyg


HTML

Actualizado el 1 de Octubre del 2021 por Augusto (3 códigos) (Publicado el 29 de Septiembre del 2021)
349 visualizaciones desde el 29 de Septiembre del 2021
Editor de textos WYSWYG, generalmente para nuestras aplicaciones web necesitamos cargar contenido con formato HTML y los editores nos generan codigo garbage anexo y sucio.
Muchas veces los editores o plugins en javascript funcionan en algunos navegadores y en otros toma otras caracteristicas.

Este editor es especial para los clientes nuestros que carguen noticias, blog, descripciones, tablas, listados,etc.

De uso sencillo , nos genera unicamente las etiquetas estandar HTML5 que necesitamos para pegar en el textarea de nuestros CMS.

Tambien genera tablas, saca un screenshot de la misma por si tenemos que enviarla a reporte e incluso imprimirla.

De uso gratuito y libre, unicamente requiere windows 7+, framework 4.7 .NET.
Desarrollo: Web & DB Copyright 2021

Video:
https://www.youtube.com/watch?v=Srl5nexv3Es

Pueden descargalo desde aqui

https://www.mediafire.com/file/gef4f5ute13palv/Texter.zip/file

1
2
Imágen de perfil
Val: 10
Ha aumentado su posición en 135 puestos en HTML (en relación al último mes)
Gráfica de HTML

Obtener valor(id) de una tabla html


HTML

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 9 de Junio del 2021 por Sergio (7 códigos)
1.774 visualizaciones desde el 9 de Junio del 2021
Obtener valor de una fila en una tabla html

Codigo en html, jquery, bootstrap para obtener el id de cada fila de una tabla html, MUY UTIL para cualquier tipo de accion.

https://gitlab.com/savila/get_id_table_row
hjb
Imágen de perfil
Val: 8
Ha aumentado su posición en 9 puestos en HTML (en relación al último mes)
Gráfica de HTML

Menú Bootstrap


HTML

Actualizado el 9 de Abril del 2021 por Carlos Luis (2 códigos) (Publicado el 20 de Agosto del 2017)
3.342 visualizaciones desde el 20 de Agosto del 2017
Menú Bootstrap configurable referente al color.

Resumen:

Muchas veces necesitamos tener una barra de navegación (navbar), diferente al color por defecto o al color inverso.

En ese caso utilizamos google para buscar soluciones. En mi caso, encontré algunas pero siempre me parecían muy complicadas; así que después de algún tiempo estudiando llegue a esta barra.

Espero sea de su utilidad y les ayude a aclarar un poco el tema.

Y con el permiso de autor de este vídeo, me permito recomendarlo:

Imágen de perfil
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Creando un modo Día/Noche para nuestra web


HTML

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 2 de Septiembre del 2020 por Lopez
1.786 visualizaciones desde el 2 de Septiembre del 2020
La accesibilidad web es fundamental y muy significativa para quienes cuentan con alguna discapacidad y ¡Vaya! que hace feliz un modo noche. Pues hoy crearemos un Selector de Contraste o modo Claro/Oscuro. Con él mejoraremos, ademas de la experiencia de usuario, nuestras habilidades entendiendo un poco mas de LocalStorage, haciendo así de la web un lugar mejor.


uvLyAck

euTzUg2

Si quieres la información explicada o sumar ideas,
El post completo está en https://blob.cl/blog/post/crea-un-modo-de-contraste.
Puedes colaborar desde el git en https://github.com/lowpez/Accesibilidad-Color-y-Contraste