Esquinas personalizadas con javascript
- Jul
- 18
3 comentarios! 546 palabras - 1 hits
Otra tecnica para crear esquinas personalizadas a traves del dom
Existen diferentes métodos para conseguir este efecto, este que propongo es una mezcla de técnicas que creo que destaca por su sencillez y porque ofrece la posibilidad de aplicar el efecto a mas de un elemento en la misma pagina.
Combinando el uso de javascript y css manipularemos el dom para aplicar el marcado necesario a los elementos que deseemos, el funcionamiento del script se resume de la siguiente manera, al cargarse el documento, recorre el árbol de elementos buscando aquellos marcados con la clase rounded, a los que le añade cuatro elementos “span” posicionados de manera absoluta en las esquinas. Luego, por medio de css, decoramos estos cuatro elementos con la imagen que creara el efecto.
Una de las ventajas de utilizar esta técnica es que se puede aplicar a cualquier elemento, e incluso a varios dentro del mismo documento.
Podéis ver el efecto en marcha en el siguiente ejemplo.
Pasemos a la “magia” del asunto,
Para el ejemplo he creado un script con tres funciones, de las cuales dos son auxiliares y las comentare brevemente, la que realmente aplica el efecto y comentare con mas detalle es la siguiente:
- function roundCorners() {
- var rd = getElementsByClass("rounded");
- for (var i = 0; i < this.rd.length; i++) {
- for(var j = 1; 4 >= j; j++) {
- var corn = document.createElement('span');
- corn.className = 'corn'+j;
- rd[i].appendChild(corn);
- }
- }
- }
Básicamente lo que estamos haciendo es leer el documento en busca de los elementos marcados con la clase “rounded”, para esto utilizamos la función getElementsByClass escrita por Dustin Diaz, que nos devuelve un array con todos los objetos, a partir de aquí entran en marcha dos bucles, el primero se ejecutara tantas veces como elementos contenga el array y el segundo añadirá el marcado necesario a cada elemento.
La segunda función auxiliar es la conocida addLoadEvent escrita por Simon Willison y se encarga de que todo esto se realice durante la carga del documento, evitando tener que utilizar lanzadores adicionales dentro del código html.
- Antes:
- <p class="rounded">
- <a href="http://example.com">ejemplo</a>
- </p>
- -------------------------------------------------------------
- Despues:
- <p class="rounded">
- <a href="http://example.com">ejemplo</a>
- <span class="corn1" />
- <span class="corn2" />
- <span class="corn3" />
- <span class="corn4" />
- </p>
Esta sera la parte de la hoja de estilos,
- /* contenedor principal */
- .rounded {
- position:relative;
- }
- /* elementos añadidos */
- .rounded span {
- position:absolute;
- display:block;
- z-index:2;
- height:8px;
- width:8px;
- }
- .corn1 { /* esquina superior derecha */
- background:transparent url(../img/tr.png) top right no-repeat;
- top:0;
- right:0;
- }
- .corn2 { /* esquina superior izquierda */
- background:transparent url(../img/tl.png) top left no-repeat;
- top:0;
- left:0;
- }
- .corn3 { /* esquina inferior derecha */
- background:transparent url(../img/br.png) bottom right no-repeat;
- bottom:0;
- right:0;
- }
- .corn4 { /* esquina inferior izquierda */
- background:transparent url(../img/bl.png) bottom left no-repeat;
- bottom:0;
- left:0;
- }
la primera regla aplica una posicion relativa al contenedor principal, mientras que los demas elementos que hemos añadido se posicionaran de manera absoluta con un z-index superior para superponerlos sobre el principal.
Esto seria todo, solo quedan las imagenes, que para el ejemplo tienen unas dimensiones de 12x12 pixels y estan en formato png de 24 bits, por lo que el efecto quedara un poco deslucido si se visualiza con IE. Esto no significa que exista ninguna limitacion a la hora de utilizar otro formato de imagen, ni que no se pueda incluir algun tipo de “trampa” para que IE renderize los png con transparencias de forma correcta si es necesario, esto lo dejo para la imaginacion de cada uno.
3 comentarios
# Escrito por Diego hace 3 años, 7 meses
Muy bueno, estaba intentando hacer algo similar a eso :-).
# Escrito por XpLOaD hace 3 años, 4 meses
Es interesante el funcionamiento de estos tabs
# Escrito por inyaka hace 3 años, 3 meses
el ejemplo no funciona bien en el fuckExplorer otra forma para redondear esquinas es con CSS3 pero tampoco se ve en IE además se pixela miserablemente, lo mejor para redondear esquinas, y que se vean bien en todos los navegadores es con imagenes y capas (como en mi web) aca el tutorial con el que aprendi esa forma http://dionysos.webcindario.com/diseno_web_redondeada.php
saludos