Mostrando postagens com marcador Webdesign. Mostrar todas as postagens
Mostrando postagens com marcador Webdesign. Mostrar todas as postagens

quinta-feira, 24 de maio de 2018

segunda-feira, 2 de outubro de 2017

🔡 26 sugestões de fontes sem serifa para seu blog

Atualizado dia 02/10/2017.

Acredito que as melhores fontes para o texto de qualquer site são aquelas sem serifa (sans-serif) e que não são monoespaçadas (monospace) porque são bem legíveis e tornam o texto bastante agradável.

quinta-feira, 3 de julho de 2014

terça-feira, 24 de junho de 2014

🍭 CSS | Barra de rolagem colorida no Google Chrome

Tutorial atualizado dia 14/05/2022.

Este post poderia ter sido publicado mais cedo, só que eu fiquei empolgada testando 1001 peruices com o código e criando exemplos. Adoro barra de rolagem colorida! #prontoconfessei

terça-feira, 12 de fevereiro de 2013

Backgrounds com textura giz

Tem imagem que dá vontade de ficar o resto da vida colorindo com todas as paletas possíveis. Essa textura de giz é uma delas. Para não dizer que foi tempo perdido, coloco os patterns aqui para você baixar.

segunda-feira, 7 de janeiro de 2013

Novo avatar e favicon

Madeira preta

Este post é só para avisar oficialmente que cansei de escolher a foto menos bizarra e ainda passar horas editando para usar em perfil de rede social. Agora eu sou um quadrado #99cc00.

segunda-feira, 23 de julho de 2012

CSS: sombras em caixas e imagens

Sombra

Exemplo de regra CSS para colocar sombra em uma caixa com a propriedade box-shadow:

