:: CSS. Sustituir imagen por css

En alguna ocasión necesitamos cambiar una imagen por otra en nuestras maquetaciones web.

Existen distintas alternativas, pero una de ellas sería mediante el uso de CSS. 








Por ejemplo, en un portal Liferay 6.2 al añadir el componente: "Búsqueda de contenido web", el aspecto del buscador sería el siguiente:

Para adaptarlo al diseño del portal, podríamos aplicar los siguientes estilos css, en los que se incluye la sustitución de la imagen "de la lupa", por una más acorde a la línea general del diseño:

.portlet-journal-content-search input.lfr-search-keywords {
    height: 61px;
    line-height: 61px;
    padding: 0;
    width: 100%;
    border-color: #e0e5e8;
    text-indent: 10px;
}

.portlet-journal-content-search .lfr-search-button {
    position: relative;
    left: 0;
    width: 80% !important;
    padding-left: 115px;
    height: 61px;
    background: url(/netic360-theme/css/images/search-icon-big.png) scroll no-repeat center center white;
    cursor: pointer;
    background-color: #c30e2e;
    top: -5px;
    
    box-sizing:border-box;
    overflow:hidden;
}

Tras aplicar estos estilos el aspecto sería similar al siguiente:

:: Tip CSS. Ser específico

Cuando realizamos por ejemplo un desarrollo web, necesitamos hacer uso de CSS (Cascading Style Sheets) y es posible que en muchas ocasiones hayamos utilizado reglas "abreviadas"; Si queremos cambiar el color de fondo de un elemento, podríamos utilizar el siguiente código:

background:red;

Esta versión abreviada, aunque nos ahorra tiempo, automáticamente se están definiendo estas otras propiedades:

background-color : red;
background-repeat : repeat;
background-origin : padding-box;
background-image : none;
background-position : 0% 0%;
background-size : auto auto;
background-clip : border-box;
background-attachment : scroll;

Por lo tanto, la mejor opción sería ser lo más específico posible, en este caso:

background-color:red;

:: Tip CSS. Regla para marcar lo que ocupa un elemento

Únicamente como un detalle para marcar lo que ocupa un elemento cuando estamos maquetando, podríamos aplicarle los estilos css siguientes.
De esta manera, nos ayudará a darnos cuenta de lo que realmente está sucediendo en nuestra maqueta.

outline: 2px dotted red

:: CSS. Cómo centrar elementos HTML

Breve resumen sobre cómo centrar elementos HTML, teniendo en cuenta si son elementos de bloque o de línea.
Algo a tener en cuenta y que puede sernos de ayuda cuando estamos maquetando una web.

Fuente: Campus MVP