Trucos CSS (Parte 2)

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Letra capital

Como en los libros antiguos, con el siguiente código puedes hacer que la primera letra de un párrafo sea más grande que las demás (demostración)

p:letra-capital{
display:block;
margin:5px 0 0 5px;
float:left;
color:#4F96D2;
font-size:65px;
font-family:Georgia;
}

Cambiar el color de la selección de texto

Con este código conseguirás cambiar el color de la selección de texto, por defecto el texto se convierte en color blanco y el fondo en color azul, muy útil para conseguir darle un diseño más adapatado a nuestra web.  (demostración)

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

Enlaces que gradualmente se desvanecen

Copia y pega el siguiente código CSS para conseguir el efecto al poner el ratón sobre el enlace h1 se desvanezca. (demostración)

h1 {
    font-size:25px;
    font-weight:bold;
    color: #262626;
    opacity: 1.0;
    -webkit-transition: opacity 0.5s linear;
}
h1 a {
    color: #262626;
}
h1:hover {
    opacity: 0.8;
}

Mover 1px el enlace al hacer clic

Con el siguiente código CSS, conseguirás que al hacer click sobre el enlace, el texto dentro de el se mueva hacia abajo 1px: (demostración)

a:active {
     position: relative;
     top: 1px;
}

CSS3 Media Queries

Este código CSS te permite aplicar estilos especialmente para dispositivos móviles (iPhones, iPads, Android, pantallas grandes):

/* Smartphones (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait y landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* PCs y portátiles ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Pantallas grandes ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos */
}

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.