Este é um post disponível para assinantes MVPVideo: Sombras em Box - Curso CSS e Dreamweaver - Parte 4
Nesta aula vamos ver uma dessas propriedades que é a Box-shadow, onde podemos inserir sombra em elementos utilizando CSS
Você não gostou da qualidade deste conteúdo?
(opcional) Você gostaria de comentar o que não lhe agradou?
Tempo: 16:41
Resumo: O CSS3 incorporou diversas propriedades novas. Dentre essas propriedades, podemos citar com maior ênfase aquelas que facilitam o desenvolvimento e reduzem o tempo de carregamento das páginas. Nesta aula vamos ver uma dessas propriedades que é a Box-shadow, onde podemos inserir sombra em elementos utilizando CSS, ou seja, sem a necessidade de utilização de imagens, fato esse que deixa nosso código mais limpo e rápido. Vamos aprender as propriedades de deslocamento da sombra na horizontal e vertical, a propriedade blur, ou desfoque, e ainda como definir a cor da sombra de nosso elemento.
Metodologia de desenvolvimento do exemplo: CSS define a forma como os elementos são apresentados na tela. CSS não é necessariamente uma linguagem de programação, mas sim uma especificação criada pela W3C e, através desta especificação, conseguimos definir as propriedades visuais de diversos elementos, inclusive sendo esta uma boa prática de desenvolvimento. CSS3 estende essa especificação criando novas propriedades e trazendo maior facilidade de desenvolvimento para sites e sistemas, mas, estas novas propriedades, no momento, não são suportadas por todos os browsers do mercado.
Tecnologias utilizadas: CSS3 e Adobe Dreamweaver CS4
Exemplos construídos: Desenvolvimento de um exemplo utilizando Box shadow onde será criado uma DIV, a mesma será formatada e será inserido sombra utilizando somente CSS.
Palavras-chave: CSS3, sombra em CSS, sombra em elementos, sombra horizontal, sombra vertical, efeito blur, cor da sombra.
Bacharel em Ciência da Computação pela Universidade de Passo Fundo. Web Designer da empresa MSDevelop. Trabalha a aproximadamente 14 anos com tecnologia Web, em especial tecnologias Adobe (Flash, Dreameaver e Fireworks).

download


