Cacher is the code snippet organizer for pro developers

Bordes

Existen diferentes tipos de bordes en CSS y las mas comunes con las siguientes

border

Permite especificar todas las propiedades de un borde en una sola declaracion

border-color

Especifica el color de borde por sus cuatro lados

border-style

Especifica el estilo del borde

border-width

Especifica el grueso del borde

Borde Redondeado

Este nos permite hacer un efecto en las orillas de los bordes como si fuera un medio circulo o lo mas redondo que quieras.

#rounded{
            border: 10px solid; //indica el ancho del borde
            border-radius: 10px;// indica que tan esquinadas quieres las esquinas 
            padding: 60px; //indica el ancho del interior de la caja donde se encuentra el texto
}

Borde Sombreado

Este nos permite darle sombra a todo el borde y puede manipularse el color, grosor y fondo del mismo

Su sintaxis es la siguente:

box-shadow: sombra-h sombra-v difuminado tamaño color comportamiento

sombra-h: Indica la posición horizontla de la sombra

sobra-v: Indica la posición vertical de la sombra

difuminación Indica la claridad de la difuminacion

tamaño indica el tamaño de la sombra

color indica el color de la sombra

comportamiento Indica si la sombra se proyecta desde el elemento hacia afuera con el valor outset o del elemento hacia adentro adenro con el valor inset

#shadow{
            background-color: orange; //indica el color del fondo(solo del texto del borde)
            box-shadow: 10px 10px 5px #888888; 
}     
      //el primer 10px indica la distacia entre la sobra y el texto de izquierda a derecha 
      //el segundo 10px inidca el desplazamiento de la sonbra de arriba hacia abajo 
      //el tercer 5px indica la difuminación de la sobra 
      //el cuarto #888888 indica el color de la sombra 

Borde con imagen

En este podemos hacer que una imagen sea nuestro borde con la sintaxis siguiente

border-image: imagen arriba derecha abajo izquierda comportamiento1 comportamiento2

imagen: Determina la ruta donde se encuentra la imagen

arriba,abajo,izquierda,derecha: Indica donde se harán los cortes de la imagen base de afuera hacia dentro. Y al indicar un solo valor se tomará como si los 4 fueran iguales.

comportamiento1, comportamoento2: Rara vez coinciden con largo y alto del borde por lo que tienes la opcion de estirar o repetir la imagen hasta llenar el largo y alto del borde para esto se puede utilizar el valor repeat para repetir la imagen o stretch para estirarla.De la misma manera que con las propiedad anterior si nada mas se da un valor se tomara como si los dos tubieran el mismo.

Existen 3 tipos de comportamiento

stretch (estirar)

repeat (repetir)

round (repetir y ajustar)

#image_repeat{
            border-width: 10px;
            border-image: url(borde.png) 30 repeat; 
}

Gradiantes

Es una secuencia de al menos dos colores(una difuminacion o combinacion de colores). los tipos de gradianes mas comunes son:

linear

Donde el cambio de un color a otro fluye a lo largo de la linea

//Esto es para FireFox
background: -moz-linear-gradient(orientación, color-ini stop-ini, color-N stop-N)

//Es lo mismo para los otros navegadores solo cambia su prefijo al iniciar por ejemplo 
//Chrome y Safari se utiliza -webkit-
//Opera -o-

Orinetación: Los valores pueden ser top,bottom,left,right aunque tambien se puede utilizar el anulo por ejemplo 90deg

color-ini: El color con el que indica el gradieante

stop-ini: A partir de qué punto se debe comenzar el efecto de desvanecimiento(%)

color-N El color con el que continúa el gradiente

stop-N Desde qué punto se debe detener el efecto de desvanecimiento del color actual par acontinuar con color sólido

radial

Donde un color parte de un punto central y los siguientes colores se alejan circularmente de ese punto

background: -moz-radial-gradient([posición], [forma || tamaño], color-ini [stop-ini], color-N [stop-N]);

Posición: Párametros opcionales que definen la posicion X,Y del punto central del inicio para el grdiante y el primer color.La posición es relativa al contenedor del gradiante

forma: Parametro opcional que indica si la forma dle gradiante sera un círculo(circle) o una elipce (ellipse)

tamaño: Parametro opcional que toma uno de los siguientes valores: closest-side, closest-corner, farthest-side, farthest-corner, contain o cover todas estos valores hacen referencia al contenedor.

Manipulación de Texto

En este apartado veremos los comandos mas comunes para modificar el texto

Color

Modifica el color del texto

.color{
    color:red;
}

letter-spacing

Incrementa o decrementa la la distancia entre caracteres de un texto

.letter_spacing{  
    letter-spacing: 5px;
}

text-aling

Especifica la alineación hotizontal de un texto

.text-_lign{
    text-align: center;
}

text-decoration

Indica la decoración de un texto. Los valores mas utilizados son: none, underline, overline, y line-through

.underline{
    text-decoration:underline;
}//pasa una linea por debajo del texto

.overline{
    text-decoration: overline;
}//pasa una linea por arriba del texto

.through{
    text-decoration: line-through;
}//tacha el texto

vertical-align

Especifica la alineación vertical del texto.

.vertical_align{
    vertical-align: top;
}