Este documento proporciona numerosos ejemplos de código CSS para aplicar diferentes estilos y efectos en diseños web, incluyendo cómo cambiar el color de la selección de texto, agregar una letra capital inicial, hacer que los enlaces se desvanezcan gradualmente al pasar el cursor, rotar e imágenes, mover el texto de un enlace al hacer clic, aplicar estilos para dispositivos móviles y más. El documento también incluye ejemplos de cómo usar hacks CSS para diferentes navegadores y animar elementos como listas y tabs solo con CSS

1. CSS
El CSS es la manera más perfecta de ponerle estilos y efectos a tus diseños web, y ahora con
CSS3 trae más posibilidades de afectar y mejorar tus diseños.
Es por eso que aquí te traigo algunos tips y trucos para CSS, para que puedas implementarlos
fácilmente en tu diseño web.
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:
1 /* webkit, opera, IE9 */
2 ::selection { background:#555; color:#fff; }
3 /* mozilla firefox */
4 ::-moz-selection { background:#555; color #fff; }
Demostración
Letra capital
Con este código puedes hacer que la primera letra de un párrafo sea más grande que las
demás:
1 p:first-letter {
2 display:block;
3 margin:5px 0 0 5px;
4 float:left;
5 color:#FF3366;
6 font-size:60px;
7 font-family:Georgia;
8}
Demostración

2. 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:
01 h2 {
02 font-size:24px;
03 font-weight:bold;
04 color: #262626;
05 opacity: 1.0;
06 -webkit-transition: opacity 0.4s linear;
07 }
08 h2 a {
09 color: #262626;
10 }
11 h2:hover {
12 opacity: 0.7;
13 }
Demostración
Rotar una imagen
Este Código CSS te permite rotar una imagen los grados que gustes:
01 img {
02 transform:
03 rotate(45deg)
04 scale(-1, 1);
05 /* para firefox, safari, chrome, etc. */
06 -webkit-transform:
07 rotate(45deg)
08 scale(-1, 1);
09 -moz-transform:
10 rotate(45deg)
11 scale(-1, 1);
12 /* para ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5, mirr
13
or=1);
14 /* opera */

3. 15 -o-transform:
16 rotate(45deg)
17 scale(-1, 1);
18 }
Demostración
Mover 1px el enlace al hacer clic
Con este CSS, al hacer clic en el enlace, el texto de éste se moverá hacia abajo 1px:
1 a:active {
2 position: relative;
3 top: 1px;
4}
Demostración
CSS3 Media Queries
Este código CSS te permite aplicar estilos especialmente para dispositivos móviles (iPhones,
Ipads, Androids, etc):
01 /* Smartphones (portrait y landscape) ----------- */
02 @media only screen
03 and (min-device-width : 320px)
04 and (max-device-width : 480px) {
05 /* Styles */
06 }
07
08 /* Smartphones (landscape) ----------- */
09 @media only screen
10 and (min-width : 321px) {
11 /* Styles */
12 }
13
14 /* Smartphones (portrait) ----------- */
15 @media only screen
16 and (max-width : 320px) {

4. 17 /* Styles */
18 }
19
20 /* iPads (portrait y landscape) ----------- */
21 @media only screen
22 and (min-device-width : 768px)
23 and (max-device-width : 1024px) {
24 /* Styles */
25 }
26
27 /* iPads (landscape) ----------- */
28 @media only screen
29 and (min-device-width : 768px)
30 and (max-device-width : 1024px)
31 and (orientation : landscape) {
32 /* Styles */
33 }
34
35 /* iPads (portrait) ----------- */
36 @media only screen
37 and (min-device-width : 768px)
38 and (max-device-width : 1024px)
39 and (orientation : portrait) {
40 /* Styles */
41 }
42
43 /* PCs y portátiles ----------- */
44 @media only screen
45 and (min-width : 1224px) {
46 /* Styles */
47 }
48
49 /* Pantallas grandes ----------- */
50 @media only screen
51 and (min-width : 1824px) {
52 /* Styles */

5. 53 }
54
55 /* iPhone 4 ----------- */
56 @media
57 only screen and (-webkit-min-device-pixel-ratio : 1.5),
58 only screen and (min-device-pixel-ratio : 1.5) {
59 /* Estilos */
60 }
Configurar el tamaño del texto a 62.5% para
convertir fácilmente en EM
Si vas a utilizar unidades relativas (ems), declarar 62.5% el tamaño de la fuente de body, te
ayudará a facilitar la conversión de px a em. Con esto convertir de px a em solo será cuestión
de dividir por 10 el valor en pixéles:
1 body {
2 font-size: 62.5%; /* font-size 1em = 10px */
3}
4p {
5 font-size: 1.2em; /* 1.2em = 12px */
6}
Hacer que el cursor se vuelva un apuntador de
enlace
Algunos elementos que son cliqueables, no les aparece el apuntador de enlace, o sea, la
mano que aparece cuando pones el cursor encima de un enlace. Para hacer que aparezca en
estos elementos solo debes poner el siguiente código:
a[href], input[type='submit'], input[type='image'], label[for], select,
1
button, .pointer {
2 cursor: pointer;
3}
Quitar la linea de color que rodea los
elementos input

6. Por defecto en los navegadores WebKit (Safari, Chrome) los elementos input de un formulario
cambian de color en el borde cuando se situa sobre dicho elemento. para evitar esto debes
poner el siguiente código CSS:
1 input[type="text"]:focus, textarea:focus, input[type="search"]:focus {
2 outline: none;
3}
Crear un efecto giratorio y de zoom en las
imágenes
Con este código CSS puedes hacer que una imagen o un enlace gire 360 grados y tenga un
efecto zoom hasta volver a la normalidad:
01 @-webkit-keyframes rotater {
02 0% { -webkit-transform:rotate(0) scale(1) }
03 50% { -webkit-transform:rotate(360deg) scale(2) }
04 100% { -webkit-transform:rotate(720deg) scale(1) }
05 }
06
07 a.advert { width:125px; height:125px; display:block; }
08 a.advert:hover {
09 /* safari / chrome */
10 -webkit-animation-name:rotater;
11 -webkit-animation-duration:500ms;
12 -webkit-animation-iteration-count:1;
13 -webkit-animation-timing-function: ease-out;
14
15 /* mozilla */
16 -moz-transform:rotate(360deg) scale(2);
17 -moz-transition-duration:500ms;
18 -moz-transition-timing-function: ease-out;
19
20 /* opera */
21 -o-transform:rotate(360deg) scale(2);
22 -o-transition-duration:500ms;
23 -p-transition-timing-function: ease-out;

7. 24
25 /* ie */
26 -ms-transform:rotate(360deg) scale(2);
27 -ms-transform-duration:500ms;
28 -ms-transform-timing-function: ease-out;
29 }
Demostración
Hacks de CSS dependiendo del navegador
Para hacer que los estilos se vena bien en todos los navegadores (sobre todo en IE) existen
algunos hacks para hacer código CSS dependiendo de cada navegador:
01 /***** Hacks de Selectores CSS ******/
02
03 /* IE6 y anteriores */
04 * html #uno { color: red }
05
06 /* IE7 */
07 *:first-child+html #dos { color: red }
08
09 /* IE7, FF, Saf, Opera */
10 html>body #tres { color: red }
11
12 /* IE8, FF, Saf, Opera (Todo menos IE 6,7) */
13 html>/**/body #cuatro { color: red }
14
15 /* Opera 9.27 y anteriores, safari 2 */
16 html:first-child #cinco { color: red }
17
18 /* Safari 2-3 */
19 html[xmlns*=""] body:last-child #seis { color: red }
20
21 /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
22 body:nth-of-type(1) #siete { color: red }

8. 23
24 /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
25 body:first-of-type #ocho { color: red }
26
27 /* saf3+, chrome1+ */
28 @media screen and (-webkit-min-device-pixel-ratio:0) {
29 #diez { color: red }
30 }
31
32 /* iPhone / mobile webkit */
33 @media screen and (max-device-width: 480px) {
34 #veintiseis { color: red }
35 }
36
37 /* Safari 2 - 3.1 */
38 html[xmlns*=""]:root #trece { color: red }
39
40 /* Safari 2 - 3.1, Opera 9.25 */
41 *|html[xmlns*=""] #catorce { color: red }
42
43 /* Todo menos IE6-8 */
44 :root *> #quince { color: red }
45
46 /* IE7 */
47 *+html #dieciocho { color: red }
48
49 /* Solo Firefox. 1+ */
50 #veinticuatro, x:-moz-any-link { color: red }
51
52 /* Firefox 3.0+ */
53 #veinticinco, x:-moz-any-link, x:default { color: red }
54
55 /***** Hacks de Atributos ******/
56

9. 57 /* IE6 */
58 #once { _color: blue }
59
60 /* IE6, IE7 */
61 #doce { *color: blue; /* or #color: blue */ }
62
63 /* Todo menos IE6 */
64 #diecisiete { color/**/: blue }
65
66 /* IE6, IE7, IE8 */
67 #diecinueve { color: blue9; }
68
69 /* IE7, IE8 */
70 #veinte { color/***/: blue9; }
71
72 /* IE6, IE7 -- actúa como !important */
73 #veintesiete { color: blue !ie; }
Animar una lista de enlaces
Con este código, cuando pasas el cursor encima del enlace de una lista, cada enlace se
mueve un poco a la derecha. Realizado enteramente con CSS sin necesidad de jQuery:
1 #animateList li a {
2 cursor: pointer;
3 -webkit-transition: padding-left 250ms ease-out;
4 -moz-transition: padding-left 250ms ease-out;
5}
6
7 #animateList li a:hover {
8 padding-left: 10px;
9}
Demostración
Transparencia / Opacidad en todos los navegadores

