Foros del Web » Creando para Internet » CSS »

¿Hay manera de resumir este código?

Estas en el tema de ¿Hay manera de resumir este código? en el foro de CSS en Foros del Web. Que tal, hay manera de resumir esto pero que funcione igual? @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original input [ type = "submit" ] {   ...
  #1 (permalink)  
Antiguo 28/08/2013, 22:24
Avatar de LoUiMaNiAkO  
Fecha de Ingreso: enero-2006
Mensajes: 198
Antigüedad: 18 años, 10 meses
Puntos: 1
¿Hay manera de resumir este código?

Que tal, hay manera de resumir esto pero que funcione igual?

Código CSS:
Ver original
  1. input[type="submit"] {
  2.     -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  3.     -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  4.     box-shadow:inset 0px 1px 0px 0px #ffffff;
  5.     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
  6.     background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
  7.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
  8.     background-color:#ffffff;
  9.     -moz-border-radius:6px;
  10.     -webkit-border-radius:6px;
  11.     border-radius:6px;
  12.     border:1px solid #dcdcdc;
  13.     display:inline-block;
  14.     color:#777777;
  15.     font-family:arial;
  16.     font-size:12px;
  17.     font-weight:bold;
  18.     padding:3px 12px;
  19.     text-decoration:none;
  20.     text-shadow:1px 1px 0px #ffffff;
  21.               cursor:pointer;
  22. }
  23. input[type="submit"]:hover {
  24.     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
  25.     background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
  26.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
  27.     background-color:#d1d1d1;
  28. }
  29. input[type="submit"]:hover {
  30.     position:relative;
  31.     top:1px;}
  32. input[type="reset"] {
  33. -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  34.     -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  35.     box-shadow:inset 0px 1px 0px 0px #ffffff;
  36.     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
  37.     background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
  38.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
  39.     background-color:#ffffff;
  40.     -moz-border-radius:6px;
  41.     -webkit-border-radius:6px;
  42.     border-radius:6px;
  43.     border:1px solid #dcdcdc;
  44.     display:inline-block;
  45.     color:#777777;
  46.     font-family:arial;
  47.     font-size:12px;
  48.     font-weight:bold;
  49.     padding:3px 12px;
  50.     text-decoration:none;
  51.     text-shadow:1px 1px 0px #ffffff;
  52.     cursor:pointer;
  53. }
  54. input[type="reset"]:hover {
  55.     position:relative;
  56.     top:1px;}
  57.    
  58. input[type="reset"]:hover{
  59.         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
  60.     background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
  61.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
  62.     background-color:#d1d1d1;}
  63.  
  64. input[type="button"] {
  65. -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  66.     -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  67.     box-shadow:inset 0px 1px 0px 0px #ffffff;
  68.     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
  69.     background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
  70.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
  71.     background-color:#ffffff;
  72.     -moz-border-radius:6px;
  73.     -webkit-border-radius:6px;
  74.     border-radius:6px;
  75.     border:1px solid #dcdcdc;
  76.     display:inline-block;
  77.     color:#777777;
  78.     font-family:arial;
  79.     font-size:12px;
  80.     font-weight:bold;
  81.     padding:3px 12px;
  82.     text-decoration:none;
  83.     text-shadow:1px 1px 0px #ffffff;
  84.     cursor:pointer;
  85. }
  86. input[type="button"]:hover {
  87.         background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
  88.     background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
  89.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
  90.     background-color:#d1d1d1;}
  91.     input[type="button"]:hover {
  92.     position:relative;
  93.     top:1px;}
__________________
:molesto: "Soy como dios k nunca llora y como satanas k nunca resa":molesto:

Dejate seducir por mis colmillos

Última edición por pzin; 29/08/2013 a las 01:26 Razón: formato código
  #2 (permalink)  
Antiguo 29/08/2013, 01:25
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Hay manera de resumir este codigo?

Puedes obviar cosas como los prefijos propietarios de box-shadow/border-radius, luego Chrome y Firefox creo que soportan ya degradados sin eso tampoco, y poco más.

Usa highlight cuando publiques código.
  #3 (permalink)  
Antiguo 30/08/2013, 00:50
 
Fecha de Ingreso: abril-2010
Mensajes: 122
Antigüedad: 14 años, 7 meses
Puntos: 18
Respuesta: ¿Hay manera de resumir este código?

para darle formato al texto podes usarlo asi.. font: bold 12px arial; asi te ahorras el font-family, font-size y font-weight

la otra es que si usas el mismo :hover para los botones, podes agruparlos y no repetir codigo..

input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {...}
  #4 (permalink)  
Antiguo 30/08/2013, 15:31
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 8 meses
Puntos: 1146
Respuesta: ¿Hay manera de resumir este código?

sumado a lo que te dice comablck, puedes usar font: 700 12px arial;.... el dijo bold pero se recomienda usar 700 para bold, 600 semibold, 400 normal, 200 light

también los colores hexagesimales por ejemplo usas #ffffff cuando basta con #fff
son 3 caracteres menos que tal vez no es mucho pero se ahorran :D

también en repetidas veces declaras valores a cero con 0px ..... cuando se declara un valor en ceros no necesitas especificar la unidad de medida px, pt, em o cualquiera no importa cero siempre sera cero, así que solo escribe 0 sin la unidad de medida.

Etiquetas: background, color, hover, manera
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:40.