Posts etiquetados con ‘ css3 ’

Con Border-radius.htc podemos crear bordes redondeados para todos los elementos html (en especial para los DIV’s) es una simple librería que genera el borde automáticamente en cualquier navegador como: FF, Chrome, Safari, IE6, IE7 e IE8, aun que ya no lo necesitamos para las ultimas versiones de Firefox, Chrome o Safari y tampoco con IE9.

Su uso es sencillo:

.bordes {
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   behavior:url(border-radius.htc);
}

Como ven usamos la propiedad de border-radius del CSS3 para generar el borde y automáticamente la librería reconoce si es IE6 o IE7 para ejecutarla.

Entonces solo nos queda agregar la clase “bordes” (pueden cambiarlo por cualquiera).

<div class="curved">Curvd div</div>

Y el resultado sería este:

Documentación y Descarga | Border-radius.htc

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Este es un Css Reset interesante para html5, aún nose si es tan útil como uno piensa, por que cabe recordar que (por mala suerte la mayoria de los usuarios de internet aún usan Internet Explorer 6, 7 u 8) el Navegador más usado por ahora sigue siendo Internet Explorer, el único que se salva es la versión 9 de este navegador, así que es algo complicado usar la mayoría de las etiquetas de html5. Pero bueno nunca esta de más ver que novedades existe entre los famosos resets de CSS.

/************************************************************************
html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/
************************************************************************/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

/************************************************************************
miscellaneous fixes
************************************************************************/

/* IE7 image resizing fix */
.ie7 img { -ms-interpolation-mode: bicubic; }

/* font normalization across browsers */
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }

/* Webkit font smoothing */
html { -webkit-font-smoothing: antialiased; }

