Archivo de la etiqueta: estilo web

Aplicar estilo a multiples elementos excepto unos

La semana pasada en Selección múltiple con patrones en CSS explicaba como aplicar estilos a multiples elementos por medio de patrones. Pero ¿que sucede si dentro de ese grupo de elementos hay algunos a los cuales no queremos que se aplique ese estilo? Voy a poner un ejemplo donde nos podemos encontrar con esa situación, supongamos que estamos utilizando bootstrap 3 en nuestra web, y tenemos un formulario en el cual queremos poner un asterisco rojo delante de todos los elementos obligatorios, una manera sencilla y rápida para hacerlo es con CSS, aplicando un simple estilo

label.required:before   {
    content: "*";
    color: red;
}

Con esta regla lo que hacemos es antes de cada label(con el pseudo selector before, si quisiéramos que fuera después lo sustituiríamos por :after) que sea de la clase required le agregamos un * de color rojo. Según como tengamos diseñado el formulario, y si estamos usando elementos radio, nos podemos encontrar que delante de cada etiqueta de radio nos ha puesto el asterisco, para solucionar esto podemos usar el pseudo selector :not de la siguiente manera:

label:not(.radio).required:before   {
    content: "*";
    color: #ff3b30;
}

Espero que os sea de utilidad.

Convertidor de RGB a Hexadecimal

Seguramente en algún momento mientras estamos desarrollando hemos necesitado convertir un color de RGB a Hexadecimal, por ejemplo, en los nuevos diseños de paginas web, se esta empezando a usar cada vez mas el RGB o RGBA a la hora de establecer los colores, y puede que necesitemos trasladar ese color a hexadecimal, para ello podemos usar la siguiente pagina web para que nos convierta el color http://www.javascripter.net/faq/rgbtohex.htm

Bootswatch, temas gratuitos para Bootstrap

Bootstrap es para mi uno de los mejores «Frameworks» a la hora de desarrollas webs compatibles con dispositivos móviles, pero puede resultar un poco básico en algunos momentos. Buscando por internet descubrí Bootswatch en el cual tenemos unos cuantos temas que nos pueden ayudar a la hora de realizar nuestra web. Estos temas están disponibles tanto para la versión 2.3.2 de Bootstrap como para la nueva versión 3

+ Info http://bootswatch.com/ y http://getbootstrap.com