Por meio de códigos de CSS é possível configurar uma série de efeitos num texto. A estilização de fontes é uma forma para dar destaque a um elemento, como o nome do site que pode se transformar numa espécie de logotipo. É conveniente não abusar destes efeitos, porém, numa medida adequada, podem valorizar uma página. As codificações mostradas abaixo devem ser colocadas na área de inserção de CSS do site (alguns dos templates possuem zonas para isso ou há a possibilidade de usar plugin). No caso de elementos “internos” do site (cabeçalho, título de postagem, etc.), é necessário alterar o código da página para inserir o efeito (posso ensinar quem quiser fazer isso). Porém, no caso de um texto em uma página ou postagem, basta marcar o efeito, a partir das codificações <div class=”EFEITO“>elemento marcado</div>.
.sombra {
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
font: 4em Fjalla One
}
.trez {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
font: 4.5em Fjalla One;
}
.enjoy-css {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font: normal normal 900 70px/normal "Fjalla One", Helvetica, sans-serif;
color: rgb(32, 44, 45);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 0 1px 0 rgb(128,141,147) , -1px 0 0 rgb(205,210,213) , -1px 2px 0 rgb(128,141,147) , -2px 1px 0 rgb(205,210,213) , -2px 3px 0 rgb(128,141,147) , -3px 2px 0 rgb(205,210,213) , -3px 4px 0 rgb(128,141,147) , -4px 3px 0 rgb(205,210,213) , -4px 5px 0 rgb(128,141,147) , -5px 4px 0 rgb(205,210,213) , -5px 6px 0 rgb(128,141,147) , -6px 5px 0 rgb(205,210,213) , -6px 7px 0 rgb(128,141,147) , -7px 6px 0 rgb(205,210,213) , -7px 8px 0 rgb(128,141,147) , -8px 7px 0 rgb(205,210,213) ;
}
.inset {
text-shadow: 0px 2px 3px #666;
font: 6em Fjalla One;
background: #505050;
padding: 50px 50px;
}
.anaglyph {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font: normal 60px/normal "Fjalla One", Helvetica, sans-serif;
color: rgb(51, 51, 51);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
letter-spacing: 3px;
text-shadow: -3px 0 1px rgb(30,242,241) , 3px 0 1px rgb(246,5,10) ;
}
.textblur {
z-index: 5;
font: 5em Fjalla One;
color: transparent;
-webkit-text-stroke: 6px rgba(255,255,255,0.05);
text-shadow: rgba(245,245,255,0.35) 0 0px 0px,
rgba(0,0,30,0.1) 0px 0.04em 0.02em;
background: -webkit-linear-gradient(-90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.3) 50%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,.3) 100%,
),
-webkit-background-clip: textblur;
}
.rot {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 20px;
overflow: hidden;
border: none;
font: normal 52px/1 "Fjalla One", Helvetica, sans-serif;
color: rgba(255,0,0,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-transform: rotateX(-5.729577951308233deg) rotateY(9.167324722093172deg) rotateZ(-5.156620156177409deg) ;
transform: rotateX(-5.729577951308233deg) rotateY(9.167324722093172deg) rotateZ(-5.156620156177409deg) ;
}
.neon {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 80px;
margin-top: 30px;
border: none;
font: normal 48px/normal "Fjalla One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-decoration: normal;
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
white-space: pre;
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
background: #000000
}
.neon:hover {
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
margin-top: 30px;
background: #000000
}
.stroke {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
float: none;
z-index: auto;
width: auto;
height: auto;
position: static;
cursor: pointer;
opacity: 1;
margin: 0;
padding: 0;
overflow: visible;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
font: normal normal bold 80px/normal "Fjalla One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: 1px 1px 0 #2ecc71 , -1px -1px 0 #2ecc71 , 1px -1px 0 #2ecc71 , -1px 1px 0 #2ecc71 ;
-webkit-transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: none;
transform: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}
.stroke:hover {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
float: none;
z-index: auto;
width: auto;
height: auto;
position: static;
cursor: pointer;
opacity: 1;
margin: 0;
padding: 0;
overflow: visible;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
font: normal normal bold 80px/normal "Fjalla One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: 1px 1px 8px rgba(46,204,113,0.5) , -1px -1px 8px rgba(46,204,113,0.5) , 1px -1px 8px rgba(46,204,113,0.5) , -1px 1px 8px rgba(46,204,113,0.5) ;
-webkit-transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: none;
transform: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}
.novotres {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
border: none;
font: normal 72px/normal "Fjalla One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
.novotres:hover {
color: rgba(169,214,169,1);
text-shadow: 0 1px 0 rgba(255,255,255,1) , 0 2px 0 rgba(255,255,255,1) , 0 3px 0 rgba(255,255,255,1) , 0 4px 0 rgba(255,255,255,1) , 0 5px 0 rgba(255,255,255,1) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 -5px 10px rgba(0,0,0,0.247059) , 0 -7px 10px rgba(0,0,0,0.2) , 0 -15px 20px rgba(0,0,0,0.14902) ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
O site CMS Lab possui um texto bastante explicativo sobre o que é um CMS. Também possui postagens falando de características e novidades dos mais populares CMS: WordPress, Joomla, Drupal e Imagento. Dicas sobre o aprendizado específico de WordPress (lugares para aprender mais) são dadas neste site.
Não é obrigatório conhecer HTML – HyperText Markup Language (Linguagem de Marcação de Hipertexto) – para trabalhar com CMSs, no entanto em certos momentos pode ajudar ter alguma familiaridade com pelo menos o básico sobre o tema e as chamadas Cascading Style Sheets (ou simplesmente CSS), que são Folhas de Estilo para a formatação. Para quem se interessa pela história de desenvolvimento dessas linguagens e da web, vale a pena conhecer este site.