Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Guía de Referencia Rápida de CSS 3 [Parte 1]
#1
Hola que tal,hoy quiero compartir con ustedes las propiedades basicas para el CSS 3,asi puedan diseñar su propia web,foro u blog personal,en fin las propiedades son muchas,asi que divido en 8 o 9 partes,para que les quede mejor y no que vean tanta letra en un solo post,me explico,espero que entiendan y os guste...

Selectores de CSS 3

Background

Propiedades:
background-image: Especifica la imagen de fondo de un elemento de bloque.

Parámetros: url(..) | none

Cita:EJEMPLOS:

background-image: url(../images/fondo.jpg);
background-image: none;

background-position: Especifica la posicion de la imagen dentro del elemento bloque.

Parámetros: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right
x-% y-% (ej. 50% 50%)
x-pos y-pos (ej. 10px 20px)

Cita:EJEMPLOS:

background-position: top left;
background-position: 50px 50px;
background-position: 50% 50%;

background-size: Establece el tamaño de la imagen de un elemento en un bloque.

Parámetros: longitud en píxels
longitud en %
auto, cover, contain

Cita:EJEMPLOS:

background-size: 200px 50px;
background-size: 100% 50%;

background-repeat: Indica si la imagen de fondo se repite y si lo hace en horizontal (repeat-x) o vertical (repeat-y).

Parámetros: repeat, repeat-x, repeat-y, no-repeat

Cita:EJEMPLOS:

background-repeat: none;
background-repeat: repeat-x;
background-repeat: repeat-y;

background-attachment:
Establece si la imagen de fondo de un elemento se mantiene fija o se mueve con la pagina.Por defecto se mueve con la pagina.

Parámetros: scroll, fixed

Cita:EJEMPLOS:

background-attachment: scroll;
background-attachment: fixed;

background-origin:
Establece el punto de origen a partir del cual empieza a verse la imagen de fondo. Ésta puede partir del borde del elemento si lo tuviera, del padding o del contenido. Se combina con el selector.

Parámetros: border-box, padding-box, content-box

Cita:EJEMPLOS:

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

background-clip: Determina si la imagen de fondo se extiende hasta el borde o no. Se combina con el selector background-origin.

Parámetros: longitud en píxels
longitud en %
border-box, padding-box, content-box, no-clip

Cita:EJEMPLOS:

background-clip: border-box;
background-clip: 10px 10px;
background-clip: 20% 40%;

background-color: Determina el color de fondo de un elemento utilizando cualquiera de las nomenclaturas específicas para asignar un color.

Parámetros: código de color,transparent

EJEMPLOS:

background-color: #333333;
background-color: transparent;
background-color: rgb (255,0,0)


Border

Propiedades:
border-width: Determina el ancho del borde.
border-top-width
border-right-width
border-bottom-width
border-left-width

Parámetros:
thin, medium, thick
longitud en píxels (ej. 1px)

Cita:EJEMPLOS:

border-width: 5px;
border-top-width: 5px;
border-left-width: 5px;
border-bottom-width: 5px;
border-right-width: 5px;

border-style: Determina el tipo de borde (punteado, sólido, con guiones, doble, etc...).
border-top-style
border-right-style
border-bottom-style
border-left-style

Parámetros: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

Cita:EJEMPLOS:

border-style: 1px solid #000000;
border-bottom-style: 1px solid #000000;

border-color: Determina el color del borde.
border-top-color
border-right-color
border-bottom-color
border-left-color

Parámetros: código de color.

Cita:EJEMPLOS:

border-color:#000000;
border-top-color:#ffffff;
border-bottom-color:#999999;
border-left-color:#666666;
border-right-color:#cc0000;

border-radius: Determina el radio de curvatura del borde. No es compatible con todos los navegadores.
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

Parámetros: longitud en píxels (ej. 5px)

Cita:EJEMPLOS:

border-radius: 5px;
border-top-left-radius:10px;

box-shadow:Determina la sombra de un elemento de bloque. Se indica la longitud, el grado de desenfoque y el color de la sombra. No es compatible con todos los navegadores.

Parámetros:inset
( distancia_horizontal distancia_vertical desenfoque código_color)

Cita:EJEMPLO:

box-shadow: 3px 3px 6px #888888;

____________________________________

Proximos selectores y propiedades: Box Model (Modelo de Caja) y Font (Fuente),espero que os haya gustado estos 2 primeros selectores,saludos!
#2
Está muy bien este post!!

Gracias por compartirlo.

Marco el post como "importante".
WWW
#3
Muchas gracias es un post muy bueno e ilustrativo Guiño
WWW
#4
Gran sonrisa Gran sonrisa Muchisimas gracias, ¿Tienes un .pdf?
#5
Static-X te lusiste, gracias por esta guia sobretodo por los parámetros(no todos los conocen) y la pequeña descripción
Crear tipo de nodo. Agregar campos CCK. Crear Vista. Enjuague. Y repita.
WWW
#6
Gracias, mas claro que el agua no se puede amigo te luciste
#7
Muy bueno el post.
Y bien explicado, me servirá.
#8
muy bueno aprender de esto
#9
muy buen aporte me parece muy util

por cierto se me olvidaba darte +1
#10
muchas gracias por compartir me ayudaste demasiado Lengua


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Tutorial] Trucos con CSS parte I JancoBH 2 366 13-03-2016, 01:00 AM
Último mensaje: JancoBH
  [Aporte] Rails o Django, una guía para decidirse. edisson 4 907 22-10-2015, 12:29 PM
Último mensaje: Minikole
  Guia para desactivar java ante un nuevo agujero 0 day con exploit romeho 7 788 07-09-2014, 03:32 AM
Último mensaje: Luis Felipe Fuentes
  como dominar CSS sin salir del escritorio parte 1 postnix 20 2,148 02-06-2014, 12:33 PM
Último mensaje: piinbook
  50 Herramientas de Diseño Web Gratis! [Parte 3] lukas 2 710 03-07-2013, 09:45 PM
Último mensaje: lukas
  50 Herramientas de Diseño Web Gratis! [Parte 1] lukas 2 455 18-06-2013, 10:59 PM
Último mensaje: fercol
  50 Herramientas de Diseño Web Gratis! [Parte 2] lukas 0 507 18-06-2013, 07:35 PM
Último mensaje: lukas
  Guía para controlar un ataque de DDOS Kevin9908 22 2,355 09-06-2013, 07:15 PM
Último mensaje: ronalsito
  Manual de lenguaje HTML (Parte III) DiosOne 2 990 01-04-2013, 08:49 PM
Último mensaje: DiosOne
  Manual de lenguaje HTML (Parte II) DiosOne 1 645 01-04-2013, 11:03 AM
Último mensaje: global2013



Usuarios navegando en este tema: 1 invitado(s)