Tags » CSS 2

CSS BUTTONS: TUTORIALS AND EXAMPLES

Creating buttons with CSS is one of the most experimented-with web design techniques around. Examples and tutorials abound.

The biggest recent trend in CSS button design seems to be eliminating images, especially background images, from buttons. 830 more words

Css

Updating the .CSS

Improvements

  • Changed the colour scheme, from blue to a green. We did this as the logo which Chloe created was brown and did not really go with the colour scheme we already had in place.
  • 62 more words
D4DME

CSS: Using Element Query

Responsive design is known to all. To achieve responsiveness we generally use media queries. But I feel media queries are some kind of CSS Hack. It is really annoying when I need to work with it. 122 more words

Codeings

CSS Organization and Structure using LESS

Introduction

For the last few years I’ve been using HTML5 BoilerplateLESS to generate CSS for the sites I develop.  Despite all of the great features in LESS to help me do more with less code, I’ve found things can still get unruly and difficult to manage.   948 more words

Css

Versión CSS:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)  {
    p {
        // Estilos retina aquí
    }
}

Versión LESS (variable):

// Variable
@retina: ~"(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";

// Uso
p {
    // Estilo normal aquí
    @media @retina {
        // Estilo retina aquí
    }
}
Css

Versión CSS:

@media (max-device-width: 42mm) and (min-device-width: 38mm) { 
    p {
        font-weight: 100;
    }
}

Versión LESS (variable):

// Variable
@iwatch: ~"(max-device-width: 42mm) and (min-device-width: 38mm);

// Uso
p {
    font-weight: 300;
    @media @iwatch {
        font-weight: 100;
    }
}
Css

Versión CSS:

@media (max-device-width: 218px) and (max-device-height: 281px) { 
    p {
        font-weight: 100;
    }
}

Versión LESS (variable):

// Variable
@moto360: ~"(max-device-width: 218px) and (max-device-height: 281px)";

// Uso
p {
    font-weight: 300;
    @media @moto360 {
        font-weight: 100;
    }
}
Css