• ””
  • ””
  • ””
  • ””

Código CSS

.slider {.slider { width: 95%; margin: auto; overflow: hidden;}
.slider ul { display: flex; padding: 0; width: 400%; animation: cambio 20s infinite alternate linear;}
.slider li { width: 100%; list-style: none;}
.slider img { width: 100%;}
@keyframes cambio { 0% {margin-left: 0;} 20% {margin-left: 0;} 25% {margin-left: -100%;} 45% {margin-left: -100%;} 50% {margin-left: -200%;} 70% {margin-left: -200%;} 75% {margin-left: -300%;} 100% {margin-left: -300%;}}

Mira aquí los resultados

3- MENÚ DESPLEGABLE HOVER
Estos códigos dan como resultado un menú que al pasar el cursor sobre cada pestaña se despliegan de forma automática los sub-menús.

Código HTML

Código CSS

ul.acorh,
ul.acorh * {
margin: 0;
padding: 0;
border: 0;
}
ul.acorh {
margin: 10px auto;
padding: 0;
list-style: none;
width: 100%;
font-size: 18px;
}
ul.acorh li {
list-style: none;
}
ul.acorh li a {
display: block;
padding: 10px 10px 10px 20px;
background: #333;
color: #eee;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
text-decoration: none;
box-sizing: border-box;
}
ul.acorh li ul {
max-height: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
transition: .3s all ease-in;
}
ul.acorh li li a {
padding: 10px 10px 10px 40px;
background: #999;
color: #000;
font-size: 16px;
border: 0;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
ul.acorc li li:last-child a {
border-bottom: 0;
}
ul.acorh li:hover ul {
max-height: 300px;
transition: .3s all ease-in;
}
ul.acorh li a:hover {
background: #666;
color: #fff;
}

Mira aquí los resultados

4- DESBLOQUEAR CONTENIDO CON CLICK
Sencillas líneas de código que permiten desbloquear cualquier tipo de contenido con un click.

Código HTML

Aquí podría ir cualquier tipo de elemento

Código CSS

#activar ~ .desplegable {display: none;overflow: hidden;}
#activar:checked ~ .desplegable {display: block;}

Mira aquí los resultados

5- CINTA ADHESIVA EN IMÁGENES
Si quieres destacar de forma original las imágenes de tu web puedes lograrlo con los siguientes códigos CSS para tu web. Estos te permitirán colocar cinta adhesiva en los extremos de cada imagen dando un lindo efecto.

Código HTML

imagen con enlace



imagen sin enlace



Código CSS

.cinta {
position: relative;
text-align: center;
display: inline-block; *display: inline; zoom: 1;
margin: 20px auto 10px;
}
.uno:before,
.dos:before, .dos:after,
.tres:before, .tres:after,
.cuatro:before, .cuatro:after {
content: “”;
display: block;
width: 100px;
height: 30px;
position: relative;
top: 20px;
margin: auto;
background: rgba(255,255,200,0.6);
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}
/* Esto es sólo algo de estilo adicional para la imagen */
.cinta img {
display: inline-block; *display: inline; zoom: 1;
border: 1px solid #ddd;
margin: 0 20px;
padding: 8px;
background: #fff;
text-align:center;
vertical-align:top;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Mira aquí los resultados

6- WIDGET REDES SOCIALES (FORMATO DE FICHERO)
Las redes sociales nunca pueden faltar en un sitio web, con estos códigos CSS y HTML podrás mostrar tus redes en formato de un fichero muy atractivo. 🙂

Código HTML

Código CSS

/* Reset */
.cartera, .tarjeta, .tarjeta a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Contenedor general */
.cartera {
position: relative;
width: 100%;
max-width: 500px;
margin: 40px auto 0;
text-align: center;
line-height: 56px;
font-size: 14px;
font-family: sans-serif;
}
/* Cada tarjeta */
.tarjeta {
position: relative;
width: 100%;
height: 30px;
margin: 0 auto;
padding: 0;
text-align: left;
border-bottom: 3px groove #eee;
}
/* Estado normal */
.tarjeta a {
position: relative;
display: block;
top: -6px;
left: 50%;
width: 96%;
margin-left: -48%;
padding: 0 0 0 16px;
line-height: 32px;
font-weight: normal;
border-radius: 16px 16px 0 0;
text-decoration: none;
box-shadow: 0 -2px 2px rgba(0,0,0,.1), 0 0 20px rgba(0,0,0,.2) inset;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
/* Elevación de las tarjetas */
.tarjeta a:hover {
line-height: 52px;
top: -26px;
text-decoration: none;
}
/* Logos */
.tarjeta a:before {
display: inline-block; *display: inline; zoom: 1;
width: 20px;
margin-right: 10px;
text-align: center;
font-family: Fontawesome;
font-size: 18px;
}
/* Sombra parte inferior */
.tarjeta a:after {
content: “”;
position: absolute;
bottom: 0;
left: 50%;
width: 102%;
margin-left: -51%;
height: 2px;
display: block;
border-radius: 80px 80px 0 0 ;
box-shadow: 0 -2px 6px #666;
z-index: -1;
}
/* Colores Twitter */
.tarjeta.ttwitter a {
color: #ddd;
background-color: #01AFEC;
border-top: 2px solid #43CFFE;
}
/* Colores Google+ */
.tarjeta.tgoogle a {
color: #333;
background-color: #DB4A37;
border-top: 2px solid #E88C80;
}
/* Colores Facebook */
.tarjeta.tfacebook a {
color: #ccc;
background: #3B559F;
border-top: 2px solid #6B83C9;
}
/* Colores Linkedin */
.tarjeta.tlinkedin a {
color: #333;
background: #007BB6;
border-top: 2px solid #83A9CB;
}
/* Colores Pinterest */
.tarjeta.tpinterest a {
color: #ccc;
background: #CB2027;
border-top: 2px solid #E88C80;
}
/* Colores Instagram */
.tarjeta.tinstagram a {
color: #ccc;
background: #42719D;
border-top: 2px solid #83A9CB;
}

Mira aquí los resultados

7- ENVEJECER IMÁGENES
Aquí va otra buena manera de editar imágenes de tu web mediante códigos CSS, estos le dará un efecto de antiguo a la imagen que se lo apliques.

Código HTML

Código CSS

.antiguo {
position:relative;
display:table; /* Para centrado de imagen */
margin: 0 auto;
}
/* Sólo para Blogger que mete cosas raras al subir imágenes */
.antiguo a {
margin:0 auto !important;
}
.antiguo a:after {
content:””;
position: absolute;
top: 0;
left:0;
display:block;
width:100%; /* La caja solapada ocupará todo el ancho y alto*/
height: 100%;
/* A continuación la imagen que le da el aspecto antiguo y un color semitransparente */
background: rgba(162,148,85,.5) url(“http://4.bp.blogspot.com/-gFSvXmc_4dk/URBT3_rCFLI/AAAAAAAAIE4/TXM7uQ5Teb4/s1600/textura.png”) no-repeat center center;
/* Independientemente de su tamaño, el fondo se extiende ocupando toda la caja */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Para teminar, unas sombritas oscuras */
-webkit-box-shadow: inset 0 0 80px #333;
-moz-box-shadow: inset 0 0 80px #333;
-o-box-shadow: inset 0 0 80px #333;
box-shadow: inset 0 0 80px #333;
}

Mira aquí los resultados

8- ENLACES SOBRE IMÁGENES, CON EFECTO FLOW
Y seguimos con ediciones a imágenes, en este caso podrás colocar un menú en la parte inferior de la imagen con sus respectivos enlaces. Una forma muy buena para agregar informacion a las imágenes.

Código HTML

Código CSS

.imagelinks {
display: block;
position: relative;
width: 100%;
max-width: 300px;
margin: 0 auto;
padding: 0;
border: 4px solid black;
}
.imagelinks img {
max-width:100%;
border: 0;
vertical-align: top;
}
.links {
width: 100%;
position:absolute;
bottom:0;
text-align:center;
background: #FFFFFF;
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
.links a {
display: inline-block;
padding: 8px;
color:#000000;
}
.links:hover {
zoom: 1;
filter: alpha(opacity=100);
opacity:1;
}

Mira aquí los resultados

9- LETRA CAPITAL
Aquí lo que enditaremos son los textos, dando a la primer letra de un texto un tamaño y color destacado.

Código HTML

Aqui colocas cualquier texto

Código CSS

p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

Mira aquí los resultados

10- MOVER 1PX EL ENLACE AL HACER CLICK
Ahora le toca la edición a los enlaces, con este codigo CSS le otorgas un movimiento de 1px al hacer click.

Código HTML

Los códigos CSS o en español (…) documento estructurado escrito en un lenguaje de marcado.

Código CSS

a:active {
position: relative;
top: 1px;

Mira aquí los resultados

11- TABS ANIMADOS SOLO CON CSS
Con este código puede poner una sección de tabs animados, sin la necesidad de utilizar jQuery.

Código HTML


Aquí va algún contenido para el tab 1


Aquí va algún contenido para el tab 2


Aquí va algún contenido para el tab 3

Código CSS

.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;

-webkit-transform: translate3d(0, 0, 0);

-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);

-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;

-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}

Mira aquí los resultados

12- MENÚ CIRCULAR ANIMADO
Usa los siguientes códigos CSS en tu página web para crear un atractivo menú circular animado. (Home, informacion, contacto, redes sociales)

Código HTML

Código CSS

Mira aquí los resultados

13- WIDGET DE REDES SOCIALES CON EFECTO ZOOM
Si estas buscando destacar tus redes sociales para que tus lectores te sigan puede que este widget te venga bien.

Código HTML

Código CSS

/* Contenedor general y reset de margin y padding */
.expandir * {
margin: 0;
padding: 0;
}
.expandir {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin:20px auto 30px;
height:80px;
width:530px;
}
/* Las imágenes irán en forma de lista */
.expandir ul {
padding-top:10px;
margin-left:10px;
}
/* Se hacen flotar los elementos para que queden en línea y se elimina el estilo que podría haber predefinido para listas */
.expandir ul li {
float:left;
list-style-type:none;
}
/* Anulamos estilo predifinido para enlaces en listas */
.expandir ul li a {
text-decoration:none;
}
/* Estilo de cada imagen en situación inicial y transición suave */
.expandir ul li a img {
width:32px; /* Ancho inicial imagénes. 50% real */
height:32px; /* Alto inicial imagénes. 50% real */
border:none;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
/* El texto que acompaña a las imágenes no se ve inicialmente */
.expandir ul li a span {
display:none;
}
/* Mostramos el texto al hacer hover */
.expandir ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#000;
}
/* Agrandamos la imagen al hacer hover */
.expandir ul li:hover a img {
width:64px;
height:64px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

Mira aquí los resultados

14- REDONDEAR IMGEN
Cuantas veces necesitaste hacer circular una foto para tu web y tuviste que recurrir a editores como photoshop para hacerlo?. No se tu pero yo lo hice varias veces. 🙁 Con el siguiente simple codigo CSS podrás lograr un efecto circular de forma muy fácil.

Código HTML

Código CSS

.circular-square {
border-radius: 50%;
}

Mira aquí los resultados

15- WIDGET DE CATEGORÍAS
Excelentes códigos CSS y HTLM para crear un widget para que muestres a tus lectores las categorías de tu blog.

Código HTML

Código CSS

.mis-categorias{
width: 100%;
height: 62px;
background-color: #0d7de0;
padding: 17px;
margin-bottom: 4px;
text-align: center;
text-transform: uppercase;
font-family: ‘Open Sans’, Arial;
font-size: 1.2em;
color: #fff;
}

.mis-categorias a{
color: #fff;
text-decoration: none;
}

.mis-categorias a:hover{
color: #fff;
}

.mis-categorias:hover{
background-color: #FF5733;
}

Mira aquí los resultados

16- CAJAS DE CONTENIDOS DE COLORES
Una buena forma de resaltar un texto es colocandolo en una caja colorida, con estos códigos podrás crearlas fácilmente. Estas cajas son las que he usado en este post para resaltar los códigos CSS y HTML para tu pagina web.

Código HTML

Colocas aquí el texto que deceas resaltar con esta caja de contenido

Código CSS

/* Content Boxes
———————————————————— */
.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow,
.content-light-blue {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}

.content-box-blue {
background-color: #d8ecf7;
border: 1px solid #afcde3;
}

.content-box-gray {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
}

.content-box-green {
background-color: #d9edc2;
border: 1px solid #b2ce96;
}

.content-box-purple {
background-color: #e2e2f9;
border: 1px solid #bebde9;
}

.content-box-red {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}

.content-box-yellow {
background-color: #fef5c4;
border: 1px solid #fadf98;
}

.content-light-blue {
background-color: #B2FBFC;
border: 1px solid #92DCFE;
}

Mira aquí los resultados

17- BOTON
En tu sitio web siempre vas a necesitasr insertar botones, con los siguientes códigos CSS y HTML podrás crear unos muy llamativos. Para el caso este es un botón de color azul, pero puedes tomar la base de código CSS y crear de los demás colores. 🙂

Código HTML

Texto Del Botón

Código CSS

a.btnAzul {
display: block;
width: 250px;
height: 60px;
padding: 25px 0 0 0;
margin: 0 auto;

background: #4682B4;
background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87CEEB), color-stop(100%,#4682B4));

box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #62C2F9;
border-radius: 10px;

font: bold 25px Helvetica, Sans-Serif;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #3090C7;
text-shadow: 0px 1px 2px #62C2F9;
}

Mira aquí los resultados

18- MENÚ MULTICOLOR
Para finalizar te dejo este llamativo menú con sus pestañas multicolor.

Código HTML

Código CSS

body {
margin: 0;
padding: 0;
font: normal 13px arial, helvetica, sans-serif;
background: #000;
}

#menu {
width: 900px;
margin: 0 auto;
margin-top: 50px;
}

#menu ul {
list-style: none;
margin: 0;
}

#menu ul li {
margin: 0;
float: left;
}

#menu ul li a {
margin:0 2px;
width: 138px;
font-weight:bold;
font-size:1.5em;
text-align: center;
line-height: 44px;
display:block;
text-decoration: none
}

#menu ul li a:hover {
color:#000;
}

#item-uno a {
border-bottom:5px solid #f00;
color: #f00
}

