jacinmontava posteets tagged css  [ Profile ]

Sort by: Date / Title /

  1. Como visualizar elementos criticos en CSS 
    5 months ago
    Reinhold Weber desde su blog, nos ofrece una atractiva, útil e interesante técnica para detectar elementos vacíos en nuestro diseño como DIVs, listas, párrafos, celdas en tablas o etiquetas alt sin información o etiquetas title vacías, etc. Ha utilizado colores para representar áreas donde debemos prestar atención y sólo hay que incluir el siguiente código al final de nuestro CSS
    1. /* Empty Elements */
    2. div:empty, span:empty, li:empty, p:empty, td:empty, th:empty
    3. { padding: 20px; border: 5px dotted yellow !important; }
    4.  
    5. /* Empty Attributes */
    6. *[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"]
    7. { border: 5px solid yellow !important; }
    8.  
    9. /* Deprecated Elements */
    10. applet, basefont, center, dir, font, isindex, menu, s, strike, u
    11. { border: 5px dotted red !important; }
    12.  
    13. /* Deprecated Attributes */
    14.  
    15. *[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start],
    16. *[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink],
    17. *[align], *[valign],
    18. *[hspace], *[vspace],
    19. *[height], *[width],
    20. ul[type], ol[type], li[type]
    21. { border: 5px solid red !important; }
    22.  
    23. /* Proposed Deprecated Elements */
    24. input[type="button"], big, tt
    25. { border: 5px dotted #33FF00 !important; }
    26.  
    27. /* Proposed Deprecated Attributes */
    28. *[border], a[target], table[cellpadding], table[cellspacing], *[name]
    29. { border: 5px solid #33FF00 !important; }
    View source | 0
  2. Solapamiento Div's y Flash
    6 months ago
    El parametro wmode puesto como transparent hara que los divs siempre esten por encima del objeto flash.
    1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="200" title="slip">
    2. <param name="movie" value="RUTA_ARCHIVO">
    3. <param name="quality" value="high">
    4. <param name="wmode" value="transparent"> <!-- este es el parametro que hara que los div's esten por encima del objeto flash -->
    5. <embed src="RUTA_ARCHIVO" width="500" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
    6. </object>
    View source | 0
  3. Borde interno en imagenes con CSS
    7 months ago
    1. <a href="#"><img src="foto.jpg" /></a>
    2.  
    3. a {
    4.      display: block;
    5.      overflow: hidden;
    6.      position: relative;
    7.      width: 300px;
    8.      height: 200px;
    9. }
    10.           a img {
    11.                display: block;
    12.           }
    13.           a:hover {
    14.                border: 5px solid red;
    15.                width: 290px;
    16.                height: 190px;
    17.           }
    18.                a:hover img {
    19.                     margin: -5px 0 0 -5px;
    20.                }
    View source | 0

First / Previous / Next / Last / Page 1 of 1 (3 posteets)