Truco 8 CSS. Texto con bajo relieve

Prueba el siguiente código CSS y verás el texto con bajo relieve.

 

body {
    background: #222222;
    color: #131313;
    font-size: 100px;
} 
p {
    text-align: center;
    text-transform: uppercase;
    text-shadow: #2d2f2d 2px 2px 4px; 
}

Obtendrás algo como:

Modifica la sombra, cambia su color, tamaño, etc.

Truco 7 CSS. Animar una lista

Con el siguiente código CSS consigo mover hacia la derecha los elementos de una lista al pasar por encima:

#animateList li a {
    cursor: pointer;
    -webkit-transition: padding-left 250ms ease-out;
    -moz-transition: padding-left 250ms ease-out;
}

#animateList li a:hover {
    padding-left: 10px;
}

Ejemplo de código HTML:

<ul id="animateList">
    <li><a href="">Enlace 1</a></li>
    <li><a href="">Enlace 2</a></li>
    <li><a href="">Enlace 3</a></li>
    <li><a href="">Enlace 4</a></li>
    <li><a href="">Enlace 5</a></li> 
</ul>

…

Truco 5 CSS. Rotar una imagen

Con el siguiente código CSS podemos rotar una imagen los grados que deseemos:

img {
    transform:
        rotate(45deg)
        scale(-1, 1);
    
    /* para firefox, safari, chrome, etc. */
    -webkit-transform:
        rotate(45deg)
        scale(-1, 1);
    -moz-transform:
        rotate(45deg)
        scale(-1, 1);
    
    /* para ie */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5, mirror=1);
    
    /* opera */
    -o-transform:
        rotate(45deg)
        scale(-1, 1);
}

 

Truco 4 CSS. Navegación rotada

Construye el siguiente menú:

Utiliza las siguientes CSS:

#list8 {  }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; 
  background-color:#333; border-left:5px solid #222; 
  border-right:5px solid #222; padding-left:10px;
  text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover {  -moz-transform:rotate(-5deg); 
  -moz-box-shadow:10px 10px 20px #000000;
  -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
  transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

..ENLACE:

http://demo.marcofolio.net/css_lists/

Truco CSS 3: Enlaces que gradualmente se desvanecen

Con este código harás que cuando un usuario ponga el cursor encima de un enlace (en este caso el enlace del título), éste se desvanezca:

h2 {
    font-size:24px;
    font-weight:bold;
    color: #262626;
    opacity: 1.0;
    -webkit-transition: opacity 0.4s linear;
    }
h2 a {
    color: #262626;
}
h2:hover {
    opacity: 0.7;
}

 

Código HTML:

<h2><a href=»#» title=»Texto del enlace que se desvanece»>Texto del enlace que se desvanece</a></h2>

 

Truco CSS 2: Letra capital

Con este código puedes hacer que la primera letra de un párrafo sea más grande que las demás:

p:first-letter {
  display:block;
  margin:5px 0 0 5px;
  float:left;
  color:#FF3366;
  font-size:60px;
  font-family:Georgia;
}

.

Truco CSS 1: Cambiar el color de la selección de texto

Cuando seleccionas un texto por defecto el texto se convierte en color blanco y el fondo en color azul, pero que pasa si quieres que esto sea diferente en tu web. Solo debes pegar esto en tu CSS:

/* webkit, opera, IE9 */
::selection { background:#555; color:#fff; }
/* mozilla firefox */
::-moz-selection { background:#555; color #fff; }

 

Cambiar la carpeta de apertura por defecto del explorador de Windows 7

 

 

Con este truco para Windows 7 vamos a poder abrir el explorador de Windows en la carpeta que más utilizemos y no en la que viene por defecto, que es la que nos muestra la biblioteca, con nuestros documentos, imágenes, música y videos.

 

Es válido tanto para el icono del explorador de Windows como para el icono de la carpeta que tenemos en la barra de inicio rápido. Para ello haremos lo siguiente:

– Pinchamos con el botón derecho sobre el icono del explorador y luego click derecho de nuevo sobre el icono de explorador de Windows y pinchamos en Propiedades, como se ve en la imagen de arriba, con lo que veremos la siguiente imagen:

– Aqui no tocaremos el texto «%windir%\explorer.exe»  y tras dejar un espacio en blanco, escribiremos la ruta de la carpeta que queramos sea por defecto, por ejemplo, si queremos la de nuestro escritorio sería » C:\Users\dani\Desktop »  , teniendo en cuenta que debereis cambiar «dani» por vuestro usuario y la unidad C por la que tengais instalado Windows 7.

– Tras esto, le damos al botón aceptar y ya está, cada vez que abramos la carpeta de inicio rápido en la barra de tareas iremos directos a la carpeta que elejida.

Espero que os sirva este truco, si teneis dudas , comentadlas en este artículo.

Si quereis volver a poner como carpeta por defecto la que traia Windows 7 simplemente seguimos los pasos y dejamos solo  » %windir%\explorer.exe »  en el acceso directo, sin comillas ojo.