He creado esta entrada, viendo la necesidad abrumante que existe por darle nuestros propios diseños a oscommerce 2.3.1.
Crear etiquetas con CSS3
Vamos a ver como realizar una etiqueta de las típicas que tienen los productos de las tiendas con sus precios, datos, etc…pero adaptadas a CSS3, es decir con un triángulo, un círculo y un rectángulo con 2 esquinas redondeadas vamos a poder realizar una etiqueta típica de esas. Esto ,lo ví en guiabreve, pero no era exactamente lo que buscaba, por ello, me puse a trastear con el código y conseguí lo que buscaba.
Vamos a ello:
/*crear etiquetas*/
.prueba li {
height:24px;
color:#FFF;
line-height:24px;
width:90px;
margin-right:20px;
background-color:#0089e0;
margin-left:7px;
margin-bottom:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;}
Creamos el triángulo
/*creamos triangulo*/
.prueba li a{color:#FFF; font-weight:bold; padding-left:15px;}
.prueba li a:before {
content:"";
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:17px 17px 17px 0px;/*12px 12px 12px 0;*/
float:left;
margin-top:-5px;/*0*/
margin-left:-19px;/*-12px*/
width:0px;
height:0px;}
Creamos el círculo
/*creamos circulo*/
.prueba li a:after {
content:"";
float:left;
width:4px;
height:4px;
margin-top:10px;
margin-left:-4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.prueba li a:hover{ color:#666;}
Os invito a trastear con el código y a dejar vuestras opiniones, dudas y comentarios
Esta entrada tiene 0 comentarios