10. Con este código podrás poner transparencia a elementos de tu diseño y que funciones en
todos los navegadores
1 div {
2 /* FF, Safari, Chrome, IE9 y 10 */
3 opacity:0.7;
4
5 /* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /*
6
IE8 */
7 filter: alpha(opacity=70); /* IE 5-7 */
8}
Estilo para enlaces externos
Este código CSS te permite ponerle un estilo especial a los enlaces externos. Por ejemplo, un
icono al lado del enlace:
1 a[href^="http"] {
2 background: url(icono.png) no-repeat;
3 padding-left: 10px;
4}
Demostración
Estilo del enlace dependiendo de una palabra
predefinida
Con este código puedes darle estilo a un enlace dependiendo del texto que contenga la URL
del enlace:
1 a[href*="trazos"] {
2 color: #39486c;
3}
Demostración
Estilo del enlace dependiendo de extensión
del archivo enlazado

11. Con este código puedes ponerle estilos diferentes cuando enlazas un archivo RAR, ZIP, JPG,
etc:
1 a[href$=".jpg"] {
2 color: red;
3}
Demostración
Utilizar fuentes de Google
Con este código puedes utilizar cualquier fuente disponible en Webfonts de Google:
Debes agregar el código que te genera la página de Webfonts entre las etiquetas <head> y
</head>:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:700' rel='style
1
sheet' type='text/css'>
y luego este en el archivo de tus estilos CSS:
1 h1 {
2 font-family: 'Ubuntu', sans-serif;
3}
Demostración
Hacer texto con bajo relieve
Con este código CSS haces que el texto se vea con un efecto de bajo relieve:
01 body {
02 background: #222222;
03 color: #131313;
04 font-size: 100px;
05 }
06
07 p {
08 text-align: center;
09 text-transform: uppercase;

12. 10 text-shadow: #2d2f2d 2px 2px 4px;
11
12 }
Demostración
Tabs animados solo con CSS
Con este código puede poner una sección de tabs animados, sin la necesidad de utilizar
jQuery.
Solo debes poner esto en donde quieras que aparezcan los tabs:
01 <div class="tabs">
02
03 <div class="tab">
04 <input type="radio" id="tab-1" name="tab-group-1" checked>
05 <label for="tab-1">Tab 1</label>
06
07 <div class="content">
08 <p>Aquí va algún contenido para el tab 1</p>
09 </div>
10 </div>
11
12 <div class="tab">
13 <input type="radio" id="tab-2" name="tab-group-1">
14 <label for="tab-2">Tab 2</label>
15
16 <div class="content">
17 <p>Aquí va algún contenido para el tab 2</p>
18
19 <img src="http://lorempixum.com/200/100/technics/">
20 </div>
21 </div>
22
23 <div class="tab">
24 <input type="radio" id="tab-3" name="tab-group-1">

