Etiquetas: css*

17 bookmark(s) - Por: Fecha ↓ / Título /

  1. Here’s some things the page does that might not be obvious at first glance:

    Responsive design so it works on phones
    Screenshots and logos are fully retinafied
    SVG images for some of the logos
    Self-serve web fonts
    Hover over the top area with the piecharts and you see an animated tooltip popping up, just as in Freckle (this is done with just CSS)
    The “screencast” further down the page is an animated GIF at retina resolution (biggest asset on the page at 386K)
    The press logos under the plan selection are using webkit-filter to show them in greyscale (hint: add -webkit-transform: translateZ(0) so this works correctly on retina screens on Safari)

    Now, you could use JavaScript for many of these things—swapping out images for retina screens, using hosted web fonts that may require a JavaScript-based loader (and another DNS lookup), animating the tooltip, have a Flash and/or HTML5-based, JavaScript-controlled video playing.

    But, guess what, browsers these days have a lot of super useful stuff built-in so you don’t need to (and yes, the site will horribly fail on Internet Explorer before version 9, but we don’t target that crowd anyway as Freckle is not compatible with those).

    The result? Next to that it obviously loads pretty fast, PageSpeed Insights gives the page a 95/100 score.
    http://mir.aculo.us/2013/08/10/how-ma...ks-do-you-need-to-make-a-landing-page
    Tags: , , , , , , por jose (2013-08-11)
  2. The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
    http://www.w3.org/TR/css3-flexbox
    Tags: por bianka (2013-04-30)
  3. Para detectar código duplicado y código no usado.
    http://alistapart.com/blog/post/two-tools-to-keep-your-css-clean
    Tags: por bianka (2013-04-11)
  4. Recurso para aprender CSS.
    http://learnlayout.com
    Tags: , por bianka (2013-03-15)
  5. -
    http://css-tricks.com/convert-menu-to-dropdown
    Tags: , , , , por jose (2013-02-14)
  6. Ideales para tener un código «mantenible»
    https://github.com/styleguide
    Tags: , por jose (2012-12-03)
  7. -
    http://feedproxy.google.com/~r/Ksesoc...ocabulario-glosario-terminos-css.html
    Tags: por bianka (2012-11-11)
  8. En esta completa guía, el autor nos muestra el uso de las principales características que este lenguaje ofrece. De entre ellas, destacamos los nuevos selectores, los pseudo elementos, las pseudo clases y toda una serie de efectos estéticos que abarcan desde la tipografía a las transformaciones 3D.
    http://www.etnassoft.com/biblioteca/guia-completa-de-css3
    Tags: por bianka (2012-10-27)
  9. In order to embrace designing native layouts for the web—whatever the device—we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.
    http://www.alistapart.com/articles/the-infinite-grid
    Tags: , por bianka (2012-10-19)
  10. -
    http://blog.millermedeiros.com/solid-css
    Tags: por bianka (2012-09-13)

Top of the page

Primera / Anterior / Siguiente / Última / Página 1 de 2 Marcadores de Cartograf: tagged with "css"

Acerca de - Propulsed by SemanticScuttle