#item-dos a {
border-bottom:5px solid #f80;
color: #f80;
}

#item-tres a {
border-bottom:5px solid #ff0;
color: #ff0;
}

#item-cuatro a {
border-bottom:5px solid #8f0;
color: #8f0;
}

#item-cinco a {
border-bottom:5px solid #0ff;
color: #0ff;
}

#item-seis a {
border-bottom:5px solid #08f;
color: #08f;
}

#item-uno a:hover {
background:#f00;
}

#item-dos a:hover {
background:#f80;
}

#item-tres a:hover {
background:#ff0;
}

#item-cuatro a:hover {
background:#8f0;
}

#item-cinco a:hover {
background:#0ff;
}

#item-seis a:hover {
background:#08f;
}

Mira aquí los resultados

Bueno hasta aquí llego con estos 18 códigos CSS para paginas web. Espero que hayas encontrado algunos útiles y ya los estés aplicando. 🙂

Solo me queda aclarar que no he escrito estos fabulosos códigos sino que los he ido tomado de varias webs que he visto por ahí. Me he cerciorado que funcionen pero cualquier problema que tengas déjalo en los comentarios.

PD: Gracias Victor Bustamante por tus apuntes, sirvieron para detectar un par de errores. 🙂

Únete Al Clan
Suscríbete y recibirás el ebook “Como Crear Un Blog Perfecto Sin Meter La Pata”. En el aprenderás como crear el Blog de Tus Sueños.

