Safricode

martes, 12 de agosto de 2014

Colocarle Fondos a un DIV en HTML5 con CSS3

Vamos a darle estilo a nuestro DIV colocandole un fondo de color o una imagen con la propiedad [ background ] de CSS3.

Lo primero que debemos hacer es crear un DIV en nuestro cuerpo de trabajo, en este caso lo vamos a crear en nuestro <body>

<html>
        <head>
        </head>
        <body>
                <div> </div>
        </body>
<html>

Después de haberlo creado le asignamos una clase con su respectivo nombre, en este ejemplo usaremos el nombre de [ estilo_div ], hay que tener mucho cuidado al escribir los nombre que se le asignen puesto que en CSS3 distingue entre mayúsculas y minúsculas, también hay que tener cuidado con los espacios puesto que no CSS3 no los acepta.

<html>
        <head>
        </head>
        <body>
                <div class="estilo_div"> </div>
        </body>
</html>

enlazamos nuestro archivo .css que en este ejemplo lo llamaremos [ estilos.css ], a nuestro archivo [ .html ], con el siguiente codigo HTML.

ahora en nuestro archivo estilos.css creamos lo siguiente:

.estilo_div{
  background:orange;
  height:100px;
  width:250;
}

o si queremos una escala de el colo verde lo colocamos con el código correspondiente.

.estilo_div{
  background:#66ff00;
  height:100px;
  width:250;
}

Obteniendo un DIV de color naranja con una altura de 100px y un ancho de 250px .

Aquí les dejo algunos ejemplos de las escalas de colores con sus respectivos códigos:

Código	Código	Código	Código
#000000	#330000	#660000	#FF0000
#000033	#330033	#660033	#FF0033
#000066	#330066	#660066	#FF0066
#000099	#330099	#660099	#FF0099
#0000CC	#3300CC	#6600CC	#FF00CC
#0000FF	#3300FF	#6600FF	#FF00FF
#003300	#333300	#663300	#FF3300
#003333	#333333	#663333	#FF3333
#003366	#333366	#663366	#FF3366
#003399	#333399	#663399	#FF3399
#0033CC	#3333CC	#6633CC	#FF33CC
#0033FF	#3333FF	#6633FF	#FF33FF
#006600	#336600	#666600	#FF6600
#006633	#336633	#666633	#FF6633
#006666	#336666	#666666	#FF6666
#006699	#336699	#666699	#FF6699
#0066CC	#3366CC	#6666CC	#FF66CC
#0066FF	#3366FF	#6666FF	#FF66FF
#009900	#339900	#669900	#FF9900
#009933	#339933	#669933	#FF9933
#009966	#339966	#669966	#FF9966
#009999	#339999	#669999	#FF9999
#0099CC	#3399CC	#6699CC	#FF99CC
#0099FF	#3399FF	#6699FF	#FF99FF
#00CC00	#33CC00	#66CC00	#FFCC00
#00CC33	#33CC33	#66CC33	#FFCC33
#00CC66	#33CC66	#66CC66	#FFCC66
#00CC99	#33CC99	#66CC99	#FFCC99
#00CCCC	#33CCCC	#66CCCC	#FFCCCC
#00CCFF	#33CCFF	#66CCFF	#FFCCFF
#00FF00	#33FF00	#66FF00	#FFFF00
#00FF33	#33FF33	#66FF33	#FFFF33
#00FF66	#33FF66	#66FF66	#FFFF66
#00FF99	#33FF99	#66FF99	#FFFF99
#00FFCC	#33FFCC	#66FFCC	#FFFFCC
#00FFFF	#33FFFF	#66FFFF	#FFFFFF

Ahora si queremos colocarle una imagen y no un color podremos hacerlo con la propiedad [ background-image: url( "direccion de la imagen") ] o tambien la podemos colocar solo [ background: url( "direccion de la imagen") ] de las dos formas son validas.

.estilo_div{
  background-image:url(imagen.jpg);
  height:100px;
  width:250;
}

si nuestra imagen estubiera en otra carpeta fuera de donde tenemos guardado nuestro archivo [ estilo.css ], como por ejemplo: tenemos dos carpetas una donde tenemos nuestros archivos CSS llamada css y otra donde tendremos nuestras imagenes llamada imagenes, entonces nuestra direccion quedaria:

.estilo_div{
  background-image:url(../imagenes/imagen.jpg);
  height:100px;
  width:250;
}

Si quieres que tu imagen solo se muestre una sola vez le colocamos la propiedad: [ background-repeat: no-repeat ], para que tu imagen no se repita mas de una vez.

