Curso de Html5 y Css3

Curso de HTML5 y CSS3
Hola amigos en este curso de html5 como crear mi web les trae otra nueva entrega pero esta vez con lo que est de moda un curso de HTML5 y CSS3 que es lo que esta ahora en el diseo y programacion de pginas web, el HTML5 y CSS3, en esta ocasin vamos a aprender a armar nuestra propia pgina web, con HTML5 y CSS3 y que sea autoajustable o mejor dicho Responsive Web Design o diseo auto ajustable. Para maquetar nuestra pgina en este Curso de HTML5 y CSS3 necesitamos un editor puede ser simple y un navegador para ir viendo los las transformaciones que vamos haciendo yo en lo particular utilizo como editor de cdigo Sublime Text y Notepat++ pero bueno el editor es su eleccin y por el navegador recomiendo que sean firefox o chrome y en caso que utilicen internet Explorer descrguense la ltima versin. Bueno con estos puntos claros podemos empezar a armar la estructura de nuestra pgina web Lo primero que vamos hacer en este curso de HTML5 y CSS3 es el cdigo HTML5 para lo que crearemos un documento en blanco con el nombre de index.html y luego los estilos CSS3, bueno empezamos Escribimos la cabecera de la pgina <!DOCTYPE html/> <html lang="es"> <head> <meta charset="utf-8" /> <meta name="description"content="Curso de HTML5" /> <title>Curso de HTML5 y CSS3 </title> <link rel="stylesheet" href=" stylo.css" /> </head> Bueno esta es la parte de la cabecera de nuestra web ahora le explico cmo funciona primero pusimos la etiqueta <!DOCTYPE html/> esto significa que empezamos a programar nuestra web con HTML5. Luego escribimos la etiqueta de apertura <html lang="es"> y le establecemos el lenguaje espaol en nuestro caso esto es para que nos res conozca los caracteres latinos y no tengamos problemas con esos signos raros. Luego abrimos y serramos la etiqueta <head> </head> y en ella escribimos el <meta charset="utf-8" /> para los signos de puntuacin tambin una meta con la descripcin de nuestra pgina web que es esta <meta name="description"content="Curso de HTML5" />
Tambin incluimos el titulo de nuestra pagina con la etiqueta <title>El titulo de tu web </title> Una vez aadida la etiqueta title enlazamos una hoja de estilo con el nombre stylo.css en la cual estar el cdigo CSS3 que vamos a crear para maquetar nuestra web <link rel="stylesheet" href=" stylo.css" /> Luego serramos la etiqueta </head> y continuamos con el cuerpo de la pgina, y estara estructurado de la siguiente manera solo tenemos que agregar el siguiente cdigo. <body> (inicio) </body>(Final) </html> Con esto ya tenemos el cuerpo de nuestra pgina programada en HTML ahora empezamos a introducir el contenido con etiquetas HTML5 obvio que pensaban que era con HTML4 bueno lo primero que creamos es la cabecera de nuestra pgina con la etiqueta <header> </header> Y dentro de este header creamos un div e introducimos un texto para describirlo en este caso nuestra cabecera seria la siguiente. <header> <h1>Esta es la cabecera de nuestro sitio web</h1> </header> Ahora creamos una etiqueta <nav></nav> para la botonera y quedara as <nav> Esta es nuestra botonera </nav> Ahora creamos el cuerpo del la mayor parte del contenido de nuestra web para esto creamos una etiqueta <section></section> y dentro de esta metemos otro section parecido pero con id diferentes y tambin agregamos las etiquedas <article></article> y <aside></aside>
En este caso nuestro cdigo HTML5 quedara as <section id="contenedor"> <!esto es contenedor principal HTML --> <section id="principal"> Esto es una seccin <article> Esto es un article </article> </section> <aside> Esto es un aside </aside> </section> Ahora lo que nos falta es el pie de pgina y para esto utilizamos las etiquetas </footer></footer> Que el cdigo sera el siguiente <footer> Este es el pie de nuestra pgina </footer> Bueno con todo esto explicado ahora les pongo el cdigo HTML5 complete para que lo estudien y vean como est estructurado y para pasar a maquetar con CSS3 . Ahora procedemos a maquetar nuestra pgina HTML5 con puro cdigo CSS3 y que todo se ajuste a cualquier pantalla donde se est visualizando. Bueno empecemos lo primero que vamos a definir e el atributo de todo el HTML para esto lo primero que hacemos es un * y entre llaves ponemos el cdigo que queremos establecerle al documento completo en este caso yo solo les voy a establecer dos valores que es el margen y el padding *{ margin: padding: } 0; 0;
Ahora establecemos la tipografa de nuestro sitio web para eso tenemos que utilizar la el atributo de CSS 3 que es @font-face y lo que les vamos a establecer a este atributo son 2 mandatos que el tipo de letras y el estilo sea normal @font-face font-weight:normal; {
font-style:normal; } Si has hecho todo bien nuestro ndex tendra que estar quedando as
De lo contrario revisa el cdigo no valla hacer que has cometido un error , Bueno uno vez con esto as en caso de que no hayas cometido ningn error proseguimos con el curso. Y ahora continuamos con el siguiente bloque de cdigo CSS3 que corresponde al body en este caso al bodi lo primero que les vamos a decir es que tenga un background blanco un color de letras naranja una tipografa o tipo de letra Helvtica, Verdana y un tamao de letras de 2em entonces nuestro cdigo CSS3 sera el siguiente body{ background: color:#F60; font-family:Helvetica, font-size: } #FFF; Verdana; 2em;
Ahora lo que hacemos es que al h1 que est dentro del <header> es establecerles los parmetros de cmo queremos que sea para estos le ponemos el siguiente cdigo CSS3. h1{ color:#F60; margin:0.25em text-align:center; text-shadow: }
auto; 5px 5px 10px rgba(255,255,255,o.5);
En este cdigo lo primero que establecimos fue el color de las letras del <h1> en este caso (color:#F60;) que corresponde al naranja, luego el margin es espacio que va a tener de los dems elementos. Tambin establecimos el text-aling:cener; esto es para alinear el texto al centro y algo muy importante que no se puede quedar es el atributo (text-shadow: ) que ya
lo explique en un post anterior por eso creo que no hay necesidad de explicarlo aqu nuevamente. Como ya agregamos los estilos del <body> y del <h1> que est dentro del <header> nuestra pgina tendra que estar quedando de la siguiente manera.
Si se fijan nuestro documento HTML a cambiado mucho y en el h1 se nota una sombra la cual la establecimos con el atributo (text-shadow: ) si tu imagen va quedando igual que esta sigamos adelante, en caso contrario te recomiendo volver atrs y revisar el cdigo haber en que has fallado. Bueno seguimos maquetando nuestro index.html ahora vamos a establecer el color de fondo de la cabecera que en este caso seria nuestra etiqueta <header></header> para ello vamos a ponerle un background:#DEDEDE; que corresponde a un gris tambin un borderradius:0.25em; para ponerles los bordes medio redondeados en margin que va a tener de los otros elementos donde les ponemos (margin:0.25em auto) con esto les indicamos al <header> que tome un margin de arriba de 0.25em y a los lados se centre con el atributo (auto). Y algo nuevo que incorpora CSS 3 para que nuestros sitios puedan ser auto ajustables es el (max-width ) y el ( min-height) con estos atributos no le establecemos mrgenes variables a nuestros documentos HTML donde les indico que le tamao mximo o max-width va hacer el que queramos y el tamao mnimo min-height tambin va hacer el que le establezcamos, o sea ya nuestros documentos no van a tener un tamao fijo si no que van a varias dependiendo el tamao de la pantalla que los este visualizando. Con esto claro solo queda establecer el padding y alinear el texto lo cual lo hacemos con las etiquetas ( padding:0.25em;) y (text-aling:center;) Con esto el cdigo para nuestro <header> seria el siguiente. header background:#DEDEDE; border-radius:0.5em; margin: max-width:960px; padding:0.25em; text-align:center; } {
0.5em
auto;
Ahora si visualizamos nuetro documento tendra que tener el siguiente aspecto
Bueno si todo va bien seguimos maquetando nuestro sitio, y se nos presenta el siguiente problema si se han fijado la botonera y el pie de pgina vendran siendo algo parecido a la etiqueta < header> </header> si te lo imaginaste estas en lo correcto y para ahorrar tiempo y en escribir todo este cdigo nuevamente solo tendremos que agregar a la etiqueta header las las etiquetas nav y footer que quedara de la siguiente manera. header background:#DEDEDE; border-radius:0.5em; margin: max-width:960px; padding:0.25em; text-align:center; } Si visualizamos nuestro ,nav,footer{
0.5em
auto;
documento
esto
quedara
asi.
Si vemos a nuestro sitio ya le falta muy poco por maquetar solo el <section></section> y el <aside></aside> lo cual vamos a explicar de inmediato. Si nos fijamos en el index creamos un <section> con un ID contenedor o sea este <section id="contenedor"> y otro <section id="principal"> bueno como como tenemos identificados nuestros section lo que vamos hacer es crear en la hoja de estilo lo estilos correspondiente
pero en este caso vamos a ponerle una armoadilla o gato (#) al cual vamos hacer referencias de la siguiente manera section#contenedor y section#principal. Primero escribimos el section#contenedor y les ponemos un margin de 0.2em y auto a los lados para que se centre, luego max-width:960px; les decimos que el tamao mximo que va a tener este section es de 960px, les ponemos un padding de 0 y un tex-aling: center para que el contenido se centre. En conclusin nuesto cdigo CSS3 para el section contenedor sera el siguiente section#contenedor{ margin:0.2em max-width:960px; padding:0; text-align:center; } auto;
Ahora seguimos con el section#principal. A este le decimos que tenga un background o color de fondo un border-radius para que tenga border curvos, y otro atributo que aade CSS 3 es display:inline-block; esto le indica a nuestro section que todo lo que venga dentro del ser visto como bloques y les aadimos el atributo vertical-align:top este nuevo atributo de CSS3 viene a sustituir al float del css anterior esto le indica a nuestro section que alinee todo verticalmente y que sea en la parte superior. Luego les indicamos que tome un tamao de un 65% del section contenedor lo otro ya lo sabemos por eso no lo explico y les pongo el siguiente cdigo. Si notan que puse el <aside> en este cdigo es porque quiero que tenga la misma forma que el section principal solo que a este les vamos a dar un tamao mas pequeo en la parte de abajo section#principal, background:#F1F1F1; border-radius:0.5em; display: margin:0.25em max-width:960px; min-height:200px; padding:0.25em; text-align:center; vertical-align:top; width:65%; } aside{
inline-block; auto;
Si han hecho todo bien nuestro documento ira quedando de la siguiente manera corte la imagen para que puedan ver cmo va quedando el aside.
Como le explique arriba tenemos que establecerle el porcentaje que va a tomar el aside del section en este caso con un 30% quedara bien mas debajo de ese cdigo escribimos el siguiente aside{ width:30%; } Ahora si actualizamos nuestro navegador todo se vera de la siguiente manera.
Bueno ahora solo nos falta darle estilo al article, este ser sencillo solo tenemos que ponerle un color de fondo distingo a fondo actual para ellos les ponemos un brackground:#000; que corresponde al negro, luego un border-radius para las esquinas curvas y les ponemos un alto mnimo con el atributo min-height: de 140px; y un padding: de 0.25em con esto quedara listo nuestro article. article{ background:#011E30; border-radius: min-height:140px; padding:0.25em; }
0.5em;
Si has copiado bien todo el cdigo esta tendra que ser la imagen final de nuestro
documento.
Ahora si te fijas en el navegador reduciendo el tamao de la ventana veras como todo se ajusta al tamao de la ventana, esto lo obtuvimos porque trabamos con los tamaos en (em) y no en (px) tambin porque los atributos max-width y min-height. Bueno aqu les dejo una toma de mi navegador reducido a lo que simula una pantalla de un celular.
Espero y les aya gustado el tutorial y ser hasta la prxima gracias y dejen sus sugerencias as seguimos mejorando el blogs y colocando tutoriales de calidad. Aqu index.html <!DOCTYPE <html <head> html/> lang="es"> les dejo los codigos del curso completo.
<meta charset="utf-8" <meta name="description"content="Practica de html <title>Curso de HTML5 y CSS3 <link rel="stylesheet" href="stylo.css" </head> <body> <h1>Esta es la cabecera de nuestro sitio
/> 5" /> </title> />
Este </body> </html> stylo.css *{ margin: padding: } @font-face } body{
<header> web</h1> </header> <nav> Esta es nuestra botonera </nav> <section id="contenedor"> <section id="principal"> Esto es una seccion <article> Esto es un article </article> </section> <aside> Esto es un aside </aside> </section> <footer> es el pie de nuestra página </footer>
0; 0; { font-weight:normal; font-style:normal; background: font-family:Helvetica, font-size: #FFF; color:#F60; Verdana; 2em;
} h1{
margin:0.25em text-shadow: } header,nav,footer 5px 5px 10px
color:#F60; auto; text-align:center; font-size:1.25em; rgba(255,255,255,o.5); { background:#DEDEDE; border-radius:0.5em; auto; max-width:960px; padding:0.25em; text-align:center; auto; max-width:960px; padding:0; text-align:center; aside{ background:#F1F1F1; border-radius:0.5em; inline-block; auto; max-width:960px; min-height:200px; padding:0.25em; text-align:center; vertical-align:top; width:65%; background:#000; 0.5em; min-height:140px; padding:0.25em; width:30%;
margin:
0.5em
} section#contenedor{ margin:0.2em
} section#principal, display: margin:0.25em
} article{ border-radius: } aside{ }
Si el tutorial te parecio interesante dale a +1 o dejanos tu comentarios...
Crear base de datos y tablas desde php

En esta entrada vamos hablar sobre cmo crear base de datos y tablas desde php tambien crear tablas dentro de la base de datos utilizando solamente PHP un tema que es muy importante para cualquier programador y persona que est empezando a programar. En este tema nos centraremos en las base de datos mysql ya que es la ms utilizada en el mundo de la programacin web por su rapidez y facilidad de trabajar con ella, este tutorial va dedicado para aquellas personas que no le gusta estar con un manejador de base de datos como phpmyadmin o que quieren hacer un sitio web ms avanzado como un sistema de esos como WordPress, drupal, y esos que no hay que estar ejecutando ningn archivo en la base de datos porque ellos se encargan de crearte todo. Bueno si este es tu caso entonces estas en el sitio correcto porque aqu vamos aprender cmo crear la base de datos como crear las tablas y como insertar datos en dichas tablas Para empezar te recomiendo que tengas una base de datos instalada en tu sistema yo en mi caso tengo el phpmyadmin que trae el XAMPP pero en este tutorial vamos a crear la base de datos y las tablas directamente sin irme a la interfaz.
Crear base desde php

Para empezar lo primero que vamos hacer es crear un archivo llamado conexin.php que es el que nos servir de modelo para conectarnos a la base de datos cuando estemos creando nuestra pgina web.
Que necesitamos para hacer la base de datos desde php

Lo primero que tenemos que hacer es establecer los parmetros de conexin con la base de datos en este caso como yo estoy trabajando en modo local lo que hacemos es usar los valores por defecto que trea nuestro servidor que son localhost y root entonces los parmetros serian los siguientes.
$host='localhost'; $user='root'; $pass=''; Si te fijas no hemos puesto ninguna contrasea ya que nuestro administrador de base de datos no la trea, pero en caso de que tu haya puesto una tienes que establecerla donde dice $pass. Luego de esto procedemos a conectar a la base de datos con mysql_connect() aadindole los parmetros de conexin que establecimos ms arriba, entonces nuestra conexin seria la siguiente $sql="CREATE database programador"; Con los datos de la base de datos guardada en nuestra variable $sql entonces procedemos hacer la consulta a nuestro servidor con el comando mysql_query que seria de la siguiente manera. $insertar=mysql_query($sql,$conexion); Si te fijas en la lnea de cdigo hemos almacenado en la variable $insertar la consulta a nuestro servidor y para que pueda conectarse dicha consulta necesita 2 parmetros que son la variable donde tenemos los datos de la base de datos que vamos a crear y la conexin con la que nos conectaremos al servidor para crear dicha base de datos. Entonces luego de esto les ponemos un condicionar para ver si la base de datos se cre s o no if(!$insertar){ echo 'Error al crear la base de datos'; }else{ echo 'Base de datos creada exitosamente'; } Con este cdigo lo que le hemos dicho a nuestra consulta es sabes que si la consulta que est en la variable $insertar es negativa entonces manda el mensaje de error Error al crear la base de datos pero si es positiva entonces que mande el siguiente mensaje "Base de datos creada exitosamente". Entonces si todo va bien y nuestra consulta no manda ninguno error lo que hacemos es crear una tabla que nos puede servir para diferente cosas ya sea una tabla para almacenar usuarios, archivos, datos de noticias etc...
Crear tablas desde php
Para crear tablas desde php se sigue casi el mismo procedimiento solo que en este caso tendremos que seleccionar la base de datos en la cual queremos crear dicha tabla y como sabemos que la base de datos que hemos creado se llama "programador" entonces solo nos falta seleccionarla, y esto lo hacemos con el comando mysql_select_db el cual necesita 2 parmetros que son el nombre de la base de datos y la conexin. mysql_select_db('programador',$conexion); Con la base de dato ya seleccionada entonces procedemos a almacenar la tabla en una variable en este caso les voy a llamar $tabla. Para crear tabla en una base de datos lo hacemos con el comendo CREATE TABLE luego el nombre de la tabla pero para no tener errores por si la tabla ya existe entonces le aadimos antes del nombre de la tabla este comando IF NOT EXISTS con esto lo que le decimos es si la tabla no existe entonces crala. $tabla="CREATE TABLE IF NOT EXISTS 'usuario' (); Con esto ya tendramos creada nuestra tabla entonces ahora lo que vamos hacer es insertarle varios campos para eso nos situamos dentro de los parntesis y arpretamos enter y pegamos el siguiente codigo. ìd_usuario` int(11) NOT `nombre` varchar(100) `correo` text `clave` text PRIMARY KEY (ìd_usuario`); NULL NOT NOT NOT AUTO_INCREMENT, NULL, NULL, NULL,
Con esto tendramos ya creada la base de datos y la tabla, ahora podemos insertar datos en tabla usuario para eso en la misma consulta donde creamos la base de datos nos situamos juesto despus del mensaje que dice que se cre la tabla con xitos y colocamos los datos que queremos insertar de esta forma. $datos="INSERT INTO ùsuario` (ìd_usuario`, `nombre`, `correo`, `clave`) VALUES (1, 'administrador', 'admin@hotmail.com', 'admin')"; $consulta=mysql_query($datos,$conexion); if(!$consulta){ echo 'Error al insertar los datos'; }else{ echo 'Los datos se insertaron correctamente'; } Entonces nuestro archivo completo para crear la base de datos y crear las tabla e insertar los datos sera el siguiente Conxion.php <?php $host='localhost'; $user='root'; $pass=''; $conexion=mysql_connect($host,$user,$pass);
$sql="CREATE database $inseltar=mysql_query($sql,$conexion); if(!$inseltar){ echo 'Error al crear la echo 'Base de datos
programador";
base creada
de
/>'; }else{ exitosamente<br /.';
datos<br
// ya con nuestra base de datos creada podemos empezar a crear nuestras tablas mysql_select_db('programador',$conexion); TABLE IF NOT EXISTS ùsuario` ( ìd_usuario` int(11) NOT NULL, `nombre` varchar(50) NOT NULL, `correo` varchar(50) NOT NULL, `clave` varchar(50) NOT NULL, PRIMARY KEY (`correo`) )"; $crear_tabla=mysql_query($tabla,$conexion); if(!$crear_tabla){ crear la table en la base de datos'; }else{ 'La tabla se creo correctamente';
$tabla="CREATE
echo
'Error
al echo
// si la tabla se creo correctamente entonces insertarmos los datos $datos="INSERT INTO ùsuario` (ìd_usuario`, `nombre`, `correo`, `clave`) VALUES(1, 'administrador', 'admin@hotmail.com', 'admin')"; $consulta=mysql_query($datos,$conexion); if(!$consulta){ echo 'Error al insertar los datos'; }else{ echo 'Los datos se insertaron correctamente'; } } }
?>
Men con HTML5 y CSS3

Como los men con html5 y css3 est siendo cada vez ms usando en la creacin de sitio web, podemos seguir explotando el html5 y el css3 y todas sus funcionalidades para implementarla en nuestra web. En este pequeo tutorial vamos a seguir creando men con html5 y css3 para darle un toque ms profesional a nuestro sitio web. Algunos Men Men Como Como ejemplos de menu con HTML5 y CSS3 dinamico con HTML5 vertical con HTML5 Crear Un Crear Un Men son y y Parte los siguientes. CSS3 CSS3 Men 2
Este men con html5 y css3 va a consistir en crear una botonera utilizando solo html5 ya que podemos obtener efectos muy elegantes si lo combinamos con css3. En entradas anteriores creamos un men dinmico con css3 y HTML5 pero en ese caso utilizamos algunas etiquetas que no eran del propio html5 ahora todo lo que aremos ser con este lenguaje de programacin web. -->
Que necesitamos para crear men con HTML5 y CSS3?
Lo nico que necesitamos es un editor de texto como siempre te digo que hasta en el simple bloc de notas lo puedes hacer, y por supuesto tener los navegadores actualizados para poder ver nuestro men, ya que este nuevo estndar no soporta versiones viejas. Y si quieres aprender ms de estos dos lenguajes visita nuestro Curso de HTML5 y CSS3 donde explicamos todo al detalle
Puedo ver este men con html5 y css3 si utilizo IE?.

Buena pregunta, si est leyendo este tutorial de como crear men con HTML5 y CSS3 y estas utilizando IE te recomendamos que lo actualice a su ltima versin o sea la versin
10.0 que es la que soporta todos las etiquetas html5 que han salido y por consiguiente es la que utilizaremos para crear nuestros men. Para empezar a crear nuestro men en html5 y css3 lo primero que vamos e a crear son 2 documentos uno con el nombre de men.html y el otro con el nombre men-estilo.css con esto listo empezamos a crear el cdigo html5.
Archivo menu.html <!DOCTYPE <head> <meta <title>Menu con <link rel="stylesheet" </head> <body> <header <nav
html> charset="utf-8" HTML5 href="menu-estilo.css" /> y CSS3</title> type="text/css" />
<input placeholder="Buscar... <input type="submit" </header> </body> </html>
id="botonera"> id="botonera-2"> <menu>Home</menu> <menu>Noticias</menu> <menu>Facebook</menu> <menu>Twitter</menu> "type="search" name="buscar" id="buscar"/> value="Buscar" id="submit" /> </nav>
Si te fijas en el cdigo del archivo men.html notaras que el cdigo es muy reducido y que es 100% html5 en este cdigo sustituimos las antiguas <ul> <li> para hacer men y lo hacemos directamente con la etiqueta <men> de html5, tambin identificamos la cabecera de la pgina web donde ira la la botonera con la etiqueta <header> y dentro del <header> colocamos la botonera aunque esta por lo regular va del lado debajo de la cabecera pero bueno para este tutorial as la utilizamos. body{ background:#666; } #botonera{ width:98%; margin:10px height:60px; background:none; background-clip:
auto;
padding-box;
-moz-background-clip: padding; -webkit-background-clip: padding; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius:10px; border: 10px solid rgba(255,255,255,0.3); } #botonera-2{ border-radius:3px; width:100%; height:60px; margin:0px; background:linear-gradient(#CCC 0%, #333 100%); background:-moz-linear-gradient(#CCC 0%, #333 100%); background:-ms-linear-gradient(#CCC 0%, #333 100%); background:-o-linear-gradient(#CCC 0%, #333 100%); background:-webkit-linear-gradient(#CCC 0%, #333 100%); } menu{ display:inline-block; width:100px; text-align:center; margin:10px auto; background:none; color:#fff; font:bold; padding:10px; } menu:hover{ background:-moz-linear-gradient(#FFF 0%, #C4C4C4 100%); background:linear-gradient(#FFF 0%, #DEDEDE 100%); background:-ms-linear-gradient(#FFF 0%, #DEDEDE 100%); background:-o-linear-gradient(#FFF 0%, #DEDEDE 100%); background:-webkit-linear-gradient(#FFF 0%, #DEDEDE 100%); opacity:0.6; -moz-opacity:0.6; -o-opacity:0.6; -webkit-opacity:0.6; -ms-opacity:0.6; border-radius:5px; color:red; box-shadow:0 0 10px #FFf; -moz-box-shadow:0 0 10px #FFf; -ms-box-shadow:0 0 10px #FFf; -o-box-shadow:0 0 10px #FFf; -webkit-box-shadow:0 0 10px #FFf; }
#buscar{ background:#fff; border-bottom-left-radius:10px; border-top-left-radius:10px; border-right:0px; border:solid color:#999; padding:6px; width:150px; position:relative; display:inline-block; margin-left:50px; margin-top:15px; vertical-align:top;
0px
#DEDEDE;
} #buscar:focus{ box-shadow:0 0 15px #09F; -moz-box-shadow:0 0 15px #09F; -ms-box-shadow:0 0 15px #09F; -o-box-shadow:0 0 15px #09F; -webkit-box-shadow:0 0 15px #09F; } #submit{ padding:5px; width:70px; margin-top:15px; border-bottom-right-radius:10px; border-top-right-radius:10px; display:inline-block; position:absolute; border:0px; background:url(buscar.png); vertical-align:top; } Si te fijas en el cdigo css3 es igual al que hemos trabajado en todos los tutoriales de este blog ahora bien lo que podemos encontrar nuevo en este tutorial son los border transparentes un efecto css3 muy bonito para cualquier sitio web, si te fijas twitter lo tiene implementado, para ver este border tienes que colocar un color de fondo o una imagen as se puede ver el efecto css3. En caso que quieras aprender a crear los border transparentes en la prxima entrada vamos a explicar como obtenerlo. Bueno con todo esto visto entonces les presentamos el resultado de pueden ponerle un color de fondo para ver como se resaltan los border transparentes.
Si estas biendo el men es porque es Responve Web Desing o ms bien diseo web auto ajustable que se ajusta dependiendo el tamao de la ventana por eso se ve chiquito en esta parte poque esta dentro del blog y tiene que ajustarse a su tamao. Bueno amigos con esto termina este pequeo mini tutorial espero y les pueda servir para algo y nos vemos en la prxima entrada Gracias por leer y un cordial saludo. :D