/* Formatting quoted text */
pre {
padding: 15px;
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

/* Clickable inputs */
label, input[type=button], input[type=submit], button { cursor: pointer; }

/* align checkboxes, radios, text inputs with their label */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Force scrollbar */
html { overflow-y: scroll; }

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Como no deja de sorprender el poderoso CSS3, ahora les traigo un ejemplo de como hacer un simple triángulo con sólo CSS3.

(el ejemplo que pongo es una imagen)

.triangulo {
    border-color: transparent transparent #555555;
    border-style: solid;
    border-width: 0 105px 105px;
    height: 0;
    width: 0;
}

En la página del autor existen mas ejemplos increibles.

Demo y Documentación | Creating Triangles in CSS

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Este documento que ponemos a disposición de nuestra comunidad explica la aplicación de fuentes en nuestros sitios Web. Cada uno de los ejemplos son detallados y analizados. Les invitamos a que visiten el sitio y vean estos ejemplos.

Estos ejemplos son muy interesantes para tomarlos en cuenta.

Enlace: sixrevisions.com/css/css-typography-03

Cesar Jaldin ha escrito 68 entradas en este sitio.

Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.

Microsoft, pone a disposición del mundo entero su nuevo navegador. Este lanzamiento fue muy esperado ya que  Internet Explorer 9 es el primero que hace Microsoft con soporte para el estándar HTML5 y CSS3. Se tendrá grandes beneficios para los que creamos y diseñamos sitios WEB.

Internet Explorer

Descarga | Internet Explorer 9

Cesar Jaldin ha escrito 68 entradas en este sitio.

Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.

Buenos días, no estoy muy seguro de este post, si tiene alguna utilidad o algo así, sin embargo, lo dejo a su consideración.

Si, como dice el titulo Son juegos realizados en HTML5, con la ayuda de su casi inseparable dúo. Canvas y JavaScript.

Bueno solo les mostraré el que jugue. Y se trata de

Agent 008 Ball

Agent 008  BallAgent 008 Ball es un juego que luce fenomenal. Es un juego de billas, donde el objetivo es meter la mayor cantidad de bolas en las butacas, antes de que acabe el tiempo.

Lo Jugue, y si no fuera por el tiempo, lo seguiria jugando.

Entre lo destacable de este juego es sus gráficas, muy limpias. Con un buen nivel de detalle.

Su jugabilidad es intuitiva. No te costará mucho dominarlo.

Según la fuente donde saque este post afirma: “Cuando se lanzó Internet Explorer 9, Microsoft quisó crear una serie de juegos que mostrarán el nivel de expieriencia que su nuevo navegador puede proporcionar. Uno de ellos es este videojuego.” Interesante, el Internet Explores 9, habrá que ver más de este navegador.

Bueno eso es todo, si les interesa les doy la fuente de este artículo, donde nos muestra otros juegos también interesantes.

Fuente: baluart.net

Cesar Jaldin ha escrito 68 entradas en este sitio.

Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.

Hoy les mostraré una galería que destaca por su efecto de transición.

El plugin del que les hablo es un slide de http://jquery.malsup.com/cycle/

Como siempre la forma de usarlo no es nada raro. Se incluyen en las cabeceras de la página el core de JQuery y el plugin (en el orden mencionado). Por mi parte estoy haciendo uso de la libreria JQuiery: jquery-1.4.2.min.

Dentro del código html tenemos el siguiente código.

<section id="gallery">
  <div class="pics">
     <img src="images/repuestos_importadora_lopez.jpg" width="439" height="329" alt="importadora Lopez">
     <img src="images/repuestos_importadora_lopez2.jpg" width="439" height="329" alt="importadora Lopez">
     <img src="images/repuestos_importadora_lopez3.jpg" width="439" height="329" alt="importadora Lopez">
     <img src="images/repuestos_importadora_lopez4.jpg" width="439" height="329" alt="importadora Lopez">
     <img src="images/repuestos_importadora_lopez5.jpg" width="439" height="329" alt="importadora Lopez">
  </div>
  <a href="#" id="prev"></a>
  <a href="#" id="next"></a>
</section>

De hecho, como ven la galería en si esta dentro del div, si se muestra una etiqueta html5, es debido a cuestiones de organización.

La parte que ejecta el efecto es el siguiente:

<script type="text/javascript">
  $(document).ready(function() {
    $('.pics').cycle({
      fx: 'toss',
      next:   '#next',
      prev:   '#prev'
    });

</script>

Como vereis se define el contenedor de las imagenes como parámetro; en este caso es la clase pics, y hace la llamada a la funcion cycle. No es dificil darse cuenta que los parametros son refereidos al efecto en si y a los botones de navegación.

Este plugin tene nas opciones solo es que vean la pagina principal del plugin.

Una última cosa mas, ustedes tienen la libertad de elegir la presentación con las reglas que apliquen a la clase pics. En todo caso les muestro como esta ahora la presentación del CSS

#gallery {
	float:left;
	width:532px;
	height:384px;
	}
	.pics {
		width:  439px;
		height: 329px;
		padding: 0;
		margin:  0;
		position:relative;
		margin:23px 0 0 36px;
		} 

	.pics img {
		display:block !important;
		position:absolute;
		width:  439px;
		height: 329px;
		top:  0;
		left: 0;
		border:5px solid #fff;
		border-radius:2px;
		-moz-border-radius:2px;
		-webkit-border-radius:2px;
		box-shadow:0 0 3px rgba(0, 0, 0, .2);
		-moz-box-shadow:0 0 3px rgba(0, 0, 0, .2);
		-webkit-box-shadow:0 0 3px rgba(0, 0, 0, .2);
		} 

	.pics img:nth-child(2) {
		-moz-transform: rotate(2.5deg);  /* FF3.5+ */
        -o-transform: rotate(2.5deg);  /* Opera 10.5 */
		-webkit-transform: rotate(2.5deg);  /* Saf3.1+, Chrome */
				}
	.pics img:nth-child(3) {
		-moz-transform: rotate(-2.5deg);  /* FF3.5+ */
        -o-transform: rotate(-2.5deg);  /* Opera 10.5 */
		-webkit-transform: rotate(-2.5deg);  /* Saf3.1+, Chrome */
				}
	.pics img:nth-child(4) {
		-moz-transform: rotate(3.5deg);  /* FF3.5+ */
        -o-transform: rotate(3.5deg);  /* Opera 10.5 */
		-webkit-transform: rotate(3.5deg);  /* Saf3.1+, Chrome */
				}
	.pics img:nth-child(5) {
		-moz-transform: rotate(-3.5deg);  /* FF3.5+ */
        -o-transform: rotate(-3.5deg);  /* Opera 10.5 */
		-webkit-transform: rotate(-3.5deg);  /* Saf3.1+, Chrome */
	}

	#prev {
		position:absolute;
		left:0;
		top:174px;
		z-index:1;
		background:url(../images/prev.png) no-repeat 0 0;
		width:83px;
		height:45px;
	}
	#next {
		position:absolute;
		left:435px;
		top:174px;
		z-index:1;
		background:url(../images/next.png) no-repeat 0 0;
		width:83px;
		height:45px;
	}

