Notis

Síguenos en Twitter: @teoria_blogger | Para tu blog, recomendamos: que el diseño no esté cargado, que las entradas no sean muy largas y que contengan imágenes. Para más consejos Click aquí | Pon un link de Teoría Blogger en tu blog!!! Click aquí. | Para cualquier duda o problema sobre tu blog, escríbenos en nuestro formulario de contacto.
Mostrando entradas con la etiqueta colores. Mostrar todas las entradas
Mostrando entradas con la etiqueta colores. Mostrar todas las entradas

domingo, 2 de junio de 2013

Crear degradados, pero... ¿sin imágenes?

17:33  Teoría Blogger   2 comentarios

Los degradados en internet, ya son invisibles. Pero no porque no estén, todo lo contrario. Son invisibles porque ya estamos demasiado acostumbrados a ellos y no podemos detenernos a pensar en que un fondo tiene un degradado, por ejemplo.
Pero nosotros somos parte de los que hacemos la web, por lo que este tema sí nos debe interesar y no nos tiene que parecer invisible.
Antes
Para crear un degradado, teníamos que abrir en nuestro ordenador un programa de creación de imágenes (como el Photoshop) y crear el degradado en formato de imagen (png, jpg, gif). Lo cual nos costaba, además de trabajo, un poco de tiempo.
Hoy
Existen muchas aplicaciones y páginas que nos ayudan a crear el degradado sólo copiando y pegando un código de CSS3 y son muy fáciles de usar!
Antes de empezar a explicar, quiero que vean el resultado de lo que les proponemos en este post haciendo click en el enlace que los lleva al final del post. Click aquí para ver los degradés.
Crear degradados con CSS3 ¿Qué es CSS3?
CSS3 es la última versión de CSS (Un lenguaje para establecer estilos a las páginas HTML).
¿Cúal es la diferencia entre la última y la anterior versión?
Es una pregunta amplia, es decir, se le puede dedicar todo un post acerca de esto. Pero en rasgos generales, CSS3 nos permite hacer muchos más cambios en cuanto al estilo propio de una web, como por ejemplo las fuentes, los colores transparentados, los bordes, entre otros. Pero lo que hay que remarcar es que CSS3 nos permite tener un gran resultado en cuanto a efectos visuales sin necesidad de crear imágenes. El ejemplo de esto es justamente, el degradado.

Crear degradados sin imágenes