.sombra {box-shadow:5px 10px 15px 6px #880088 inset;}

sexta-feira, 20 de julho de 2012

quinta-feira, 12 de julho de 2012

sábado, 26 de maio de 2012

Crie imagens para background on-line

Mesmo quem não desenha pode criar backgrounds patterns (imagens de fundo lado a lado) bonitos e inéditos. Selecionei quatro sites com os quais podemos gerar as mais variadas imagens. Eles são tão fáceis de usar que dispensam tutoriais. Aproveitei para criar alguns exemplos que você pode baixar gratuitamente.

quinta-feira, 24 de maio de 2012

🍨 Tabela Candy Colors em RGB

Sorvetes com candy colors

As candy colors (cores de doce) não são tão apagadas quanto os tons pastéis nem tão chamativas quanto as cores vibrantes. Têm esse nome porque lembram guloseimas como sorvete, chiclete, suspiro, maria-mole, jujuba, amendoim colorido e tantos outros.

segunda-feira, 1 de março de 2010

O novo editor de templates do Blogger: minhas considerações

Blogger

Na última semana a comunidade de usuários Blogger comemorou, com razão, o novo editor de templates do Draft Blogger, cujo link no menu Layout se chama Designer do Modelo.

Apesar de facilitar bastante para todos nós, sem dúvida os blogueiros leigos nas linguagens de formatação são os mais beneficiados. Coisas que antes eram bastante complicadas, como mudar a largura do template e/ou das colunas, agora podem ser feitas com apenas alguns cliques.

domingo, 25 de outubro de 2009

sexta-feira, 23 de outubro de 2009

Como criar tabelas

Muitas pessoas se enganam e acham que tableless é desenvolver sites sem usar tabela alguma. Traduzindo, tableless significa menos tabelas e não ausência de tabelas.

quinta-feira, 15 de outubro de 2009

Como colocar sombra no texto

Banner HTMHelen sombras

Conheço a propriedade text-shadow desde que me entendo por aprendiz de CSS, mas só agora o seu uso é viável por estar funcionando bem nos navegadores modernos que buscam ser fiéis aos padrões W3C.

Apesar de ainda não funcionar no Internet Explorer, os usuários dos navegadores Chrome, Firefox, Opera e Safari já se beneficiam desse recurso, que é cada vez mais utilizado em webdesign.

segunda-feira, 5 de outubro de 2009

domingo, 8 de fevereiro de 2009

👩‍💻 HTML | Elementos inline que mudam o texto

Atualizado dia 24 de maio de 2018.
Borboleta
Melhore seu blog com simplicidade…

Já escrevi aqui sobre a diferença entre block e inline. Neste post vou dar exemplos com as tags inline, que são muito úteis na edição de qualquer texto HTML, inclusive blogs:

Negrito

Código:

Com a tag b o texto fica <b>negrito</b>.

Ou ainda:

Com a tag strong o texto fica <strong>negrito</strong>.

Resultado:

Com a tag b o texto fica negrito.

Citação*

Código:

Com a tag q o texto fica <q>entre aspas</q>.

Resultado:

Com a tag q o texto fica entre aspas.

Itálico

Código:

Com a tag cite o texto fica <cite>itálico</cite>.
Com a tag em o texto fica <em>itálico</em>.
Com a tag i o texto fica <i>itálico</i>.
Com a tag var o texto fica <var>itálico</var>.
Com a tag dfn* o texto fica <dfn>itálico</dfn>.

Resultado:

Com a tag i o texto fica itálico.

* <dfn> não funciona no Chrome, nem no Safari.

Riscado

Código:

Com a tag del o texto fica <del>riscado</del>.
Com a tag s o texto fica <s>riscado</s>.

Resultado:

Com a tag s o texto fica riscado.

Sublinhado

Códigos:

Com a tag ins o texto fica <ins>sublinhado</ins>.
Com a tag u o texto fica <u>sublinhado</u>.

Resultado:

Com a tag u o texto fica sublinhado.

Monoespaçado

Com a tag code (código) o texto fica <code>monoespaçado</code>.

Com a tag code (código) o texto fica monoespaçado.



Com a tag kbd (keyboard - teclado) o texto fica <kbd>monoespaçado</kbd>.

Com a tag kbd (keyboard - teclado) o texto fica monoespaçado.



Com a tag samp (exemplo) o texto fica <samp>monoespaçado</samp>.

Com a tag samp (exemplo) o texto fica monoespaçado.

Tamanho do texto

Códigos:

Com a tag small o texto fica <small>menor</small> do que estava antes.
Com a tag big o texto fica <big>maior</big> do que estava antes.

Resultado:

Com a tag small o texto fica menor do que estava antes.

Com a tag big o texto fica maior do que estava antes.

Nível do texto

Código:

Com a tag sub o texto fica <sub>um nível abaixo</sub> do que estava antes.
Com a tag sup o texto fica <sup>um nível acima</sup> do que estava antes.

Resultado:

Com a tag sub o texto fica um nível abaixo do que estava antes.

Com a tag sup o texto fica um nível acima do que estava antes.

Sentido do texto

Código:

Com a tag bdo dir="ltr" o texto fica <bdo dir="ltr">da esquerda para a direita</bdo>.
Com a tag bdo dir="rtl" o texto fica <bdo dir="rtl">da direita para a esquerda</bdo>.

Resultado:

Com bdo dir="ltr" o texto fica da esquerda para a direita.

Com bdo dir="rtl" o texto fica da direita para a esquerda.

<bdo dir="rtl"> inverte o texto para nós, ocidentais, que escrevemos da esquerda para a direita, enquanto <bdo dir="ltr"> serve para inverter textos árabes e hebraicos, por exemplo, que são escritos da direita para a esquerda.

Fonte, cor e tamanho

Código:

A tag font <font color="#ff00ff" size="4" face="comic sans ms">muda cor, tamanho e fonte</font> sem precisar de CSS.

Resultado:

A tag font muda cor, tamanho e fonte sem precisar de CSS.


Apesar de modificarem o texto sem precisar de CSS, todas essas tags podem ser personalizadas na folha de estilos de seu blog ou site para que fiquem do seu jeito.

terça-feira, 18 de novembro de 2008

🖼️ CSS: aprendendo a usar bordas

Aprender a usar bordas em CSS é um passo imprescindível para deixar a aparência do blog do seu jeito e sem depender de templates prontos. Se forem bem utilizadas elas conseguem deixar o leiaute bonito, leve e sem necessitar de muitas imagens.

quarta-feira, 28 de maio de 2008

quinta-feira, 3 de maio de 2007

Blogando na aula do Mapa

Isso foi postado muito depois de ter sido escrito, mas o Blogger tem um recurso safadinho que permite colocar a data e a hora que eu quiser no post, então coloquei a data e a hora em que escrevi isso.

Queria ter mais tempo para estudar o que gosto, trabalhar no que gosto, conviver com quem eu gosto. Estou com a sensação estranha de que estou vendo a vida passar. É só a sensação porque na prática é diferente.

Estou com um péssimo pressentimento no meu trabalho, parece que não tenho função definida. Na minha carteira de trabalho sou Web Designer, mas na prática sou mais uma auxiliar-de-qualquer-coisa: digitação, clipagem, revisão de textos, pesquisas, webdesign… Estão me tratando como se eu fosse uma estagiária. Humilhante!

Estou fazendo uma disciplina específica super-ultra-mega-power chata para o concurso do Mapa. Só fiz inscrição nesse concurso porque não tinha grana para me inscrever no concurso da câmara federal (que tem algumas vagas para jornalistas) e já tinha ganho o cursinho de um primo que foi pro exterior.

A aula está tão interessante e divertida que trouxe várias revistas, um livro e mesmo assim não agüentei de tédio: peguei papel e lápis para blogar, mesmo longe da web.

O que quero é fazer um curso de web no Senai. Em junho termina meu cursinho e vou emendar com algum curso realmente interessante e com conhecimentos que eu possa utilizar a curto prazo. Também estou com vontade de fazer outra graduação, só que dessa vez tecnológica e na área de informática. O problema é que para tudo isso preciso de dinheiro e, como já disse, estou com um péssimo pressentimento no meu emprego maluco. Também há uma vontade reprimida de fazer pós-graduação em Marketing e/ou Assessoria, mas a mensalidade é maior que o meu salário, só vai rolar quando eu tiver um emprego decente ou passar em um concurso.

O que preciso muito mesmo também é de um computador próprio para estudar, de preferência um notebook. Nem falo em Internet ainda porque na casa da minha tia é complicado…

Pelo MSN meu pai deixa no ar a possibilidade de vir morar em Brasília com a Herica