⇐ Clique aqui para expandir o post. ⇒
Mostrando postagens com marcador Webdesign. Mostrar todas as postagens
Mostrando postagens com marcador Webdesign. Mostrar todas as postagens

domingo, agosto 04, 2024

📋 Parem de pedir números de endereço, RG e telefone fixo

Eu já fiz minha Carteira de Identidade Nacional, mas quando vou preencher os cadastros, ainda me pedem número de RG e CPF, então acabo preenchendo o mesmo número nos dois campos. Nos cadastros antigos, ainda estão meus RGs de Goiás ou do DF, o problema é quando preciso comprovar que eu sou eu e a nova identidade não mostra esses números antigos.

quinta-feira, maio 24, 2018

segunda-feira, outubro 02, 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, julho 03, 2014

terça-feira, junho 24, 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, fevereiro 12, 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, janeiro 07, 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, julho 23, 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, julho 20, 2012

quinta-feira, julho 12, 2012

sábado, maio 26, 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, maio 24, 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, março 01, 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, outubro 25, 2009

sexta-feira, outubro 23, 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, outubro 15, 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, outubro 05, 2009

domingo, fevereiro 08, 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, novembro 18, 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, maio 28, 2008