Diseño Web archivos - Ariel Acosta Fotografí­a https://arielacosta.com/diseno-web/ Fotografía de productos, Fotografía para ecommerce, Fotografía para Mercado Libre Mon, 21 Jun 2010 00:29:27 +0000 es hourly 1 https://wordpress.org/?v=6.1.4 CSS3 Diseño Multi column https://arielacosta.com/css3-diseno-multi-column/ Sun, 20 Jun 2010 15:30:40 +0000 http://arielacosta.com/?p=184 Empece a estudiar CSS3, asi que voy a ir escribiendo un poco del tema. El selector para poder hacer multi-columnas es uno de los que mas […]

La entrada CSS3 Diseño Multi column se publicó primero en Ariel Acosta Fotografí­a.

]]>
Empece a estudiar CSS3, asi que voy a ir escribiendo un poco del tema.

El selector para poder hacer multi-columnas es uno de los que mas me llamó la atención, mas que nada porque hace un par de días estaba precisando hacer exactamente esto, si hubiera sabido de esto, la solución hubiera sido mucho mas sencilla.

Ej. el texto a continuación esta todo dentro de un solo div que usa el siguiente codigo css:

div.columnas {
-moz-column-count: 3;
-moz-column-gap: 50px;
-moz-column-width: 150px;
-moz-column-rule: 1px solid #00000;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
-webkit-column-width: 150px;
-webkit-column-rule: 1px solid #00000;
}

Definimos lo siguiente:

  • column-count: la cantidad de columnas
  • column-gap: la distancia entre columnas
  • column-width: el ancho de la columna
  • column-rule: linea de division entre columnas
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut dui felis. Quisque ornare tellus et tortor pellentesque vulputate. Ut mollis accumsan neque, quis vestibulum erat varius at. Aliquam cursus consectetur viverra. Pellentesque dolor augue, pulvinar sit amet molestie non, egestas mollis risus. Aenean eu nisi odio, eget accumsan libero.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut dui felis. Quisque ornare tellus et tortor pellentesque vulputate. Ut mollis accumsan neque, quis vestibulum erat varius at. Aliquam cursus consectetur viverra. Pellentesque dolor augue, pulvinar sit amet molestie non, egestas mollis risus. Aenean eu nisi odio, eget accumsan libero.

La entrada CSS3 Diseño Multi column se publicó primero en Ariel Acosta Fotografí­a.

]]>
CSS3 Botones https://arielacosta.com/css3-botones/ Mon, 21 Jun 2010 00:29:27 +0000 http://arielacosta.com/?p=198 Investigando y probando como hacer unos botones usando solo css3 llegue a lo siguiente: Aceptar Cancelar Para lograr estos botones use estas características de CSS3: border-radius […]

La entrada CSS3 Botones se publicó primero en Ariel Acosta Fotografí­a.

]]>
Investigando y probando como hacer unos botones usando solo css3 llegue a lo siguiente:

Aceptar Cancelar

Para lograr estos botones use estas características de CSS3:

  • border-radius nos permite hacer las esquinas redondeadas
  • box-shadow es la propiedad que le da la sombra al botón
  • text-shadow le da la sombra al texto
  • rgba donde la «a» corresponde a «alpha» y nos permite especificar la opacidad de un color

Este es el HTML


<a class="boton">Aceptar</a> <a class="boton">Cancelar</a>

y este es el CSS


.boton, .boton:visited {
	background-color: #009AD8;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;

	font-size: 18px;
	font-weight: bold;
	line-height: 1; 

	border-bottom: 1px solid rgba(0,0,0,0.2);
	position: relative;
	cursor: pointer;

	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.2);

}

.boton:hover { background-color: #294C76;
	color: #fff;
	text-decoration: none;
}
.boton:active { top: 1px; }

La entrada CSS3 Botones se publicó primero en Ariel Acosta Fotografí­a.

]]>