19 tips para css

1,069 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,069
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

19 tips para css

  1. 1. CSSEl CSS es la manera más perfecta de ponerle estilos y efectos a tus diseños web, y ahora conCSS3 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 implementarlosfácilmente en tu diseño web.Cambiar el color de la selección de textoCuando seleccionas un texto por defecto el texto se convierte en color blanco y el fondo encolor azul, pero que pasa si quieres que esto sea diferente en tu web. Solo debes pegar estoen tu CSS:1 /* webkit, opera, IE9 */2 ::selection { background:#555; color:#fff; }3 /* mozilla firefox */4 ::-moz-selection { background:#555; color #fff; } DemostraciónLetra capitalCon este código puedes hacer que la primera letra de un párrafo sea más grande que lasdemá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. 2. Enlaces que gradualmente se desvanecenCon este código harás que cuando un usuario ponga el cursor encima de un enlace (en estecaso 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ónRotar una imagenEste 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, mirr13 or=1);14 /* opera */
  3. 3. 15 -o-transform:16 rotate(45deg)17 scale(-1, 1);18 } DemostraciónMover 1px el enlace al hacer clicCon 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ónCSS3 Media QueriesEste código CSS te permite aplicar estilos especialmente para dispositivos móviles (iPhones,Ipads, Androids, etc):01 /* Smartphones (portrait y landscape) ----------- */02 @media only screen03 and (min-device-width : 320px)04 and (max-device-width : 480px) {05 /* Styles */06 }0708 /* Smartphones (landscape) ----------- */09 @media only screen10 and (min-width : 321px) {11 /* Styles */12 }1314 /* Smartphones (portrait) ----------- */15 @media only screen16 and (max-width : 320px) {
  4. 4. 17 /* Styles */18 }1920 /* iPads (portrait y landscape) ----------- */21 @media only screen22 and (min-device-width : 768px)23 and (max-device-width : 1024px) {24 /* Styles */25 }2627 /* iPads (landscape) ----------- */28 @media only screen29 and (min-device-width : 768px)30 and (max-device-width : 1024px)31 and (orientation : landscape) {32 /* Styles */33 }3435 /* iPads (portrait) ----------- */36 @media only screen37 and (min-device-width : 768px)38 and (max-device-width : 1024px)39 and (orientation : portrait) {40 /* Styles */41 }4243 /* PCs y portátiles ----------- */44 @media only screen45 and (min-width : 1224px) {46 /* Styles */47 }4849 /* Pantallas grandes ----------- */50 @media only screen51 and (min-width : 1824px) {52 /* Styles */
  5. 5. 53 }5455 /* iPhone 4 ----------- */56 @media57 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% paraconvertir fácilmente en EMSi vas a utilizar unidades relativas (ems), declarar 62.5% el tamaño de la fuente de body, teayudará a facilitar la conversión de px a em. Con esto convertir de px a em solo será cuestiónde 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 deenlaceAlgunos elementos que son cliqueables, no les aparece el apuntador de enlace, o sea, lamano que aparece cuando pones el cursor encima de un enlace. Para hacer que aparezca enestos 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 loselementos input
  6. 6. Por defecto en los navegadores WebKit (Safari, Chrome) los elementos input de un formulariocambian de color en el borde cuando se situa sobre dicho elemento. para evitar esto debesponer 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 lasimágenesCon este código CSS puedes hacer que una imagen o un enlace gire 360 grados y tenga unefecto 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 }0607 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;1415 /* mozilla */16 -moz-transform:rotate(360deg) scale(2);17 -moz-transition-duration:500ms;18 -moz-transition-timing-function: ease-out;1920 /* opera */21 -o-transform:rotate(360deg) scale(2);22 -o-transition-duration:500ms;23 -p-transition-timing-function: ease-out;
  7. 7. 2425 /* ie */26 -ms-transform:rotate(360deg) scale(2);27 -ms-transform-duration:500ms;28 -ms-transform-timing-function: ease-out;29 } DemostraciónHacks de CSS dependiendo del navegadorPara hacer que los estilos se vena bien en todos los navegadores (sobre todo en IE) existenalgunos hacks para hacer código CSS dependiendo de cada navegador:01 /***** Hacks de Selectores CSS ******/0203 /* IE6 y anteriores */04 * html #uno { color: red }0506 /* IE7 */07 *:first-child+html #dos { color: red }0809 /* IE7, FF, Saf, Opera */10 html>body #tres { color: red }1112 /* IE8, FF, Saf, Opera (Todo menos IE 6,7) */13 html>/**/body #cuatro { color: red }1415 /* Opera 9.27 y anteriores, safari 2 */16 html:first-child #cinco { color: red }1718 /* Safari 2-3 */19 html[xmlns*=""] body:last-child #seis { color: red }2021 /* safari 3+, chrome 1+, opera9+, ff 3.5+ */22 body:nth-of-type(1) #siete { color: red }
  8. 8. 2324 /* safari 3+, chrome 1+, opera9+, ff 3.5+ */25 body:first-of-type #ocho { color: red }2627 /* saf3+, chrome1+ */28 @media screen and (-webkit-min-device-pixel-ratio:0) {29 #diez { color: red }30 }3132 /* iPhone / mobile webkit */33 @media screen and (max-device-width: 480px) {34 #veintiseis { color: red }35 }3637 /* Safari 2 - 3.1 */38 html[xmlns*=""]:root #trece { color: red }3940 /* Safari 2 - 3.1, Opera 9.25 */41 *|html[xmlns*=""] #catorce { color: red }4243 /* Todo menos IE6-8 */44 :root *> #quince { color: red }4546 /* IE7 */47 *+html #dieciocho { color: red }4849 /* Solo Firefox. 1+ */50 #veinticuatro, x:-moz-any-link { color: red }5152 /* Firefox 3.0+ */53 #veinticinco, x:-moz-any-link, x:default { color: red }5455 /***** Hacks de Atributos ******/56
  9. 9. 57 /* IE6 */58 #once { _color: blue }5960 /* IE6, IE7 */61 #doce { *color: blue; /* or #color: blue */ }6263 /* Todo menos IE6 */64 #diecisiete { color/**/: blue }6566 /* IE6, IE7, IE8 */67 #diecinueve { color: blue9; }6869 /* IE7, IE8 */70 #veinte { color/***/: blue9; }7172 /* IE6, IE7 -- actúa como !important */73 #veintesiete { color: blue !ie; }Animar una lista de enlacesCon este código, cuando pasas el cursor encima del enlace de una lista, cada enlace semueve 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}67 #animateList li a:hover {8 padding-left: 10px;9} DemostraciónTransparencia / Opacidad en todos los navegadores
  10. 10. Con este código podrás poner transparencia a elementos de tu diseño y que funciones entodos los navegadores1 div {2 /* FF, Safari, Chrome, IE9 y 10 */3 opacity:0.7;45 /* IE */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /*6 IE8 */7 filter: alpha(opacity=70); /* IE 5-7 */8}Estilo para enlaces externosEste código CSS te permite ponerle un estilo especial a los enlaces externos. Por ejemplo, unicono al lado del enlace:1 a[href^="http"] {2 background: url(icono.png) no-repeat;3 padding-left: 10px;4} DemostraciónEstilo del enlace dependiendo de una palabrapredefinidaCon este código puedes darle estilo a un enlace dependiendo del texto que contenga la URLdel enlace:1 a[href*="trazos"] {2 color: #39486c;3} DemostraciónEstilo del enlace dependiendo de extensióndel archivo enlazado
  11. 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ónUtilizar fuentes de GoogleCon 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=style1 sheet type=text/css>y luego este en el archivo de tus estilos CSS:1 h1 {2 font-family: Ubuntu, sans-serif;3} DemostraciónHacer texto con bajo relieveCon 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 }0607 p {08 text-align: center;09 text-transform: uppercase;
  12. 12. 10 text-shadow: #2d2f2d 2px 2px 4px;1112 } DemostraciónTabs animados solo con CSSCon este código puede poner una sección de tabs animados, sin la necesidad de utilizarjQuery.Solo debes poner esto en donde quieras que aparezcan los tabs:01 <div class="tabs">0203 <div class="tab">04 <input type="radio" id="tab-1" name="tab-group-1" checked>05 <label for="tab-1">Tab 1</label>0607 <div class="content">08 <p>Aquí va algún contenido para el tab 1</p>09 </div>10 </div>1112 <div class="tab">13 <input type="radio" id="tab-2" name="tab-group-1">14 <label for="tab-2">Tab 2</label>1516 <div class="content">17 <p>Aquí va algún contenido para el tab 2</p>1819 <img src="http://lorempixum.com/200/100/technics/">20 </div>21 </div>2223 <div class="tab">24 <input type="radio" id="tab-3" name="tab-group-1">
  13. 13. 25 <label for="tab-3">Tab 3</label>2627 <div class="content">28 <p>Aquí va algún contenido para el tab 3</p>2930 <img src="http://lorempixum.com/200/100/nightlife/">31 </div>32 </div>3334 </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. 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;3435 -webkit-transform: translate3d(0, 0, 0);3637 -webkit-transform: translateX(-100%);38 -moz-transform: translateX(-100%);39 -ms-transform: translateX(-100%);40 -o-transform: translateX(-100%);4142 -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;5758 -webkit-transform: translateX(0);59 -moz-transform: translateX(0);60 -ms-transform: translateX(0);
  15. 15. 61 -o-transform: translateX(0);62 } DemostraciónInfografía

×