.estilo_div{
  background-image:url(../imagenes/imagen.jpg);
  background-repeat:no-repeat;
  height:100px;
  width:250;
}

Desencriptar Metodo cesar con php

13:38 No comments

Desencriptar Metodo cesar

Ya vimos como podíamos encriptar nuestros textos por el método cesar, ahora veremos como desencriptar este texto. Este procedimiento es muy sencillo ya que solo es realizar el método inversamente. Lo podemos realizar con el mismo código anterior y solo le cambiamos algunos signos y algunas acciones.

Supongamos que no tenemos el codigo anterior, vamos a crear 2 archivos .php, a el primero lo vamos a llamar METODO_CESAR.php Donde realizaremos nuestra interfaz mediante código Html5 y Css3,

<html>
   <head>
   </head>
   <body>
       <form action="DESENCRIPTAR.php" method="POST">
          <input type="text" name="mensaje" style="left:1%; height:20px; position:absolute; top:1%; width:385px;"/>
          <input class="btn_menu" type="submit" value="Desencriptar" style="top:50px; left:16%; height:50px; position:absolute wudth:180px;"/>
</form&gt
        </body>
</html>

Ahora crearemos el archivo DESENCRIPTAR.php Donde realizaremos nuestro codigo Php

<?php
$mensaje = $_POST['mensaje'];
$mensaje = strtoupper($mensaje);
$tamano =  strlen($mensaje);
echo "LA PALABRA SIN ENCRIPTAR ES:";
echo "</br>";
echo "<div class='a'>$mensaje</div>";
echo "</br>";
echo "LA PALABRA ENCRIPTADA ES:", "<br>";
for ($pos=0; $pos <= $tamano ; $pos++) {
 $resultado1 = $mensaje[$pos];
  if ($resultado1 == A) {
   echo " ","<span style='color:red; font:bold 25px Arial;'>X</apan>";
  }else{
   if ($resultado1 == B) {
   echo " ","<span style='color:red; font:bold 25px Arial;'>Y</apan>";
   }else{
    if ($resultado1 == C) {
    echo " ","<span style='color:red; font:bold 25px Arial;'>Z</apan>";
    }else{
     for ($i=90;$i>=65;$i--) {
      $letra = chr($i);
      if ($resultado1 == $letra) {
       $i = $i - 3;
       $resultado =chr($i);
       echo " ", "<span style='color:red; font:bold 25px Arial;'>$resultado</apan>";
      }               
     }
    }
   }
  }
}
"</br>","</br>","</br>","</br>","</br>","</br>","</br>";
echo "<a style='top:20px; left:35%; color:#9fc30b; text-decoration: none'; href='METODO_CESAR.php'>Atras<a/>"; 
?>

Este seria nuestro código Css3 para darle un mejor estilo a nuestros botones.

<style type="text/css">
 .btn_menu{
 background:#eaeaea;
 box-shadow: 0px 0px 5px #808080;
 border-radius: 5px; 
 border:solid 4px #fff;
  color:#9fc30b;
 cursor: pointer;
 float: left;
 font: bold 26px Arial; 
 left:35%; 
 height: 28px;
 padding: 6px;
 position: relative;
 text-align: center;
 text-decoration: none;
 top: 20px;
 width: 150px;

 transition: 1s, box-shadow 1s, font 1s, z-index 1s;
 transform: scale(1,1);
 -webkit-transform: scale(1,1); 
 -moz-transform: scale(1,1); 
 -o-transform: scale(1,1); 

}
.btn_menu:hover{
 box-shadow: 0px 0px 15px #808080;
 transform: scale(1.5,1.5); 
 -webkit-transform: scale(1.5,1.5);
 -moz-transform: scale(1.5,1.5);
 -o-transform: scale(1.5,1.5);
}

Metodo de encriptacion cesar en php

10:10 2 comments

Metodo de encriptacion cesar

En criptografía, el cifrado César, también conocido como cifrado por desplazamiento, código de César o desplazamiento de César, es una de las técnicas de codificación más simples y más usadas. Es un tipo de cifrado por sustitución en el que una letra en el texto original es reemplazada por otra letra que se encuentra un número fijo de posiciones más adelante en el alfabeto. Por ejemplo, con un desplazamiento de 3, la A sería sustituida por la D (situada 3 lugares a la derecha de la A ), la B sería reemplazada por la E, etc. Este método debe su nombre a Julio César, que lo usaba para comunicarse con sus generales.

Vamos a crear 2 archivos .php a el primero lo vamos a llamar METODO_CESAR.php Donde realizaremos nuestra interfaz mediante código Html,