Bueno eso es todo, adios…

Mira el Ejemplo

Cesar Jaldin ha escrito 68 entradas en este sitio.

Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.

Un nuevo día para impresionarse sobre las funcionalidades de CSS3. Esta vez me toco trabajar con un sistema que maneja HTML5 y CSS3.

Esta regla tal vez ya la conocias, se trata de modificar el texto seleccionado, usando cualquier otro fondo con el que dispone en navegador.

Sin mas las reglas basicas son las siguientes.

::-moz-selection {
	background:#FC0;/*#f24c15;*/
	color:#009;
	}

::selection {
	background:#FC0;/*#f24c15;*/
	color:#009;
	}

Como ven, ya he hecho algunos cambios y es impresionante.

Lo malo no funciona en Explorer.

Bueno hasta pronto.

Cesar Jaldin ha escrito 68 entradas en este sitio.

Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.

En SpeckyBoy hicieron una recopilación de 25 Templates hechos solo con HTML y CSS todos los templates tienen una terminación muy profesional y bien vistosa, por lo que no solo sirven para reutilizarlos sino que también están perfectos para tomarlos como inspiración para nuevos proyectos, algunos estan hechos con Html5 y Css3, los 25 templates los pongo a continuación:



Descarga | CreativeStudio Download Page
Demo | Live Demo

Demo y Descarga | Greymatter Download Page

Descarga | Photomatic Download Page

Demo | Live Demo

Descarga | Magicbox Download Page

Demo | Live Demo

Descarga | Bestfolio Download Page

Demo | View Screenshots

Descarga | CSS Heaven 2 Download Page

Demo | Live Demo

Descarga | DarkPortfolio Download Page

Demo | Live Demo

Descarga | HTML5 Portfolio Download Page

Demo | Live Demo

Descarga | Studio One Download Page

Demo | Live Demo

Descarga | YIW Minimal Download Page

Demo | Live Demo

Descarga | MovieHunter Download Page

Demo | Live Demo

y Aqui les pongo el resto sin Screenshots.

Buzz

Descarga | Buzz Download Page

Demo | Live Demo

PhotoWall

Descarga | PhotoWall Download Page

Demo | Live Demo

Product Landing Page

Descarga | Landing Page Download Page

Demo | Live Demo

Corporate Blue

Descarga | Corporate Blue Download Page

Demo | Live Demo

Blogger

Descarga | Blogger Download Page

Demo | Live Demo

Tree Tops

Descarga y Demo | Tree Tops Download Page

Dapurkue E-Commerce Template

Descarga | Dapurkue Download Page

Demo | Live Demo

Clean vCard

Descarga | Clean vCard Download Page

Demo | Live Demo

Newserific

Descarga | Newserific Download Page

Demo | Live Demo

Social Community Management

Descarga  y Demo | Social Community Management Download Page

Acallia

Descarga | Acallia Download Page

Demo | Live Demo

Gallerised

Descarga | Gallerised Download Page

Demo | Live Demo

WhiteFolio

Descarga | WhiteFolio Download Page

Demo | Live Demo

960.GS CSS Photography Template

Descarga | Photography Template Download Page

Demo | Live Demo

Gray Admin Template

Descarga | Gray Admin Template Download Page

Demo | Live Demo

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Encontré esta página en la que inscriben sitios hechos en HTML5 y CSS3 así como otras nuevas tecnologías, nos sirve para ver ejemplos muy bueno e interesantes sobre el uso de HTML5 y CSS3, y también los podemos usar como Inspiración para nuevos proyectos, el sitio del que les hablo es  101 Best Html5 Sites en la que podemos ver sitios como estos:

http://www.pixelbender.ca/

http://www.edgarleijs.nl/

http://wantist.com/

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Subir ↑↑