1

Css rounded buttons

gajupoDeja un comentario

Esta es una técnica simple y efectiva de crear botones redondos con CSS y sin JavaScript.

Codigo HTML:

<html>
<head>
	<title>Ejemplo css rounded buttons</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.rbuttons.css" />
</head>

<body>

	<a class="rbutton red" href="https://gajupo.wordpress.com/"><span>Red</span></a>
	<a class="rbutton green" href="https://gajupo.wordpress.com/"><span>Green</span></a>
	<a class="rbutton blue" href="https://gajupo.wordpress.com/"><span>Blue</span></a>

</body>
</html>

CSS:

/* do not change */
.rbutton {
	cursor: pointer;
	display: -moz-inline-box;
	display: inline-block;
	padding-left: 5px;
	padding-bottom: 1px;
	line-height: 19px;
	background-position: lef top;
	background-repeat: no-repeat;
}

	.rbutton span {
		padding-left: 10px;
		display: -moz-inline-box;
		display: inline-block;
		padding-right: 15px;
		padding-bottom: 1px;
		line-height: 19px;
		background-position: right top;
		background-repeat: no-repeat;
	}

/* skin */
.red {
	background-image: url(buttons/red-left.gif);
}
	.red span {
		background-image: url(buttons/red-right.gif);
	}

.green {
	background-image: url(buttons/green-left.gif);
}
	.green span {
		background-image: url(buttons/green-right.gif);
	}

.blue {
	background-image: url(buttons/blue-left.gif);
}
	.blue span {
		background-image: url(buttons/blue-right.gif);
	}

/* font size and family */
.rbutton {
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	color: #000000;
}

Imágenes:


1

CSS Vertical align

gajupoDeja un comentario

En la etiqueta HTML td tiene un atributo llamado «valign», que puede alinear el contenido verticalmente. CSS no tienen tal atributo, por lo que tiene que hacer un poco de magia para lograr tal resultado.  Utilizando el método descrito a continuación usted será capaz de alinear un elemento verticalmente en cualquier contenedor de altura.

Ejemplo:

<html>
<head>
    <title>DEMO: CSS vertical align</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
		.v-outer {
			display: table;
			#position: relative;
			overflow: hidden;
			height: 100px;
			background: black;
			color: white;
			width: 100%;
		}

			.v-middle {
				display: table-cell;
				#position: absolute;
				#top: 50%;
				vertical-align: middle;
			}

				.v-inner {
					#position: relative;
					#top: -50%;
				}
	</style>
</head>

<body>

	<div class="border v-outer">
	<div class="v-middle">
	<div class="v-inner">
	...content...
	</div>
	</div>
	</div>

</body>
</html>