13. 25 <label for="tab-3">Tab 3</label>
26
27 <div class="content">
28 <p>Aquí va algún contenido para el tab 3</p>
29
30 <img src="http://lorempixum.com/200/100/nightlife/">
31 </div>
32 </div>
33
34 </div>
y luego poner esto en el archivo de estilos CSS:
01 .tabs {
02 position: relative;
03 min-height: 200px;
04 clear: both;
05 margin: 25px 0;
06 }
07 .tab {
08 float: left;
09 }
10 .tab label {
11 background: #eee;
12 padding: 10px;
13 border: 1px solid #ccc;
14 margin-left: -1px;
15 position: relative;
16 left: 1px;
17 }
18 .tab [type=radio] {
19 display: none;
20 }
21 .content {
22 position: absolute;
23 top: 28px;

14. 24 left: 0;
25 background: white;
26 right: 0;
27 bottom: 0;
28 padding: 20px;
29 border: 1px solid #ccc;
30 overflow: hidden;
31 }
32 .content > * {
33 opacity: 0;
34
35 -webkit-transform: translate3d(0, 0, 0);
36
37 -webkit-transform: translateX(-100%);
38 -moz-transform: translateX(-100%);
39 -ms-transform: translateX(-100%);
40 -o-transform: translateX(-100%);
41
42 -webkit-transition: all 0.6s ease;
43 -moz-transition: all 0.6s ease;
44 -ms-transition: all 0.6s ease;
45 -o-transition: all 0.6s ease;
46 }
47 [type=radio]:checked ~ label {
48 background: white;
49 border-bottom: 1px solid white;
50 z-index: 2;
51 }
52 [type=radio]:checked ~ label ~ .content {
53 z-index: 1;
54 }
55 [type=radio]:checked ~ label ~ .content > * {
56 opacity: 1;
57
58 -webkit-transform: translateX(0);
59 -moz-transform: translateX(0);
60 -ms-transform: translateX(0);

15. 61 -o-transform: translateX(0);
62 }
Demostración
Infografía