19 tips para css
TRANSCRIPT
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
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 */
13 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5, mirror=1);
14 /* opera */
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) {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 */
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 }
4 p {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:
1 a[href], input[type='submit'], input[type='image'], label[for], select,
button, .pointer {
2 cursor: pointer;
3 }
Quitar la linea de color que rodea los elementos input
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;
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 }
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
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: blue\9; }
68
69 /* IE7, IE8 */
70 #veinte { color/*\**/: blue\9; }
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
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 */
6 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* 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
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>:
1 <link href='http://fonts.googleapis.com/css?family=Ubuntu:700' rel='stylesheet' 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;
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">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;
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);61 -o-transform: translateX(0);
62 }
Demostración
Infografía