Quitar el fondo blanco de una imagen con css
Simple pero poderoso código...
mix-blend-mode: multiply;
background-color: white;
domingo, 7 de diciembre de 2025
domingo, 16 de noviembre de 2025
Delineado de letras con css
Delinear letras con css
Solo copia y pega...
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000000;
color: white;
Scroll behavior smooth
Habilitar scroll behavior smooth en Google Chrome
Para trabajar a la par con VSC y que nos muestre lo que hacemos, tenemos que habilitar esta opción en GChrome desde chrome://flags/
miércoles, 29 de octubre de 2025
CSS - Flip Card
Voltea la tarjeta al hacer clic sobre ella...
<!------ FLIP-CARD 2------>
<div class="scene scene--card">
<input id="card" type="checkbox">
<label for="card">
<div class="card">
<div class="card_face card_face--front">front</div>
<div class="card_face card_face--back">back</div>
</div>
</label>
</div>
sábado, 16 de agosto de 2025
VSC - Sticky scroll
Modificar Sticky Scroll en Visual Studio Code
Visual Studio Code
En el apartado de settings y escribimos sticky para ver las opciones.
sábado, 2 de agosto de 2025
HTML5 - Menu con submenu
Menu con submenu
HTML5
<!-- MENU CON SUBMENU - NAVEGACION -->
<div id="navegacion">
<ul class="nav"
HTML5 - Cajas con estilo grid
Cajas con estilo grid
*{
box-sizing: border-box;
}
HTML5
<!-- CAJAS GRID -->
<div class="boxes">
<div class="box-1">#1</div>
<div class="box-1">#2</div>
<div class="box-1">#3</div>
<div class="box-1">#4</div>
</div>
Menú lateral con funcion para ver contenido
Menú lateral con funcion para ver contenido
HTML5
<!-- SECTION BOTONES TREN -->
Galeria Lightbox
Galeria Lightbox
Código HTML5 CSS & JAVASCRIPT
Esta demasiado bueno para ser cierto.
Para que funcione el código tiene que tener:
*{
box-sizing: border-box;
}
HTML5
<!-- LIGHTBOX IMAGENES Y VIDEOS -->
<div class="container">
<div class="gallery">
<!-- Image Items -->
domingo, 27 de julio de 2025
VSC - mostrar menu completo
Mostrar menú lateral completo en vsc
En el área de busqueda, escribir sticky y aparecera Workbrench - Tree enable sticky scroll.
domingo, 20 de julio de 2025
Slider con botones laterales y de localizacion
SLIDER CON BOTONES LATERALES Y DE LOCALIZACION.
CODIGO HTML5
<div class="slider-container">
<div class="slider-track">
<div class="slider-slide">
<img src="https://cdn-prod.puprod.indreams.me/"
alt="Resident Evil" class="slider-image">
<div class="slider-content">
<h2 class="slider-title">Shelly</h2>
<p class="slider-description">Conocida como
japonesa creada por Capcom.</p>
</div>
</div>
<div class="slider-slide">
<img src="https://wotpack.ru/wp-content/uploads.jpg"
alt="Silent Hill" class="slider-image">
<div class="slider-content">
<h2 class="slider-title">Silent Hill</h2>
<p class="slider-description">Es una franquicia de videojuegos
publicada por Konami y su subsidiaria,
Konami Digital Entertainment. </p>
</div>
</div>
<div class="slider-slide">
<img src="https://i.ytimg.com/vi/JwbhEACR8Vg/maxresdefault.jpg" alt="Dandys World" class="slider-image">
<div class="slider-content">
<h2 class="slider-title">Dandys World</h2>
<p class="slider-description">Es un juego multijugador de terror con mascotas creado por BlushCrunch Studio</p>
</div>
</div>
<div class="slider-slide">
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/46cf2012-9552-434b-8a38-4b3bbc923fbe/diqzaqm-a8a1d40d-d3f0-48a6-8eb6-a0d378fcf6d0.jpg/v1/fill/w_1280,h_960,q_75,strp/dino_shelly_by_sweetzcherrys_diqzaqm-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTYwIiwicGF0aCI6IlwvZlwvNDZjZjIwMTItOTU1Mi00MzRiLThhMzgtNGIzYmJjOTIzZmJlXC9kaXF6YXFtLWE4YTFkNDBkLWQzZjAtNDhhNi04ZWI2LWEwZDM3OGZjZjZkMC5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LDmrTRgdGZZEKARarcCDHoeakH61QQ2pF5ixbq4B93k" alt="Brawl Stars" class="slider-image">
<div class="slider-content">
<h2 class="slider-title">Brawl Stars</h2>
<p class="slider-description">Es un videojuego multijugador para móviles disponible en Android y iOS, desarrollado por Supercell y lanzado globalmente en 2018.</p>
</div>
</div>
<div class="slider-slide">
<img src="https://media.sketchfab.com/models/53c1f63911ef4c53b0053ce13c23b4fe/thumbnails/53d0ce722e49492d9d09514e9d7f4bfd/31e87f035af1447ab11d7a5f7ad97c95.jpeg" alt="God of War Ragnarok" class="slider-image">
<div class="slider-content">
<h2 class="slider-title">God of War Ragnarok</h2>
<p class="slider-description">Es un videojuego de acción y aventura hack and slash en tercera persona desarrollado por Santa Monica Studio y publicado por Sony Interactive Entertainment.</p>
</div>
</div>
</div>
<div class="slider-nav">
<button class="slider-btn prev">←</button>
<button class="slider-btn next">→</button>
</div>
<div class="slider-dots">
<div class="slider-dot"></div>
<div class="slider-dot"></div>
<div class="slider-dot"></div>
<div class="slider-dot"></div>
<!-- Al querer agregar o quitar una imagen nueva,
tendremos que modificar estos botones,
tienen que ir iguales 5==5 -->
<div class="slider-dot active"></div>
</div>
</div>
CÓDIGO CSS
.slider-container {
width: 100%; /*** ancho de donde esta la imagen, ajuste en px ***/
position: relative;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.slider-track {
display: flex;
transition: transform 0.5s ease-in-out;
height: 100vh; /*** alto de donde esta la imagen,
ajuste a la par de contaniner ***/
}
.slider-slide {
min-width: 100%; /*** no mover este min-width ***/
position: relative;
}
.slider-image {
width: 100%; /*** va a la par de .slider-track ***/
height: 100%; /*** va a la par de .slider-track ***/
object-fit: cover;
}
.slider-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: white;
padding: 30px;
padding-top: 80px;
}
.slider-title {
font-size: 2.2rem;
margin-bottom: 10px;
font-weight: 700;
}
.slider-description {
font-size: 1rem;
line-height: 1.6;
max-width: 70%; /*** ajustar cada que se mueva el ancho en porcentajes,
es para el texto ***/
}
.slider-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
}
.slider-btn {
background-color: rgba(255, 255, 255, 0.7);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.slider-btn:hover {
background-color: rgba(122, 19, 19, 0.9);
transform: scale(1.1);
color: white;
}
.slider-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.slider-dot.active {
background-color: rgb(187, 255, 0);
transform: scale(1.2);
}
CODIGO JS
document.addEventListener('DOMContentLoaded', function() {
const track = document.querySelector('.slider-track');
const slides = document.querySelectorAll('.slider-slide');
const dots = document.querySelectorAll('.slider-dot');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentIndex = 0;
let slideWidth = slides[0].clientWidth;
let autoSlideInterval;
const slideCount = slides.length;
// Set up slider
function initSlider() {
slideWidth = slides[0].clientWidth;
track.style.width = `${slideWidth * slideCount}`;
// Set initial active dot
updateDots();
// Start auto slide
startAutoSlide();
// Handle window resize
window.addEventListener('resize', function() {
slideWidth = slides[0].clientWidth;
track.style.width = `${slideWidth * slideCount}`;
goToSlide(currentIndex);
});
}
// Go to specific slide
function goToSlide(index) {
if (index < 0) {
index = slideCount - 1;
} else if (index >= slideCount) {
index = 0;
}
currentIndex = index;
track.style.transform = `translateX(-${slideWidth * currentIndex}px)`;
updateDots();
// Reset auto slide timer
resetAutoSlide();
}
// Update navigation dots
function updateDots() {
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
}
// Auto sliding
function startAutoSlide() {
autoSlideInterval = setInterval(() => {
goToSlide(currentIndex + 1);
}, 5000);
}
function resetAutoSlide() {
clearInterval(autoSlideInterval);
startAutoSlide();
}
// Event listeners
prevBtn.addEventListener('click', () => {
goToSlide(currentIndex - 1);
});
nextBtn.addEventListener('click', () => {
goToSlide(currentIndex + 1);
});
// Dot navigation
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
goToSlide(index);
});
});
// Pause on hover
track.addEventListener('mouseenter', () => {
clearInterval(autoSlideInterval);
});
track.addEventListener('mouseleave', () => {
resetAutoSlide();
});
// Initialize slider
initSlider();
});
Termina código del slider
martes, 15 de julio de 2025
Cambia el nombre de tu Equipo PC - Servidor Local
Cambia el nombre de tu Equipo para usarlo como Servidor Local
Y el nombre que le pongas,
miércoles, 4 de junio de 2025
Configurar modem para usarlo como repetidor
Usar Modem como repetidor...
Esta herramienta ayuda para la configuración inicial... usb a ethernet
Y para que exista buena comunicación, tenemos dos opciones:
- Agregar ip con su mascara de subred (solo estos dos, lo demás no movemos nada)
- Quitar ip y que se haga automáticamente.
Esto lo vamos a hacer en el adaptador de red en la que nos vaya a aparecer cuando conectemos el modem a configurar:
jueves, 6 de febrero de 2025
Error "Falta Archivo Steam_api.dll"
Error "Falta Archivo Steam_api.dll"
Cuando haces la instalación de un juego en pc, suele aparecer este mensaje de error, pero tiene solución.
El principal error es el antivirus, tienes que ir a cuarentena y recuperarlo para poderlo utilizar (el archivo).
Ya después de recuperado, se puede utilizar normal.
Fuera de ahí, había un sitio web que te dejaba descargar el archivo nuevamente, pero esta deshabilitado.. clic acá por si en algún momento lo abren de nuevo.
El principal error es el antivirus, tienes que ir a cuarentena y recuperarlo para poderlo utilizar (el archivo).
Ya después de recuperado, se puede utilizar normal.
Fuera de ahí, había un sitio web que te dejaba descargar el archivo nuevamente, pero esta deshabilitado.. clic acá por si en algún momento lo abren de nuevo.
El vídeo de donde viene la información del archivo.
lunes, 6 de enero de 2025
Cuando te bloquean tu página web
Así es como se vera tu sitio web si el FBI identifica que tienes algo prohibido en la red
Solamente podrás ver esta imagen a lo largo de tu sitio.
Suscribirse a:
Entradas (Atom)