Búsqueda personalizada
Mostrando entradas con la etiqueta css3. Mostrar todas las entradas
Mostrando entradas con la etiqueta css3. Mostrar todas las entradas

1 abr 2014

Dar formato a un número de teléfono con HTML5

Dar formato a un número de teléfono con HTML5 y hacer que se pueda llamar al pusar en el teléfono al verlo desde un dispositivo móvil es muy fácil.

Para que se pueda llamar desde el móvil mientras visitamos la web sólo tenemos que añadirle al teléfono el siguiente código:

<a href="tel:+34612345678">612345678</a>

Si se fijais, en el href se ha colacado el +34, que corresponde al prefijo de España. Habría que añadirse el prefijo del país correspondiente al número.

Si queremos darle formato, habría que añadirle este código CSS3:

a[href^="tel:"]:before {
          content: "260E";
          display: block;
          margin-right: 0.5em;
}
Que haría que el telefono se viera más o menos así:



Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!
Por: Unknown 1 abr 2014
Leer más

17 mar 2014

Como empezar una página web en HTML5

Breve post en el que voy a comentar como empezar a diseñar un página web desde cero con HTML5.

Para empezar creamos el archivo index.html, el que tendremos el siguiente código escrito:


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
<link href="favicon.ico" rel="shortcut icon">
<meta name="description" content="">
<link href="css/style.css" rel="stylesheet">
</head>

<body>
</body>
</html>

Ahora vamos a crear dos carpetas en la raiz que se llamaran img (para guardar las imágenes) y otra css (para los estilos).

En la carpeta css crearemos un archivo llamado style.css, en el cual tendremos escrito:


body {margin:0}
.container {width:980px; margin:0 auto}
h1, h2, h3, h4 {font-weight:normal}
ul, li {margin:0; padding:0; list-style-type:none}
img {border:0}
.clear {clear:both}

Ahora ya podemos comenzar a crear nuestra página web desde cero.

Más adelante iré poniendo aquí los siguientes post que le siguen a éste para seguir diseñando.

¡Un saludo!
Por: Unknown 17 mar 2014
Leer más

13 mar 2014

Formulario de contacto con HTML5 y CSS3 (Con ejemplo)

Vamos a ver como hacer fácilmente un formulario de contacto con HTML5 y CSS3, con ejemplos incluidos.

Primero vamos a elaborar el código HTML.


<form action="#" class="contact_form" method="post">
<ul>
<li>
            <h2>
Formulario de contacto</h2>
</li>
<li>
           <label for="name">Nombre:</label>
           <input placeholder="Chey" required="" type="text" />
       </li>
<li>
           <label for="email">Email:</label>
           <input name="email" placeholder="mercedesconde@ymail.com"
            required="" type="email" />
       </li>
<li>
           <label for="website">Sitio Web:</label>
           <input name="web" placeholder="http://cheydeveloper.blogspot.com.es/"
           required="" type="url" />
       </li>
<li>
           <label for="Mensaje">Mensaje:</label>
           <textarea cols="40" name="Mensaje" required="" rows="6"></textarea>
       </li>
<li>
          <button class="submit" type="submit">Enviar</button>
        </li>
</ul>
</form>

Nos quedaría un formulario más o menos así:

Ahora vamos a mostrar el css:





.contact_form h2 {
    background: none repeat scroll 0 0 #F3F3F3;
    border-radius: 5px;
    color: blue;
    display: block;
    font-family: sans-serif;
    font-size: 20px;
    padding: 5px;
    text-shadow: 1px 1px 1px #CCCCCC;
    width: 433px;
}


.contact_form ul {
    width:750px;
    list-style-type:none;
    margin:0px;
    padding:0px;
}

.contact_form li{
    padding:12px; 
    position:relative;
}

.contact_form label {
    color: #555555;
    display: inline-block;
    float: left;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-top: 3px;
    padding: 3px;
    width: 90px;
}