<html>
   <head>
   </head>
   <body>
       <form action="ENCRIPTAR.php" method="POST">
          <input type="text" name="mensaje" style="left:1%; height:20px; position:absolute; top:1%; width:385px;"/>
          <input type="submit" value="Encriptar" style="top:50px; left:16%; height:50px; position:absolute wudth:180px;"/>
</form&gt
        </body>
</html>

Ahora crearemos el archivo ENCRIPTAR.php Donde realizaremos nuestro codigo Php

<?php
$mensaje = $_POST['mensaje'];
$mensaje = strtoupper($mensaje);
$tamano =  strlen($mensaje);
echo "LA PALABRA SIN ENCRIPTAR ES:";
echo "</br>";
echo "<div class='a'>$mensaje</div>";
echo "</br>";
echo "LA PALABRA ENCRIPTADA ES:", "<br>";
for ($pos=0; $pos <= $tamano ; $pos++) {
 $resultado1 = $mensaje[$pos];
  if ($resultado1 == X) {
   echo " ","<span style='color:red; font:bold 25px Arial;'>A</apan>";
  }else{
   if ($resultado1 == Y) {
   echo " ","<span style='color:red; font:bold 25px Arial;'>B</apan>";
   }else{
    if ($resultado1 == Z) {
    echo " ","<span style='color:red; font:bold 25px Arial;'>C</apan>";
    }else{
     for ($i=65;$i<=90;$i++) {
      $letra = chr($i);
      if ($resultado1 == $letra) {
       $i = $i + 3;
       $resultado =chr($i);
       echo " ", "<span style='color:red; font:bold 25px Arial;'>$resultado</apan>";
      }               
     }
    }
   }
  }
}
echo "</br>","</br>","</br>","</br>","</br>","</br>","</br>";
echo "<a style='top:20px; left:35%; color:#9fc30b; text-decoration: none'; href='METODO_CESAR.php'>Atras<a/>"; 
?>

Este seria nuestro código Css3 para darle un mejor estilo a nuestros botones.

<style type="text/css">
 .btn_menu{
 background:#eaeaea;
 box-shadow: 0px 0px 5px #808080;
 border-radius: 5px; 
 border:solid 4px #fff;
  color:#9fc30b;
 cursor: pointer;
 float: left;
 font: bold 26px Arial; 
 left:35%; 
 height: 28px;
 padding: 6px;
 position: relative;
 text-align: center;
 text-decoration: none;
 top: 20px;
 width: 150px;

 transition: 1s, box-shadow 1s, font 1s, z-index 1s;
 transform: scale(1,1);
 -webkit-transform: scale(1,1); 
 -moz-transform: scale(1,1); 
 -o-transform: scale(1,1); 

}
.btn_menu:hover{
 box-shadow: 0px 0px 15px #808080;
 transform: scale(1.5,1.5); 
 -webkit-transform: scale(1.5,1.5);
 -moz-transform: scale(1.5,1.5);
 -o-transform: scale(1.5,1.5);
}
</style>

Colocar o Quitar el Scroll de un DIV de tu pagina principal

7:02 1 comment

Si no establecemos bien el ancho "width" o el alto "height" de nuestro DIV donde introduciremos información de modo texto. Dicho texto se nos saldrá de nuestro DIV. y nos dañara el estilo de nuestra pagina que estemos creando.

En este ejemplo crearemos un DIV en el archivo [ .html ] con nombre de clase "class" [ estilo_div ], donde vamos a escribir nuestro texto.

<html>
        <head>
        </head>
        <body>
                <div class="estilo_div"> </div>
        </body>
</html>

Ahora introducimos el texto dentro de nuestro DIV creado

<html>
        <head>
        </head>
        <body>
                <div class="estilo_div">Hola mundo, esto es una prueba donde el texto se sale de nuestro DIV y dara un mal aspecto a el sitio Web </div>
        </body>
</html>

nuestro div tiene como como propiedades:

.estilo_div{
  background:#ff6600;
  border-radius:3px;
  height:50px;
  width:250;
}

como podemos ver el texto se sale de nuestro DIV, puesto que tiene una altura muy pequeña para el DIV creado.

Hola mundo, esto es una prueba donde el texto se sale de nuestro DIV y dara un mal aspecto a el sitio web..

Tenemos opciones, una de ellas seria darle mas altura a el DIV para que tenga un rango mas alto y encierre todo el texto, pero si nuestro texto es demasiado extenso tendríamos un DIV muy grande que muy seguramente nos ocasionara molestias en el diseño de nuestro sitio web o sencillamente no queremos un DIV de este tamaño.

