Tips CSS: Ocultar el Outline y poner el logo con H1

Aquí les dejo unos pequeños tips para su CSS, imagino se han dado cuenta que al poner un enlace y hacer click sobre el mismo aun le hallan puesto la propiedad border:0; le aparece un borde punteado alrededor esto sucede cuando el objeto a tiene asignada la propiedad display:block; como evitar esto?.

CSS Tutorial, Outline y logos protegidos

Bueno pues las siguiente lineas te enseñaran la manera de evitar esto y a parte poner un logo que al oprimirle con el botón derecho encima no les aparezca ni Guardar Imagen.. y tampoco Ver imagen de fondo… y aparte sea un enlace.

Primer paso:

Generar codigo html, usaremos H1 para incluso ayudar al SEO de nuestro sitio:
[code lang=”html4strict”]



[/code]


Podemos poner un texto dentro de la etiqueta h1 que por default tiene la propiedad block y aparte este texto es el que nos servira para el SEO.

Segundo Paso:

Creamos el CSS:
[code lang=”css”]
.orig_header_logo{
background:url(ubuntulogo.png) no-repeat;
width:202px;
height:55px;
display:block;
font-weight:bold;
color:#333333;
font-size:28px;
font-family:Arial, Verdana, Tahoma, Serif;
margin:0 auto;
}
[/code]
Aquí va la descripción de esto, la primera propiedad background únicamente define la imagen de fondo de la etiqueta a con class orig_header_logo la siguiente width y height es para definir el tamaño exacto del bloque según el tamaño de la imagen de fondo, display:block tal vez esta de mas ponérselo, la siguientes si son de mas únicamente le dan formato al texto y la ultima margin:0 auto; ayudan a centrar el bloque en la pagina esto para Firefox si lo desean centrar con IE a la etiqueta body deben asignarle la propiedad text-align:center; hasta aqui aun no hemos mucho, el resultado es el que ven en la imagen de arriba el primer ejemplo.
[code lang=”css”]
.outline_header_logo{
background:url(ubuntulogo.png) no-repeat;
width:202px;
height:55px;
display:block;
font-weight:bold;
color:#333333;
font-size:28px;
font-family:Arial, Verdana, Tahoma, Serif;
text-indent:-5000px;
margin:0 auto;
}
[/code]
Ahora con el siguiente CSS si se fijan no cambia mucho la única propiedad que se añadió es text-indent:-5000px; esta propiedad lo que hace que el texto en esta caso la palabra ubuntu contenido dentro del bloque sea movida 5000 pixeles hacia la izquierda sacándola de cuadro completamente, el resultado lo pueden ver en la imagen de arriba es el segundo ejemplo.
[code lang=”css”]
.header_logo{
background:url(ubuntulogo.png) no-repeat;
width:202px;
height:55px;
display:block;
font-weight:bold;
color:#333333;
font-size:28px;
font-family:Arial, Verdana, Tahoma, Serif;
text-indent:-5000px;
margin:0 auto;
outline:none;
}
[/code]
Y ahora el completamente y resultado final el siguiente CSS solo se le añade la propiedad outline:none; esto para evitar el mencionado borde punteado que aparece al hacer click sobre la imagen, el resultado lo pueden ver siempre en la imagen de arriba es el ultimo ejemplo, con esto ya tenemos nuestro logo insertado usando un Header 1 (H1) para el SEO y con el texto Ubuntu fuera de cuadro.

Ver ejemplo

comment ¿Que opinas?

Artículos recientes

Nuevo trailer de Cars 3 more_vert Video play_circle_outline

Nuevo trailer de Cars 3

close

play_circle_outline Nuevo trailer de Cars 3

Pixar recién lanzo el nuevo trailer de Cars 3 que se estrenara el próximo mes de Junio en todo el mundo. En este nuevo trailer de Cars 3 se continua dejando en el misterio el…

close

Infografía: 90 años de historia de Coca-Cola en México

Coca-Cola una multinacional con presencia en todo el mundo tiene una larga historia dependiendo del país donde se desenvuelva; es por eso que comparto con ustedes esta genial infografía que nos muestra como han sido…

close

5 Paquetes de iconos gratis para consultorios medicos

Les comparto una pequeña selección de iconos gratis perfectos para proyectos relacionados con consultorios médicos u hospitales, he revisado todos los enlaces para descargar estos iconos gratuitos y todos funcionan correctamente, así que podemos empezar…

close

Logobook, un GRAN directorio de diseños de logos

Logobook, es un gran directorios de diseños de logos de marcas alrededor del mundo, el directorio esta muy bien organizado y seguro se puede convertir en una fuente de inspiración para tu próximo diseño de…

close

play_circle_outline Nostálgica campaña de Nokia para celebrar el regreso del indestructible 3310

Nokia lleva un tiempo con varios desaciertos en la industria de la telefonía móvil; motivo por el cual ha decido regresar a sus raíces por las cuales tuvo éxito. Todos en algún momento conocimos su…

close

The Truth is Hard, la nueva campaña del NY Times contra Trump

El New York Times, el periódico impreso de mayor importancia en el mundo ha lanzado una campaña contra Trump y sus “hechos alternativos“; esta campaña denominada The Truth is Hard que se une a la…

notifications Recién publicamos
close