Empezamos por decir que lo siguiente puede llegar a ser muy fácil o muy difícil, depende del conocimiento que tengan acerca de CSS (sin discriminar versión), de cualquier forma pueden ver este post que puede servirles de ayuda si ponen atención y se concentran.
Dicho esto:
  1. Vamos al siguiente link: Ultimate CSS Gradient Generator - ColorZilla.com
  2. En la pantalla vemos un cuadro con degradés defaults, estos son creados por los de ColorZilla, podemos elegir uno si queremos.
  3. Pero también puedes crear tus propios degradés para que se adapte a tu necesidad. Es muy fácil, basta con saber qué colores hay que usar en la barra de la siguiente imagen. También podés elegir la opacidad de los colores y hacer un degradé con eso:
  4. Bueno, una vez elegido el degradé, vamos a los códigos. A la derecha de la pantalla aparece un textarea en el que aparece el código CSS del degradé. Vamos a copiar y pegar este código y lo pones en un selector en código CSS. Por ejemplo:
    .EjemploDeSelector{
    background: #f6f8f9; /* Old browsers */
    background: -moz-linear-gradient(top,  #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3), color-stop(100%,#f5f7f9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
    }

Preguntas

¿Cuáles son las ventajas de no usar una imagen?
Las ventajas son que no tienes que crear una imagen por tu cueta, lo cual ahorra tiempo y además pesa mucho menos que poner una imagen.
¿Qué uso se le da a esto, es decir, para qué tipo de cosas serviría en una web?
La respuesta es: sólo se usa para fondos. Pueden ser para cualquier objeto en tu web que posea fondo (header, main, sidebar, footer, inclusive body).
¿Funciona para todos los navegadores?
Sí, para los más usados con sus últimas versiones sí (como por ejemplo: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, NetScape, Safari).
¿Se puede usar este degradé para letras y links?
No, es sólo para fondos.

Ejemplos 

Con esta aplicación se pueden crear "cajas" con fondos como estos:
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!

Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!

viernes, 12 de agosto de 2011

Colores Hex, RGB y nombre (lista completa)

23:05  Teoría Blogger   Comentá!

Muestra
HexRGBNombre

#000000
rgb(0,0,0)black

#FFFFFF
rgb(255,255,255)white

#0000FF
rgb(0,0,255)
blue

#00FF00
rgb(0,255,0)lime

#FFFF00
rgb(255,255,0)yellow

#00FFFF
rgb(0,255,255)aqua - Cyan

#FF0000
rgb(255,0,0)red

#008000
rgb(0,128,0)green

#2E8B57
rgb(46, 139, 87)
seagreen

#00FF7F
rgb(0, 255, 127)
springgreen

#FFD700
rgb(255,215,0)gold

#DAA520
rgb(218, 165, 32)
goldenrod

#DEB887
rgb(222, 184, 135)
burlywood

#F0E68C
rgb(240, 230, 140)
khaki

#F5F5DC
rgb(245, 245, 220)
beige

#808000
rgb(128, 128, 0)
olive

#FF00FF
rgb(255,0,255)magenta - fuchsia

#FF69B4
rgb(255, 105, 180)
hotpink

#DA70D6
rgb(218, 112, 214)
orchid

#FFC0CB
rgb(255, 192, 203)
pink

#FFA500
rgb(255,165,0)orange

#008080
rgb(0, 128, 128)
teal

#40E0D0
rgb(64, 224, 208)
turquoise

#7FFFD4
rgb(127, 255, 212)
aquamarine

#87CEEB
rgb(135, 206, 235)
skyblue

#800000
rgb(128, 0, 0)
maroon

#A52A2A
rgb(165, 42, 42)
brown

#DC143Crgb(220, 20, 60)crimson

#808080
rgb(128, 128, 128)
gray - grey

#708090
rgb(112, 128, 144)
slategrey - slategray

#E6E6FA
rgb(230, 230, 250)
lavender

#C0C0C0
rgb(192, 192, 192)
silver

#EE82EE
rgb(238, 130, 238)
violet

#800080
rgb(128, 0, 128)
purple

#4B0082
rgb(75, 0, 130)
indigo

#FA8072
rgb(250, 128, 114)
salmon

#F5F5F5
rgb(245, 245, 245)
whitesmoke

#F5DEB3
rgb(245, 222, 179)
wheat

#FF6347
rgb(255, 99, 71)
tomato

#D8BFD8
rgb(216, 191, 216)
thistle

#D2B48C
rgb(210, 180, 140)
tan

#4682B4
rgb(70, 130, 180)
steelblue

#FFFAFA
rgb(255, 250, 250)
snow

#6A5ACD
rgb(106, 90, 205)
slateblue

#9ACD32
rgb(154, 205, 50)
yellowgreen

#A0522D
rgb(160, 82, 45)
sienna

#FFF5EE
rgb(255, 245, 238)
seashell

#F4A460
rgb(244, 164, 96)
sandybrown

#8B4513
rgb(139, 69, 19)
saddlebrown

#4169E1
rgb(65, 105, 225)
royalblue

#BC8F8F
rgb(188, 143, 143)
rosybrown

#B0E0E6
rgb(176, 224, 230)
powderblue

#000080
rgb(0, 0, 128)
navy

#191970
rgb(25, 25, 112)
midnightblue

#C71585
rgb(199, 21, 133)
mediumvioletred

#48D1CC
rgb(72, 209, 204)
mediumturquoise

#00FA9A
rgb(0, 250, 154)
mediumspringgreen

#7B68EE
rgb(123, 104, 238)
mediumslateblue

#9370DB
rgb(147, 112, 219)
mediumpurple

#BA55D3
rgb(186, 85, 211)
mediumorchid

#0000CD
rgb(0, 0, 205)
mediumblue

#778899
rgb(119, 136, 153)
lightslategray

#20B2AA
rgb(32, 178, 170)
lightseagreen

#FFA07A
rgb(255, 160, 122)
lightsalmon

#90EE90
rgb(144, 238, 144)
lightgreen

#FAFAD2
rgb(250, 250, 210)
lightgoldenrodyellow

#E0FFFF
rgb(224, 255, 255)
lightcyan

#ADD8E6
rgb(173, 216, 230)
lightblue

#1E90FF
rgb(30, 144, 255)
dodgerblue

#696969
rgb(105, 105, 105)
dimgray

#00BFFF
rgb(0, 191, 255)
deepskyblue

#9400D3
rgb(148, 0, 211)
darkviolet

#00CED1
rgb(0, 206, 209)
darkturquoise

#2F4F4F
rgb(47, 79, 79)
darkslategray

#483D8B
rgb(72, 61, 139)
darkslateblue

#E9967A
rgb(233, 150, 122)
darksalmon

#8B0000
rgb(139, 0, 0)
darkred

#9932CC
rgb(153, 50, 204)
darkorchid

#FF8C00
rgb(255, 140, 0)
darkorange

#556B2F
rgb(85, 107, 47)
darkolivegreen

#8B008B
rgb(139, 0, 139)
darkmagenta

#BDB76B
rgb(189, 183, 107)
darkkhaki

#006400
rgb(0, 100, 0)
darkgreen

#A9A9A9
rgb(169, 169, 169)
darkgray

#B8860B
rgb(184, 134, 11)
darkgoldenrod

#008B8B
rgb(0, 139, 139)
darkcyan

#00008B
rgb(0, 0, 139)
darkblue

#8FBC8F
rgb(143, 188, 143)
darkseagreen

#FFF8DC
rgb(255, 248, 220)
cornsilk

#6495ED
rgb(100, 149, 237)
cornflowerblue

#FF7F50
rgb(255, 127, 80)
coral

#D2691E
rgb(210, 105, 30)
chocolate

#7FFF00
rgb(127, 255, 0)
chartreuse

#5F9EA0
rgb(95, 158, 160)
cadetblue

#8A2BE2
rgb(138, 43, 226)
blueviolet

#F0FFFF
rgb(240, 255, 255)
azure

#FAEBD7
rgb(250, 235, 215)
antiquewhite

#F0F8FF
rgb(240, 248, 255)
aliceblue

Cómo aplicarlos en los códigosPara empezar, estos colores se usan sólo en propiedades en el que se necesitan colores.
Tales como:
En cualquiera de los casos, debemos copiar el cógido Hex, rgb o el nombre del color como el valor de la propiedad:
<style>
h1 {
color:#0000FF;
}
h1 {
background:rgb(0,0,255);
}
h1 {
border-color:blue;
}
</style>
Todo lo escrito en azul es el valor de la propiedad.
Ahora mostraré los mismos ejemplos que los anteriores, pero aplicado a HTML:
<h1 style="color:#0000FF;">Ejemplo</h1>
<h1 style="background:rgb(0,0,255);">Ejemplo</h1>
<h1 style="border-color:blue;">Ejemplo</h1>