Ahora vamos a el archivo [ .css ] creado que en este ejemplo usaremos [ estilo.css ] y le pondremos a el DIV un Scroll, para que el texto no se salga si no que tenga la opción se bajar o subir el Scroll de el DIV, con la propiedad [ overflow ].

.estilo_div{
  background:#ff6600;
  border-radius:3px;
  height:50px;
  overflow-y:scroll;
  width:250;
}

Vista previa

Hola mundo, esto es una prueba donde el texto se sale de nuestro DIV y dara un mal aspecto a el sitio web..

Como podemos observar apareció un Scroll en la parte derecha de nuestro DIV y nos permite bajar o subir para observar todo el texto que tenemos en nuestro DIV sin que se nos salga.
con la propiedad [ overflow-y ] nos estamos situando en la parte derecha de nuestra pantalla sobre el eje "Y", después le decimos que sobre nuestro eje "Y" queremos que nos situé un Scroll para poder navegar de forma vertical en nuestro DIV.

También lo podemos utilizar sobre el eje "X" solo remplazamos de la siguiente manra.

.estilo_div{
  background:#ff6600;
  border-radius:3px;
  height:50px;
  overflow-x:scroll;
  width:250;
}

Si deseamos tener el Scroll tanto en el eje "Y" como en el "X" solo pondremos [ overflow:scroll ] automáticamente el navegador sitúa los dos Scroll en los dos ejes.

.estilo_div{
  background:#ff6600;
  border-radius:3px;
  height:50px;
  overflow:scroll;
  width:250;
}

Vista previa

Hola mundo, esto es una prueba donde el texto se sale de nuestro DIV y dara un mal aspecto a el sitio web..

Esta propiedad no solo es para colocar los Scroll también la podemos utilizar para ocultarlos, un ejemplo claro es cuando estamos haciendo una pagina web o cualquier otro proyecto con entorno web y no queremos que se muestre los Scroll, solo debemos colocarlo de la siguiente manera.
En nuestro archivo [ estilo.css ] colocaremos lo siguiente:

body{
overflow-y:hidden
}

Con esto le estamos diciendo a nuestro navegador que queremos que nos oculte el Scroll del eje "Y" de todo el cuerpo de nuestro proyecto. Si deseamos ocultar el eje "X" solo reemplazamos la "Y" por la "X"
y listo, o también podemos dejar solo [ overflow:hidden ] para ocultar los 2 ejes a la vez.

Textos con diferentes colores y fuentes de texto

7:01 No comments

Ala hora de escribir nuestros textos deseamos que sean amigables, creativos y llamativos otorgándole un ambiente agradable a nuestro sitio web.

Vamos a crear un nuevo <div> donde vamos a escribir nuestro texto, a este <div> le vamos a dar diferentes propiedades que van a cambiar la apariencia de todo nuestro texto. No solo podemos darle las propiedades de texto a un <div> sino que también podemos dársela a cualquier otra Etiqueta html como pueden ser “<html><head><header><body><footer><article><section><a><h1><h2><h3><span>....entre otras Etiquetas html”, pero hay que tener cuidado a la hora de utilizarlas, puesto que si le damos la propiedades a una etiqueta “<html><head><body>” que son contenedoras principales en nuestros proyectos, ya que si damos estas propiedades de texto a una de estas etiquetas todo el texto escrito dentro de ellas va a ser igual, si creamos un <div> dentro de el <body> y este <body> tiene una fuente [ Arial ] , nuestro nuevo <div> creado heredaría el mismo tipo de fuente y para que nuestro <div> creado tenga diferentes propiedades debemos darle una clase nueva e ir a nuestro archivo [ .css ] y cambiar sus propiedades.

Vamos a crear un <div> con un nombre de clase [ class ] para este caso lo llamaremos [ estilo_div ] y dentro vamos a escribir el texto que deseemos.

<html>
        <head>
        </head>
        <body>
           <div class="estilo_div">HOLA MUNDO</div>
        </body>
</html>

Enlazamos nuestro archivo [ html ] con el archivo [ .css ], para que importe las propiedades CSS3 a nuestro archivo [ html ] ya que estas se encuentran en otro archivo distinto. Para este ejemplo el nombre de el archivo [ .css ] que utilizaremos sera [ estilos.css ] el cual va a estar dentro de una carpeta llamada [ css ].

Ahora vamos a nuestro archivo [ estilos.css ], que para este ejemplo tendrá las siguientes propiedades CSS3.

.estilo_div{
  background:#ff6600;
  height:20px;
  width:180;
}

Vista previa de nuestro texto

HOLA MUNDO

