Bufa Webmaster » CSS3

CSS: dibujar triángulos

Jorge Maiden — Wed, 28 Dec 2011 13:01:00 +0000

Algunos ejemplos utilizando solo código css para crear formas con aspecto de triángulo:

Triangulo CSS (pico superior)

.triangulo_sup {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #000;
}

Triangulo CSS (pico inferior)

.triangulo_inf {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #000;
}

Triangulo CSS (pico izquierda)

.triangulo_izq {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #000;
border-bottom: 50px solid transparent;
}

Triangulo CSS (pico derecha)

.triangulo_der {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #000;
border-bottom: 50px solid transparent;
}

Triangulo CSS (pico superior izquierdo)

.triangulo_top_left {
width: 0;
height: 0;
border-top: 100px solid #000;
border-right: 100px solid transparent;
}

Triangulo CSS (pico superior derecho)

.triangulo_top_right {
width: 0;
height: 0;
border-top: 100px solid #000;
border-left: 100px solid transparent;
}

Triangulo CSS (pico inferior izquierdo)

.triangulo_bottom_left {
width: 0;
height: 0;
border-bottom: 100px solid #000;
border-right: 100px solid transparent;
}

Triangulo CSS (pico inferior derecho)

.triangulo_bottom_right {
width: 0;
height: 0;
border-bottom: 100px solid #000;
border-left: 100px solid transparent;
}

CSS3 sombra interior

Jorge Maiden — Wed, 29 Jun 2011 22:33:07 +0000

Alguna vez te has preguntado ¿cómo hacer una sombra interior utilizando solo CSS3? es bastante sencillo en realidad!

Utilizaremos la propiedad “box-shadow“.

Vamos a aprovechar para crear un menu redondeado con una sombra interior en la parte superior.

1º el css:

.sombra{
-moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
-webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
}
.redondea{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.menu{
width:100%;
height: 30px;
line-height: 30px;
background:#fff;
border:1px solid #ddd;
}
.menu li{
float:left;
}
.menu li a{
padding:0 15px;
text-decoration:none;
color:#bbb;
}

2º el html de la lista del menu:

<ul class="menu redondea sombra">
<li><a href="">Inicio</a></li>
<li><a href="">Empresa</a></li>
<li><a href="">Fotos</a></li>
<li><a href="">Contacto</a></li>
</ul>

DEMO

Detectar ipad & iphone con CSS3

Jorge Maiden — Tue, 22 Mar 2011 20:21:04 +0000

Usando CSS3 Media Queries podemos detectar el navegador, y portanto cargar una determinada hoja de estilos para cada dispositivo.

Para detectar el ancho utilizamos la propiedad device-width para controlar la altura junto con los prefijos min/max para controlar la altura mínima o máxima.

Un ejemplo para detectar iphone o ipad:

Un ejemplo de detectar con CSS3 la orientación de la pantalla (vertical o horizontal) en el ipad y cargar un estilo u otro:

Otras propiedades:

height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid

CSS: clear both cada “x” columnas

Jorge Maiden — Mon, 21 Feb 2011 20:50:03 +0000

Hace un tiempo ya expliqué como hacer un clear both cada un determinado número de columnas utilizando jQuery, para evitar que se descoloquen divs o otros elementos flotantes de diferentes alturas. Hoy esta misma acción pero sin utilizar javascript, solo con el selector nth-child de CSS:

En este ejemplo crearía un clear cada 3 columnas en una típica lista:

li:nth-child(3n+1) {
clear: both;
}

DEMO DESCARGAR

Fotos circulares con CSS

Jorge Maiden — Sat, 19 Feb 2011 13:18:42 +0000

¿Estais cansados de las típicas fotos / imágenes cuadradas o rectangulares? Os voy a enseñar como conseguir el efecto de una imagen o foto circular utilizando CSS3 (se podrían utilizar otrás técnicas como utilizar una imagen transparente a modo de máscara…).

Para conseguir la forma circular usaremos una clase con la propiedad CSS3 “border-radius” que aplicaremos sobre el div o imágen que queramos aplicar el efecto circular, en este caso sobre la bandera de León que podéis ver al pinchar en el botón demo:

.circular {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
overflow:hidden;
}

DEMO DESCARGAR

Pseudo-elemento con background-position

Jorge Maiden — Fri, 21 Jan 2011 22:20:28 +0000

Os muestro como utilizar una imagen de fondo (background) que se pueda colocar fuera del div o contenedor utilizando el pseudo-elemento ::before y la propiedad content para que actúe como un fondo adicional.

Esto es posible utilizando CSS3, pero todavía no está implementado en muchos navegadores. Esta técnica de pseudo-elemento también tiene el beneficio adicional de ser capaz de recortar una imagen de fondo e incluso la posición de que parcial o totalmente, fuera de su contenedor sin utilizar ningún otro elemento extra.

.caja {
position: relative;
width:500px;
height:250px;
margin:0 auto;
padding: 20px;
background: #fff;
border: 1px solid #bbb;
z-index: 1;
}
.caja::before {
position: absolute;
bottom: -30px;
right: -64px;
width: 128px;
height: 128px;
background: url(candle.png);
content: '';
z-index: -1;
}

Navegadores válidos : Firefox 3.5 +, 3 + Chrome, Safari 3 +, Opera 10 +, Internet Explorer 8 +.

DEMO DESCARGAR

CSS3: efecto fade

Jorge Maiden — Sat, 15 Jan 2011 13:23:43 +0000

Ya os enseñe como poder crear este efecto fade con jQuery. Hoy os muestro como poder hacer este efecto utilizando solo CSS3.

Voy a crear una clase CSS llamada “.fade” y se la vamos a aplicar a una imagen. Vamos a crear el efecto de opacidad 100% progresivo sobre una imagen con una opacidad del 80% en estado de reposo.

Utilizamos la propiedad “opacity” para controlar el % de opacidad. Y la propiedad “transition” para controlar la velocidad de transición.

.fade{
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 0.3s linear;
}
.fade:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 0.5s linear;
}