.contact_form input {
    height:20px; 
    width:220px; 
    padding:5px 8px;
}

.contact_form textarea {
    padding:8px; 
    width:300px;
}

.contact_form button {
    margin-left:90px;
}

.contact_form input, .contact_form textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    color: #888;
    font-size: 12px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}

.contact_form input:focus, .contact_form textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:80px;
}

.contact_form input:required:valid, .contact_form textarea:required:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

button.submit {
    padding: 9px 17px;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #444;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), 
   to(#bbb));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

button.submit:hover {
    opacity:.55;
    cursor: pointer; 
    color: #fff;
}

button.submit:active {
    border: 1px solid #222;
    box-shadow: 0 0 10px 5px #444 inset; 
}

Y ahora nuestro formulario quedaría así:


No voy a explicar los códigos porque supongo que si estáis haciendo esto es porque más o menos entendéis, pero no tenéis imaginación para hacerlo o no estabais inspirados.

Aún y así, si tenéis alguna duda con ellos, ser libre de preguntarme que contestaré en cuanto pueda.

Espero que os sirva, ¡un saludo!
Por: Unknown 13 mar 2014
Leer más

12 dic 2013

Crear div o capa transparente - CSS

Para crear un div o capara transparente o semitransparente, podemos usar el siguiente código CSS.

Todas las líneas hacen lo mismo, pero se usan todas para que funcione en todos los navegadores
.capa {
opacity: 0.2;
-moz-opacity: 0.2;
filter: alpha(opacity=20);
-khtml-opacity: 0.2;
}
Por: Unknown 12 dic 2013
Leer más

3 dic 2013

Sombreado de div Box-shadow

Hoy algo sensillo:

Ejemplo de sombreado de caja:


box-shadow: 2px 2px 5px #999;


Caja con sombreado
Por: Unknown 3 dic 2013
Leer más

12 nov 2013

Etiqueta en imagen cuando pasas el cursor - Tooltip

Ahora vamos a ver como hacer un Tooltip de forma sencilla. Para quien no sepa que es un tooltip, es como una especie de cartelito que aparece cuando ponemos el ratón encima de una imagen o un enlace.

Aqui el CSS:


.tooltip { display: inline; position: relative; }
.tooltip:hover:after { bottom: 26px; content: attr(title); /* este es el texto que será mostrado */ left: 20%; position: absolute; z-index: 98; /* el formato gráfico */ background: rgba(255,255,255, 0.2); /* el color de fondo */ border-radius: 5px; color: #FFF; /* el color del texto */ font-family: Georgia; font-size: 12px; padding: 5px 15px; text-align: center; text-shadow: 1px 1px 1px #000; width: 150px; }
.tooltip:hover:before { bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; /* el triángulo inferior */ border: solid; border-color: rgba(255,255,255, 0.2) transparent; border-width: 6px 6px 0 6px; }

Y aquí el HTML:


< a class="tooltip" href="" title="Diesel, 80.000km ...">Coche


Ejemplo: Coche




Mercedes Conde Blanco
Por: Unknown 12 nov 2013
Leer más

6 nov 2013

Gradientes de colores para todos los navegadores CSS3 

 /* navegadores sin soporte */
    background: black url(images/cabecera_degradado.jpg) repeat-x;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(black));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(top, black, white);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, black, white);
    /* Opera 11.10+ */
    background: -o-linear-background(top, black, white);
    /* IE 10 */
    background: -ms-linear-background(top, black, white);
    /* estándar */
    background: linear-background(top, black, white);
Por: Unknown 6 nov 2013
Leer más
Suscribirse a: Entradas (Atom)

Más visitas para tu blog

Más visitas para tu blog

Vuestras visitas:

Trucos Blogger

Sobre Google

Los + vistos en la semana

 

© 2014 Aplicaciones ...---Chey---.... All rights resevered. Designed by Chey Developer

Back To Top
Recibe las actualizaciones directo a tu correo