tag:blogger.com,1999:blog-52482476562243700682024-03-14T05:46:32.570-07:00Hacker of the WebAnonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.comBlogger39125tag:blogger.com,1999:blog-5248247656224370068.post-420783019905582732014-07-13T19:11:00.002-06:002014-07-13T20:40:00.376-06:00CSS3: Media Queries, tu sitio web dinamicoDespués de mucho tiempo lejos de mi estimado blog, estoy de regreso con algunas propuestas nuevas, poco a poco estaré haciendo algunos cambios. Claro que después de haberlas probado extensamente en mi blog de pruebas. Pero por ahora aquí les dejo algunas opciones que se pueden utilizar en cuanto a la maquetación en nuestro sitio web, en esta ocasión hablaremos de la regla @media, que podemos Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com5tag:blogger.com,1999:blog-5248247656224370068.post-7605957738431268872011-07-09T19:45:00.005-06:002011-07-10T07:13:17.685-06:00Background o Fondo de página aleatorioQue pasa cuando diseñamos varios fondos para nuestro sitio y no nos decidimos por cual colocar, para esas situaciones tenemos dos opciones: escoger una imagen de fondo y resignarnos o podemos utilizar un sistema que coloque varios fondos de manera aleatoria.
El concepto consiste en que cada vez que alguien ingrese en nuestra página web le aparezca una imagen de fondo diferente. Imágen que es Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com13tag:blogger.com,1999:blog-5248247656224370068.post-89675607839394596732011-07-04T20:23:00.002-06:002015-02-07T16:42:57.706-07:00CSS3: Propiedad Transition, crea animaciones solo con CSSPara nosotros los creadores de la magia en internet, los que hacemos posible que los internautas pasen un buen (o mal) rato navegando por internet, para nosotros que siempre estamos tratando de llevar lo mejor a nuestros amigos lectores, hay una buena noticia. Gracias a los ultimos desarrollos del lenguaje CSS podremos ofrecer una mejor experiencia en nuestros sitios con el menor esfuerzo.
EstaAnonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com18tag:blogger.com,1999:blog-5248247656224370068.post-19901264763517747212011-07-01T09:01:00.004-06:002011-07-04T21:01:14.881-06:00CSS3: Cambiar color de fondo dinámicamenteAhora seguimos creando estas animaciones con CSS3 puro. En la categoría de CSS3 puedes ver todas las nuevas propiedades que tiene la tercera versión del CSS. Esta vez veremos como cambiar el color de fondo de cualquier elemento de nuestra página web. Aqui el ejemplo:
Texto de ejemplo
Muy pocos sitios web utilizaban este tipo de efectos con Javascript, debido a la dificultad del Javascript para Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com6tag:blogger.com,1999:blog-5248247656224370068.post-49149491032863687232011-06-27T16:41:00.001-06:002011-07-04T21:01:14.882-06:00CSS3: Agrandar imágenes ó texto al pasar el mouseEn esta ocasión explicaré como crear un elegante efecto con CSS3 para las imágenes, texto o cualquier parte de tu sitio web o blog. Se trata de hacer que cuando el mouse de nuestras visitas pasen por encima de alguna imagen o texto, se agrande animadamente, un ejemplo lo explica mejor:
Este mismo efecto es el que puedes ver en la cabecera de Santyweb y se ve bastante bien, tanto que, podría Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com13tag:blogger.com,1999:blog-5248247656224370068.post-37396551521008625082011-06-17T18:21:00.002-06:002011-07-04T21:01:14.883-06:00CSS3: Anima todos los enlaces en tu BlogLos enlaces en una página web no siempre son bonitos, claro que se puede cambiar esto con un que otro efecto con pesados algoritmos Javsacript. Pero sin duda CSS3 es la manera mas rápida y facil de lograr crear un efecto con los enlaces en nuestro blog, mira un ejemplo:
Un enlace
Se ve bastante bien, solo necesitamos de CSS3 y lo mejor de todo es que Firefox, Chrome y Opera soportan esta Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com7tag:blogger.com,1999:blog-5248247656224370068.post-89656454368896497542011-06-12T13:45:00.003-06:002011-06-12T13:48:28.925-06:00CSS3: Reflejos en imágenes, elementos y objetosSeguimos hablando de las nuevas propiedades que tendrá el CSS3 y ahora toca el turno a una propiedad que nos permite crear un efecto de reflejo a cualquier elemento de nuestro blog o sitio web. Solo con una linea de código tendremos un espectacular efecto reflejo.
Los navegadores que soportan este efecto son Chrome y Safari. Así que extremen sus precauciones al utilizar este efecto, usenlo Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com0tag:blogger.com,1999:blog-5248247656224370068.post-68483724917815046542011-06-03T05:58:00.004-06:002011-07-04T21:01:14.884-06:00CSS3: Rotar/Girar elementos al pasar mouse o ratonAlguna vez en toda tu vida de webmaster o diseñador web, ¿te imaginaste que algún día podrías utilizar CSS para crear una animación?. Yo tampoco(si la respuesta fue no xD) pero ahora es posible, gracias a CSS3 y a sus nuevas características podemos fácilmente prescindir de flash u otras tecnologías.
El CSS desde la llegada de su tercera versión, ha dejado de ser unas simples reglas para Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com12tag:blogger.com,1999:blog-5248247656224370068.post-77472037719911658552011-05-31T20:36:00.001-06:002011-06-01T14:50:18.051-06:00CSS3: Efecto 3D en TextoUna de los puntos fuertes de este mejorado CSS3, es sin duda y entre otras cosas el aspecto del texto. Ya que mediante esta herramienta, podemos fácilmente manipular el aspecto del texto sin necesidad de utilizar imágenes. Por ejemplo, aplicar un efecto 3D en algún texto:
Esto se logra gracias a la nueva propiedad 'text-shadow' que ya es soportada oficialmente en CSS3, es decir, que es Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com7tag:blogger.com,1999:blog-5248247656224370068.post-73138435539919551022011-05-25T03:23:00.003-06:002011-05-25T10:12:09.147-06:00Generadores de CSSCuando empezamos por primera vez a sambutirnos en este lenguaje tan abstracto. Al final del día termina por abrumarnos tantas propiedades que podemos modificar a cada elemento de una página web.
Es por eso que surgen este tipo de generadores, que nos permiten ovlidarnos de los códigos para manipular algunas propiedades CSS mediante interfaces visuales.
De entre los generadores mas populares Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com2tag:blogger.com,1999:blog-5248247656224370068.post-76043391605064716192011-05-23T21:01:00.000-06:002011-05-23T21:01:23.276-06:00CSS: Imagenes con pie de fotoAgregar imágenes en nuestro sitio o blog, es algo sencillo. Pero al tratar de colocarle un texto descriptivo a la imagen la tarea se complica bastante. En especial cuando se quiere que el texto permanezca junto con la imagen, ya sea por debajo o por arriba.
Es por eso que a lo largo de esta entrada veremos un sencillo pero útil recurso con el cual podremos agregar imágenes en nuestro sitio/Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com7tag:blogger.com,1999:blog-5248247656224370068.post-87598338757602227862011-01-22T01:57:00.004-07:002011-01-22T02:16:06.610-07:00WebFonts: Usar cualquier tipografia en nuestra webMuchas veces los diseñadores o webmasters, al realizar un diseño o modificación a nuestra página web casi siempre nos topamos con elegir el tipo de fuente para determinadas áreas de nuestro diseño sin que nuestros visitantes se sientan incómodos leyendo nuestros posts o noticias.
Pero después de elegir la que mejor se adapta a nuestro diseño, sin sobrecargar la vista. Nos llevamos la sorpresa Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com4tag:blogger.com,1999:blog-5248247656224370068.post-18581855784941133872010-01-22T09:33:00.005-07:002011-05-14T22:13:26.722-06:00CSS3: Sorprendentes botones para formularios Si bien los formularios son de gran utilidad para que los visitantes de un determinado sitio web, puedan interactuar con el administrador o con la misma página. Pero siendo honestos la mayoría de estos formularios tienen aspecto horrible, aunque no deje de funcionar como se espera.Es ahí donde interviene la creatividad, una herramientas y una taza de café(esta ultima es opcional :P). Las Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com4tag:blogger.com,1999:blog-5248247656224370068.post-82040898078138828532010-01-19T09:33:00.004-07:002011-05-14T22:13:26.723-06:00CSS3: Box Shadow (Sombras)Otra propiedad sobresaliente y novedosa en la nueva version de CSS, la numero 3, es: Box-ShadowLa sintaxis de esta propiedad es la misma que en Text-ShadowPero a diferencia de Text-Shadow, Box Shadow no es muy generica y por el momento es necesario colocar un "-moz","-khtml","-webkit" para que funcione perfectamente en todos los navegadores excepto IE: -khtml-box-shadow: 0 0 3px #333;Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com1tag:blogger.com,1999:blog-5248247656224370068.post-75254685354465454382010-01-16T21:21:00.017-07:002011-05-14T22:13:26.724-06:00CSS3: Varias imagenes de fondo(BackGround)CSS es una herramienta muy potente, que ha ido evolucionando siendo CSS3 la ultima versión, en la cual se agregaron y se eliminaron características. Tambien se modificaron, como es el caso de la propiedad Background la cual admite mas de una imagen, sin tener que agregar capas flotantes, el resultado es el siguiente:Este es el efecto!!Si no lo observas es el siguiente:Código HTML:<div>Este Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com4tag:blogger.com,1999:blog-5248247656224370068.post-63418630735179538832010-01-14T21:00:00.008-07:002010-01-18T12:18:28.912-07:00CSS3: Interesantes efectos en textoLa Propiedad Sombras o Shadow.Esta propiedad fue propuesta desde CSS2 pero como sea esta disponible en CSS3 y es compatible con:Google Chrome 3+
Mozilla Firefox 3.1+
Opera 9.5+
Safari 3+
[Los que soporten estándares]La sintaxis de la propiedad es la siguiente:
X-Ofsset: Define si la sombra se muestra a la derecha, valor positivo. O si se muestra arriba, valor negativo.
Y-Ofsset: Define si la Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com2tag:blogger.com,1999:blog-5248247656224370068.post-34094132809382220582009-10-12T21:00:00.001-06:002009-10-12T21:08:46.589-06:00CSSTXT; Manipular el estilo de tus textos Herramienta que permite manipular de manera muy sencilla las diversas propiedades que tiene un texto por defecto en CSS. Esta forma de manipular estilos CSS es tan sencilla que cualquier persona puede lograr los efectos que quiera en cuestión de algunos minutos.En la página dan los códigos fuente CSS que el usuario va creando conforme manipula los controles. Con lo que para colocar esos estilos Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com17tag:blogger.com,1999:blog-5248247656224370068.post-38203512658884348702009-06-27T00:00:00.010-06:002009-09-19T14:46:08.628-06:00Padding y Margin en CSSEn el lenguaje CSS existen estos dos atributos para cada elemento html en una página web, y debido a que los funcionamientos de estos atributos es un tanto similar puede existir una alguna confusión a la hora de utilizarlos. Si bien esta claro que cada atributo crea un espacio alrededor del elemento pero cada uno lo hace a su manera.Padding.- Este atributo crea un espacio vacío dentro del Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com1tag:blogger.com,1999:blog-5248247656224370068.post-30428937260841521182009-06-20T15:00:00.003-06:002009-09-19T14:46:27.847-06:00Tipografia en CSSComo ya antes había publicado, el uso de fuente va muy ligado a la página y al tema de la misma, siempre sin descuidar el tamaño de la fuente. Aquí veremos como implementar la fuente de tu elección en una página web mediante CSS.Al definir una fuente en CSS, para un selector cualquiera, se utiliza la siguiente propiedad o atributo:selector { font:oblique small-caps 900 12px/14px arial;}Que puedeAnonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com0tag:blogger.com,1999:blog-5248247656224370068.post-4019393570706224352009-05-12T07:45:00.004-06:002009-11-22T04:55:20.248-07:00Cross-Browser(paginas compatibles con cualquier navegador) con IE8.jsY es que, en lo que va del 2009, Mozilla Firefox que es un navegador gratuito y que también esta disponible para Windows, Mac y Linux. Ha incrementado su cuota de uso, frente al navegador con el que todos crecemos, Internet Explorer, y que para su uso y/o actualizar es necesario tener Windows original pero sigue teniendo la delantera.Pero la situación no es comparar a estos dos navegadores, pues Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com1tag:blogger.com,1999:blog-5248247656224370068.post-48351988342592190182009-05-11T08:00:00.002-06:002011-01-23T15:56:46.960-07:00Manual avanzado de CSSYa antes habíamos explicado un poco y básicamente, lo que es el CSS, los elementos que componen el lenguaje, así como también los diferentes tipos de selectores y algunas otras cosas. Algo meramente básico, pero en esta ocasión explicaremos algunas funcionalidades mas avanzadas.Jerarquía.La jerarquía es uno de los conceptos básicos que necesitamos para poder manejar CSS en su máxima expresión ya Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com7tag:blogger.com,1999:blog-5248247656224370068.post-38175787598916873872009-04-21T21:11:00.002-06:002011-01-23T16:04:43.012-07:00Manual basico de CSSQue es, en si, el CSS?Son las siglas de Hoja de estilos en cascada(Cascading Style Sheet), lenguaje desarrollado con fines de estilizar la estructura HTML de las páginas, es decir, separar la presentación de la estructura en la página. El funcionamiento de dicho lenguaje es darle formato a las estructuras de la página mediante unas simples reglas, entre las cuales están: Tamaño de texto, tipo de Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com2tag:blogger.com,1999:blog-5248247656224370068.post-9010484545074715012009-03-21T09:16:00.005-07:002010-01-16T22:02:24.052-07:00Propiedades del Fondo (Background) en CSSEl código en CSS(Hoja de estilos en cascada), es bastante interesante, los bordes en CSS son bastantes sencillos de manipular y además le dan un aspecto mas personalizado al web/blog.Existen varias opciones para colocar un fondo en alguna página en específico, la primera es en la que se introducen todos los datos en una misma linea:En CSS:background:{imagen}{repeticion}{posicion}{fijacion}{color}Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com2tag:blogger.com,1999:blog-5248247656224370068.post-6157854519117507902009-03-03T00:20:00.001-07:002009-03-07T12:58:37.098-07:00Ampliar imágenes con mouse y CSSYa habíamos explicado un código para ampliar imágenes con el mouse y Javascript y gracias a el comentario de Italo Disco Style, que preguntaba si se podía traducir a ese código Javascript a CSS. Lo cual dio resultado a lo siguiente.El inconveniente aqui es que no usaremos javascript, por lo que necesitaremos definir cada uno de los ID de cada imagen.El código CSS es el siguiente:#img { width:Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com4tag:blogger.com,1999:blog-5248247656224370068.post-4657018201457697192009-02-21T22:24:00.005-07:002009-06-18T21:42:43.665-06:00Efectos con los links del blogLa mayoría de los links del blog se ven bastante iguales, y cuando están en una lista grande de links, ni se sabe cuales has visitado y cuales aún no./!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.[1] Los códigos a continuación se agregan en Diseño>Anonymoushttp://www.blogger.com/profile/00151232359275154806noreply@blogger.com2