DEMO DESCARGAR

Background-Image “fullscreen” ajustable a Ventana con CSS3

Jorge Maiden — Tue, 30 Nov 2010 19:37:39 +0000

Método para crear un efecto fullscreen de una imágen usada como fondo sin necesidad de utilizar javascript. Para ello solo vamos a utilizar CSS y su propiedad background-size: cover.

La propiedad “background-size: cover” nos permite escalar el tamaño de las imágenes de fondo (background), en lugar de el comportamiento predeterminado del mosaico de la imagenes.

* para su visualización correcta requiere o bien un navegador basado en Gecko, WebKit (Safari y Google Chrome, por ejemplo) y Opera.

html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

DEMO DESCARGAR

CSS3: Efecto Neón

Jorge Maiden — Wed, 10 Nov 2010 22:23:41 +0000

Un sencillo ejemplo de como simular un efecto “neón” sobre una tipografía en CSS3, sin utilizar imágenes. Para ello utilizamos principalmente text-shadow para dar resplandor al texto, text-fill-color para colorear el interior del texto, text-stroke-color para el color del borde exterior, y text-stroke-width para el ancho del borde.

.neon {
font-size: 100px;
letter-spacing:-2px;
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 25px #ff00de;
-webkit-text-fill-color: #F4ECFF;
-webkit-text-stroke-color:#C546F7;
-webkit-text-stroke-width:0.2px;
}

DEMO DESCARGAR

CSS3: efecto reflejo

Jorge Maiden — Thu, 04 Nov 2010 23:39:37 +0000

Un bonito efecto de CSS3 que nos ahorrará de utilizar photoshop para realizar un efecto reflejo de un div, texto, imágen…

Utilizamos la propiedad css3 box-reflect que se encarga de realizar este efecto.

Ejemplo de uso:

.reflejo{
width:300px;
height:300px;
background: #58473F;
-webkit-box-reflect:below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.66, transparent), to(#FFF));
}