Como BONUS TRACK de enviaré la Guía SEO Oficial de Google, con excelentes trucos para enamorar al buscador mas popular. 🙂

TU MEJOR CORREO
Suscríbete Ahora!!
SHARE: RATE:12345
PREVIOUS9 Razones por las que debes usar SEO en tu webNEXT10 Motivos para digitalizar tu negocio
ABOUT THE AUTHOR
Luis Forgiarini
Luis Forgiarini
Ingeniero civil de profesión, blogger en los tiempos libres. Escribo sobre creación, gestión de sitios webs, blogging y todo lo que aprendo día a día sobre el tema.

RELATED POSTS
Como verificar AMP, detectar errores y corregirlos
Como verificar AMP, detectar errores y corregirlos
julio 17, 2017

Codigos HTML Para Paginas Web En Bloc De Notas
Codigos HTML Para Paginas Web En Bloc De Notas
abril 11, 2017

Ejemplos de paginas web en html y css + Tutorial de edicion
Ejemplos de paginas web en html y css + Tutorial de edicion
enero 30, 2018

Ejemplos de Servidores Web Mas Utilizados
Ejemplos de Servidores Web Mas Utilizados
enero 2, 2017

4 COMMENTS
GatoOscuro
GatoOscuro el enero 25, 2018 a las 1:11 pm
Excelente.