Quitaremos el color de fondo [ background ] de nuestro <div> para que nos resalte mejor las modificaciones que le daremos a nuestro texto escrito.

HOLA MUNDO

Podemos observar que el texto se muestra, pero con las propiedades predeterminadas por el navegador que estemos utilizando. Ahora vamos a cambiar las reglas, vamos a decirle a el navegador que no queremos sus propiedades sino que nosotros seremos los que decidiremos el estilo que llevara nuestro texto.

Con la propiedad [ font ] que es nuestra fuente.

Esta propiedad es un poco compleja debido a su gran flexibilidad existen 6 formas de utilizar esta propiedad, vamos a explicar cada una de ellas.

La primera de las formas es de esta manera:

.estilo_div{
  font: bold 25px Arial;
  height:20px;
  width:180px;
}

Vista previa

HOLA MUNDO

con la propiedad [ font ] estamos diciendo que vamos a editar nuestra fuente, con la siguiente propiedad [ bold ] estamos diciendo que nuestra fuente va a tener Negrita "resaltar el texto", estamos dando una fuente con un tamaño de [ 25px ] y con un tipo de fuente [ Arial ], podemos colocar cualquier otro tipo de fuente. Pero hay que tener cuidado porque si utilizamos un tipo de fuente que no soporte el navegador, este no tomara la fuente asignada por nosotros sino que pondrá su propia fuente predeterminada. Lo que podemos hacer es colocar diferentes opciones, solo debemos separar los nombre de fuente con una coma. mas adelante veremos como podemos utilizar otros tipos de fuente muy diferentes a los usuales y que nuestro navegador soporte estas fuentes.

.estilo_div{
 fond:25px Arial, Arial Black, Impact;
  height:20px;
  width:180;
}

Con esto estamos diciéndole a nuestro navegador que la fuente principal que vamos a utilizar es [ Arial ], de no tener esta fuente utilice la [ Arial Black ] y si tampoco la tiene coloque el tipo de fuente [ Impact ].

La segunda manera de utilizar la propiedad [ font ] es con [ font-family ]

.estilo_div{
  font-family: Arial Black;
  height:20px;
  width:180px;
}

Vista previa

HOLA MUNDO

De esta manera solo estamos aclarando a el navegador que tipo de fuente [ font ] deseamos utilizar en este caso el tipo de fuente [ Arial Black ], el tamaño de nuestro texto sera determinado indeterminadamente por el navegador que estemos utilizando.

La tercera manera de utilizar la propiedad [ font ] es con [ font-style ]

.estilo_div{
  font-family: Arial Black;
  font-style:italic;
  height:20px;
  width:180px;
}

Vista previa

HOLA MUNDO

De esta manera estamos utilizando la propiedad [ font-style: italic ] como un complemento para nuestra fuente base, mostrando nuestro texto de forma cursiva o tambien llamada [ itálica o bastardilla ]. ¨
[ font-style: normal ] Con este valor nuestra fuente se mostrara normal y sin negrita.
[ font-style: inherit ] Con esto heredaremos el valor de una propiedad de otro objeto en este caso heredaremos propiedades de un <div> a otro. Ejemplo:

<html>
        <head>
        </head>
        <body>
           <div class="padre">
                <div class="estilo_div">HOLA MUNDO</div>
           </div>
        </body>
</html>

Con las propiedades CSS3

.estilo_div{
  font-family: Arial Black;
  font-style:inherit;
  height:20px;
  width:180px;
}
.padre{
     font-family: Arial Black;
     font-style:italic;
     height:20px;
     width:180px;
}

En este ejemplo tenemos 2 <div> uno dentro de otro, el superior que en este caso le otorgamos como nombre de clase "padre" [ class="padre" ] contendrá un <div> dentro de el que nosotros le otorgamos un nombre de clase "estilo_div" [ class="estilo_div" ], este <div> llamado padre tendrá un [ font-style: italic ], y nuestro otro <div> llamado "estilo_div" tendrá el valor [ font-style: inherit ], con este valor de la propiedad el <div> llamado "estilo_div" heredara la propiedad [ font-style ] del <div> superior llamado "padre" ya que este lo contiene dentro de el.

Suscribirse a: Entradas ( Atom )

martes, 12 de agosto de 2014

Colocarle Fondos a un DIV en HTML5 con CSS3

jueves, 13 de marzo de 2014

Desencriptar Metodo cesar con php

Metodo de encriptacion cesar en php

viernes, 21 de febrero de 2014

Colocar o Quitar el Scroll de un DIV de tu pagina principal

Textos con diferentes colores y fuentes de texto

Translate

Popular Posts

Historial De Contenido

Escribenos