Hola a todos. Primero que nada pido perdón si hay algún error de ortografía en el post
Acá tienen una demo:
Acá tienen una demo:
Bueno, primero necesitan la font (tipografía) Catull, la pueden bajar de la página oficial de Google:
Ahora vamos al HTML:
<!-- Copyright 2012 @hernnmaster1 -->
<div id="logo">
<a class="G">G</a><a class="o1">o</a><a class="o2">o</a><a class="g">g</a><a class="l">l</a><a class="e">e</a>
</div>
Ahora paso a explicar el código:
<div id="logo"> Hago el div logo que es donde va a estar el logo
<a class="G">G</a><a class="o1">o</a> etc Son las letras, cada una con una clase distinta, para darles un estilo distinto.
Ahora vamos al CSS:
@-moz-font-face{
font-family: Catull;
src: url(font/catull.ttf);
font-weight:400;
}
@-webkit-font-face{
font-family: Catull;
src: url(font/catull.ttf);
font-weight:400;
}
@-o-font-face{
font-family: Catull;
src: url(font/catull.ttf);
font-weight:400;
}
@-ms-font-face{
font-family: Catull;
src: url(font/catull.ttf);
font-weight:400;
}
@font-face{
font-family: Catull;
src: url(font/catull.ttf);
font-weight:400;
}
html body{
font-family: Catull,Sans-Serif;
background: #f1f1f1;
}
#logo{
margin:200px auto;
width:600px;
height:200px;
text-align:center;
font-size:100px;
text-shadow:0px 3px 3px rgba(0,0,0,0.25);
filter: dropshadow(color=rgba(0,0,0,0.25), offx=0, offy=3);
}
.G{
color:#0047F1;
}
.G::-moz-selection{
background-color:#0047F1;
color:#DD172C;
}
.G::-webkit-selection{
background-color:#0047F1;
color:#DD172C;
}
.G::-o-selection{
background-color:#0047F1;
color:#DD172C;
}
.G::-ms-selection{
background-color:#0047F1;
color:#DD172C;
}
.G::selection{
background-color:#0047F1;
color:#DD172C;
}
.o1{
color:#DD172C;
}
.o1::-moz-selection{
background-color:#DD172C;
color:#F9A600;
}
.o1::-webkit-selection{
background-color:#DD172C;
color:#F9A600;
}
.o1::-o-selection{
background-color:#DD172C;
color:#F9A600;
}
.o1::-ms-selection{
background-color:#DD172C;
color:#F9A600;
}
.o1::selection{
background-color:#DD172C;
color:#F9A600;
}
.o2{
color:#F9A600;
}
.o2::-moz-selection{
background-color:#F9A600;
color:#0047F1;
}
.o2::-o-selection{
background-color:#F9A600;
color:#0047F1;
}
.o2::-ms-selection{
background-color:#F9A600;
color:#0047F1;
}
.o2::-webkit-selection{
background-color:#F9A600;
color:#0047F1;
}
.o2::selection{
background-color:#F9A600;
color:#0047F1;
}
.g{
color:#0047F1;
}
.g::-moz-selection{
background-color:#0047F1;
color:#00930E;
}
.g::-o-selection{
background-color:#0047F1;
color:#00930E;
}
.g::-ms-selection{
background-color:#0047F1;
color:#00930E;
}
.g::-webkit-selection{
background-color:#0047F1;
color:#00930E;
}
.g::selection{
background-color:#0047F1;
color:#00930E;
}
.l{
color:#00930E;
}
.l::-moz-selection{
background-color:#00930E;
color:#E61B31;
}
.l::-o-selection{
background-color:#00930E;
color:#E61B31;
}
.l::-webkit-selection{
background-color:#00930E;
color:#E61B31;
}
.l::-ms-selection{
background-color:#00930E;
color:#E61B31;
}
.l::selection{
background-color:#00930E;
color:#E61B31;
}
.e{
color:#E61B31;
}
.e::-moz-selection{
background-color:#E61B31;
color:#0047F1;
}
.e::-webkit-selection{
background-color:#E61B31;
color:#0047F1;
}
.e::-o-selection{
background-color:#E61B31;
color:#0047F1;
}
.e::-ms-selection{
background-color:#E61B31;
color:#0047F1;
}
.e::selection{
background-color:#E61B31;
color:#0047F1;
}
Ahora voy a explicar el código:
@font-face{
font-family:Catull;
src: url(font/catull.ttf);
font-weight:400;
} (-moz-font-face, etc) es para importar Catull como webfont, osea, primero tienen que subirla, en mi caso esta subida la carpeta font, por eso dice src: url(font/catull.ttf);
html body{
font-family:Catull,Sans-Serif;
background: #f1f1f1;
}
Eso es para usar la fuente Catull y si no esta usa una Sans-Serif, y para que el cuerpo de la pagina tenga un fondo gris claro.
#logo{
margin:200px auto; Esto es para que el div del logo quede a 200px de la parte superior y en el centro
width:600px; 600px de ancho
height:200px; 200px de alto
text-align:center; texto centrado
font-size:100px; tamaño de letra 100px
text-shadow:0px 3px 3px rgba(0,0,0,0.25); Una sombrita CSS3
}
.G{
color:#0047F1;
}
(y así con todas las letras) es para ponerle el color a la letra
.G::selection{
background-color:#0047F1; color de fondo
color:#DD172C; color de letra
}
(::-moz-selection,-webkit-selection, etc y así con todas las letras) es para definir el estilo cuando se selecciona el texto, con esto conseguimos este efecto al selecionar:
Bueno, eso fue todo el post, cualquier duda comenten o mp