RESPONDER
Luis Forgiarini
Luis Forgiarini el enero 25, 2018 a las 1:31 pm
Que bueno te sirva. Saludos!! ?

RESPONDER
El rincón digital
El rincón digital el octubre 17, 2018 a las 12:58 pm
Hola,

Este es uno de esos post que se tienen que guardar en favoritos por que siempre está bien tenerlo a mano. Con esos códigos ya solo queda personalizarlo al gusto de cada uno y listo.

Gracias y saludos.

RESPONDER
Luis Forgiarini
Luis Forgiarini el octubre 18, 2018 a las 7:52 pm
Hola!

En principio gracias por pasarte y dejar tu comentario.

Por otro lado me alegra que esté compilado de códigos css te haya servido. Ya me contarás si aplicas alguno de ellos en tu web.

Saludos. 😊

RESPONDER
LEAVE A REPLY
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

NOMBRE *
CORREO ELECTRÓNICO *
WEB
Guardar mi nombre, correo electrónico y sitio web en este navegador para la próxima vez que haga un comentario.

COMMENT

He leido y acepto la política de privacidad

LuisForgiariniBlog te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Luis Alberto Forgiarini como responsable de esta web.
La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar los comentarios que realizas en este blog.
Legitimación: Consentimiento del interesado.El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no atender pueda tu solicitud.
Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de LuisForgiariniBlog) dentro de la UE. Ver políticas de privacidad de Webempresa.
Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en hola@luisforgiarinibog.com así como el derecho a presentar una reclamación ante una autoridad de control.
Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://luisforgiariniblog.com, asi como consultar la política de privacidad

SÍGUEME
Facebook
Twitter
Google+
RSS
ÚLTIMOS POST
¿Que es el Uptime en un servicio de hosting? ¿Cómo medirlo?
¿Que es el Uptime en un servicio de hosting? ¿Cómo medirlo?
Abr 23, 2019
SERP mojo – Un Rank Tracker gratuito en tu smartphone
SERP mojo – Un Rank Tracker gratuito en tu smartphone
Mar 28, 2019
GoKoOM lanza un Curso de SEO Gratuito
GoKoOM lanza un Curso de SEO Gratuito
Mar 12, 2019
WP Doctor – Auditoria WordPress 100% gratis
WP Doctor – Auditoria WordPress 100% gratis
Oct 21, 2018
BUSCAS ALGO DE ESTO??
BLOGGING
WORDPRESS
PROGRAMACÓN
SEO
REDES SOCIALES
MARKETING
DIFUNDE TU CONTENIDO

HABLAMOS DE VOS

DESCUENTO PLANTILLA

Creado por LuisForgiariniBlog | Aviso Legal . Política de Privacidad . Política de Cookies
7
Shares
Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web.

Comments are closed.