Curso de Html5 y Css3

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Curso de Html5 y Css3

Caricato da

Copyright:

Formati disponibili

Curso de HTML5 y CSS3

auto; 5px 5px 10px rgba(255,255,255,o.5);

Ahora si visualizamos nuetro documento tendra que tener el siguiente aspecto

/> 5" /> </title> />

Este </body> </html> stylo.css *{ margin: padding: } @font-face } body{

0; 0; { font-weight:normal; font-style:normal; background: font-family:Helvetica, font-size: #FFF; color:#F60; Verdana; 2em;

margin:0.25em text-shadow: } header,nav,footer 5px 5px 10px

} section#principal, display: margin:0.25em

} article{ border-radius: } aside{ }

Si el tutorial te parecio interesante dale a +1 o dejanos tu comentarios...

Crear base de datos y tablas desde php

Crear base desde php

Que necesitamos para hacer la base de datos desde php

Crear tablas desde php

/>'; }else{ exitosamente<br /.';

Men con HTML5 y CSS3

Que necesitamos para crear men con HTML5 y CSS3?

Puedo ver este men con html5 y css3 si utilizo IE?.

html> charset="utf-8" HTML5 href="menu-estilo.css" /> y CSS3</title> type="text/css" />

<input placeholder="Buscar... <input type="submit" </header> </body> </html>

Potrebbero piacerti anche